こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。
今回はクリエイターモードで、"再入荷お知らせ通知"を表示する方法をご紹介します！クリエイターモードで使えるタグはタグリファレンスをご確認ください。
『オプション設定』のある商品は、テンプレートごとに初期値のデザインが異なります。
「クリエイターモード サンプルショップ一覧」の特徴をご参照ください。
再入荷のお知らせ通知のご利用方法
【1】再入荷のお知らせ通知を設定する
【商品管理】>【商品の設定】>【再入荷のお知らせ通知設定】
「再入荷のお知らせ通知設定」を利用するに設定しましょう。
全商品で「再入荷お知らせ通知」を利用する場合は、『再入荷のお知らせ通知の一括設定』で「全商品を設定状態にする」をクリックしましょう。
※定期購入・予約商品には設定されません。
詳細な設定方法はオンラインマニュアル「再入荷のお知らせ通知設定」をご参照ください。
・【商品管理】>【商品の設定】>【商品の登録】「再入荷お知らせ設定」
から個別に設定することもできます。
【2】在庫がなくなると、お知らせ通知が表示される
【商品管理】>【商品の設定】>【商品の登録】
●通常商品
「数量」が「品切れ」になった場合に再入荷お知らせ通知が表示されます。
●オプションが設定されている商品
「オプション（在庫・価格設定あり）」『オプション設定』で「数量」が「0」になった場合に再入荷お知らせ通知が表示されます。
『表示形式』は「プルダウンで表示する」「項目ごとに買い物かごを表示する（SKUデザイン）」を選択できます。
・ベーシックモード（PC）では、『表示形式』「プルダウンで表示する」は非対応です。
・【Wabisabi】【Shiro】【Advance】【Minimum】【Debut】テンプレートの初期値には、「項目ごとに買い物かごを表示する」を表示するソースは入力されていません。
HTML編集初心者の方は、「プルダウン表示」を利用するか、「項目ごとに買い物かごを表示する」ソースがあらかじめ入力されているテンプレートをご利用ください。
「クリエイターモード サンプルショップ一覧」の特徴をご参照ください。
クリエイターモードで"再入荷お知らせ通知"を表示するソース
ここでは、クリエイターモードの【Complete】の初期値の「再入荷お知らせ通知」を表示するソース例をご紹介します。
【ソース例】
【独自デザイン】>【クリエイターモード】>【商品詳細】
▼HTML
●通常商品（240行目付近～）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<{if $item.is_soldout}> <!--売り切れの場合--> <{if $item.is_restock_enabled}> <div class="favorite-wrap"> <div><a href="<{$item.restock_url}>" class="restock-btn btn">再入荷お知らせ</a></div> <div class="favorite"> <a href="<{$item.favorite_entry_url}>"></a> </div> </div> <{else}> <div class="favorite-wrap"> <div class="disabled-btn btn">売り切れ</div> <div class="favorite"> <a href="<{$item.favorite_entry_url}>"></a> </div> </div> <{/if}> |
●オプションが設定されている商品
※表示形式「プルダウン表示」（414行目付近～）
|
1 2 3 4 5 6 |
<{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> |
●オプションが設定されている商品
※表示形式「項目ごとに買い物かごを表示する」（SKUデザイン）」（346行目付近～）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<{if $item.option_sku.list[i].is_soldout}> <{if $item.is_restock_enabled}> <div class="favorite-wrap"> <div><a href="<{$item.option_sku.list[i].restock_url}>" class="restock-btn btn">再入荷お知らせ</a></div> <div class="favorite"> <a href="<{$item.option_sku.list[i].favorite_entry_url}>"></a> </div> </div> <{else}> <div class="favorite-wrap"> <div class="disabled-btn btn sku-btn">売り切れ</div> <div class="favorite"> <a href="<{$item.option_sku.list[i].favorite_entry_url}>"></a> </div> </div> <{/if}> |
表示例
「再入荷お知らせ」ボタンをクリックすると、再入荷お知らせ申し込み画面が表示されます。
●通常商品
・オプションが設定されてない通常商品では、どのテンプレートでも初期値に再入荷お知らせを表示するソースが入力されています。
●オプションが設定されている商品
※表示形式「プルダウン表示」
・在庫がない商品をプルダウンで選択した際に、「再入荷お知らせ」ボタンが表示されます。
●オプションが設定されている商品
※表示形式「項目ごとに買い物かごを表示する」（SKUデザイン）」
完了
・ソースは一例となります。自由にデザインを調整して表示しましょう。
・ソースの作成・修正方法、最適なサイズなどの作り方についてはサポート対象外です。
・有料となりますが、ショップ制作代行サービスとして、おてがるリニューアルサービスをご紹介させていただきます。
いかがでしたでしょうか。
クリエイターモードでも再入荷お知らせ通知を表示してみましょう。
それではまた！
