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

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

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

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

Triple

▼【商品詳細html】～販売期間や割引価格～　変更前
<!-- 価格・定価 -->
<div class="p-product-price">
  <{if $members_login_flg == true && $product.discount_flg == true}>
  <div class="p-product-price__sell">
    <{$product.sales}> <span class="p-product-price__off"><{$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 u-strikethrough">
    通常価格：<{$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">
        <{$pre_order_product.discount_sales_price}> <span class="p-product-price__off"><{$pre_order_product.sales_price_discount_rate}>OFF</span>
      </div>
    <{else}>
      <div class="p-product-price__sell">
        <{$product.sales}> <span class="p-product-price__off"><{$product.discount_rate}>OFF</span>
      </div>
    <{/if}>
  <{elseif $pre_order_product && $pre_order_product.sales_price_discount_rate}>
  <div class="p-product-price__sell">
    <{$pre_order_product.discount_sales_price}> <span class="p-product-price__off"><{$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 u-strikethrough">
    通常価格：<{$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>ADD TO CART
</button>
<{else}>
<div class="disable_cartin">
  <button class="c-btn-cart" type="submit">
    <i class="c-icon-cart"></i>ADD TO CART
  </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="button" class="c-btn-cart is-soldout" 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="c-btn-cart cart_in_async">
      <i class="c-icon-cart"></i><{$pre_order_product.custom_cart_in_button_label}>
    </button>
  <{else}>
    <button type="submit" class="c-btn-cart cart_in_async">
      <i class="c-icon-cart"></i>ADD TO CART
    </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>ADD TO CART
      </button>
    <{/if}>
  </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}>
</div>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $productlist[num].discount_flg}>
<div class="c-item-list__price is-default u-strikethrough">
  <{$productlist[num].regular_price}>
</div>
<{/if}>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-item-list__price is-soldout">
  SOLD OUT
</div>
<{/if}>
▼【商品詳細html】～組合せ購入～　変更前
<{if $members_login_flg && $together_product[num].discount_flg}>
<div class="c-item-list__icon is-off">
<{$together_product[num].discount_rate}>OFF
</div>
<{/if}>
<{if $together_product[num].soldout_flg}>
<div class="c-item-list__icon is-soldout">
SOLDOUT
</div>
<{/if}>
</div>
<div class="p-product-recommend-list__txt">
<div class="p-product-recommend-list__ttl">
<a href="<{$together_product[num].link_url}>">
<{$together_product[num].name}>
</a>
</div>
<{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}><span class="u-red"><{$together_product[num].discount_rate}>OFF<{/if}></span>
</div>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $together_product[num].discount_flg}>
<div class="p-product-recommend-list__price is-default u-strikethrough">
<{$together_product[num].regular_price}>
</div>
<{/if}>
<{else}>
<{* 売り切れの表記 *}>
<div class="p-product-recommend-list__price is-soldout">
SOLD OUT
</div>
<{/if}>
▼【商品詳細html】～組合せ購入～　変更後
<{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}>
<span class="c-item-list__icon is-off"><{$together_product[num].pre_order_product.sales_price_discount_rate}>OFF</span>
<{else}>
<span class="c-item-list__icon is-off"><{$together_product[num].discount_rate}>OFF</span>
<{/if}>
<{elseif $together_product[num].pre_order_product && $together_product[num].pre_order_product.sales_price_discount_rate}>
<span class="c-item-list__icon is-off"><{$together_product[num].pre_order_product.sales_price_discount_rate}>OFF</span>
<{else}>
<{/if}>
<{if $together_product[num].soldout_flg}>
<div class="c-item-list__icon is-soldout">
SOLDOUT
</div>
<{/if}>
</div>
<div class="p-product-recommend-list__txt">
<div class="p-product-recommend-list__ttl">
<a href="<{$together_product[num].link_url}>">
<{$together_product[num].name}>
</a>
</div>
<{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}>
</div>
<{else}>
<div class="p-product-recommend-list__price is-discount">
<{* 会員価格 *}>
<{$together_product[num].price}>
</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}>
</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-default u-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}>
  <{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}>
      </div>
    <{else}>
      <div class="c-item-list__price is-discount">
        <{$productlist[num].price}>
      </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}>
    </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-default u-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}>
</div>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $recommend[num].discount_flg}>
<div class="c-item-list__price is-default u-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}>
      </div>
    <{else}>
      <div class="c-item-list__price is-discount">
        <{* 会員価格 *}>
        <{$recommend[num].price}>
      </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}>
    </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-default u-strikethrough">
      <{$recommend[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}>
  <span class="c-item-list__off"><{$seller[num].discount_rate}>OFF</span>
  <{/if}>
</div>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $seller[num].discount_flg}>
<div class="p-ranking-list__price is-default u-strikethrough">
  <{$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}>
        <{* 割引率 *}>
        <span class="c-item-list__off"><{$seller[num].pre_order_product.sales_price_discount_rate}>OFF</span>
      </div>
    <{else}>
      <div class="p-ranking-list__price is-discount">
        <{* 会員価格 *}>
        <{$seller[num].price}>
        <{* 割引率 *}>
        <span class="c-item-list__off"><{$seller[num].discount_rate}>OFF</span>
      </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}>
      <{* 割引率 *}>
      <span class="c-item-list__off"><{$seller[num].pre_order_product.sales_price_discount_rate}>OFF</span>
    </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 is-default u-strikethrough">
      <{$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}>
</div>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $history[num].discount_flg}>
<div class="c-favorite-list__price is-default u-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}>
      </div>
    <{else}>
      <div class="c-favorite-list__price is-discount">
        <{* 会員価格 *}>
        <{$history[num].price}>
      </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}>
    </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-default u-strikethrough">
      <{$history[num].regular_price}>
    </div>
  <{/if}>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-favorite-list__price is-soldout">
  SOLD OUT
</div>
<{/if}>
▼【共通html】～お気に入り～　変更前
<{if !$favorite[num].soldout_flg}>
<div class="c-favorite-list__price<{if $members_login_flg && $favorite[num].discount_flg}> is-discount<{/if}>">
<{* 販売価格（ログイン時は会員価格） *}>
<{$favorite[num].price}>
</div>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $favorite[num].discount_flg}>
<div class="c-favorite-list__price is-default u-strikethrough">
<{$favorite[num].regular_price}>
</div>
<{/if}>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-favorite-list__price is-soldout">
SOLD OUT
</div>
<{/if}>
▼【共通html】～お気に入り～　変更後
<{if !$favorite[num].soldout_flg}>
<{if $members_login_flg && $favorite[num].discount_flg}>
<{if $favorite[num].pre_order_product && $favorite[num].pre_order_product.is_cheaper_than_members_price}>
<div class="c-favorite-list__price is-discount">
<{* 予約販売価格 *}>
<{$favorite[num].pre_order_product.discount_sales_price}>
</div>
<{else}>
<div class="c-favorite-list__price is-discount">
<{* 会員価格 *}>
<{$favorite[num].price}>
</div>
<{/if}>
<{elseif $favorite[num].pre_order_product && $favorite[num].pre_order_product.sales_price_discount_rate}>
<div class="c-favorite-list__price is-discount">
<{* 予約販売価格 *}>
<{$favorite[num].pre_order_product.discount_sales_price}>
</div>
<{else}>
<div class="c-favorite-list__price">
<{* 販売価格 *}>
<{$favorite[num].price}>
</div>
<{/if}>
<{* 通常販売価格（通常販売価格と会員価格・予約販売価格が異なる場合のみ） *}>
<{if $members_login_flg && $favorite[num].discount_flg || ($favorite[num].pre_order_product && $favorite[num].pre_order_product.sales_price_discount_rate)}>
<div class="c-favorite-list__price is-default u-strikethrough">
<{$favorite[num].regular_price}>
</div>
<{/if}>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-favorite-list__price is-soldout">
SOLD OUT
</div>
<{/if}>

関連記事

コメント

0件のコメント

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