【予約販売（アプリ）】テンプレート別独自タグ設置例：PLAIN

他のテンプレートの設置例とは違い、新しく追加された独自タグを使用した予約販売アプリ設置例となります。

▼【商品詳細html】～販売期間や割引価格～　変更前

<!-- 値段 -->
<div class="prices">
  <{if $members_login_flg && $product.discount_flg}>
    <p><span class="price--regular"><{$product.regular_price}></span>
  <{/if}>
  <span class="price"><{$product.sales}></span></p>
  <!-- 何パーセントOFFか表示させたい場合はこのコメントアウトを消す
  <{if $members_login_flg == true && $product.discount_flg == true}>
    <p class="price--rate"><{$product.discount_rate}>OFF!!</p>
  <{/if}>
  -->
</div>
<!-- // 値段 -->

▼【商品詳細html】～販売期間や割引価格～　変更後

<!-- 予約販売期間 -->
<{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: 1px solid #000;
      border-radius: 3px;
      l.ine-height: 1;
      padding: 5px;
      font-weight: bold;
      margin: 20px 0 10px;
      font-size: 13px;
      text-align: center;
    }
    .p-pre-order__date {
      margin-bottom: 5px;
      font-size: 13px;
      text-align: left;
    }
  </style>
<{/if}>
<!-- // 予約販売期間 -->

<!-- 値段 -->
<div class="prices">
  <p>
    <{if $members_login_flg && $product.discount_flg}>
      <span class="price--regular">
        <{$product.regular_price}>
      </span>
    <{/if}>
    <span class="price">
      <{* 販売価格・会員価格・予約販売価格 *}>
      <{$price_with_pre_order}>
    </span>
  </p>
  <!-- 何パーセントOFFか表示させたい場合はこのコメントアウトを消す
  <{if $discount_flg_with_pre_order}>
    <p class="price--rate"><{$discount_rate_with_pre_order}>OFF!!</p>
  <{/if}>
  -->
</div>
<!-- // 値段 -->

▼【商品詳細html】～カートボタン～　変更前

<div class="buy__inner disable_cartin">
  <button class="button button--orange button--large" type="submit">カートに入れる</button>
</div>

▼【商品詳細html】～カートボタン～　変更後

<div class="buy__inner disable_cartin">
  <{if $pre_order_product.is_on_sale}>
    <button class="button button--orange button--large" type="submit">
      <{$pre_order_product.custom_cart_in_button_label}>
    </button>
  <{elseif $pre_order_product.is_before_sale}>
    <button class="button button--disabled button--large" type="button" disabled="disabled">
      <{$pre_order_product.custom_cart_in_button_label}>
    </button>
  <{elseif $pre_order_product.is_sold_out}>
    <button class="button button--disabled button--large" type="button" disabled="disabled">
      <{$pre_order_product.custom_cart_in_button_label}>
    </button>
  <{else}>
    <button class="button button--orange button--large" type="submit">
      カートに入れる
    </button>
  <{/if}>
</div>

▼【商品詳細html】～組合せ購入～　変更前

<!-- 価格・型番・定価・在庫 -->
<div class="section__inner">
  <h2>その他の詳細情報</h2>
  <table class="table table--bordered">
    <{if $members_login_flg && $product.discount_flg}>
      <tr>
        <th>販売価格</th>
        <td><{$product.regular_price}></td>
      </tr>
    <{/if}>
    <tr>
      <th>
        <{if $members_login_flg && $product.discount_flg}>会員価格<{else}>販売価格<{/if}>
      </th>
      <td>
        <!-- 販売価格 -->
        <{$product.sales}>
        <!-- 割引率 -->
        <{if $members_login_flg && $product.discount_flg}>
          <span class="discount"><{$product.discount_rate}>OFF!!</span>
        <{/if}>
      </td>
    </tr>
    <{if $product.model != ""}>
      <tr>
        <th>型番</th>
        <td><{$product.model}></td>
      </tr>
    <{/if}>
    <{if $product.price_disp && $product.price != $product.sales}>
      <tr>
        <th>定価</th>
        <td><{$product.price}></td>
      </tr>
    <{/if}>
    <{if $product.stock_disp}>
      <tr>
        <th>在庫状況</th>
        <td><{$product.stock_str}></td>
      </tr>
    <{/if}>
  </table>
<!-- // 価格・型番・定価・在庫 -->

▼【商品詳細html】～組合せ購入～　変更後

<!-- 価格・型番・定価・在庫 -->
<div class="section__inner">
  <h2>その他の詳細情報</h2>
  <table class="table table--bordered">
    <{if $discount_flg_with_pre_order}>
      <tr>
        <th>通常販売価格</th>
        <td><{$product.regular_price}></td>
      </tr>
    <{/if}>
    <tr>
      <th>
        販売価格
      </th>
      <td>
        <!-- 販売価格・会員価格・予約販売価格 -->
        <{$price_with_pre_order}>
        <!-- 割引率 -->
        <{if $discount_flg_with_pre_order}>
          <span class="discount"><{$discount_rate_with_pre_order}>OFF!!</span>
        <{/if}>
      </td>
    </tr>
    <{if $product.model != ""}>
      <tr>
        <th>型番</th>
        <td><{$product.model}></td>
      </tr>
    <{/if}>
    <{if $product.price_disp && $product.price != $product.sales}>
      <tr>
        <th>定価</th>
        <td><{$product.price}></td>
      </tr>
    <{/if}>
    <{if $product.stock_disp}>
      <tr>
        <th>在庫状況</th>
        <td><{$product.stock_str}></td>
      </tr>
    <{/if}>
  </table>
<!-- // 価格・型番・定価・在庫 -->

▼【商品一覧html・商品検索結果html】変更前

<p class="box__price">
  <{$productlist[num].price}>
  <{if $members_login_flg && $productlist[num].discount_flg}>
    <span class="box__price box__price--rate"><{$productlist[num].discount_rate}>OFF!!</span>
  <{/if}>
</p>

▼【商品一覧html・商品検索結果html】変更後

<p class="box__price">
  <{* 販売価格・会員価格・予約販売価格 *}>
  <{$productlist[num].price_with_pre_order}>
  <{if $productlist[num].discount_flg_with_pre_order}>
    <{* 割引率 *}>
    <span class="box__price box__price--rate"><{$productlist[num].discount_rate_with_pre_order}>OFF!!</span>
  <{/if}>
</p>

▼【トップページhtml】～おすすめ～　変更前

<{if !$recommend[num].soldout_flg}>
  <p class="box__price">
    <{$recommend[num].price}>
    <{if $members_login_flg && $recommend[num].discount_flg}>
      <span class="box__price--rate"><{$recommend[num].discount_rate}>OFF!!</span>
    <{/if}>
  </p>

▼【トップページhtml】～おすすめ～　変更後

<{if !$recommend[num].soldout_flg}>
  <p class="box__price">
    <{* 販売価格・会員価格・予約販売価格 *}>
    <{$recommend[num].price_with_pre_order}>
    <{if $recommend[num].discount_flg_with_pre_order}>
      <{* 割引率 *}>
      <span class="box__price--rate"><{$recommend[num].discount_rate_with_pre_order}>OFF!!</span>
    <{/if}>
  </p>

▼【トップページhtml】～新着商品～　変更前

<{if !$new_item[num].soldout_flg}>
  <p class="box__price">
    <{$new_item[num].price}>
    <{if $members_login_flg && $new_item[num].discount_flg}>
      <span class="box__price--rate"><{$new_item[num].discount_rate}>OFF!!</span>
    <{/if}>
  </p>

▼【トップページhtml】～新着商品～　変更後

<{if !$new_item[num].soldout_flg}>
  <p class="box__price">
    <{* 販売価格・会員価格・予約販売価格 *}>
    <{$new_item[num].price_with_pre_order}>
    <{if $new_item[num].discount_flg_with_pre_order}>
      <{* 割引率 *}>
      <span class="box__price--rate"><{$new_item[num].discount_rate_with_pre_order}>OFF!!</span>
    <{/if}>
  </p>

▼【トップページhtml】～売れ筋商品～　変更前

<{if !$seller[num].soldout_flg}>
  <p class="box__price">
    <{$seller[num].price}>
    <{if $members_login_flg && $seller[num].discount_flg}>
      <span class="box__price box__price--rate"><{$seller[num].discount_rate}>OFF!!</span>
    <{/if}>
  </p>

▼【トップページhtml】～売れ筋商品～　変更後

<{if !$seller[num].soldout_flg}>
  <p class="box__price">
    <{* 販売価格・会員価格・予約販売価格 *}>
    <{$seller[num].price_with_pre_order}>
    <{if $seller[num].discount_flg_with_pre_order}>
      <{* 割引率 *}>
      <span class="box__price box__price--rate"><{$seller[num].discount_rate_with_pre_order}>OFF!!</span>
    <{/if}>
  </p>

▼【共通html】～最近チェックした商品～　変更前

<{if !$seller[num].soldout_flg}>
<p class="slide__price"><{$seller[num].price}></p>

▼【共通html】～最近チェックした商品～　変更後

<{if !$seller[num].soldout_flg}>
  <p class="slide__price">
    <{* 販売価格・会員価格・予約販売価格 *}>
    <{$seller[num].price_with_pre_order}>
  </p>

▼【共通html】～売れ筋商品～　変更前

<{if !$history[num].soldout_flg}>
  <p class="slide__price"><{$history[num].price}></p>

▼【共通html】～売れ筋商品～　変更後

<{if !$history[num].soldout_flg}>
  <p class="slide__price">
    <{* 販売価格・会員価格・予約販売価格 *}>
    <{$history[num].price_with_pre_order}>
  </p>

コメント

ドメイン・レンタルサーバー（ホスティング）

EC支援

その他

金融支援

関連記事

ドメイン・レンタルサーバー（ホスティング）

EC支援

その他

金融支援