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' %}
  15. {% block stylesheet %}
  16.     
  17. {% endblock %}
  19. {% block javascript %}
  20.     
  21. {% endblock javascript %}
  23. {% block main %}
  25.      <section class="product_slider_section">
  28.         <div class="slider-container">
  30.             {# メインスライド #}
  31.             <ul id="product_slider_section-slick">
  32.                 <!--BIB 100ppm-->
  33.                 <li class="slide-content">
  34.                     <a class="slide-content-inner" href="{{ url('product_detail', {'id': 10}) }}">
  35.                         <div class="slide-wrapper">
  36.                             <div class="img-box slide-box">
  37.                                 <img src="{{'img_path.slider.refill_bib_10l_100ppm'|trans}}" alt="{{ 'img_path.slider.refill_bib_10l_100ppm_alt_text'|trans }}">
  38.                             </div>
  39.                         </div>
  40.                         <div class="slider-text_content">
  41.                             <div class="slider-text_content_inner">
  42.                                 <h4 class="slider-text_cat">{{ 'front.block.product.category_100ppm'|trans }}</h4>
  43.                                 <h3 class="slider-text_title">{{ 'front.block.product.name.bib_100ppm'|trans }}</h3>
  44.                             </div>
  45.                         </div>
  46.                     </a>
  47.                 </li>
  48.                 <!--パウチ 100ppm-->
  49.                 <li class="slide-content">
  50.                     <a class="slide-content-inner" href="{{ url('product_detail', {'id': 41}) }}">
  51.                         <div class="slide-wrapper">
  52.                             <div class="img-box slide-box">
  53.                                 <img src="{{'img_path.slider.pouch_800ml_100ppm'|trans}}" alt="{{ 'img_path.slider.pouch_800ml_100ppm_alt_text'|trans }}">
  54.                             </div>
  55.                         </div>
  56.                         <div class="slider-text_content">
  57.                             <div class="slider-text_content_inner">
  58.                                 <h4 class="slider-text_cat">{{ 'front.block.product.category_100ppm'|trans }}</h4>
  59.                                 <h3 class="slider-text_title">{{ 'front.block.product.name.pouch_100ppm'|trans }}</h3>
  60.                             </div>
  61.                         </div>
  62.                     </a>
  63.                 </li>
  64.                 <!--スタンダードパック 100ppm-->
  65.                 <li class="slide-content">
  66.                     <a class="slide-content-inner" href="{{ url('product_detail', {'id': 11}) }}">
  67.                         <div class="slide-wrapper">
  68.                             <div class="img-box slide-box">
  69.                                 <img src="{{'img_path.slider.standard_pack'|trans}}" alt="{{ 'img_path.slider.standard_pack_alt_text'|trans }}">
  70.                             </div>
  71.                         </div>
  72.                         <div class="slider-text_content">
  73.                             <div class="slider-text_content_inner">
  74.                                 <h4 class="slider-text_cat">{{ 'front.block.product.category_100ppm'|trans }}</h4>
  75.                                 <h3 class="slider-text_title">{{ 'front.block.product.name.standard'|trans }}</h3>
  76.                             </div>
  77.                         </div>
  78.                     </a>
  79.                 </li>
  80.                 <!--補充パック 100ppm-->
  81.                 <li class="slide-content">
  82.                     <a class="slide-content-inner" href="{{ url('product_detail', {'id': 12}) }}">
  83.                         <div class="slide-wrapper">
  84.                             <div class="img-box slide-box">
  85.                                 <img src="{{'img_path.slider.refill_pack'|trans}}" alt="{{ 'img_path.slider.refill_pack_alt_text'|trans }}">
  86.                             </div>
  87.                         </div>
  88.                         <div class="slider-text_content">
  89.                             <div class="slider-text_content_inner">
  90.                                 <h4 class="slider-text_cat">{{ 'front.block.product.category_100ppm'|trans }}</h4>
  91.                                 <h3 class="slider-text_title">{{ 'front.block.product.name.replenishment'|trans }}</h3>
  92.                             </div>
  93.                         </div>
  94.                     </a>
  95.                 </li>
  96.                 <!--トリガーパック 100ppm-->
  97.                 <li class="slide-content">
  98.                     <a class="slide-content-inner" href="{{ url('product_detail', {'id': 13}) }}">
  99.                         <div class="slide-wrapper">
  100.                             <div class="img-box slide-box">
  101.                                 <img src="{{'img_path.slider.trigger_pack'|trans}}" alt="{{ 'img_path.slider.trigger_pack_alt_text'|trans }}">
  102.                             </div>
  103.                         </div>
  104.                         <div class="slider-text_content">
  105.                             <div class="slider-text_content_inner">
  106.                                 <h4 class="slider-text_cat">{{ 'front.block.product.category_100ppm'|trans }}</h4>
  107.                                 <h3 class="slider-text_title">{{ 'front.block.product.name.trigger'|trans }}</h3>
  108.                             </div>
  109.                         </div>
  110.                     </a>
  111.                 </li>
  112.                 <!--ミニボトルパック 100ppm-->
  113.                 <li class="slide-content">
  114.                     <a class="slide-content-inner" href="{{ url('product_detail', {'id': 14}) }}">
  115.                         <div class="slide-wrapper">
  116.                             <div class="img-box slide-box">
  117.                                 <img src="{{'img_path.slider.mini_bottle_pack'|trans}}" alt="{{ 'img_path.slider.mini_bottle_pack_alt_text'|trans }}">
  118.                             </div>
  119.                         </div>
  120.                         <div class="slider-text_content">
  121.                             <div class="slider-text_content_inner">
  122.                                 <h4 class="slider-text_cat">{{ 'front.block.product.category_100ppm'|trans }}</h4>
  123.                                 <h3 class="slider-text_title">{{ 'front.block.product.name.mini_bottle'|trans }}</h3>
  124.                             </div>
  125.                         </div>
  126.                     </a>
  127.                 </li>
  128.                 <!--BIB 200ppm-->
  129.                 <li class="slide-content">
  130.                     <a class="slide-content-inner" href="{{ url('product_detail', {'id': 19}) }}">
  131.                         <div class="slide-wrapper">
  132.                             <div class="img-box slide-box">
  133.                                 <img src="{{'img_path.slider.refill_bib_10l_200ppm'|trans}}" alt="{{ 'img_path.slider.refill_bib_10l_200ppm_alt_text'|trans }}">
  134.                             </div>
  135.                         </div>
  136.                         <div class="slider-text_content">
  137.                             <div class="slider-text_content_inner">
  138.                                 <h4 class="slider-text_cat">{{ 'front.block.product.category_200ppm'|trans }}</h4>
  139.                                 <h3 class="slider-text_title">{{ 'front.block.product.name.bib_200ppm'|trans }}</h3>
  140.                             </div>
  141.                         </div>
  142.                     </a>
  143.                 </li>
  144.                 <!--パウチ 200ppm-->
  145.                 <li class="slide-content">
  146.                     <a class="slide-content-inner" href="{{ url('product_detail', {'id': 39}) }}">
  147.                         <div class="slide-wrapper">
  148.                             <div class="img-box slide-box">
  149.                                 <img src="{{'img_path.slider.pouch_800ml_200ppm'|trans}}" alt="{{ 'img_path.slider.pouch_800ml_200ppm_alt_text'|trans }}">
  150.                             </div>
  151.                         </div>
  152.                         <div class="slider-text_content">
  153.                             <div class="slider-text_content_inner">
  154.                                 <h4 class="slider-text_cat">{{ 'front.block.product.category_200ppm'|trans }}</h4>
  155.                                 <h3 class="slider-text_title">{{ 'front.block.product.name.pouch_200ppm'|trans }}</h3>
  156.                             </div>
  157.                         </div>
  158.                     </a>
  159.                 </li>
  160.                 <!--プラスパック 200ppm-->
  161.                 <li class="slide-content">
  162.                     <a class="slide-content-inner" href="{{ url('product_detail', {'id': 15}) }}">
  163.                         <div class="slide-wrapper">
  164.                             <div class="img-box slide-box">
  165.                                 <img src="{{'img_path.slider.plus_pack'|trans}}" alt="{{ 'img_path.slider.plus_pack_alt_text'|trans }}">
  166.                             </div>
  167.                         </div>
  168.                         <div class="slider-text_content">
  169.                             <div class="slider-text_content_inner">
  170.                                 <h4 class="slider-text_cat">{{ 'front.block.product.category_200ppm'|trans }}</h4>
  171.                                 <h3 class="slider-text_title">{{ 'front.block.product.name.plus_pack'|trans }}</h3>
  172.                             </div>
  173.                         </div>
  174.                     </a>
  175.                 </li>
  176.             </ul>
  178.             {# サムネイル #}
  179.             <ul id="product_slider_section-thumbs">
  180.                 <!--BIB 100ppm-->
  181.                 <li class="slide-content">
  182.                     <div class="slide-content-inner">
  183.                         <div class="slide-wrapper">
  184.                             <div class="img-box slide-box">
  185.                                 <img src="{{'img_path.slider.refill_bib_10l_100ppm'|trans}}" alt="{{ 'img_path.slider.refill_bib_10l_100ppm_alt_text'|trans }}">
  186.                             </div>
  187.                         </div>
  188.                     </div>
  189.                 </li>
  190.                 <!--パウチ 100ppm-->
  191.                 <li class="slide-content">
  192.                     <div class="slide-content-inner">
  193.                         <div class="slide-wrapper">
  194.                             <div class="img-box slide-box">
  195.                                 <img src="{{'img_path.slider.pouch_800ml_100ppm'|trans}}" alt="{{ 'img_path.slider.pouch_800ml_100ppm_alt_text'|trans }}">
  196.                             </div>
  197.                         </div>
  198.                     </div>
  199.                 </li>
  200.                 <!--スタンダードパック 100ppm-->
  201.                 <li class="slide-content">
  202.                     <div class="slide-content-inner">
  203.                         <div class="slide-wrapper">
  204.                             <div class="img-box slide-box">
  205.                                 <img src="{{'img_path.slider.standard_pack'|trans}}" alt="{{ 'img_path.slider.standard_pack_alt_text'|trans }}">
  206.                             </div>
  207.                         </div>
  208.                     </div>
  209.                 </li>
  210.                 <!--補充パック 100ppm-->
  211.                 <li class="slide-content">
  212.                     <div class="slide-content-inner">
  213.                         <div class="slide-wrapper">
  214.                             <div class="img-box slide-box">
  215.                                 <img src="{{'img_path.slider.refill_pack'|trans}}" alt="{{ 'img_path.slider.refill_pack_alt_text'|trans }}">
  216.                             </div>
  217.                         </div>
  218.                     </div>
  219.                 </li>
  220.                 <!--トリガーパック 100ppm-->
  221.                 <li class="slide-content">
  222.                     <div class="slide-content-inner">
  223.                         <div class="slide-wrapper">
  224.                             <div class="img-box slide-box">
  225.                                 <img src="{{'img_path.slider.trigger_pack'|trans}}" alt="{{ 'img_path.slider.trigger_pack_alt_text'|trans }}">
  226.                             </div>
  227.                         </div>
  228.                     </div>
  229.                 </li>
  230.                 <!--ミニボトルパック 100ppm-->
  231.                 <li class="slide-content">
  232.                     <div class="slide-content-inner">
  233.                         <div class="slide-wrapper">
  234.                             <div class="img-box slide-box">
  235.                                 <img src="{{'img_path.slider.mini_bottle_pack'|trans}}" alt="{{ 'img_path.slider.mini_bottle_pack_alt_text'|trans }}">
  236.                             </div>
  237.                         </div>
  238.                     </div>
  239.                 </li>
  240.                 <!--BIB 200ppm-->
  241.                 <li class="slide-content">
  242.                     <div class="slide-content-inner">
  243.                         <div class="slide-wrapper">
  244.                             <div class="img-box slide-box">
  245.                                 <img src="{{'img_path.slider.refill_bib_10l_200ppm'|trans}}" alt="{{ 'img_path.slider.refill_bib_10l_200ppm_alt_text'|trans }}">
  246.                             </div>
  247.                         </div>
  248.                     </div>
  249.                 </li>
  250.                 <!--パウチ 200ppm-->
  251.                 <li class="slide-content">
  252.                     <div class="slide-content-inner">
  253.                         <div class="slide-wrapper">
  254.                             <div class="img-box slide-box">
  255.                                 <img src="{{'img_path.slider.pouch_800ml_200ppm'|trans}}" alt="{{ 'img_path.slider.pouch_800ml_200ppm_alt_text'|trans }}">
  256.                             </div>
  257.                         </div>
  258.                     </div>
  259.                 </li>
  260.                 <!--プラスパック 200ppm-->
  261.                 <li class="slide-content">
  262.                     <div class="slide-content-inner">
  263.                         <div class="slide-wrapper">
  264.                             <div class="img-box slide-box">
  265.                                 <img src="{{'img_path.slider.plus_pack'|trans}}" alt="{{ 'img_path.slider.plus_pack_alt_text'|trans }}">
  266.                             </div>
  267.                         </div>
  268.                     </div>
  269.                 </li>
  270.             </ul>
  271.         </div>
  272.     </section>
  273.     
  274.     <!--定期購入の方はこちらをチェック-->
  275.     <a href="{{ url('product_list') }}#cat_9" class="top_regular_order_section">
  276.         <p class="top_regular_order_section_text">{{ 'front.block.regular.nav.think_about'|trans }}</p>
  277.         <p class="top_regular_order_section_arrow_text">{{ 'front.block.regular.nav.check'|trans }}<i class="fas fa-arrow-right"></i></p>
  278.     </a>
  279.     {# 送料無料のポップアップ #}
  280.     <div class="popup_postage-free postage_popup_hide" id="popupElement">
  281.         <div class="popup_content_img">
  282.             <img src="{{'img_path.top.shipping_free'|trans}}" alt="{{'img_path.top.shipping_free_alt_text'|trans}}">
  283.             <button id="popupClose" class="popup_close" onclick="postagePopupClose()"><i class="fas fa-times-circle"></i></button>
  284.         </div>
  285.     </div>
  286.     {# クッキー用ライブラリ #}
  287.     <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
  289.     {# 送料無料のポップアップ制御 #}
  290.     <script>
  291.         let popupEl = document.getElementById('popupElement');
  293.         function postagePopupClose() {
  294.             popupEl.classList.add('postage_popup_hide');
  295.         }
  297.         function postagePopupshow() {
  298.             popupEl.classList.remove('postage_popup_hide');
  299.         }
  301.         $(function() {
  302.             const date = new Date();
  303.             date.setDate(date.getDate() + 1);
  304.             date.setHours(0, 0, 0);
  305.             if (Cookies.get('access_sample') == undefined) {
  306.                 Cookies.set('access_sample', 'access', { expires: date });
  307.                 setTimeout(postagePopupshow, 5000);
  308.             }
  309.         });
  310.     </script>
  312.     {# スライダー制御 #}
  313.     <script>
  314.     jQuery("#product_slider_section-slick").slick({
  315.         asNavFor: "#product_slider_section-thumbs",
  316.         infinite: true,
  317.         arrows: false,
  318.         
  319.     })
  320.     {# サムネイルスライダー制御 #}
  321.     jQuery("#product_slider_section-thumbs").slick({
  322.         slidesToShow: 4,
  323.         asNavFor: "#product_slider_section-slick",
  324.         infinite: true,
  325.         arrows: true,
  326.         prevArrow: '<div class="slide-arrow prev-arrow"><div class="arrow-wrap"></div><div>',
  327.         nextArrow:  '<div class="slide-arrow next-arrow"><div class="arrow-wrap"></div><div>',
  328.         responsive: [{
  329.             breakpoint: 1200,
  330.             settings: {
  331.                 slidesToShow: 3,
  332.             },
  333.         }, ],
  334.     })
  335.     {# サムネイルとメインスライドの連携処理 #}
  336.     jQuery("#product_slider_section-thumbs .slick-slide").on("click", function() {
  337.         let index = jQuery(this).attr("data-slick-index")
  338.         jQuery("#product_slider_section-slick").slick("slickGoTo", index)
  339.     })
  340.     </script>
  342. {% endblock %}