メインコンテンツへスキップ

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

カラーミーショップ運営
  • 更新

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

DISCOVER

▼【商品詳細html】～販売期間や割引価格～　変更前
<!-- 価格・定価 -->
<div class="p-product-price">
  <{if $members_login_flg == true && $product.discount_flg == true}>
  <div class="p-product-price__sell">
    <span><{$product.sales}></span>
    <span><{$product.discount_rate}>OFF</span>
  </div>
  <{else}>
  <div class="p-product-price__sell">
    <{$product.sales}>
  </div>
  <{/if}>
  <{if $members_login_flg == true && $product.discount_flg == true}>
  <div class="p-product-price__normal">
    通常価格：<{$product.regular_price}>
  </div>
  <{/if}>
  <{if $product.price_disp}>
  <div class="p-product-price__list-price">
    定価：<{$product.price}>
  </div>
  <{/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>
<{/if}>
<style>
.p-pre-order__icon {
  display: inline-block;
  border: 1px solid #000;
  border-radius: 3px;
  line-height: 1;
  padding: 5px;
  font-weight: bold;
  margin: 20px 0 10px;
  font-size: 13px;
}
</style>
<!-- 価格・定価 -->
<div class="p-product-price">
  <{if $members_login_flg == true && $product.discount_flg == true}>
    <{if $pre_order_product && $pre_order_product.sales_price_discount_rate && $pre_order_product.is_cheaper_than_members_price}>
      <div class="p-product-price__sell">
        <span><{$pre_order_product.discount_sales_price}></span>
        <span><{$pre_order_product.sales_price_discount_rate}>OFF</span>
      </div>
    <{else}>
      <div class="p-product-price__sell">
        <span><{$product.sales}></span>
        <span><{$product.discount_rate}>OFF</span>
      </div>
    <{/if}>
  <{elseif $pre_order_product && $pre_order_product.sales_price_discount_rate}>
  <div class="p-product-price__sell">
    <span><{$pre_order_product.discount_sales_price}></span>
    <span><{$pre_order_product.sales_price_discount_rate}>OFF</span>
  </div>
  <{else}>
  <div class="p-product-price__sell">
    <{$product.sales}>
  </div>
  <{/if}>
  <{if ($members_login_flg == true && $product.discount_flg == true) || ($pre_order_product && $pre_order_product.sales_price_discount_rate)}>
  <div class="p-product-price__normal">
    通常価格：<{$product.regular_price}>
  </div>
  <{/if}>
  <{if $product.price_disp}>
  <div class="p-product-price__list-price">
    定価：<{$product.price}>
  </div>
  <{/if}>
</div>
<!-- // 価格・定価 -->
▼【商品詳細html】～カートボタン～　変更前
<{if $is_enable_async_cart_in_pc}>
  <button type="submit" class="c-btn-cart">
    <i class="c-icon-cart"></i>カートに入れる
  </button>
<{else}>
  <div class="disable_cartin">
    <button class="c-btn-cart" type="submit">
      <i class="c-icon-cart"></i>カートに入れる
    </button>
  </div>
<{/if}>
▼【商品詳細html】～カートボタン～　変更後
<{if $is_enable_async_cart_in_pc}>
  <{if $pre_order_product.is_before_sale || $pre_order_product.is_sold_out}>
    <button type="submit" class="btn btn-block btn-addcart cart_in_async" disabled="disabled">
      <i class="c-icon-cart"></i><{$pre_order_product.custom_cart_in_button_label}>
    </button>
  <{elseif $pre_order_product.is_on_sale}>
    <button type="submit" class="btn btn-block btn-addcart cart_in_async">
      <i class="c-icon-cart"></i><{$pre_order_product.custom_cart_in_button_label}>
    </button>
  <{else}>
    <button type="submit" class="btn btn-block btn-addcart cart_in_async">
      <i class="icon-lg-w icon-cart"></i><span>カートに入れる</span>
    </button>
  <{/if}>
<{else}>
  <div class="disable_cartin">
    <{if $pre_order_product.is_before_sale || $pre_order_product.is_sold_out}>
      <button class="c-btn-cart is-soldout" type="button" disabled="disabled">
        <i class="c-icon-cart"></i><{$pre_order_product.custom_cart_in_button_label}>
      </button>
    <{elseif $pre_order_product.is_on_sale}>
      <button class="c-btn-cart" type="submit">
        <i class="c-icon-cart"></i><{$pre_order_product.custom_cart_in_button_label}>
      </button>
    <{else}>
      <button class="c-btn-cart" type="submit">
        <i class="c-icon-cart"></i>カートに入れる
      </button>
    <{/if}>
  </div>
<{/if}>
▼【商品詳細html】～組合せ購入～　変更前
<{if !$together_product[num].soldout_flg}>
<div class="p-product-recommend-list__price<{if $members_login_flg && $together_product[num].discount_flg}> is-discount<{/if}>">
<{* 販売価格（ログイン時は会員価格） *}>
<{$together_product[num].price}>
<{* 割引率（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $together_product[num].discount_flg}><{$together_product[num].discount_rate}>OFF<{/if}>
</div>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $together_product[num].discount_flg}>
<div class="p-product-recommend-list__price is-strikethrough">
<{$together_product[num].regular_price}>
</div>
<{/if}>
<{else}>
<{* 売り切れの表記 *}>
<div class="p-product-recommend-list__price is-soldout">
SOLD OUT
</div>
<{/if}>
▼【商品詳細html】～組合せ購入～　変更後
<{if !$together_product[num].soldout_flg}>
<{if $members_login_flg && $together_product[num].discount_flg}>
<{if $together_product[num].pre_order_product && $together_product[num].pre_order_product.is_cheaper_than_members_price}>
<div class="p-product-recommend-list__price is-discount">
<{* 予約販売価格 *}>
<{$together_product[num].pre_order_product.discount_sales_price}>
<{* 割引率 *}>
<{$together_product[num].pre_order_product.sales_price_discount_rate}>OFF
</div>
<{else}>
<div class="p-product-recommend-list__price is-discount">
<{* 会員価格 *}>
<{$together_product[num].price}>
<{* 割引率 *}>
<{$together_product[num].discount_rate}>OFF
</div>
<{/if}>
<{elseif $together_product[num].pre_order_product && $together_product[num].pre_order_product.sales_price_discount_rate}>
<div class="p-product-recommend-list__price is-discount">
<{* 予約販売価格 *}>
<{$together_product[num].pre_order_product.discount_sales_price}>
<{* 割引率 *}>
<{$together_product[num].pre_order_product.sales_price_discount_rate}>OFF
</div>
<{else}>
<div class="p-product-recommend-list__price">
<{* 販売価格 *}>
<{$together_product[num].price}>
</div>
<{/if}>
<{* 通常販売価格（通常販売価格と会員価格・予約販売価格が異なる場合のみ） *}>
<{if $members_login_flg && $together_product[num].discount_flg || ($together_product[num].pre_order_product && $together_product[num].pre_order_product.sales_price_discount_rate)}>
<div class="p-product-recommend-list__price is-strikethrough">
<{$together_product[num].regular_price}>
</div>
<{/if}>
<{else}>
<{* 売り切れの表記 *}>
<div class="p-product-recommend-list__price is-soldout">
SOLD OUT
</div>
<{/if}>
▼【商品一覧html・商品検索結果html】変更前
<{if !$productlist[num].soldout_flg}>
<div class="c-item-list__price<{if $members_login_flg && $productlist[num].discount_flg}> is-discount<{/if}>">
  <{* 販売価格（ログイン時は会員価格） *}>
  <{$productlist[num].price}>
  <{* 割引率（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
  <{if $members_login_flg && $productlist[num].discount_flg}><{$productlist[num].discount_rate}>OFF<{/if}>
</div>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $productlist[num].discount_flg}>
<div class="c-item-list__price is-strikethrough">
  <{$productlist[num].regular_price}>
</div>
<{/if}>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-item-list__price is-soldout">
  SOLD OUT
</div>
<{/if}>
▼【商品一覧html・商品検索結果html】変更後
<{if !$productlist[num].soldout_flg}>
  <{if $members_login_flg && $productlist[num].discount_flg}>
    <{if $productlist[num].pre_order_product && $productlist[num].pre_order_product.is_cheaper_than_members_price}>
      <div class="c-item-list__price is-discount">
        <{* 予約販売価格 *}>
        <{$productlist[num].pre_order_product.discount_sales_price}>
        <{* 割引率 *}>
        <{$productlist[num].pre_order_product.sales_price_discount_rate}>OFF
      </div>
    <{else}>
      <div class="c-item-list__price is-discount">
        <{* 会員価格 *}>
        <{$productlist[num].price}>
        <{* 割引率 *}>
        <{$productlist[num].discount_rate}>OFF
      </div>
    <{/if}>
  <{elseif $productlist[num].pre_order_product && $productlist[num].pre_order_product.sales_price_discount_rate}>
    <div class="c-item-list__price is-discount">
      <{* 予約販売価格 *}>
      <{$productlist[num].pre_order_product.discount_sales_price}>
      <{* 割引率 *}>
      <{$productlist[num].pre_order_product.sales_price_discount_rate}>OFF
    </div>
  <{else}>
    <div class="c-item-list__price">
      <{* 販売価格 *}>
      <{$productlist[num].price}>
    </div>
  <{/if}>
  <{* 通常販売価格（通常販売価格と会員価格・予約販売価格が異なる場合のみ） *}>
  <{if $members_login_flg && $productlist[num].discount_flg || ($productlist[num].pre_order_product && $productlist[num].pre_order_product.sales_price_discount_rate)}>
    <div class="c-item-list__price is-strikethrough">
      <{$productlist[num].regular_price}>
    </div>
  <{/if}>
<{else}>
  <{* 売り切れの表記 *}>
  <div class="c-item-list__price is-soldout">
    SOLD OUT
  </div>
<{/if}>
▼【トップページhtml】～おすすめ～　変更前
<{if !$recommend[num].soldout_flg}>
<div class="c-item-list__price<{if $members_login_flg && $recommend[num].discount_flg}> is-discount<{/if}>">
  <{* 販売価格（ログイン時は会員価格） *}>
  <{$recommend[num].price}>
  <{* 割引率（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
  <{if $members_login_flg && $recommend[num].discount_flg}><{$recommend[num].discount_rate}>OFF<{/if}>
</div>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $recommend[num].discount_flg}>
<div class="c-item-list__price is-strikethrough">
  <{$recommend[num].regular_price}>
</div>
<{/if}>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-item-list__price is-soldout">
  SOLD OUT
</div>
<{/if}>
▼【トップページhtml】～おすすめ～　変更後
<{if !$recommend[num].soldout_flg}>
  <{if $members_login_flg && $recommend[num].discount_flg}>
    <{if $recommend[num].pre_order_product && $recommend[num].pre_order_product.is_cheaper_than_members_price}>
      <div class="c-item-list__price is-discount">
        <{* 予約販売価格 *}>
        <{$recommend[num].pre_order_product.discount_sales_price}>
        <{* 割引率 *}>
        <{$recommend[num].pre_order_product.sales_price_discount_rate}>OFF
      </div>
    <{else}>
      <div class="c-item-list__price is-discount">
        <{* 会員価格 *}>
        <{$recommend[num].price}>
        <{* 割引率 *}>
        <{$recommend[num].discount_rate}>OFF
      </div>
    <{/if}>
  <{elseif $recommend[num].pre_order_product && $recommend[num].pre_order_product.sales_price_discount_rate}>
    <div class="c-item-list__price is-discount">
      <{* 予約販売価格 *}>
      <{$recommend[num].pre_order_product.discount_sales_price}>
      <{* 割引率 *}>
      <{$recommend[num].pre_order_product.sales_price_discount_rate}>OFF
    </div>
  <{else}>
    <div class="c-item-list__price">
      <{* 販売価格 *}>
      <{$recommend[num].price}>
    </div>
  <{/if}>
  <{* 通常販売価格（通常販売価格と会員価格・予約販売価格が異なる場合のみ） *}>
  <{if $members_login_flg && $recommend[num].discount_flg || ($recommend[num].pre_order_product && $recommend[num].pre_order_product.sales_price_discount_rate)}>
    <div class="c-item-list__price is-strikethrough">
      <{$recommend[num].regular_price}>
    </div>
  <{/if}>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-item-list__price is-soldout">
  SOLD OUT
</div>
<{/if}>
▼【トップページhtml】～新着～　変更前
<{if !$new_item[num].soldout_flg}>
<div class="c-item-list__price<{if $members_login_flg && $new_item[num].discount_flg}> is-discount<{/if}>">
  <{* 販売価格（ログイン時は会員価格） *}>
  <{$new_item[num].price}>
  <{* 割引率（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
  <{if $members_login_flg && $new_item[num].discount_flg}><{$new_item[num].discount_rate}>OFF<{/if}>
</div>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $new_item[num].discount_flg}>
<div class="c-item-list__price is-strikethrough">
  <{$new_item[num].regular_price}>
</div>
<{/if}>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-item-list__price is-soldout">
  SOLD OUT
</div>
<{/if}>
▼【トップページhtml】～新着～　変更後
<{if !$new_item[num].soldout_flg}>
  <{if $members_login_flg && $new_item[num].discount_flg}>
    <{if $new_item[num].pre_order_product && $new_item[num].pre_order_product.is_cheaper_than_members_price}>
      <div class="c-item-list__price is-discount">
        <{* 予約販売価格 *}>
        <{$new_item[num].pre_order_product.discount_sales_price}>
        <{* 割引率 *}>
        <{$new_item[num].pre_order_product.sales_price_discount_rate}>OFF
      </div>
    <{else}>
      <div class="c-item-list__price is-discount">
        <{* 会員価格 *}>
        <{$new_item[num].price}>
        <{* 割引率 *}>
        <{$new_item[num].discount_rate}>OFF
      </div>
    <{/if}>
  <{elseif $new_item[num].pre_order_product && $new_item[num].pre_order_product.sales_price_discount_rate}>
    <div class="c-item-list__price is-discount">
      <{* 予約販売価格 *}>
      <{$new_item[num].pre_order_product.discount_sales_price}>
      <{* 割引率 *}>
      <{$new_item[num].pre_order_product.sales_price_discount_rate}>OFF
    </div>
  <{else}>
    <div class="c-item-list__price">
      <{* 販売価格 *}>
      <{$new_item[num].price}>
    </div>
  <{/if}>
  <{* 通常販売価格（通常販売価格と会員価格・予約販売価格が異なる場合のみ） *}>
  <{if $members_login_flg && $new_item[num].discount_flg || ($new_item[num].pre_order_product && $new_item[num].pre_order_product.sales_price_discount_rate)}>
    <div class="c-item-list__price is-strikethrough">
      <{$new_item[num].regular_price}>
    </div>
  <{/if}>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-item-list__price is-soldout">
  SOLD OUT
</div>
<{/if}>
▼【トップページhtml】～ランキング～　変更前
<{if !$seller[num].soldout_flg}>
<div class="p-ranking-list__price<{if $members_login_flg && $seller[num].discount_flg}> is-discount<{/if}>">
  <{* 販売価格（ログイン時は会員価格） *}>
  <{$seller[num].price}>
  <{* 割引率（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
  <{if $members_login_flg && $seller[num].discount_flg}><{$seller[num].discount_rate}>OFF<{/if}>
</div>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $seller[num].discount_flg}>
<div class="p-ranking-list__price">
  <{$seller[num].regular_price}>
</div>
<{/if}>
<{else}>
<{* 売り切れの表記 *}>
<div class="p-ranking-list__price is-soldout">
  SOLD OUT
</div>
<{/if}>
▼【トップページhtml】～ランキング～　変更後
<{if !$seller[num].soldout_flg}>
  <{if $members_login_flg && $seller[num].discount_flg}>
    <{if $seller[num].pre_order_product && $seller[num].pre_order_product.is_cheaper_than_members_price}>
      <div class="p-ranking-list__price is-discount">
        <{* 予約販売価格 *}>
        <{$seller[num].pre_order_product.discount_sales_price}>
        <{* 割引率 *}>
        <{$seller[num].pre_order_product.sales_price_discount_rate}>OFF
      </div>
    <{else}>
      <div class="p-ranking-list__price is-discount">
        <{* 会員価格 *}>
        <{$seller[num].price}>
        <{* 割引率 *}>
        <{$seller[num].discount_rate}>OFF
      </div>
    <{/if}>
  <{elseif $seller[num].pre_order_product && $seller[num].pre_order_product.sales_price_discount_rate}>
    <div class="p-ranking-list__price is-discount">
      <{* 予約販売価格 *}>
      <{$seller[num].pre_order_product.discount_sales_price}>
      <{* 割引率 *}>
      <{$seller[num].pre_order_product.sales_price_discount_rate}>OFF
    </div>
  <{else}>
    <div class="p-ranking-list__price">
      <{* 販売価格 *}>
      <{$seller[num].price}>
    </div>
  <{/if}>
  <{* 通常販売価格（通常販売価格と会員価格・予約販売価格が異なる場合のみ） *}>
  <{if $members_login_flg && $seller[num].discount_flg || ($seller[num].pre_order_product && $seller[num].pre_order_product.sales_price_discount_rate)}>
    <div class="p-ranking-list__price">
      <{$seller[num].regular_price}>
    </div>
  <{/if}>
<{else}>
<{* 売り切れの表記 *}>
<div class="p-ranking-list__price is-soldout">
  SOLD OUT
</div>
<{/if}>
▼【共通html】～最近チェックした商品～　変更前
<{if !$history[num].soldout_flg}>
<div class="c-favorite-list__price<{if $members_login_flg && $history[num].discount_flg}> is-discount<{/if}>">
  <{* 販売価格（ログイン時は会員価格） *}>
  <{$history[num].price}>
  <{* 割引率（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
  <{if $members_login_flg && $history[num].discount_flg}><{$history[num].discount_rate}>OFF<{/if}>
</div>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $history[num].discount_flg}>
<div class="c-favorite-list__price is-strikethrough">
  <{$history[num].regular_price}>
</div>
<{/if}>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-favorite-list__price is-soldout">
  SOLD OUT
</div>
<{/if}>
▼【共通html】～最近チェックした商品～　変更後
<{if !$history[num].soldout_flg}>
  <{if $members_login_flg && $history[num].discount_flg}>
    <{if $history[num].pre_order_product && $history[num].pre_order_product.is_cheaper_than_members_price}>
      <div class="c-favorite-list__price is-discount">
        <{* 予約販売価格 *}>
        <{$history[num].pre_order_product.discount_sales_price}>
        <{* 割引率 *}>
        <{$history[num].pre_order_product.sales_price_discount_rate}>OFF
      </div>
    <{else}>
      <div class="c-favorite-list__price is-discount">
        <{* 会員価格 *}>
        <{$history[num].price}>
        <{* 割引率 *}>
        <{$history[num].discount_rate}>OFF
      </div>
    <{/if}>
  <{elseif $history[num].pre_order_product && $history[num].pre_order_product.sales_price_discount_rate}>
    <div class="c-favorite-list__price is-discount">
      <{* 予約販売価格 *}>
      <{$history[num].pre_order_product.discount_sales_price}>
      <{* 割引率 *}>
      <{$history[num].pre_order_product.sales_price_discount_rate}>OFF
    </div>
  <{else}>
    <div class="c-favorite-list__price">
      <{* 販売価格 *}>
      <{$history[num].price}>
    </div>
  <{/if}>
  <{* 通常販売価格（通常販売価格と会員価格・予約販売価格が異なる場合のみ） *}>
  <{if $members_login_flg && $history[num].discount_flg || ($history[num].pre_order_product && $history[num].pre_order_product.sales_price_discount_rate)}>
    <div class="c-favorite-list__price is-strikethrough">
      <{$history[num].regular_price}>
    </div>
  <{/if}>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-favorite-list__price is-soldout">
  SOLD OUT
</div>
<{/if}>

関連記事

コメント

0件のコメント

記事コメントは受け付けていません。