購入ボタンの制御

カートボタン

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

タグ説明
{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以前)

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




    {block:HasItemStock}
        
        {block:ItemWaitingForSale}
            {ItemWatingForSaleButtonTag}
        {/block:ItemWaitingForSale}
        
        {block:ItemNowOnSale}
            {ItemSelectTag}
            
        {/block:ItemNowOnSale}
        
        {block:ItemEndOfSale}
            {ItemWatingForSaleButtonTag}
        {/block:ItemEndOfSale}
    {/block:HasItemStock}
    {block:NoItemStock}
        {lang:NoItemInquiry}
    {/block:NoItemStock}

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

← 商品ステータス商品情報 →