app/template/default/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'front_page' %}
  17. {% block javascript %}
  18.     <script>
  19.         $(function() {
  20.             $('.main_visual').slick({
  21.                 dots: true,
  22.                 arrows: false,
  23.                 autoplay: true,
  24.                 speed: 500,
  25.                 autoplaySpeed: 5000,
  26.             });
  27.         });
  28.     </script>
  30.     {# ポップアップ モーダル #}
  31.     <script>
  32.     document.addEventListener('DOMContentLoaded', function() {
  34.         const popup = document.getElementById('popup-layer');
  35.         if (!popup) return;
  37.         const content = popup.querySelector('.popup_content');
  38.         const closeBtn = popup.querySelector('.popup_close');
  40.         const currentTime = Date.now();
  41.         const hideUntil = parseInt(localStorage.getItem('popupHideUntil'), 10);
  43.         function openPopup() {
  44.             popup.classList.add('active');
  45.             document.body.classList.add('popup_open');
  46.         }
  48.         function closePopup() {
  49.             popup.classList.remove('active');
  50.             document.body.classList.remove('popup_open');
  52.             const currentDate = new Date();
  53.             const nextMidnight = new Date(
  54.                 currentDate.getFullYear(),
  55.                 currentDate.getMonth(),
  56.                 currentDate.getDate() + 30,//30日後の0時に再表示
  57.                 0, 0, 0, 0
  58.             );
  59.             localStorage.setItem('popupHideUntil', nextMidnight.getTime());
  60.         }
  62.         if (!hideUntil || currentTime > hideUntil) {
  63.             setTimeout(openPopup, 500);
  64.         }
  66.         closeBtn.addEventListener('click', closePopup);
  67.         popup.addEventListener('click', function(e) {
  68.             if (!content.contains(e.target)) closePopup();
  69.         });
  70.         document.addEventListener('keydown', function(e) {
  71.             if (e.key === 'Escape' && popup.classList.contains('active')) {
  72.             closePopup();
  73.             }
  74.         });
  75.     });
  76.     </script>
  77. {% endblock javascript %}
  79. {% block main %}
  80.     <div class="ec-sliderRole slide">
  81.         <div class="main_visual slide_img_wrap">
  82.             <div class="item slide_img">
  83.                 <img src="{{ asset('assets/img/top/slide21.jpg') }}" alt="スタッフトライアルセット" width="843" height="602" loading="lazy">
  84.             </div>
  85.             <div class="item slide_img">
  86.                 <a href="products/list?category_id=127">
  87.                     <img src="{{ asset('assets/img/top/slide20.jpg') }}" alt="ナノバブルキャンペーン" width="914" height="861" loading="lazy">
  88.                 </a>
  89.             </div>
  90.             <div class="item slide_img">
  91.                 <a href="products/list?category_id=128">
  92.                     <img src="{{ asset('assets/img/top/slide19.jpg') }}" alt="nyu 販促キャンペーン" width="670" height="723" loading="lazy">
  93.                 </a>
  94.             </div>
  95.             <div class="item slide_img">
  96.                 <a href="products/list?category_id=123">
  97.                     <img src="{{ asset('assets/img/top/slide18.jpg') }}" alt="R-αリポ酸・スルフォラファン　導入記念企画" width="549" height="551" loading="lazy">
  98.                 </a>
  99.             </div>
  100.             <div class="item slide_img">
  101.                 <a href="products/list?category_id=112">
  102.                     <img src="{{ asset('assets/img/top/slide15.jpg') }}" alt="水素ガス生成器リタエアー" width="1191" height="680" loading="lazy">
  103.                 </a>
  104.             </div>
  105.         </div>
  106.     </div>
  108.     <div class="youtube">
  109.         <iframe width="560" height="315" src="https://www.youtube.com/embed/xP9fOOX0gVE?si=cuZxOmby7a3uSniC" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  110.     </div>
  111.     <a href="products/detail/505" class="block mb02 mr_auto ml_auto" style="width:max-content;">
  112.         <img src="https://oneconcept.jp/html/upload/save_image/0207152236_6986da2c8e248.png" alt="【数量限定】ミニキュア エクセレント" class="block" width="250" height="250">
  113.     </a>
  115.     <a href="https://oneconcept.jp/user_data/haircolor-simulation" class="block text-center mb01 mr_auto ml_auto" style="max-width:720px;">
  116.         <img src="{{ asset('assets/img/top/banner06_2.png') }}" alt="こんなにコストカットできるの！？気になる原価シミュレーションを試してみよう" width="1350" height="675">
  117.     </a>
  119.     {# ポップアップ モーダル #}
  120.     <div id="popup-layer" class="popup_layer">
  121.         <div class="popup_content">
  122.             <button type="button" class="popup_close">×</button>
  123.             <a href="products/list?category_id=114" style="display:block; max-width:600px; margin:atuo;">
  124.                 <img src="{{ asset('assets/img/top/popup01.jpg') }}" alt="UVインナーケア BeHAKU plus11+1 早めに始める！飲む日焼け止め" width="956" height="1200" class="block mr_auto ml_auto">
  125.             </a>
  126.         </div>
  127.     </div>
  128. {% endblock %}