予約販売の設定をショップページに表示する独自タグのうち、主に使用するタグについて紹介します。

販売価格

商品の販売価格で設定する「通常の販売価格」と商品をカートに入れた時に、カート画面で表示される「実際の販売価格」の2種類があります。

販売価格の仕様は「予約販売に対応した独自タグの仕様」を参照してください。

割引フラグ

• 割引率の表示を制御するために使用します。
• 通常の販売価格 > 実際の販売価格 の時に trueとなります。
• ログイン中で、販売価格より会員価格の方が価格が低い場合、もしくは予約販売割引が設定されている場合はTRUE、それ以外はFALSEとなります。

割引率

• 実際の販売価格 / 通常の販売価格 = 割引率となります。
• 割引フラグが true の場合のみ、◯◯%で出力します。

カートに入れるボタンのテキスト

販売期間ごとに設定したボタンのテキストを表示します。

予約販売に対応した独自タグの仕様

販売価格

商品をカートに入れた時に、カート画面で表示される価格を表示する独自タグです。

• 予約販売 非対応
  • 一覧系 $◯◯[num].price
  • 商品詳細 $product.sales
• 予約販売 対応
  • 一覧系 $◯◯[num].price_with_pre_order
  • 商品詳細 $product.price_with_pre_order

予約販売に対応した販売価格の仕様

カート画面で表示される価格は、

• 通常の販売価格
• 会員価格
• 予約販売割引が設定された価格

のいずれかになります。以下の優先度で値が決まります。

割引フラグ

TRUE / FALSE のいずれかを返す独自タグです。

• 予約販売 非対応
  • 一覧系 $◯◯[num].discount_flg
  • 商品詳細 $product.discount_flg
• 予約販売 対応
  • 一覧系 $◯◯[num].discount_flg_with_pre_order
  • 商品詳細 $discount_flg_with_pre_order

予約販売に対応した割引フラグの仕様

• 「通常の販売価格」と「実際の販売価格」を比較して、 通常の販売価格 > 実際の販売価格 であれば TRUE を返します。
• 「実際の販売価格」は、 上記の表にある優先度で決まります。

割引率

割引率を表示する独自タグです。

• 予約販売 非対応
  • 一覧系 $◯◯[num].discount_rate
  • 商品詳細 $product.discount_rate
• 予約販売 対応
  • 一覧系 $◯◯[num].discount_rate_with_pre_order
  • 商品詳細 $discount_rate_with_pre_order

予約販売に対応した割引率の仕様

• 実際の販売価格 / 通常の販売価格 で割引率を算出します。
• 割引フラグが TRUE の場合のみ、割引率を出力します。

テンプレートの該当箇所に追加する

利用中のテンプレートのHTML編集で、下記のように記述することで予約販売の情報を表示させることが可能です。

テンプレート別独自タグ設置例

以下に記載されてるテンプレート以外は、下記の「挿入例（テンプレートICE）」を参考の上、カスタマイズを行なってください。
テンプレートによってはデザインが崩れる可能性があります。利用中のテンプレートに応じてCSSを設定してください。

• Penta
• Mighty
• Triple
• Block
• DISCOVER（有料版）
• DISCOVER
• MONO
• MODE
• ICE
• Panorama
• カラーミーキット（2カラム）
• Organic
• ワンプレート ホワイト
• PLAIN

挿入例（テンプレート：ICE）

テンプレートによってはデザインが崩れる可能性があります。利用中のテンプレートに応じてCSSを設定してください。

商品一覧html・商品検索結果html

変更前

<{if $productlist[num].soldout_flg == false}>
  <{if $members_login_flg == true && $productlist[num].discount_flg == true}>
    <span class="product-list__regular-price product-list__text">
      <{$productlist[num].regular_price}>
    </span>
  <{/if}>
  <span class="product-list__price product-list__text">
    <{$productlist[num].price}>
  </span>
  <{if $members_login_flg == true && $productlist[num].discount_flg == true}>
    <span class="product-list__discount-rate product-list__text">
      <{$productlist[num].discount_rate}>OFF!!
    </span>
  <{/if}>
<{else}>
  <span class="product-list__soldout product-list__text">
    SOLD OUT
  </span>
<{/if}>

変更後

<{if $productlist[num].soldout_flg == false}>
  <{if $productlist[num].discount_flg_with_pre_order}>
    <span class="product-list__regular-price product-list__text">
      <{* 販売価格 *}>
      <{$productlist[num].regular_price}>
    </span>
  <{/if}>
   <span class="product-list__price product-list__text">
    <{* 会員価格・予約販売価格 *}>
    <{$productlist[num].price_with_pre_order}>
  </span>
  <{if $productlist[num].discount_flg_with_pre_order}>
    <span class="product-list__discount-rate product-list__text">
      <{* 割引率 *}>
      <{$productlist[num].discount_rate_with_pre_order}>OFF!!
    </span>
  <{/if}>
<{else}>
  <span class="product-list__soldout product-list__text">
    SOLD OUT
  </span>
<{/if}>

商品詳細html ～販売期間や割引価格～

変更前

<p class="product__price">
  <{* 販売価格 *}>
  <{if $members_login_flg && $product.discount_flg}>
    <spanclass="txt--sm">会員価格&nbsp;</span>
  <{/if}>
  <{$product.sales}>
</p>
<{if $product.price_disp && $product.price != $product.sales}>
  <p>
    定価&nbsp;<{$product.price}>
  </p>
<{/if}>
<{if $members_login_flg && $product.discount_flg}>
  <p class="product__regular-price">
    <{$product.regular_price}>
    <{* 割引率 *}>
    <{if $members_login_flg && $product.discount_flg}>
      <spanclass="product__discount-rate"><{$product.discount_rate}>OFF</span>
    <{/if}>
  </p>
<{/if}>

変更後

色付きのコードは、任意の箇所に挿入してください。

<{if $pre_order_product}>
  <div class="p-pre-order__icon">
    予約販売
  </div>
  <div>
    <div class="p-pre-order__date">
      販売期間: <{$pre_order_product.starts_at}> &#12316; <{$pre_order_product.ends_at}>
    </div>
    <div class="p-pre-order__date">
      発送予定日: <{$pre_order_product.scheduled_to_ship_on}>
    </div>
  </div>
  <style>
    .p-pre-order__icon {
      width: 5em;
      border: 1pxsolid#000;
      border-radius: 3px;
      line-height: 1;
      padding: 5px;
      font-weight: bold;
      margin: 20px010px;
      font-size: 13px;
      text-align: center;
    }
    .p-pre-order__date {
      text-align: left;
    }
  </style>
<{/if}>

<p class="product__price">
  <{* 販売価格 *}>
  <{if $members_login_flg && $product.discount_flg}>
    <spanclass="txt--sm">会員価格&nbsp;</span>
  <{/if}>
  <{$price_with_pre_order}>
</p>
<{if $product.price_disp && $product.price != $product.sales}>
  <p>
    定価&nbsp;<{$product.price}>
  </p>
<{/if}>
<{if $discount_flg_with_pre_order}>
  <p class="product__regular-price">
    <{$product.regular_price}>
    <{* 割引率 *}>
    <span class="product__discount-rate"><{$discount_rate_with_pre_order}>OFF</span>
  </p>
<{/if}>

商品詳細html ～カートボタン～

変更前

<{if $is_enable_async_cart_in_pc}>
  <li class="product__order__btn">
    <button type="submit" class="btn--addcart btn btn-primary btn-block cart_in_async">
      <i class="icon-w icon-cart"></i>カートに入れる
    </button>
  </li>
<{else}>
  <li class="product__order__btn disable_cartin">
    <button type="submit" class="btn--addcart btn btn-primary btn-block">
      <i class="icon-w icon-cart"></i>カートに入れる
    </button>
  </li>
<{/if}>

変更後

<{if $is_enable_async_cart_in_pc}>
  <li class="product__order__btn">
    <{if $pre_order_product.is_on_sale}>
      <button type="submit" class="btn--addcart btn btn-primary btn-block cart_in_async">
        <i class="icon-w icon-cart"></i><{$pre_order_product.custom_cart_in_button_label}>
      </button>
    <{elseif $pre_order_product.is_before_sale}>
      <button class="btn--addcart btn btn-primary btn-block cart_in_async" disabled="disabled">
        <{$pre_order_product.custom_cart_in_button_label}>
      </button>
    <{elseif $pre_order_product.is_sold_out}>
      <button class="btn--soldout btn btn-primary btn-block cart_in_async" disabled="disabled">
        <{$pre_order_product.custom_cart_in_button_label}>
      </button>
    <{else}>
      <button type="submit" class="btn--addcart btn btn-primary btn-block cart_in_async">
        <i class="icon-w icon-cart"></i>カートに入れる
      </button>
    <{/if}>
  </li>
<{else}>
  <li class="product__order__btn disable_cartin">
    <{if $pre_order_product.is_on_sale}>
      <button type="submit" class="btn--addcart btn btn-primary btn-block">
        <i class="icon-w icon-cart"></i><{$pre_order_product.custom_cart_in_button_label}>
      </button>
    <{elseif $pre_order_product.is_before_sale}>
      <button class="btn--addcart btn btn-primary btn-block" disabled="disabled">
        <{$pre_order_product.custom_cart_in_button_label}>
      </button>
    <{elseif $pre_order_product.is_sold_out}>
      <button class="btn--soldout btn btn-block" disabled="disabled">
        <{$pre_order_product.custom_cart_in_button_label}>
      </button>
    <{else}>
      <button type="submit" class="btn--addcart btn btn-primary btn-block">
        <i class="icon-w icon-cart"></i>カートに入れる
      </button>
    <{/if}>
  </li>
<{/if}>

動作確認

カスタマイズ後、商品をカートに入れた時の販売価格と一致しているか、ご確認ください。

予約販売の独自タグ一覧

予約販売アプリでは、以下の独自タグを使用し、データを出力しています。