WordPressでShopifyと商品連携し、商品画像だけを抜き出す

2021/01/11

muuuk-co

今回は

・WordPress独自テーマのカルーセルの中に「Shopify商品画像だけ」を埋め込みたい

というケース。

こんな感じですね。

クライアント様より要望があった為、ShopifyとWordPressの商品連携について。

よくShopifyの「共有ボタン」でやればOK〜！みたいな記事を見かけるが、

余計なボタン類や思うような挙動が得られなかった為、WordPress側で商品連携を行い表示するに到りました。

完全な動的では無いですがボタン設置よりもユーザーストレスは格段に少ない方法です。

※Shopifyでショップを作成している前提です。（トライアルでもOK）

作業内容

簡潔にお話すると

①Shopify側でAPIキー生成

②WordPressに「WP Shopify」のプラグインにAPIキーを入れる

③WP Shopifyにあるショートコード、cssをいじる（任意で動的に）

だけです。

①Shopify側でAPIキー生成

アプリ管理→プライベートアプリを管理

新しいプライベートアプリを作成

必要情報を記入

・アプリ名

・メール

・商品管理を読み取り/書き込みに変更

・ストアフロントAPI権限は全てチェックでもどちらでもOK

保存したらWordPressで「WP Shopify」をインストールし、「Conected」部分に

Shopifyで生成されたAPIキー関連を埋めていきます。

一番下のドメインは〇〇.comまで入れます。

以上で連携完了。

※どうやらShopを作成してすぐは反映時間がかかるせいか、何度かfelseになりました。

１日空けたらsuccsessしたので失敗された場合は時間を空けるのが最良。

下処理が終わったら、

product_idを抽出して画像だけ抜き出します。

(デフォルトだと3カラムのCssGrid生成されたものの中に入れ込まれてしまうので)

今回は独自のテンプレートに埋め込むのでショートコードをphp側に記入します。

<?php echo do_shortcode('[wps_products product_id="◯◯"]'); ?>

product_idはShopifyの管理画面商品詳細URL「https://ドメイン.myshopify.com/admin/products/◯◯」部分に記載されています。

あとはcssでdisplay:none;やらproduct_idをカスタムフィールドで簡易動的化してあげれば終了。

以下カスタムフィールド（ACF Pro）コピペ用

<?php if(have_rows('shopify_url','option')): ?>
<?php while(have_rows('shopify_url','option')): the_row(); ?>
    <div class="swiper-slide">
                <?php
                $tag = get_sub_field('shopify_url_inner');
                echo do_shortcode('[wps_products product_id="' .$tag. '" link_to="shopify" title_size="1.3rem"]');?>
    </div>
<?php endwhile; ?>
<?php endif; ?>

他のショートコードと併用して画像だけにすることも可能