セット一覧画面

セット販売管理 (opens in a new tab)（オプション機能）で作成した セット一覧画面（プランページ）です。

ショップのパス

ドメイン/shop/sets (デフォルトのプランの場合)
もしくは
ドメイン/shop/sets/プランID

テーマ管理ファイルパス

ec_force/shop/sets/index.html
ec_force/shop/sets/index.html+smartphone.liquid

JSタグ

{{ 'shop/sets' | javascript_include_tag }}

必要なコンポーネント

※任意とあるもの以外はシステム上必要なコンポーネントとなりますので、必ず使用するようにしてください。

{{ 'shop/sets' | javascript_include_tag }}
 
<!-- セット一覧画面 -->
{% for set in sets %}
 
  <!-- セット名 -->
  {{ set.name }}
 
  <!-- セット通常価格 -->
  {{ set.list_price }}円
 
  <!-- セット販売価格 -->
  {{ set.sales_price }}円
 
  <!-- (PCの場合)セット詳細 -->
  {{ set.description }}
  <!-- (SPの場合)セット詳細 -->
  {{ set.description_mobile }}
 
  <!-- 購入タグ -->
  <a href='/shop/sets/{{ set.id }}'>購入する</a>
 
{% endfor %}

画面イメージ

※こちらは、上記で紹介しているコンポーネントのコードにデフォルトデザインをCSSであてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。