【クリエイターモード】バリエーションのプルダウン表示で、在庫0の項目を選んだら「売り切れ／再入荷お知らせ」を表示させたいです。方法を教えてください。 – makeshop よくある質問

プルダウン表示のバリエーションは、すべての項目を選んだ時点で在庫が0であれば、「売り切れ／再入荷お知らせ」を表示させることができます。

バリエーションが2つある場合は、2つとも選んだ後に表示が切り替わります。

＜対応テンプレート一覧＞

初期値に入っている（編集は不要）	初期値に入っていない（編集が必要）
Complete／Pulsefit／Baycross／Garden／Basics／Manabito／&more／BRothers／Simplecase／Minimum／Debut	Wabisabi／Shiro／Advance

初期値に入っていないテンプレートの場合、HTML・CSS・JavaScriptの記述によるデザインが必要です。

このページでは、初期値に入っているテンプレート【Complete】のソースを例に、仕組みを説明します。テンプレートごとにclassなどが異なるため、そのままコピー＆ペーストしても動作しません。ソースを読んで理解できる方向けの内容です。

作成が難しい場合は、初期値に入っているテンプレートの使用を検討してください。

【Complete】の仕組みは、次の3つの組み合わせです。

HTML：「カートに入れる」と、「再入荷のお知らせ」または「売り切れ」のボタンを配置する。
CSS：表示・非表示を切り替えるclass（on／off）を定義する。
JavaScript：バリエーションを選んだ時に在庫の有無を判定し、classを付け替える。

＜手順＞

編集する前にデザインセットのコピーボタンをクリックしてバックアップを保管し、元の状態に戻せるように準備したうえで作業をおこなってください。

■makeshopサポート
ショップデザインバックアップしてますか？！

※すでにデザインセットが5個以上ある場合は以下を参照してください。
■よくある質問
【クリエイターモード】デザインセットが5個以上あるとコピーできません。バックアップを取る方法を教えてください。

以下に、テンプレート【Complete】の例を紹介します。

以下は、ショップデザイン／テンプレート選択・編集／クリエイターモードの「商品詳細」のHTML・JavaScript欄と、「全ページ共通」のCSS欄に記述されている内容です。

（１）HTML

「カートに入れる」ボタンと、在庫が0の時に表示する「再入荷のお知らせ」または「売り切れ」のボタンを、あらかじめ配置しています。なお、以下は実際のソースの該当部分を抜粋したものです。

<{if $item.is_restock_enabled}>
  <div><a href="<{$item.restock_url}>" class="restock-btn btn outstock off">再入荷のお知らせ</a></div>
<{else}>
  <div class="disabled-btn btn outstock off">売り切れ</div>
<{/if}>
<a href="<{$item.cart_entry_url}>" class="add-cart-btn btn cart-order-btn instock off" data-button-id="cart-order">カートに入れる</a>

※実際のソースでは、お気に入りボタンなどと一緒に「modal-open」のclassを持つdivの中に記述されています。

再入荷設定の分岐（Smarty構文）

<{if $item.is_restock_enabled}>：ショップ側で「再入荷お知らせ機能」が有効なら「再入荷のお知らせ」ボタンを出力。
<{else}>：無効なら「売り切れ」ボタンを出力。

目印となるクラス

instock：在庫がある時に見せたい要素（カートに入れるボタン）。
outstock：在庫がない時に見せたい要素（売り切れ、または再入荷ボタン）。
off：初期状態として非表示にしておくためのクラス。

（２）CSS

クラスの付け替えによって表示・非表示を制御するスタイルです。「商品詳細」ではなく、「全ページ共通」のCSS欄に記述されています。

.add-cart .off {
  display: none;
}
.add-cart .on {
  display: block;
}

【Complete】ではカートに入れるボタンを囲む要素にadd-cartというclassがついているので、このように記述しています。

.add-cart .off { display: none; } 親要素（.add-cart）の中にある off クラスの要素を画面から隠します。

.add-cart .on { display: block; } 親要素（.add-cart）の中にある on クラスの要素を画面に表示します。

（３）JavaScript

ユーザーの操作を検知してクラス（on / off）を付け替える処理です。

$('.instock').removeClass('off').addClass('on');

function MakeShop_afterItemOptionChange(data) {
  if (data.isSoldout) {
    $('.instock').removeClass('on').addClass('off');
    $('.outstock').removeClass('off').addClass('on');
  } else {
    $('.instock').removeClass('off').addClass('on');
    $('.outstock').removeClass('on').addClass('off');
  }
  showOptionImage(data.imageL);
}

$('.instock').removeClass('off').addClass('on');
ページが開かれた直後に実行されます。「カートに入れる」ボタンから off を外して on を付与し、ボタンを表示させます。

function MakeShop_afterItemOptionChange(data)
makeshopにあらかじめ用意されている専用関数（イベントリスナー）です。商品オプション（サイズやカラーなど）が変更されるたびに自動で実行され、引数 data にそのオプションの情報が渡されます。

if (data.isSoldout)（売り切れの場合）
- instock（カートに入れる）を off にして隠す。
- outstock（売り切れ／再入荷）を on にして表示する。
else（在庫がある場合）
- instock（カートに入れる）を on にして表示する。
- outstock（売り切れ／再入荷）を off にして隠す。
showOptionImage(data.imageL); 選択されたオプションに紐づく商品画像（Lサイズ画像）へメイン画像を切り替えます。

＜補足＞項目を選ぶ前に売り切れを表示することはできますか。

バリエーションを選ぶ前に売り切れを表示することや、売り切れの項目だけ色を変えることはできません。
バリエーションの選択項目には、在庫がない項目を判定できる条件（classが付くなど）がないためです。

項目を選ぶ前に売り切れを表示するには、SKU（項目ごとに買い物カゴを表示）形式での表示を推奨しています。
プルダウンでの表示の場合は、以下のような代替策を検討してください。

在庫がなくなった時点で、バリエーションの項目名に「売り切れ」などを追記する（手動で対応）
バリエーションを組み合わせた時点で、売り切れボタンまたは再入荷のお知らせボタンを表示する（上記の方法）
項目を選ぶ前に、バリエーションごとの在庫状況を「○」「×」や在庫数の表で表示する（プルダウン形式でも利用できます）
→【クリエイターモード】バリエーションごとの在庫を「○」「×」や在庫数の表にする方法を教えてください。

＜ご注意＞

上記は対処策の一例です。あくまでもひとつの例として参考にしてください。

修正が難しい場合は有料の制作代行プランのご利用を検討してください。

→ おてがる更新代行サービス