「カートに入れる」ボタンに画像ポップアップを表示させたい(Makeshop)

前提・実現したいこと：「カートに入れる」ボタンに画像ポップアップを表示させたい(Makeshop)

こんにちは。
自社ECサイトを運営しているものです。
商品カートの「カートに入れる」ボタンを押した際に商品が追加されるのと同時に、
画像ポップアップを表示し、カートの位置をお客様にわかりやすくしたいと考えております。

以下コードを打ち込んでみたのですが、
カートに入れるボタンの範囲のみ、ポップアップが表示されません。
（カートに入れるボタンの周りをクリックすれば、ポップアップが表示されます）

ボタンをクリックした際に、リンク設定をしてある場合
ポップアップを表示することはできないでしょうか？

警告アラートが出るように設定はできましたが、
文字だけの説明ではどうしても伝わりにくく、画像も表示したいと考えています。

まだコーディングを学び始めて少しばかりなので、
皆様のお力をお貸しいただけると幸いです。

ご確認よろしくお願い致します。

該当のソースコード：HTML

<!doctype html>
<html>
	

<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>

<link rel="stylesheet" type="text/css" href="gronline.css">
</head>

<body>
	
	<div class="pop-box">
  <label for="popup-on"><label for="popup-on">
	  <div class="btn-area">
		  <a href="<{$item.cart_entry_url}>" class="btn btn-cart">カートに入れる</a></div></label>
  <input type="checkbox" id="popup-on">
  <div class="popup">
    <label for="popup-on" class="icon-close">×</label>
    <div class="popup-content">
       <!-- ポップアップの中身 -->
      <img src="cart_popup.jpg" alt="" class="layer-img">
        <!-- ./ポップアップの中身　ここまで -->
    </div>
    <label for="popup-on"><div class="btn-close">閉じる</div></label>
  </div>
</div>
</body>
</html>

該当のソースコード：css

@charset "UTF-8";
/* CSS Document */

/* 全体設定 */
* {
  box-sizing: border-box;
  }

/* ポップアップウインドウの設定 */
.popup {
  background-color: #efefef;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 70vw;
  height: 55vw;
  overflow-y: scroll;
}
/* チェックボックスの初期設定 */
#popup-on{
  display: none;
}
/* チェックされたらポップアップウインドウを開く */
#popup-on:checked + .popup{
  display: block;
}

/* 閉じるアイコン（右上） */
.icon-close{
  background: #000;
  color: #fff;
  font-size: 30px;
  padding: 0 10px;
  position: absolute;
  right: 0;
}

/* 閉じるボタン */
.btn-close{
  background: #000;
  border-radius: 10px;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  margin: 10px auto;
  width: 95%;
  text-align: center;
}

/* 開くボタン */
.btn-area{
  background: #fff;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  margin: 10px auto;
  width: 95%;
  text-align: center;
}

/* ポップアップの内容 */
.popup-content{
  margin: 40px auto 40px auto;
  width: 90%;
  text-align: center;
}
/*カートボタン*/
.btn-cart {
    margin: 5vh 0;
    background-color: #ed7300;
    color: #fff;
	text-decoration: none;
}
.btn {
    width: 100%;
    max-width: 460px;
    height: 50px;
    line-height: 50px;
    background-color: #ed7300;
    display: inline-block;
    text-align: center;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Lhankor_Mhy

2021/04/06 10:27

ポップアップを表示して、確認ボタンを押したらリンク先に飛ぶ、みたいなことを想定されていますか？

jam0425

2021/04/06 23:03

ご覧くださりありがとうございます。説明が下手で申し訳ないです。 ECショッピングサイトではよくあるかと思うのですが、カートに入れるボタンを押した際に「カートに商品が入りました」というポップアップが表示されることがあります。ほとんどがテキストベースで表示されると思うのですが、そちらに画像がポップアップとして表示されるような設定をしたいです。理由としては画像を表示することで、視覚的にカートの位置をお客様に伝えられるようにするためです。そのため、カートに入れるボタンを押した際に確認ボタンが表示され、そこからカートページに飛ぶように設定するのではなく、カート位置の確認のためにポップアップを表示させたいと考えております。お忙しいところ恐縮ですがご確認よろしくお願い致します。

Lhankor_Mhy

2021/04/07 00:36

とすると、リンク先に移動する必要はない、ということでしょうか？

jam0425

2021/04/07 01:40

早急にご返信いただきありがとうございます。はい。 a href="<{$item.cart_entry_url}>" 上記リンクは設定しておりますが、カートに商品が追加されるリンクになります。移動は必要なく、ボタンを押した際に達成したいこととしては・カートに商品が追加される・画像のポップアップが表示される上記の２点になります。ご確認よろしくお願い致します。

Lhankor_Mhy

2021/04/07 02:00

それは、Makeshop側でそのような機能が用意されていない限り難しいと思います。 Makeshop様のサポートにお尋ねになることをおすすめします。

Lhankor_Mhy

2021/04/07 02:02

JavaScriptを使ってXHRでアクセスすれば、ひょっとしたら……と思わないでもないです。

jam0425

2021/04/07 02:38

ご対応ありがとうございます！メイクショップ側での機能はなく、お問い合わせもさせていただきましたが設置に関するご回答いただけませんでした。今の実力では実装は難しいかと思われますので、別案を検討させていただきます。わかりにくいご質問にもかかわらずご回答いただきまして、誠にありがとうございます！

Lhankor_Mhy

2021/04/07 02:43

お役に立てず、残念です。