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になりました。

1日空けたら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; ?>

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

ちなみに、固定ページに

/product

/collection

が作成されています。

こちらに、ショートコードの[wps_products]を記載すれば商品一覧が表示されます。

関連記事

  • term一覧の作成
  • カスタム投稿にBASIC認証
  • 固定ページのInfinite Scroll JSでうまくいかない時
  • サイトを公開しました。
  • Infinite Scroll JS 1ページ目or最後のページでは出力しない条件分岐
  • php工房のメールで自動返信にrecapchaのレスポンスが返ってくる時の対処法
  • よく読まれているもの

  • サイトを公開しました。
  • WordPressでShopifyと商品連携し、商品画像だけを抜き出す
  • Infinite Scroll JS でiPhoneで画像が表示されない時の対処法
  • Infinite Scroll JS 1ページ目or最後のページでは出力しない条件分岐
  • カテゴリ横断 archive(pageの場合)
  • WP Shopify 全ショートカットオプション
  • カテゴリ

  • NEWS
  • 気になること
  • Shopify
  • Javascript
  • Infinite Scroll JS
  • wordpress
  • php
  • ACF