はじめに

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の記述方法について載っているファイルを開きます。
今回使用するコード全て含めて記述しています。

sample-app/vendor/phpclassic/php-shopify/lib/shopifySDK.php

//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に記述したのが下になります。

app/Http/Controllers/AuthorizeController.php

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');

    }

ルーティング設定

routes/web.php

Route::get('/page', 'App\Http\Controllers\AuthorizeController@page');

blade作成

画面が変わっているかわかればいいので、簡単に作成します。

resources/views/page.blade.php

<!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の部分を確認しましょう。

app/Http/Controllers/AuthorizeController.php

$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を確認してくださいね。

アクセストークン確認

アプリインストールする際、アクセストークンを確認できるように記述をします。

app/Http/Controllers/CallbackController.php

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に記述します。

app/Http/Controllers/AuthorizeController.php

$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というものが入っていれば、アプリを利用したページ作成は完了です。

最後に

公式リファレンスは英語で、日本語検索しても欲しい情報はなかなか出てこないという現状。
今回のページ作成方法によって、アプリ開発の考え方や繋ぎ方は理解できると思います。
行き詰まっている方の助けになれますように。