クリエイターモードで定期購入ご利用には、定期購入機能のタグを入力して表示します。
ベーステンプレート【Wabisabi】をご利用の場合のサンプルソースです。
【Wabisabi】定期購入サンプルソース
各テンプレートの初期値には定期購入機能のタグは入力されておりません。
【ショップデザイン】>【クリエイターモード】>【商品詳細】「HTML」内に
下記のサンプルソースを追記し、自由にデザインしてください。
【Wabisabi】サンプルソース
▼価格部分の表示
▼入力差し替え箇所（以下の部分を差し替えてください）
<{if $item.is_soldout}>
<span class="detail-sold-out">SOLD OUT</span><br>
<h2 class="product-name"><{$item.name}></h2>
<div class="product-price-block">￥<{$item.price_html}><small>（税込）</small></div>
<{elseif $item.is_sale}>
<h2 class="product-name"><{$item.name}></h2>
<div class="product-price-block detail-product-discount">￥<{$item.original_price|number_format}><small>（税込）</small></div>
<span class="detail-product-sale-price">￥<{$item.price_html}>（税込）<br><small><{$item.sale_rate}>%OFF</small></span>
<{else}>
<h2 class="product-name"><{$item.name}></h2>
<div class="product-price-block">￥<{$item.price_html}><small>（税込）</small></div>
<{/if}>
▼入力差し替え後
<!--■定期購入価格部分の表示ここから-->
<{if $item.is_soldout}>
<span class="detail-sold-out">SOLD OUT</span><br>
<{/if}>
<{if $item.is_subscription_only}>
<h2 class="product-name"><{$item.name}></h2>
<!--定期購入商品の場合-->
<{if $item.subscription_discount.has_item}>
<!--回数割引を設定している場合-->
<{section name=i loop=$item.subscription_discount.list}>
<p class="product-price-block subscription-time"><small><{$item.subscription_discount.list[i].times}>回目価格：</small>￥<{$item.subscription_discount.list[i].price}></p>
<{/section}>
<{else}>
<p class="subscription-price">￥<{$item.subscription_price_html}>（定期購入時）</p>
<{/if}>
<{if $item.subscription_gift.has_item}>
<!--景品設定をしている場合-->
<{section name=i loop=$item.subscription_gift.list}>
<div class="subscription-gift">
<img src="<{$item.subscription_gift.list[i].image_url}>" alt="<{$item.subscription_gift.list[i].name}>" width="80" height="auto">
<p class="subscription-gift-text"><{$item.subscription_gift.list[i].times}>回目以降のご購入の方に<{$item.subscription_gift.list[i].name}>を差し上げます！<br><{$item.subscription_gift.list[i].description}></p>
</div>
<{/section}>
<{/if}>
<{elseif $item.is_subscription}>
<h2 class="product-name"><{$item.name}></h2>
<!--通常商品と定期購入の場合-->
<!--セールかどうか（通常商品のみ）-->
<{if $item.is_sale}>
<div class="product-price-block detail-product-discount">￥<{$item.original_price|number_format}><small>（税込）</small></div>
<span class="detail-product-sale-price">￥<{$item.price_html}>（税込）<br><small><{$item.sale_rate}>%OFF</small></span>
<{else}>
<div class="product-price-block">￥<{$item.price_html}><small>（税込）</small></div>
<{/if}>
<!--定期購入商品-->
<p class="subscription-price">￥<{$item.subscription_price_html}><small>（定期購入時）</small></p>
<{else}>
<!--通常商品の場合-->
<!--セールかどうか-->
<{if $item.is_sale}>
<h2 class="product-name"><{$item.name}></h2>
<div class="product-price-block detail-product-discount">￥<{$item.original_price|number_format}><small>（税込）</small></div>
<span class="detail-product-sale-price">￥<{$item.price_html}>（税込）<br><small><{$item.sale_rate}>%OFF</small></span>
<{else}>
<h2 class="product-name"><{$item.name}></h2>
<div class="product-price-block">￥<{$item.price_html}><small>（税込）</small></div>
<{/if}>
<{/if}>
<!--■定期購入価格部分の表示ここまで-->
▼カートボタン部分の表示
▼入力差し替え箇所（以下の部分を差し替えてください）
<{if $item.is_within_sell_period}>
<{if $item.is_soldout && $item.is_restock_enabled}>
<div class="add-btn sold-btn">
<a href="<{$item.restock_url}>" class="cart-btn">再入荷メールを受け取る</a>
</div>
<{else}>
<div class="add-btn">
<a href="<{$item.cart_entry_url}>" class="cart-btn">カートに入れる</a>
</div>
<{/if}>
<{else}>
<div class="add-btn sell-period-btn">
<p class="cart-btn">販売期間外の商品です</p>
</div>
<{/if}>
▼入力差し替え後
<!--■カートボタン部分の表示ここから-->
<{if $item.is_within_sell_period}>
<{if $item.is_subscription_only}>
<{if $item.is_soldout}>
<div class="outstock-btn">
<p class="outstock">売り切れ</p>
</div>
<{else}>
<div class="add-btn subscription">
<a href="<{$item.cart_entry_subscription_url}>" class="cart-btn">定期購入する</a>
</div>
<span class="subscription-text">※<{$item.subscription_message}></span>
<{/if}>
<{elseif $item.is_subscription}>
<{if $item.is_soldout}>
<{if $item.is_soldout && $item.is_restock_enabled}>
<div class="add-btn sold-btn">
<a href="<{$item.restock_url}>" class="cart-btn">再入荷メールを受け取る</a>
</div>
<{else}>
<div class="outstock-btn">
<p class="outstock">売り切れ</p>
</div>
<{/if}>
<{else}>
<div class="add-btn">
<a href="<{$item.cart_entry_url}>" class="cart-btn">カートに入れる</a>
</div>
<div class="add-btn subscription">
<a href="<{$item.cart_entry_subscription_url}>" class="cart-btn">定期購入する</a>
</div>
<span class="subscription-text">※<{$item.subscription_message}></span>
<{/if}>
<{else}>
<{if $item.is_soldout}>
<{if $item.is_soldout && $item.is_restock_enabled}>
<div class="add-btn sold-btn">
<a href="<{$item.restock_url}>" class="cart-btn">再入荷メールを受け取る</a>
</div>
<{else}>
<div class="outstock-btn">
<p class="outstock">売り切れ</p>
</div>
<{/if}>
<{else}>
<div class="add-btn">
<a href="<{$item.cart_entry_url}>" class="cart-btn">カートに入れる</a>
</div>
<{/if}>
<{/if}>
<{else}>
<div class="add-btn sell-period-btn">
<p class="cart-btn">販売期間外の商品です</p>
</div>
<{/if}>
<!--■カートボタン部分の表示ここまで-->
▼CSSの追加
/* 定期購入 */
.outstock-btn {
background: #989898;
font-size: 18px;
font-weight: bold;
text-align: center;
width: 60%;
border-radius: 3px;
margin-bottom: 20px;
}
.outstock {
color: #fff;
display: inline-block;
border-radius: 2px;
width: 100%;
padding: 24px;
}
.subscription {
background: #00838F;
margin-bottom: 8px;
}
.subscription:hover {
background: #359DA6;
}
.subscription-text {
font-size: 12px;
}
.subscription-time {
margin-bottom: 30px
}
.subscription-price {
margin-top: 20px;
font-size: 20px;
}
.subscription-gift {
display: flex;
margin-bottom: 20px;
}
.subscription-gift-text {
padding-left: 16px;
}
.cart-add-btn {
flex-wrap: wrap;
}
.add-btn {
margin-bottom: 20px;
}
表示例
▼定期購入商品の表示例
▼通常商品と定期購入の表示例
