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.     <style>
  17.         .slider {
  18.             display: none;
  19.         }
  20.         .slider.slick-initialized {
  21.             display: block;
  22.         }
  24.         .slick-slide {
  25.             margin: 0 8px;
  26.         }
  27.         .slick-slider {
  28.             margin-bottom: 30px;
  29.         }
  31.         .slick-dots {
  32.             position: absolute;
  33.             bottom: -45px;
  34.             display: block;
  35.             width: 100%;
  36.             padding: 0;
  37.             list-style: none;
  38.             text-align: center;
  39.         }
  41.         .slick-dots li {
  42.             position: relative;
  43.             display: inline-block;
  44.             width: 20px;
  45.             height: 20px;
  46.             margin: 0 5px;
  47.             padding: 0;
  49.             cursor: pointer;
  50.         }
  52.         .slick-dots li button {
  53.             font-size: 0;
  54.             line-height: 0;
  55.             display: block;
  56.             width: 20px;
  57.             height: 20px;
  58.             padding: 5px;
  59.             cursor: pointer;
  60.             color: transparent;
  61.             border: 0;
  62.             outline: none;
  63.             background: transparent;
  64.         }
  66.         .slick-dots li button:hover,
  67.         .slick-dots li button:focus {
  68.             outline: none;
  69.         }
  71.         .slick-dots li button:hover:before,
  72.         .slick-dots li button:focus:before {
  73.             opacity: 1;
  74.         }
  76.         .slick-dots li button:before {
  77.             content: " ";
  78.             line-height: 20px;
  79.             position: absolute;
  80.             top: 0;
  81.             left: 0;
  82.             width: 12px;
  83.             height: 12px;
  84.             text-align: center;
  85.             opacity: .25;
  86.             background-color: black;
  87.             border-radius: 50%;
  89.         }
  91.         .slick-dots li.slick-active button:before {
  92.             opacity: .75;
  93.             background-color: black;
  94.         }
  96.         .slick-dots li button.thumbnail img {
  97.             width: 0;
  98.             height: 0;
  99.         }
  100.         .slick-wrapper {
  101.             overflow-x: hidden;
  102.             padding-bottom: 30px;
  103.         }
  104.         @media (min-width: 768px) {
  105.             .slick-wrapper {
  106.                 height: 378px;
  107.             }
  108.         }
  109.         .main_visual {
  110.             margin-top: 18px;
  111.         }
  113.         .featured {
  114.             padding: 0 20px;
  115.         }
  117.         .featured-divider {
  118.             background: var(--border-gray);
  119.             margin: 12px 0;
  120.         }
  122.         .featured-item {
  123.             display: flex;
  124.             align-items: center;
  125.             gap: 16px;
  126.             padding: 0 20px;
  127.         }
  129.         .featured-item__label {
  130.             font-size: 16px;
  131.             font-weight: 500;
  132.             line-height: 1.2;
  133.         }
  135.         .featured-item__text {
  136.             color: var(--primary-red);
  137.             font-size: 26px;
  138.             font-weight: 700;
  139.             line-height: 1.2;
  140.             margin-top: 8px;
  141.         }
  144.     </style>
  145. {% endblock %}
  150. {% block main %}
  151.     <div class="page-content-root">
  152.         {{ include('Block/recommend_list.twig', {label: '当店のイチオシ！', category_id: 32}) }}
  153.         <div class="d-block d-sm-none">
  154.             <div class="featured">
  155.                 <div class="featured-item">
  156.                     <svg width="86" height="86" viewBox="0 0 86 86" fill="none" xmlns="http://www.w3.org/2000/svg">
  157.                         <circle cx="43" cy="43" r="41.925" stroke="#CF0800" stroke-width="2.15"/>
  158.                         <path d="M61 52.2437V33.7562C60.9986 33.4892 60.9267 33.2272 60.7918 32.9968C60.6568 32.7664 60.4635 32.5756 60.2312 32.4437L43.7312 23.1625C43.5089 23.0341 43.2567 22.9666 43 22.9666C42.7433 22.9666 42.4911 23.0341 42.2687 23.1625L25.7687 32.4437C25.5365 32.5756 25.3432 32.7664 25.2082 32.9968C25.0733 33.2272 25.0014 33.4892 25 33.7562V52.2437C25.0014 52.5108 25.0733 52.7727 25.2082 53.0032C25.3432 53.2336 25.5365 53.4244 25.7687 53.5562L42.2687 62.8375C42.4911 62.9659 42.7433 63.0334 43 63.0334C43.2567 63.0334 43.5089 62.9659 43.7312 62.8375L60.2312 53.5562C60.4635 53.4244 60.6568 53.2336 60.7918 53.0032C60.9267 52.7727 60.9986 52.5108 61 52.2437Z" stroke="#CF0800" stroke-width="2.48276" stroke-linecap="round" stroke-linejoin="round"/>
  159.                         <path d="M52.1875 47.5938V37.8438L34 27.8125" stroke="#CF0800" stroke-width="2.48276" stroke-linecap="round" stroke-linejoin="round"/>
  160.                         <path d="M60.7936 32.9874L43.1686 42.9999L25.2061 32.9874" stroke="#CF0800" stroke-width="2.48276" stroke-linecap="round" stroke-linejoin="round"/>
  161.                         <path d="M43.1687 43L43 63.025" stroke="#CF0800" stroke-width="2.48276" stroke-linecap="round" stroke-linejoin="round"/>
  162.                     </svg>
  163.                         
  164.                     <div>
  165.                         <p class="featured-item__label">9,800円以上のご購入で</p>
  166.                         <p class="featured-item__text">送料無料!</p>
  167.                     </div>
  168.                 </div>
  169.                 <hr class="featured-divider">
  170.                 <div class="featured-item">
  171.                     <svg width="86" height="86" viewBox="0 0 86 86" fill="none" xmlns="http://www.w3.org/2000/svg">
  172.                         <circle cx="43" cy="43" r="41.925" stroke="#CF0800" stroke-width="2.15"/>
  173.                         <g clip-path="url(#clip0_535_8111)">
  174.                         <path d="M52 34H59.9875C60.2864 33.9981 60.5788 34.0866 60.8264 34.2539C61.0741 34.4212 61.2653 34.6595 61.375 34.9375L64 41.5" stroke="#CF0800" stroke-width="2.48276" stroke-linecap="round" stroke-linejoin="round"/>
  175.                         <path d="M22 46H52" stroke="#CF0800" stroke-width="2.48276" stroke-linecap="round" stroke-linejoin="round"/>
  176.                         <path d="M54.25 59.5C56.7353 59.5 58.75 57.4853 58.75 55C58.75 52.5147 56.7353 50.5 54.25 50.5C51.7647 50.5 49.75 52.5147 49.75 55C49.75 57.4853 51.7647 59.5 54.25 59.5Z" stroke="#CF0800" stroke-width="2.48276" stroke-miterlimit="10"/>
  177.                         <path d="M31.75 59.5C34.2353 59.5 36.25 57.4853 36.25 55C36.25 52.5147 34.2353 50.5 31.75 50.5C29.2647 50.5 27.25 52.5147 27.25 55C27.25 57.4853 29.2647 59.5 31.75 59.5Z" stroke="#CF0800" stroke-width="2.48276" stroke-miterlimit="10"/>
  178.                         <path d="M49.75 55H36.25" stroke="#CF0800" stroke-width="2.48276" stroke-linecap="round" stroke-linejoin="round"/>
  179.                         <path d="M27.25 55H23.5C23.1022 55 22.7206 54.842 22.4393 54.5607C22.158 54.2794 22 53.8978 22 53.5V32.5C22 32.1022 22.158 31.7206 22.4393 31.4393C22.7206 31.158 23.1022 31 23.5 31H52V51.1" stroke="#CF0800" stroke-width="2.48276" stroke-linecap="round" stroke-linejoin="round"/>
  180.                         <path d="M52 41.5H64V53.5C64 53.8978 63.842 54.2794 63.5607 54.5607C63.2794 54.842 62.8978 55 62.5 55H58.75" stroke="#CF0800" stroke-width="2.48276" stroke-linecap="round" stroke-linejoin="round"/>
  181.                         </g>
  182.                         <defs>
  183.                         <clipPath id="clip0_535_8111">
  184.                         <rect width="48" height="48" fill="white" transform="translate(19 19)"/>
  185.                         </clipPath>
  186.                         </defs>
  187.                     </svg>                        
  188.                     <div>
  189.                         <p class="featured-item__label">12時までのご購入で</p>
  190.                         <p class="featured-item__text">最短翌日お届け！</p>
  191.                     </div>
  192.                 </div>
  193.             </div>
  194.         </div>
  196.         <div class="campaign-banner">
  197.             <a href ="https://denzai-bluewood.com/products/list?name=%E6%B3%95%E4%BA%BA%E9%99%90%E5%AE%9A%E3%80%80%E6%9C%9F%E9%96%93%E9%99%90%E5%AE%9A%E3%80%80%E3%83%91%E3%83%8A%E3%82%BD%E3%83%8B%E3%83%83%E3%82%AF">
  198.                 <picture>
  199.                     <source
  200.                         srcset="{{ asset('assets/img/large-banners/large-banner-panasonic-md.png', 'user_data') }}"
  201.                         media="(min-width: 768px)"
  202.                         width="900"
  203.                         height="184"
  204.                     />
  205.                     <source
  206.                         srcset="{{ asset('assets/img/large-banners/large-banner-panasonic.png', 'user_data') }}"
  207.                         media="(min-width: 320px)"
  208.                         width="350"
  209.                         height="153"
  210.                     />
  211.                     <img src="{{ asset('assets/img/large-banners/large-banner-panasonic-md.png', 'user_data') }}" alt="法人限定期間限定パナソニック照明器具が特価" style="width:100%; height:auto;" width="900" height="184" />
  212.                 </picture>
  213.             </a>
  214.         </div>
  216.         <div class="large-banners">
  217. {% if app.request.getPathInfo() == '/' %}
  218.     <a href ="{{ url('faq_index') }}">
  219.     <picture>
  220.         <source
  221.             srcset="{{ asset('assets/img/large-banners/large-banner-contact-md.png', 'user_data') }}"
  222.             media="(min-width: 768px)"
  223.             width="440"
  224.             height="184"
  225.         />
  226.         <source
  227.             srcset="{{ asset('assets/img/large-banners/large-banner-contact.png', 'user_data') }}"
  228.             media="(min-width: 320px)"
  229.             width="350"
  230.             height="153"
  231.         />
  232.         <img src="{{ asset('assets/img/large-banners/large-banner-contact-md.png', 'user_data') }}" alt="お問い合わせはこちら" style="width:100%; height:auto;" width="440" height="184" />
  233.     </picture>
  234.     </a>
  235. {% else %}
  236.     <picture>
  237.         <source
  238.             srcset="{{ asset('assets/img/large-banners/large-banner-red-md.png', 'user_data') }}"
  239.             media="(min-width: 768px)"
  240.             width="440"
  241.             height="184"
  242.         />
  243.         <source
  244.             srcset="{{ asset('assets/img/large-banners/large-banner-red.png', 'user_data') }}"
  245.             media="(min-width: 320px)"
  246.             width="350"
  247.             height="153"
  248.         />
  249.         <img src="{{ asset('assets/img/large-banners/large-banner-red-md.png', 'user_data') }}" alt="" class="w-100" width="440" height="184" />
  250.     </picture>
  251. {% endif %}
  253.     <picture>
  254.         <source
  255.             srcset="{{ asset('assets/img/large-banners/large-banner-blue-md.png', 'user_data') }}"
  256.             media="(min-width: 768px)"
  257.             width="440"
  258.             height="184"
  259.         />
  260.         <source
  261.             srcset="{{ asset('assets/img/large-banners/large-banner-blue.png', 'user_data') }}"
  262.             media="(min-width: 320px)"
  263.             width="350"
  264.             height="153"
  265.         />
  266.         <img src="{{ asset('assets/img/large-banners/large-banner-blue-md.png', 'user_data') }}" alt="" class="w-100" width="440" height="184" />
  267.     </picture>
  268. </div>
  269.         {{ include('Block/recommend_list.twig', {label: '照明機器おすすめ商品', category_id: 58}) }}
  270.         {{ include('Block/populer_search_word.twig') }}
  271.         {{ include('Block/recommend_list.twig', {label: 'ブレーカおすすめ商品', category_id: 259}) }}
  272.         {{ include('Block/category_list.twig', {
  273.             label: null, href_label: 'カテゴリ一覧から探す'
  274.         }) }}
  275.         {{ include('Block/banners.twig') }}
  276.         {{ include('Block/makers.twig') }}
  277.         {{ include('Block/news.twig') }}
  278.         <div class="d-md-none">
  279.             {{ include('Block/large-banners.twig') }}
  280.         </div>
  281.         
  282.     </div>
  284. {% endblock %}