【クリエイターモード】テンプレート&moreの商品詳細ページで「カートにいれる」をクリックした後にモーダルウィンドウを表示させることはできますか。 – makeshop よくある質問

モーダルウィンドウのデザインを追加することで、表示が可能です。

一例として、【Complete】テンプレートと同じデザインを追加する手順について紹介します。
（※通常購入のみ。「バリエーション項目ごとに表示」の場合を除く。）

＜初期値のデザイン＞

テンプレート【&more】では、「カートにいれる」をクリック/タップすると、「Thank you!」と表示され、ヘッダーのカートのアイコンにカートにいれた数が追加されるようにデザインされています。

「Thank you!」のアニメーションは５秒間表示されます。

＜モーダルウィンドウを追加＞

テンプレート【Complete】のモーダルウィンドウのデザインを追加します。

（１）ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細「CSS」
の末尾に、モーダルウィンドウ用のCSSを追記（コピー＆ペースト）してください。

/* モーダルCSS */
.modal-area {
  display: none;
  position: fixed;
  z-index: 1000; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal-bg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}
.modal-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 70%;
  max-width: 580px;
  padding: 30px;
  background-color: #fff;
}
.modal-cart-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-cart-btn li {
  border-radius: 5px;
  margin: 12px;
}
.modal-cart-btn li a {
  width: 240px;
  display: inline-block;
  text-align: center;
  padding: 15px 0;
  font-weight: bold;
  font-size: 13px;
  color: #fff;
}
.modal-cart {
  background: #707070;
}
.modal-order {
  background: #1FD5AD;
}
.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}
.modal-open {
  cursor: pointer;
  display: flex;
  align-items: baseline;
}

（２）ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細「JavaScript」内

// オプション画像登録ありのとき表示
if ($('.sku-img img').length != 0) {
    $('.sku-img-top, .sku-img').show();
}

の後ろに以下を追記（コピー＆ペースト）してください。

$('.modal-close, .modal-bg').on('click', function() {
    $('.modal-area').fadeOut();
});
    $('.modal-close, .modal-bg').on('click', function() {
    $('.modal-area').fadeOut();
});

（３）同じく「JavaScript」内

// カート内の商品数表示
if (!$('.cart-badge').length) {
    $('.cart-icon a').append('<span class="cart-badge poppins"></span>');
}
$('.cart-badge').addClass('add').text(data.totalQuantity);
setTimeout(function() {
    $('.cart-badge').removeClass('add');
}, 500);

の後ろに以下を追記（コピー＆ペースト）してください。

if (data.result) {
    $('.modal-area').fadeIn();
} else {
    data.method.modal(data.error.message);
}

（４）ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細「HTML」

入力欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し表示される検索窓に

カートボタン

と入力し、キーボードのEnterキーを押して以下の記述を見つけてください。

<!-- カートボタン -->
<div class="item-btn-wrap">

このソースに、class名： modal-open　を追記してください。

＜追記後＞

<!-- カートボタン -->
<div class="item-btn-wrap modal-open">

（５）同じく「HTML」内

<!-- 問い合わせ -->

の前に、モーダルウィンドウのHTMLを追記（コピー＆ペースト）してください。

<!-- モーダルエリアここから -->
<section class="modal-area">
    <div class="modal-bg"></div>
    <div class="modal-wrapper">
        <div class="modalContents">
            <p>商品がカートに追加されました。</p>
            <ul class="modal-cart-btn">
                <li class="modal-cart">
                    <a href="<{$url.cart}>">カートを見る</a>
                </li>
                <li class="modal-order">
                    <a href="<{$cart.order_url}>">ご購入手続きへ進む</a>
                </li>
            </ul>
            <{if $amazonpay.is_enabled}>
                <div class="cart-amazon">
                    <{$amazonpay.button_html}>
                </div>
            <{/if}>
        </div>
        <div class="modal-close">
          ×
        </div>
    </div>
</section>
<!-- モーダルエリアここまで -->

（６）保存してください。

＜初期値のデザイン＞

＜モーダルウィンドウを追加＞

関連記事