app/template/default/Block/myModal.twig line 1

Open in your IDE?
  1. {# 自動表示モーダルブロック #}
  2. <div id="ecAutoModal" class="ec-modal-overlay">
  3.     <div class="ec-modal-content">
  4.         <button class="ec-modal-close" onclick="ECAutoModal.close()" aria-label="モーダルを閉じる"></button>
  5.         <a href="https://www.instagram.com/iseyabread/" target="_blank" rel="noopener noreferrer">
  6.             <img src="{{ asset('/html/user_data/ContentImg/instagram.png') }}" 
  7.                  alt="キャンペーン画像" 
  8.                  class="ec-modal-image" />
  9.         </a>
  10.     </div>
  11. </div>
  13. <script>
  14.         (function() {
  15.             'use strict';
  16.             
  18.             const CONFIG = {
  19.                 MODAL_ID: 'ecAutoModal',
  20.                 AUTO_SHOW_DELAY: 2500, // 2.5秒
  21.                 STORAGE_KEY: 'ecAutoModalLastClosed',
  22.                 SUPPRESS_DURATION: 5 * 60 * 1000 // 5分（ミリ秒）
  23.             };
  24.             
  26.             const modal = document.getElementById(CONFIG.MODAL_ID);
  27.             let isModalOpen = false;
  28.             let autoShowTimer = null;
  29.             
  31.             function getLastClosedTime() {
  32.                 try {
  33.                     const timestamp = localStorage.getItem(CONFIG.STORAGE_KEY);
  34.                     return timestamp ? parseInt(timestamp, 10) : 0;
  35.                 } catch (e) {
  36.                     // localStorageが使えない場合はcookieで代用
  37.                     const match = document.cookie.match(new RegExp(CONFIG.STORAGE_KEY + '=([^;]+)'));
  38.                     return match ? parseInt(match[1], 10) : 0;
  39.                 }
  40.             }
  41.             
  42.             // 最後に閉じた時刻を保存
  43.             function setLastClosedTime() {
  44.                 const now = Date.now();
  45.                 try {
  46.                     localStorage.setItem(CONFIG.STORAGE_KEY, now.toString());
  47.                 } catch (e) {
  48.                     // localStorageが使えない場合はcookieで代用（5分有効）
  49.                     const expireTime = new Date(now + CONFIG.SUPPRESS_DURATION);
  50.                     document.cookie = `${CONFIG.STORAGE_KEY}=${now}; expires=${expireTime.toUTCString()}; path=/`;
  51.                 }
  52.             }
  53.             
  54.             // モーダル表示を抑制するかチェック
  55.             function shouldSuppressModal() {
  56.                 const lastClosed = getLastClosedTime();
  57.                 if (lastClosed === 0) return false;
  58.                 
  59.                 const now = Date.now();
  60.                 const timeSinceLastClosed = now - lastClosed;
  61.                 return timeSinceLastClosed < CONFIG.SUPPRESS_DURATION;
  62.             }
  63.             
  64.             /**
  65.              * モーダルを開く関数
  66.              */
  67.             function openModal() {
  68.                 if (!modal || shouldSuppressModal()) return;
  69.                 
  70.                 modal.classList.add('active');
  71.                 isModalOpen = true;
  72.                 
  73.                 dispatchModalEvent('Open');
  74.             }
  75.             
  76.             /**
  77.              * モーダルを閉じる関数
  78.              */
  79.             function closeModal() {
  80.                 if (!modal) return;
  81.                 
  82.                 modal.classList.remove('active');
  83.                 isModalOpen = false;
  84.                 
  85.                 // 閉じた時刻を保存
  86.                 setLastClosedTime();
  87.                 
  88.                 // タイマーをクリア
  89.                 if (autoShowTimer) {
  90.                     clearTimeout(autoShowTimer);
  91.                     autoShowTimer = null;
  92.                 }
  93.                 
  94.                 // カスタムイベント発火
  95.                 dispatchModalEvent('Close');
  96.             }
  97.             
  98.             /**
  99.              * カスタムイベント発火
  100.              */
  101.             function dispatchModalEvent(eventType) {
  102.                 const event = new CustomEvent('ecAutoModal' + eventType, {
  103.                     detail: { 
  104.                         isOpen: isModalOpen,
  105.                         modalId: CONFIG.MODAL_ID
  106.                     }
  107.                 });
  108.                 document.dispatchEvent(event);
  109.             }
  110.             
  111.             /**
  112.              * 自動表示タイマーの開始
  113.              */
  114.             function startAutoShowTimer() {
  115.                 if (shouldSuppressModal()) {
  116.                     console.log('EC Auto Modal: Suppressed due to recent closure');
  117.                     return;
  118.                 }
  119.                 
  120.                 autoShowTimer = setTimeout(function() {
  121.                     openModal();
  122.                 }, CONFIG.AUTO_SHOW_DELAY);
  123.             }
  124.             
  126.             if (modal) {
  127.                 modal.addEventListener('click', function(event) {
  128.                     // モーダル外をクリックしても閉じない
  129.                     // 必要に応じてコメントアウトを外す
  130.                     // if (event.target === modal) {
  131.                     //     closeModal();
  132.                     // }
  133.                 });
  134.             }
  135.             
  136.             /**
  137.              * 初期化関数
  138.              */
  139.             function init() {
  140.                 if (!modal) {
  141.                     console.warn('EC Auto Modal: Modal element not found');
  142.                     return;
  143.                 }
  144.                 
  145.                 // ページが完全に読み込まれてからタイマー開始
  146.                 if (document.readyState === 'loading') {
  147.                     document.addEventListener('DOMContentLoaded', startAutoShowTimer);
  148.                 } else {
  149.                     startAutoShowTimer();
  150.                 }
  151.             }
  152.             
  153.             // グローバルオブジェクトとして公開
  154.             window.ECAutoModal = {
  155.                 open: openModal,
  156.                 close: closeModal,
  157.                 isOpen: function() {
  158.                     return isModalOpen;
  159.                 },
  160.                 reset: function() {
  161.                     // 抑制状態をリセット（デバッグ用）
  162.                     try {
  163.                         localStorage.removeItem(CONFIG.STORAGE_KEY);
  164.                     } catch (e) {
  165.                         document.cookie = `${CONFIG.STORAGE_KEY}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
  166.                     }
  167.                 },
  168.                 // 残り抑制時間を取得（デバッグ用）
  169.                 getRemainingSuppressionTime: function() {
  170.                     const lastClosed = getLastClosedTime();
  171.                     if (lastClosed === 0) return 0;
  172.                     
  173.                     const now = Date.now();
  174.                     const elapsed = now - lastClosed;
  175.                     const remaining = CONFIG.SUPPRESS_DURATION - elapsed;
  176.                     return Math.max(0, remaining);
  177.                 },
  178.                 config: CONFIG
  179.             };
  180.             
  181.             // 初期化実行
  182.             init();
  183.             
  184.         })();
  185.         
  186.         /**
  187.          * EC-CUBE Twig用の初期化関数
  188.          * 使用例: initECAutoModal('{{ asset("assets/img/campaign.jpg") }}')
  189.          */
  190.         function initECAutoModal(imageUrl, customDelay) {
  191.             const modalImage = document.querySelector('#ecAutoModal .ec-modal-image');
  192.             if (modalImage && imageUrl) {
  193.                 modalImage.src = imageUrl;
  194.                 modalImage.alt = 'キャンペーン画像';
  195.             }
  196.             
  197.             // カスタム遅延時間の設定
  198.             if (customDelay && typeof customDelay === 'number') {
  199.                 ECAutoModal.config.AUTO_SHOW_DELAY = customDelay;
  200.             }
  201.         }
  202.         
  203.         // イベントリスナーの例
  204.         document.addEventListener('ecAutoModalOpen', function(e) {
  205.             console.log('EC Auto Modal opened:', e.detail);
  206.         });
  207.         
  208.         document.addEventListener('ecAutoModalClose', function(e) {
  209.             console.log('EC Auto Modal closed:', e.detail);
  210.         });
  211.   </script>
  213.     <style>
  214.         /* モーダルのベーススタイル */
  215.         .ec-modal-overlay {
  216.             position: fixed;
  217.             top: 0;
  218.             left: 0;
  219.             width: 100%;
  220.             height: 100%;
  221.             background-color: rgba(0, 0, 0, 0.7);
  222.             display: flex;
  223.             justify-content: center;
  224.             align-items: center;
  225.             z-index: 9999;
  226.             opacity: 0;
  227.             visibility: hidden;
  228.             transition: all 0.3s ease;
  229.         }
  231.         .ec-modal-overlay.active {
  232.             opacity: 1;
  233.             visibility: visible;
  234.         }
  236.         .ec-modal-content {
  237.             position: relative;
  238.             max-width: 500px;
  239.             max-height: auto;
  240.             background: transparent;
  241.             border-radius: 15px;
  242.             overflow: hidden;
  243.             transform: scale(0.8);
  244.             transition: transform 0.3s ease;
  245.             box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  246.         }
  248.         .ec-modal-overlay.active .ec-modal-content {
  249.             transform: scale(1);
  250.         }
  252.         .ec-modal-image {
  253.             width: 100%;
  254.             height: auto;
  255.             display: block;
  256.             border-radius: 15px;
  257.         }
  259.         /* 閉じるボタン */
  260.         .ec-modal-close {
  261.             position: absolute;
  262.             top: 15px;
  263.             right: 15px;
  264.             width: 40px;
  265.             height: 40px;
  266.             background-color: rgba(0, 0, 0, 0.8);
  267.             border: none;
  268.             border-radius: 50%;
  269.             cursor: pointer;
  270.             display: flex;
  271.             justify-content: center;
  272.             align-items: center;
  273.             transition: all 0.3s ease;
  274.             z-index: 10001;
  275.             color: white;
  276.             font-size: 20px;
  277.             font-weight: bold;
  278.         }
  280.         .ec-modal-close:hover {
  281.             background-color: rgba(255, 0, 0, 0.8);
  282.             transform: scale(1.1);
  283.         }
  285.         .ec-modal-close:before {
  286.             content: "×";
  287.             line-height: 1;
  288.         }
  290.         /* レスポンシブ対応 */
  291.         @media (max-width: 768px) {
  292.             .ec-modal-content {
  293.                 max-width: 75%;
  294.                 max-height: 75%;
  295.             }
  296.             
  297.             .ec-modal-close {
  298.                 width: 35px;
  299.                 height: 35px;
  300.                 top: 10px;
  301.                 right: 10px;
  302.                 font-size: 18px;
  303.             }
  304.         }
  306.         @media (max-width: 480px) {
  307.             .ec-modal-content {
  308.                 max-width: 85%;
  309.                 max-height: 85%;
  310.             }
  311.         }
  312. </style>