はじめに
shopify業務に携わることになったため、勉強の日々を過ごしているモモナです。
2週間前にshopifyの勉強を始めたばかりなのでわからない部分も多々ありますが、初心者なりに学んだことをまとめていこうと思っています。
訂正箇所や認識違いなどあれば、ご指摘お願いします。
今回は、Laravelを利用したshopifyアプリ開発でのページ作成を紹介します。
動作環境
Mac OS Catalina
PHP 7.4.27
Laravel Framework 8.76.2
環境構築
shopifyの登録方法などは、他に詳しくまとめている方もいるので割愛させていただきます。
公式サイトでも流れは確認できるかと思います。
今回、Laravelでの開発のため下記サイトを参考にさせていただきました。
Laravelで情報をまとめている方がほとんど見つからない中、とても助かりました。
ありがとうございます。
これから環境構築していく場合は、サイトを参考に**アプリ作成**まで進めていただくと手順がわかりやすいです。
アプリインストール後の場合
アプリの権限変更やアクセストークンの確認が必要なため、ストア側のアプリは一度削除することを推奨します。
ストア側で削除しても、パートナー側で作成したアプリは残っているのでご安心ください。
公式リファレンス
Pageに関しては、こちらのCreates a pageの部分が公式内容になります。
今回はインストールしたPHP Shopify SDKを利用した記述になるため、公式リファレンスのコードは今後の参考にしていただければと思います。
Shopify SDK記述
Shopify SDKの記述方法について載っているファイルを開きます。
今回使用するコード全て含めて記述しています。
//For third party app
$config = array(
'ShopUrl' => 'yourshop.myshopify.com',
'AccessToken' => '***ACCESS-TOKEN-FOR-THIRD-PARTY-APP***',
);
//Create the shopify client object
$shopify = new ShopifySDK($config);
//Create a new product
$productInfo = array(
"title" => "Burton Custom Freestlye 151",
"body_html" => "<strong>Good snowboard!<\/strong>",
"vendor" => "Burton",
"product_type" => "Snowboard",
);
$products = $shopify->Product->post($productInfo);
products = 商品のため、このままだと商品作成することになってしまいます。
productsをpagesに変更することで、ページ作成することができます。
ページ作成用に直し、Controllerに記述したのが下になります。
public function page()
{
$config = array(
'ShopUrl' => 'yourshop.myshopify.com',
'AccessToken' => '***ACCESS-TOKEN-FOR-THIRD-PARTY-APP***',
);
$shopify = new ShopifySDK($config);
$pageInfo = array(
"title" => "new-page",
"body_html" => "<strong>新しいページ</strong>",
);
$pages = $shopify->Page->post($pageInfo);
return view('/page');
}
ルーティング設定
Route::get('/page', 'App\Http\Controllers\AuthorizeController@page');
blade作成
画面が変わっているかわかればいいので、簡単に作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>page-create 完了</h2>
</body>
</html>
権限変更
次に、アプリ権限の変更をします。
AuthorizeControllerのscopesの部分を確認しましょう。
$scopes = 'read_products,write_products,read_script_tags,write_script_tags';
readは読み取り、writeは書き込みとなります。
現状、products(商品)とscript_tagsだけ権限がついています。
ここにpageの権限をつけるため、read_contentとwrite_contentを追加します。
scopesの権限については公式リファレンスを参考にします。
scopesで権限付与をしないと必要な情報を引き出すことができないため、shopify内のデータを利用したい場合は記述必須です。
権限がないと作成時にエラーが出るので、その時はscopesを確認してくださいね。
アクセストークン確認
アプリインストールする際、アクセストークンを確認できるように記述をします。
ShopifySDK::config([
'ShopUrl' => 'yourshop.myshopify.com',
'ApiKey' => '***YOUR-PRIVATE-API-KEY***',
'SharedSecret' => '***YOUR-SHARED-SECRET***',
]);
$accessToken = AuthHelper::getAccessToken();
//以下追加
dd($accessToken);
dd($accessToken);でアクセストークンを確認できるようにしています。
アプリインストール
準備ができたので、アプリインストールをします。
参考サイトと同じように**[ngrokで生成したURL]/authorize**でアプリインストール画面へアクセスします。
「アプリをインストール」をクリックすると、先ほど設定したdd($accessToken);によってアクセストークンが表示されます(shpcaから始まるもの)
アクセストークンはAuthorizeControllerに記述します。
$config = array(
'ShopUrl' => 'yourshop.myshopify.com',
'AccessToken' => '***ACCESS-TOKEN-FOR-THIRD-PARTY-APP***', //この中に記述
);
アクセストークンを確認後
dd($accessToken);の記述はコメントアウトしてください
動作確認
ストア画面へ戻る必要があるので、[ngrokで生成したURL]/authorizeで再度ページへアクセスします。
アプリインストールはされているため、自動的にストア画面からアプリが開かれます。
もしストア画面を開いた状態であれば、アプリ管理から進んでください。
ページ作成できるか確認のため、[ngrokで生成したURL]/pageでアクセスします。
page.blade.phpの内容が表示されているのを確認し、左側にあるオンラインストア＞ページを開きます。
new-pageというものが入っていれば、アプリを利用したページ作成は完了です。
最後に
公式リファレンスは英語で、日本語検索しても欲しい情報はなかなか出てこないという現状。
今回のページ作成方法によって、アプリ開発の考え方や繋ぎ方は理解できると思います。
行き詰まっている方の助けになれますように。