🏗️ テーマ基盤中級

条件付きラッパー要素の切り替え

3D モデル対応の有無に応じて、ラッパー要素を `product-media` または `div` に切り替えるスニペット。Liquid の `assign` と条件分岐を組み合わせて、動的にタグ名を変更する。

用途

商品ページで 3D モデル表示に対応するときに、メディアコンテナのタグ名をコンテンツに応じて変えたいケース。`product-media` カスタム要素での機能追加と通常の `div` の共存を実装できる。

設置場所

商品メディアセクションやスニペット内の、メディアコンテナ部分に組み込む。`has_3d` 変数が事前に定義されていることを前提に、`{% render 'media-wrapper', has_3d: has_3d %}` のように呼び出す。

注意点

`<{{ wrapper }}>` の構文は Liquid パーサーが完全にサポートしていない環境があるため、ブラウザの開発者ツールでタグ名が意図どおり描画されているか確認する。`has_3d` が未定義の場合は `else` ブロックが実行されるため、デフォルト値の指定が必要ならコンポーネント呼び出し側で初期化する。`loading="lazy"` 属性は `product-media` カスタム要素では無視される可能性があるため、3D モデル用の読み込み制御は JavaScript で別途実装するとよい。

タグ:conditionalassigndynamic-tagvariablehtml-output

コード

13 行 / liquid

{% liquid
  if has_3d
    assign wrapper = 'product-media'
  else
    assign wrapper = 'div'
  endif
%}
<div>
<{{ wrapper }} loading="lazy">
Content that goes in the middle
</{{ wrapper }}>
</div>

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/html-liquid-drop-name/index.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

条件付きラッパー要素の切り替え

コード

出典・ライセンス

関連項目

セクションスキーマのカスタムブロック定義

セクション呼び出しのフォーマット

レイアウトテンプレートの指定

Liquid フォーマッター互換のセクション表記

基本的なHTMLレイアウト

layout タグのフォーマット