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