https://theshopyohjiyamamoto.jp/js/coupon_store.js

1var ecblib = ecblib || {};
2ecblib.goods_ajax_bookmark = ecblib.goods_ajax_bookmark || {};
3
4document.addEventListener('DOMContentLoaded',function() {
5
6  // 現在のURLを取得
7  const url = window.location.href;
8
9  // API叩く処理
10  function sendData(event) {
11    // 送信ボタンの画面遷移を無効
12    event.preventDefault();
13
14    // フォームの内容を送って返ってきた値を処理する
15    const form = document.getElementById('couponusestoreform');
16    const formData = new FormData(form);
17    const messageEl = form.getElementsByClassName('message')[0];
18
19    fetch(ecblib.sys.wwwroot + '/shop/customer/couponusestore.aspx', {
20      method: 'POST',
21      body: formData
22    })
23      .then(response => response.json())
24      .then(data => {
25        if(data.status == "success"){
26          // 成功時は他の要素を非表示にして完了表示
27          form.getElementsByClassName('coupon_ttl')[0].style.display = 'none';
28          form.getElementsByClassName('coupon_name')[0].style.display = 'none';
29          form.getElementsByClassName('coupon_code_label')[0].style.display = 'none';
30          form.getElementsByClassName('coupon_code')[0].style.display = 'none';
31          form.getElementsByClassName('coupon_conditions')[0].style.display = 'none';
32          form.querySelector('input[name="store"]').style.display = 'none';
33          document.getElementById('couponusestoreformsubmit').style.display = 'none';
34          jQuery('.coupon_modal_close').css('display', 'none');
35          form.getElementsByClassName('info_message')[0].style.display = 'none';
36          form.getElementsByClassName('coupon_close_span')[0].style.display = 'flex';
37          jQuery('.coupon_close').attr('href', ecblib.sys.wwwroot + '/shop/customer/coupon.aspx');
38          
39          // 成功時はメッセージを表示しない
40          messageEl.textContent = data.message;
41          messageEl.style.display = 'block';
42          messageEl.style.color = '#000';
43        } else {
44          // エラー時のみメッセージを表示
45          messageEl.textContent = data.message;
46          messageEl.style.display = 'block';
47        }
48      })
49      .catch(error => {
50        // エラー時のメッセージ表示
51        messageEl.textContent = 'エラーが発生しました。もう一度お試しください。';
52        messageEl.style.display = 'block';
53        console.error(error);
54      });
55  }
56
57  jQuery(window).load(function () {
58
59    const modalHtml = `
60    <div class="modal_inner">
61      <div class="modal_background"></div>
62      <div class="modal_content">
63        <div class="coupon_modal_close"></div>
64        <form id="couponusestoreform">
65          <div class="coupon_ttl">本クーポンを使用する場合は、店舗スタッフに画面をご提示ください。</div>
66          
67          <!-- クーポン名 -->
68          <div class="coupon_name"></div>
69          
70          <!-- クーポンコード -->
71          <div class="coupon_code_label">クーポンコード</div>
72          <div class="coupon_code"></div>
73          <input type="hidden" name="coupon_code">
74          
75          <!-- クーポン詳細（利用条件） -->
76          <ul class="coupon_conditions">
77          </ul>
78          
79          <!-- 注意書き -->
80          <div class="info_message">※誤操作により使用済となった場合でも、クーポンの再発行はできません。</div>
81          
82          <!-- 店舗コード入力 -->
83          <input type="text" name="store" placeholder="店舗コードを入力">
84          
85          <!-- エラーメッセージ（通常は非表示） -->
86          <div class="message" style="display: none;"></div>
87          
88          <!-- ボタン -->
89          <button type="submit" id="couponusestoreformsubmit">使用する</button>
90          <div class="coupon_close_span" style="display:none">
91            <a class="coupon_close">閉じる</a>
92          </div>
93        </form>
94      </div>
95    </div>`;
96
97    jQuery("body").append(modalHtml);
98    jQuery('input[name="crsirefo_hidden"]').clone().appendTo(".modal_content form");
99
100    jQuery('.js_use_coupon').on("click", function () {
101      if(jQuery(".modal_inner").css('display') == 'none'){
102        const item = jQuery(this).closest('.couponlist_item');
103        const code = item.find(".couponlist_misc .item:first-child .cont").text().trim();
104        const name = item.find(".couponlist_head").text().trim();
105        

106        // クーポン詳細を配列として取得
107        const conditions = item.find(".couponlist_misc .item:last-child .cont ul li").map(function() {
108          return jQuery(this).text().trim();
109        }).get();
110
111        // 情報をモーダルにセット
112        jQuery('.coupon_name').text(name);
113        jQuery('.coupon_code').text(code);
114        jQuery('input[name="coupon_code"]').val(code);
115        
116        // クーポン詳細をリストとして追加
117        const conditionsList = jQuery('.coupon_conditions');
118        conditionsList.empty();
119        conditions.forEach(condition => {
120          conditionsList.append(`<li>${condition}</li>`);
121        });
122
123        jQuery(".modal_inner").fadeIn();
124        jQuery("body").css({ "overflow-y": "hidden" });
125      }
126
127      // 送信ボタンIDを取得
128      const submitButton = document.getElementById('couponusestoreformsubmit');
129
130      // 送信ボタン押したらデータ送信
131      submitButton.addEventListener('click', sendData);
132    });
133
134    // モーダルを閉じる関数
135    function closeModal() {
136      jQuery(".modal_inner").fadeOut(400, function() {
137        // フォームをリセット
138        const form = document.getElementById('couponusestoreform');
139        form.reset();
140        
141        // 各要素を初期状態に戻す
142        jQuery('input[name="store"]').val("");
143        jQuery(".modal_content .message").hide();
144        jQuery(".modal_content .coupon_ttl").show();
145        jQuery(".modal_content .coupon_name").show();
146        jQuery(".modal_content .coupon_code_label").show();
147        jQuery(".modal_content .coupon_code").show();
148        jQuery(".modal_content .coupon_conditions").show();
149        jQuery(".modal_content .info_message").show();
150        jQuery('input[name="store"]').show();
151        jQuery("#couponusestoreformsubmit").show();
152        jQuery(".modal_content .coupon_close_span").hide();
153        jQuery(".coupon_modal_close").show();
154        
155        // テキストコンテンツをクリア
156        jQuery(".modal_content .coupon_name").text("");
157        jQuery(".modal_content .coupon_code").text("");
158        jQuery(".modal_content .coupon_conditions").empty();
159        jQuery(".modal_content .message").text("");
160      });
161      jQuery("body").css({ "overflow-y": "scroll" });
162    }
163
164    // バツボタンクリックでモーダルを閉じる
165    jQuery(document).on("click", ".coupon_modal_close", closeModal);
166
167    // 背景クリックでモーダルを閉じる
168    jQuery(document).on("click", ".modal_background", closeModal);
169
170    // モーダルコンテンツ内のクリックはモーダルを閉じないようにする
171    jQuery(document).on("click", ".modal_content", function(e) {
172      e.stopPropagation();
173    });
174
175  });
176
177});