ブログ記事にショートコードで商品カードを出力するカスタマイズのチュートリアル

はじめに 「Shopify Shortcodes」というGithubで公開されているショートコード機能を実装できるカスタマイズ方法を試したところ、実装が誤っていたのか上手く動作しませんでした。 次にJavascriptで実装する方法を試してみましたが、「Product API」をAjaxで読み込んで商品カードを出力させることはできました。ただ、ビジュアルエディタのみで完結できる仕様にしたかったのに、コードエディタに切り替えて タグを貼り付けなきゃいけなかったり、コレクション出力用のAPIがなくLiquidと併用しなきゃいけなかったり、希望する仕様は実現できませんでした。 他にもアプリで実装することもできるようですが、サブスク料金が発生したりデザインがイマイチだったりします。 そんな経緯もあって、結局Liquidコードのみで実装する方法を開発してみました。希望する仕様は以下の通りです。

[products handle="product-a,product-b"]↓指定したプロダクトハンドルの商品カードを出力（カンマ区切りで複数指定可）

[collection handle="collection-a"]↓指定したコレクションハンドルから商品リストを出力

記事内にショートコードを複数設置したり、それぞれのショートコードを併用して設置しても問題なく出力されれば完成です。 デフォルトテーマ「Dawn（11.0.0）」ベースでの実装方法なので、他テーマへ実装する場合は商品カード部分やCSSなどを編集して実装してください。 スニペットファイルを作成 「新しいスニペットを追加する」より「shortcode.liquid」を新規作成し、以下のコードをコピペしてください。 {%- liquid echo 'component-card.css' | asset_url | stylesheet_tag

capture change_products assign shortcode_format = '[products handle="xxx"]' assign shortcode_split = shortcode_format | split: 'xxx' assign shortcode_first = shortcode_split.first | prepend: ' ' assign shortcode_last = shortcode_split.last | append: '

' assign replace_content = article_content | replace: shortcode_first, shortcode_split.first | replace: shortcode_last, shortcode_split.last assign content_split = replace_content | split: shortcode_split.first for contents in content_split assign content = contents | replace_first: shortcode_split.last, '||' | split: '||' assign handle_split = content.first | split: ',' if forloop.first echo content[0] else echo ' ' for handle in handle_split assign handle = handle | handleize assign product = all_products[handle] if product != blank echo ' ' render 'card-product', card_product: product, media_aspect_ratio: 'square', section_id: section.id echo ' ' endif endfor echo ' ' echo content[1] endif endfor endcapture

capture change_collection assign shortcode_format = '[collection handle="xxx"]' assign shortcode_split = shortcode_format | split: 'xxx' assign shortcode_first = shortcode_split.first | prepend: ' ' assign shortcode_last = shortcode_split.last | append: '

' assign replace_content = change_products | replace: shortcode_first, shortcode_split.first | replace: shortcode_last, shortcode_split.last assign content_split = replace_content | split: shortcode_split.first for contents in content_split assign content = contents | replace_first: shortcode_split.last, '||' | split: '||' assign handle = content.first | handleize assign collection = collections[handle] if forloop.first echo content[0] else if collection != blank echo ' ' for product in collection.products limit: 5 if product != blank echo ' ' render 'card-product', card_product: product, media_aspect_ratio: 'square', section_id: section.id echo ' ' endif endfor echo ' ' endif echo content[1] endif endfor endcapture

echo change_collection -%} 複雑なので順に説明します。 最初にDawnの商品カード用CSSファイルを読み込んでいます。他テーマの場合は、こちらを編集してください。 change_products まず「shortcode_format」にてショートコードのフォーマットを「[products handle="xxx"]」として定義しています。 次の「shortcode_split」では、定義したショートコードを「xxx」で分割して「[products handle="」と「"]」に分けています。 「shortcode_first」〜「replace_content」の3つは、ビジュアルエディタでショートコード記述した場合は タグで囲われるため、商品カードに変換後、空の タグが出力されてしまうのを回避するための定義です。「replace_content」で記事内のショートコードから タグを削除しています。 「content_split」では、「replace_content」で整形された記事全文を「[products handle="」で分割し以下のように変換しています。

その「content_split」をForループで出力していきます。 「content」では分割された内容から、複数のショートコードを併用する為に最初の「"]」だけを「||」に変換し分割します。

さらに分割したことでショートコードのハンドルの値だけが出力されますので「handle_split」として定義し、ハンドルが複数指定されてる場合はカンマ区切りなので「,」で分割しています。 上図の通り、forloop.first（最初のループ）のみ「content[0]」を出力させます。 複数商品に対応させるため、「handle_split」をForループで出力します。 「handle」を「handleize」処理で半角スペースなどを取り除き整形した後、「product」として商品情報を「all_products」タグで定義します。 「if product != blank」で存在確認後、「render」で商品カードを出力します。この部分はテーマ構造に合わせて編集してください。 また、同じDawnテーマでもバージョンによって機能が異なるため、必要に応じて編集するのをお勧めします。 最後に「content[1]」を出力します。 change_collection 基本的には「change_products」と同じ仕組みですが、異なる点だけご説明します。 ショートコードのフォーマットを「[collection handle="xxx"]」としています。 「replace_content」部分で、商品カードに変換済みの「change_products」を読み込んでいます。 コレクションにアクセスするため、「collection」を「collections[handle]」で定義しています。 後は一般的なコレクションの出力方法で、所属する商品カードを出力させています。Forループの「limit」で上限を出力上限を5としています。こちらも同様にテーマ構造に合わせて編集してください。 最後に「echo change_collection」で商品リストに変換済みの記事全文を出力させます。 このカスタマイズの基本的な構造さえ理解できれば、いくつでもショートコードを増やすことが可能です。 セクションファイルを編集 ブログ記事を出力するファイルを開きます。 Dawnの場合は「sections/main-article.liquid」が該当しますが、他テーマの場合は記事全文を出力させる「{{ article.content }}」が書かれているファイルを開いてください。 そして{{ article.content }}をコメントアウトして「shortcode.liquid」を読み込み保存します。 {% comment %} {{ article.content }} {% endcomment %} {% render 'shortcode', article_content: article.content, section: section %} テーマ編集は以上です。 記事を編集 記事内にショートコードを貼り付けます。 商品リスト [products handle="tpdt-008,tpdt-009"] コレクション [collection handle="free"] 本来はこの記事内で出力させたいところですが、ショートコードがたくさん書かれており、記事本文が崩れてしまいますのでご容赦下さい。

カートにアイテムが追加されました

ブログ記事にショートコードで商品カードを出力するカスタマイズのチュートリアル

ブログ記事内にショートコードを入力するだけで、商品カードを出力できるカスタマイズ方法

2024年4月

2024年5月