└クリエイターモード【Wabisabi】サンプルソース（定期購入） – オンラインマニュアル

クリエイターモードで定期購入ご利用には、定期購入機能のタグを入力して表示します。
ベーステンプレート【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;
}

表示例

▼定期購入商品の表示例

定期購入商品

▼通常商品と定期購入の表示例

定期購入商品

【Wabisabi】定期購入サンプルソース

表示例

関連記事