今回は
・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になりました。
1日空けたらsuccsessしたので失敗された場合は時間を空けるのが最良。
下処理が終わったら、固定ページに
/product
/collection
が作成されています。
こちらに、ショートコードの[wps_products]を記載すれば商品一覧が表示されます。
他のショートコードと併用して画像だけにすることも可能ですが
(https://docs.wpshop.io/#/shortcodes/wps_products?id=excludes)
デフォルトだと3カラムのCssGrid生成されたものの中に入れ込まれてしまうので、product_idを抽出して画像だけ抜き出します。
今回は独自のテンプレートに埋め込むのでショートコードをphp側に記入します。
<?php echo do_shortcode(‘[wps_products product_id=”◯◯”]’); ?>
product_idはShopifyの管理画面商品詳細URL「https://ドメイン.myshopify.com/admin/products/◯◯」部分に記載されています。
あとはcssでdisplay:none;とproduct_idをカスタムフィールドで簡易動的化してあげれば終了。