定期販売プランのデータ属性生成
商品バリアントと定期販売プランの ID を HTML data 属性として動的に生成するスニペット。ループで複数プランの ID を data-sellingId-1、data-sellingId-2 のように番号付けして出力する。
コード
9 行 / liquidit should format as expected
<div class="bundle-product"
data-variantId="{{ variant_id }}"
{% for i in (1..3) %}
{% assign plan_id = i | minus: 1 %}
data-sellingId-{{i}}="{{ product.selling_plan_groups[0].selling_plans[plan_id].id }}"
{% endfor %}
></div>
出典・ライセンス
- Repository:
- https://github.com/Shopify/theme-tools
- License:
- MIT
このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。
関連項目
カスタム要素の親コンポーネント
Web Components の親要素(`<parent-element>`)でラップし、子スニペットを描画するコンポーネント。カスタム要素に依存した構造を実装する際のテンプレート。
javascript タグ内の JS コード整形
Liquid の `{% javascript %}` タグ内に記述した JavaScript コードを Prettier で自動整形する。純粋な JS であれば完全整形、Liquid 変数を含む場合はインデント調整のみで対応する。
JavaScriptタグ内のコード整形テスト
Liquid の {% javascript %} タグ内に埋め込まれた JavaScript コードを Prettier で整形するテストケース。純粋な JS、Liquid 混在、タブ設定、シングルクォート対応など複数のシナリオをカバーしている。
クイズ結果用の商品データとフィルタ条件を JSON 出力
選択したコレクションの全商品を JSON 形式で抽出し、クイズの回答ごとに設定されたフィルタ条件（価格・タグ・タイプ・ベンダー・オプション）と紐づけることで、JavaScript 側でリアルタイムに商品をマッチングできるようにする。
Vue コンポーネントのデモ
Vue コンポーネント、スロット、プロップ、Vuex ストア、グローバルミックス、カスタムディレクティブを一堂に展示するセクション。Shopify Theme Lab フレームワークの主要機能をインタラクティブに試せる。
サードパーティ製アプリの遅延読み込み最適化
Shopify に統合されたサードパーティ製アプリスクリプトの読み込み方式を管理画面から制御し、ページ表示速度を改善するセクション。スクロール、ユーザーインタラクション、または即座読み込みのいずれかに切り替えられる。