Skip to main content

購入ボタンの制御

カートボタン​

購入ボタンの制御は、下記で行います。

タグ説明
{block:PurchaseForm}カートに入れるform。内部に{PurchaseButton}が必要です。
{PurchaseButton}カートに入れるボタンを表示します。 ボタンのテキストや動作が、商品のステータスによって自動的に変わります。

推奨コード​

カートフォーム推奨コードです。今後Appの追加などでカートボタンの制御が必要になった場合にも、下記コードで記述されていれば追従します。

{block:PurchaseForm}
    {ItemSelectTag}
    {PurchaseButton}
{/block:PurchaseForm}

カートボタンテキスト​

テキストは、下記の様に自動で切り替わります。

ステータスカートボタンテキスト　ボタンの動作
通常商品・販売中の場合カートに入れるカート画面へ遷移
再入荷自動通知App未使用で在庫なしの場合SOLD OUTdisabled
再入荷自動通知App使用中で在庫なしの場合再入荷通知を希望するメールアドレスを入力するモーダルが開きます
販売予告の場合(1時間以上前)販売開始のお知らせを希望するメールアドレスを入力するモーダルが開きます
販売予告の場合(1時間以内)販売開始までお待ちくださいdisabled
販売終了の場合販売期間が終了しましたdisabled
予約商品の場合予約注文するカート画面へ遷移
抽選商品の場合(応募期間中)抽選に応募するカート画面へ遷移
抽選商品の場合(応募期間前)応募開始までお待ちくださいdisabled
抽選商品の場合(応募期間後)応募期間が終了しましたdisabled

また、年齢制限Appでをインストールすると、カート画面へ遷移する直前に年齢確認用のモーダルが開くようになります。
年齢制限Appの詳しい説明は年齢制限Appをご覧ください。

カートボタンのCSSセレクタ​

ボタンの状態によってスタイルを調整する場合など、参考にしてください。

ステータスセレクタ
通常商品・販売中の場合.purchaseButton__btn .purchaseButton__btn--addToCart
再入荷自動通知App未使用で在庫なしの場合.purchaseButton__btn .purchaseButton__btn--soldOut
再入荷自動通知App使用中で在庫なしの場合.purchaseButton__btn .purchaseButton__btn--requestRestockMail
販売予告の場合(1時間以上前).purchaseButton__btn .purchaseButton__btn--comingSoon
販売予告の場合(1時間以内).purchaseButton__btn .purchaseButton__btn--comingSoonStay
販売終了の場合.purchaseButton__btn .purchaseButton__btn--endOfSale
予約商品の場合.purchaseButton__btn .purchaseButton__btn--addToCart
抽選商品(応募期間中)の場合.purchaseButton__btn .purchaseButton__btn--addToCart
抽選商品(応募期間外)の場合.purchaseButton__btn .purchaseButton__btn--notApplying

非推奨(2019.04以前)​

カート周りのフォーム構造を残し、販売期間設定に対応する場合

<form id="purchase_form" name="menu" action="{AddToCartURL}" method="post" data-purchase-form>
    {block:HasItemStock}
        <!-- 販売開始前 -->
        {block:ItemWaitingForSale}
            {ItemWatingForSaleButtonTag}
        {/block:ItemWaitingForSale}
        <!-- 販売中 中身が従来の書き方 -->
        {block:ItemNowOnSale}
            {ItemSelectTag}
            <input
                type="submit"
                value="{block:ItemPreOrder}{lang:AddToCartPreOrder}{/block:ItemPreOrder}{block:NotItemPreOrder}{lang:AddToCart}{/block:NotItemPreOrder}"
            />
        {/block:ItemNowOnSale}
        <!-- 販売終了 -->
        {block:ItemEndOfSale}
            {ItemWatingForSaleButtonTag}
        {/block:ItemEndOfSale}
    {/block:HasItemStock}
    {block:NoItemStock}
        <a href="{ContactPageURL}/items/{ItemId}">{lang:NoItemInquiry}</a>
    {/block:NoItemStock}
</form>

{ItemWatingForSaleButtonTag}の詳細に関しては販売期間指定Appをご覧ください。