こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。
今回はクリエイターモードで"買い物かごページに遷移しないで"商品をカゴに入れる方法をご紹介します！
こんなお悩みありませんか？
・商品詳細ページで「カートに入れる」ボタンをクリックしたら"買い物かごページに遷移しないで"商品をカゴに入れたい！
クリエイターモードで"買い物かごページに遷移しないで"
商品をカゴに入れる方法！
【Shiro】について
クリエイターモードのテンプレート【Shiro】は、"買い物かご画面に遷移しないで"商品がカゴに追加されるテンプレートです。
購入したい商品が多い場合には、商品を追加する都度、買い物かごページから商品ページに戻る必要がないので、スムーズに商品を追加することができます。
HTML編集初心者のショップ様は、【Shiro】のテンプレート初期値のソースを適用するだけで、かんたんに表示できますのでご利用ください。
HTML編集が可能なショップ様で、クリエイターモードの他のテンプレートをカスタマイズしたいショップ様は、表示するためのソース例を早速みていきましょう。
"買い物かごページに遷移しないで"商品をカゴに入れるソース例
設定方法
クリエイターモードで"買い物かごページに遷移しないで"商品をカゴに入れる場合フック関数を利用して表示することができます。
【1】ヘッダーにソースを追加します。
【独自デザイン】>【クリエイターモード】>【モジュール管理】
モジュール名「ヘッダー」をクリックして【モジュール編集】画面を表示します。
テキストエリア最下位置にある</header>タグの直前などに、商品が追加された際に表示される内容を下記のように追記してください。
▼HTML
|
1 2 |
<div class="cartin-msg-pc">買い物カゴに追加されました</div> <div class="cartin-msg-sp">買い物カゴに追加されました</div> |
・テンプレートごとの初期値で、モジュール名「ヘッダー」と記載されているモジュール内に追記してください。
・買い物カゴに追加されました。のテキストは自由に変更することができます。
【2】CSSを追記します。
【独自デザイン】>【クリエイターモード】>【全ページ共通】
内の【CSS】に下記を追記してください。
▼CSS（35行分）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.cartin-msg-pc { display: none; /*非表示にしておく*/ position: absolute; top: 30px; right: -200px; white-space: nowrap; } .cartin-msg-pc.show { position: absolute; /*カートに入れたら表示*/ top: 80px; /*テキストの表示位置*/ right: 20px;/*テキストの表示位置*/ white-space: nowrap; color: #666;/*テキストの文字色*/ font-size: 1em;/*テキストのサイズ*/ } .cartin-msg-sp { display: none; /*非表示にしておく*/ position: absolute; top: -60px; white-space: nowrap; } .cartin-msg-sp.show { position: absolute; /*カートに入れたら表示*/ top: 0; left: 0; white-space: nowrap; background: #5d737e; color: #fff; width: 100%; padding: 10px 0; text-align: center; } .cart-badge { display: block; /*常に表示させてておく（要調整）*/ } |
・テキストの表示位置や表示サイズなどは、お好みで変更してください。
・CSSを追記する場所は管理しやすい場所か、分からない場合は一番下に追記してください。
【3】商品詳細にJavaScriptを追記します。
【独自デザイン】>【クリエイターモード】>【商品詳細】
内の【JavaScript】に下記を追記してください。
▼JavaScript（7行分）
|
1 2 3 4 5 6 7 |
function MakeShop_afterCartEntry(data){ $('.cart-badge').html(data.totalQuantity); $('.cart-object').attr('data', $('.cart-object').attr('data')); var cartinClassName = window.matchMedia('(max-width: 768px)').matches ? '.cartin-msg-sp' : '.cartin-msg-pc'; $(cartinClassName).addClass('show').fadeIn(600).fadeOut(4000); return false; } |
・ソースは一例となります。自由にデザインを調整して表示しましょう。
完了
いかがでしたでしょうか。
スピーディーに商品をカートに入れたい方向けのデザインにしたい場合に、ぜひお役立てください。
それではまた！
