Shopifyの商品説明文にWPの記事を取得して表示させる:メモ

コンテンツ入力欄にJSがそのまま書けるとは思わず、試したらできてちょっと驚いたのでメモとして。

実現したいこと

• WordPress側で商品説明文を作成
• Shopifyのストアの商品説明文の場所にWPの商品説明文を表示させる

サンプルコード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $.getJSON( "https://example.com/wp-json/wp/v2/posts/記事ID", function(results) {
    var body = results.content.rendered;
    $('.wp-body').append(body);
  });
</script>
<div class="wp-body"></div>

仕組みは単純で、WP REST APIを使ってWPのコンテンツを出力しているだけす。

Shopifyの商品説明文の入力欄に上記のコードをそのまま商品説明文に入れれば表示されます。テスト用に作っただけなので修正の余地はありますが動作確認はできるかと。

結び

Shopifyの商品説明文の入力内容としてJSがサニタイズされずに使えるとは思わなかったのですが、実際には動きました。

今回初めて試したので今までどうだったのかは不明ですが、今までも使えているなら仕様として今後も使える可能性が高そうではあります。

本格運用するならWPのスラッグとShopifyのハンドルを揃えて、出力自体も既存のタグを利用する形に作れば、商品入力欄には何も書かずとも内容が出力されるようにできると思います。

ただ、この方法は表示速度などパフォーマンス的に悪影響がありそうですし、ShopifyのDBに商品説明文が登録されないためストア内の他の場所で商品説明が表示できなくなりますし(商品一覧で概要を表示するなどの場合)、あまりお勧めできるものではないと考えています。

REST WPIで取得した記事をShopifyのAPI(Product API?)で商品説明文に登録するようなアプリを作れば解決できるかも、とは思いましたが。