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

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

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

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

Mighty

▼【商品詳細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">
  カートに入れる
</button>
<{else}>
<div class="disable_cartin">
  <button class="c-btn-cart" type="submit">
    カートに入れる
  </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">
      <{$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">
      <{$pre_order_product.custom_cart_in_button_label}>
    </button>
  <{else}>
    <button type="submit" class="c-btn-cart cart_in_async">
      カートに入れる
    </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">
        <{$pre_order_product.custom_cart_in_button_label}>
      </button>
    <{elseif $pre_order_product.is_on_sale}>
      <button class="c-btn-cart" type="submit">
        <{$pre_order_product.custom_cart_in_button_label}>
      </button>
    <{else}>
      <button class="c-btn-cart" type="submit">
        カートに入れる
      </button>
    <{/if}>
  </div>
<{/if}>
▼【商品詳細html】～組合せ購入～　変更前
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $together_product[num].discount_flg}>
<div class="c-item-list__price is-default u-strikethrough">
<{$together_product[num].regular_price}>
</div>
<{/if}>
<{if !$together_product[num].soldout_flg}>
<div class="c-item-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>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-item-list__price">
<{$together_product[num].regular_price}> <span class="c-item-list__soldout">売り切れ</span>
</div>
<{/if}>
▼【商品詳細html】～組合せ購入～　変更後
<{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="c-item-list__price is-default u-strikethrough"><{$together_product[num].regular_price}></div>
<{/if}>
<{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="c-item-list__price is-discount">
<{$together_product[num].pre_order_product.discount_sales_price}>
<span class="u-red"><{$together_product[num].pre_order_product.sales_price_discount_rate}>OFF</span>
</div>
<{else}>
<div class="c-item-list__price is-discount">
<{$together_product[num].price}>
<span class="u-red"><{$together_product[num].discount_rate}>OFF</span>
</div>
<{/if}>
<{elseif $together_product[num].pre_order_product && $together_product[num].pre_order_product.sales_price_discount_rate}>
<div class="c-item-list__price is-discount">
<{$together_product[num].pre_order_product.discount_sales_price}>
<span class="u-red"><{$together_product[num].pre_order_product.sales_price_discount_rate}>OFF</span>
</div>
<{else}>
<div class="c-item-list__price">
<{$together_product[num].price}>
</div>
<{/if}>
<{else}>
<{$together_product[num].regular_price}> <span class="c-item-list__soldout">売り切れ</span>
<{/if}>
▼【商品一覧html・商品検索結果html】変更前
<{if !$productlist[num].soldout_flg}>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $productlist[num].discount_flg}>
<div class="c-item-list__price is-default u-strikethrough"> <{$productlist[num].regular_price}> </div>
<{/if}>
<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}> <span class="c-item-list__off"><{$productlist[num].discount_rate}>OFF</span> <{/if}> </div>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-item-list__price"> <{$productlist[num].regular_price}> <span class="c-item-list__soldout">売り切れ</span> </div>
<{/if}>
▼【商品一覧html・商品検索結果html】変更後
<{if !$productlist[num].soldout_flg}>
  <{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}>
  <{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}>
        <span class="c-item-list__off"><{$productlist[num].pre_order_product.sales_price_discount_rate}>OFF</span>
      </div>
    <{else}>
      <div class="c-item-list__price is-discount">
        <{$productlist[num].price}>
        <span class="c-item-list__off"><{$productlist[num].discount_rate}>OFF</span>
      </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}>
      <span class="c-item-list__off"><{$productlist[num].pre_order_product.sales_price_discount_rate}>OFF</span>
    </div>
  <{else}>
    <div class="c-item-list__price">
      <{$productlist[num].price}>
    </div>
  <{/if}>
<{else}>
  <{$productlist[num].regular_price}> <span class="c-item-list__soldout">売り切れ</span>
<{/if}>
▼【トップページhtml】～おすすめ～　変更前
<{if !$recommend[num].soldout_flg}>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $recommend[num].discount_flg}>
<div class="c-item-list__price is-default u-strikethrough">
  <{$recommend[num].regular_price}>
</div>
<{/if}>
<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}>
  <span class="c-item-list__off"><{$recommend[num].discount_rate}>OFF</span>
  <{/if}>
</div>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-item-list__price">
  <{$recommend[num].regular_price}> <span class="c-item-list__soldout">売り切れ</span>
</div>
<{/if}>
▼【トップページhtml】～おすすめ～　変更後
<{if !$recommend[num].soldout_flg}>
  <{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}>
  <{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}>
        <span class="c-item-list__off"><{$recommend[num].pre_order_product.sales_price_discount_rate}>OFF</span>
      </div>
    <{else}>
      <div class="c-item-list__price is-discount">
        <{$recommend[num].price}>
        <span class="c-item-list__off"><{$recommend[num].discount_rate}>OFF</span>
      </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}>
      <span class="c-item-list__off"><{$recommend[num].pre_order_product.sales_price_discount_rate}>OFF</span>
    </div>
  <{else}>
    <div class="c-item-list__price">
      <{$recommend[num].price}>
    </div>
  <{/if}>
<{else}>
  <{$recommend[num].regular_price}> <span class="c-item-list__soldout">売り切れ</span>
<{/if}>
▼【トップページhtml】～ランキング～　変更前
<{if !$seller[num].soldout_flg}>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $seller[num].discount_flg}>
<div class="c-item-list__price is-default u-strikethrough">
  <{$seller[num].regular_price}>
</div>
<{/if}>
<div class="c-item-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>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-item-list__price">
  <{$seller[num].regular_price}> <span class="c-item-list__soldout">売り切れ</span>
</div>
<{/if}>
▼【トップページhtml】～ランキング～　変更後
<{if !$seller[num].soldout_flg}>
  <{if $members_login_flg && $seller[num].discount_flg || ($seller[num].pre_order_product && $seller[num].pre_order_product.sales_price_discount_rate)}>
    <div class="c-item-list__price is-default u-strikethrough"><{$seller[num].regular_price}></div>
  <{/if}>
  <{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="c-item-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="c-item-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="c-item-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="c-item-list__price">
      <{$seller[num].price}>
    </div>
  <{/if}>
<{else}>
  <{$seller[num].regular_price}> <span class="c-item-list__soldout">売り切れ</span>
<{/if}>
▼【共通html】～最近チェックした商品～　変更前
<{if !$history[num].soldout_flg}>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $history[num].discount_flg}>
<div class="c-item-list__price is-default u-strikethrough">
  <{$history[num].regular_price}>
</div>
<{/if}>
<div class="c-item-list__price<{if $members_login_flg && $history[num].discount_flg}> is-discount<{/if}>">
  <{* 販売価格（ログイン時は会員価格） *}>
  <{$history[num].price}>
  <{* 割引率（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
  <{if $members_login_flg && $history[num].discount_flg}>
  <span class="c-item-list__off"><{$history[num].discount_rate}>OFF</span>
  <{/if}>
</div>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-item-list__price">
  <{$history[num].regular_price}> <span class="c-item-list__soldout">売り切れ</span>
</div>
<{/if}>
▼【共通html】～最近チェックした商品～　変更後
<{if !$history[num].soldout_flg}>
  <{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-item-list__price is-default u-strikethrough"><{$history[num].regular_price}></div>
  <{/if}>
  <{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-item-list__price is-discount">
        <{$history[num].pre_order_product.discount_sales_price}>
        <span class="c-item-list__off"><{$history[num].pre_order_product.sales_price_discount_rate}>OFF</span>
      </div>
    <{else}>
      <div class="c-item-list__price is-discount">
        <{$history[num].price}>
        <span class="c-item-list__off"><{$history[num].discount_rate}>OFF</span>
      </div>
    <{/if}>
  <{elseif $history[num].pre_order_product && $history[num].pre_order_product.sales_price_discount_rate}>
    <div class="c-item-list__price is-discount">
      <{$history[num].pre_order_product.discount_sales_price}>
      <span class="c-item-list__off"><{$history[num].pre_order_product.sales_price_discount_rate}>OFF</span>
    </div>
  <{else}>
    <div class="c-item-list__price">
      <{$history[num].price}>
    </div>
  <{/if}>
<{else}>
  <{$history[num].regular_price}> <span class="c-item-list__soldout">売り切れ</span>
<{/if}>
▼【共通html】～お気に入り～　変更前
<{if !$favorite[num].soldout_flg}>
<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $favorite[num].discount_flg}>
<div class="c-item-list__price is-default u-strikethrough">
<{$favorite[num].regular_price}>
</div>
<{/if}>
<div class="c-item-list__price<{if $members_login_flg && $favorite[num].discount_flg}> is-discount<{/if}>">
<{* 販売価格（ログイン時は会員価格） *}>
<{$favorite[num].price}>
<{* 割引率（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
<{if $members_login_flg && $favorite[num].discount_flg}>
<span class="c-item-list__off"><{$favorite[num].discount_rate}>OFF</span>
<{/if}>
</div>
<{else}>
<{* 売り切れの表記 *}>
<div class="c-item-list__price">
<{$favorite[num].regular_price}> <span class="c-item-list__soldout">売り切れ</span>
</div>
<{/if}>
▼【共通html】～お気に入り～　変更後
<{if !$favorite[num].soldout_flg}>
<{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-item-list__price is-default u-strikethrough"><{$favorite[num].regular_price}></div>
<{/if}>
<{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-item-list__price is-discount">
<{$favorite[num].pre_order_product.discount_sales_price}>
<span class="c-item-list__off"><{$favorite[num].pre_order_product.sales_price_discount_rate}>OFF</span>
</div>
<{else}>
<div class="c-item-list__price is-discount">
<{$favorite[num].price}>
<span class="c-item-list__off"><{$favorite[num].discount_rate}>OFF</span>
</div>
<{/if}>
<{elseif $favorite[num].pre_order_product && $favorite[num].pre_order_product.sales_price_discount_rate}>
<div class="c-item-list__price is-discount">
<{$favorite[num].pre_order_product.discount_sales_price}>
<span class="c-item-list__off"><{$favorite[num].pre_order_product.sales_price_discount_rate}>OFF</span>
</div>
<{else}>
<div class="c-item-list__price">
<{$favorite[num].price}>
</div>
<{/if}>
<{else}>
<{$favorite[num].regular_price}> <span class="c-item-list__soldout">売り切れ</span>
<{/if}>

関連記事

コメント

0件のコメント

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