app/template/HF4002/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. {% set start_date = '2021-09-06'|date('Y-m-d') %}
  16. {% set end_date = '2021-09-27'|date('Y-m-d') %}
  17. {% set sale_category_id = 90 %}
  18. {% if start_date <= date()|date('Y-m-d') and date()|date('Y-m-d') <= end_date %}
  19.     {% set campaign_valid = true %}
  20. {% else %}
  21.     {% set campaign_valid = false %}
  22. {% endif %}
  23. {% block stylesheet %}
  24.     <style>
  25.         .slick-slider {
  26.             margin-bottom: 30px;
  27.         }
  29.         .slick-dots {
  30.             position: absolute;
  31.             bottom: -45px;
  32.             display: block;
  33.             width: 100%;
  34.             padding: 0;
  35.             list-style: none;
  36.             text-align: center;
  37.         }
  39.         .slick-dots li {
  40.             position: relative;
  41.             display: inline-block;
  42.             width: 20px;
  43.             height: 20px;
  44.             margin: 0 5px;
  45.             padding: 0;
  47.             cursor: pointer;
  48.         }
  50.         .slick-dots li button {
  51.             font-size: 0;
  52.             line-height: 0;
  53.             display: block;
  54.             width: 20px;
  55.             height: 20px;
  56.             padding: 5px;
  57.             cursor: pointer;
  58.             color: transparent;
  59.             border: 0;
  60.             outline: none;
  61.             background: transparent;
  62.         }
  64.         .slick-dots li button:hover,
  65.         .slick-dots li button:focus {
  66.             outline: none;
  67.         }
  69.         .slick-dots li button:hover:before,
  70.         .slick-dots li button:focus:before {
  71.             opacity: 1;
  72.         }
  74.         .slick-dots li button:before {
  75.             content: " ";
  76.             line-height: 20px;
  77.             position: absolute;
  78.             top: 0;
  79.             left: 0;
  80.             width: 12px;
  81.             height: 12px;
  82.             text-align: center;
  83.             opacity: .25;
  84.             background-color: black;
  85.             border-radius: 50%;
  87.         }
  89.         .slick-dots li.slick-active button:before {
  90.             opacity: .75;
  91.             background-color: black;
  92.         }
  94.         .slick-dots li button.thumbnail img {
  95.             width: 0;
  96.             height: 0;
  97.         }
  98.         .ec-sliderRole {
  99.             margin-bottom: 10px!important;
  100.         }
  102.         
  103.         
  104.     </style>
  105. {% endblock %}
  107. {% block javascript %}
  108.     <script>
  109.         $(function() {
  110.             $('.main_visual').slick({
  111.                 dots: true,
  112.                 arrows: false,
  113.                 autoplay: true,
  114.                 autoplaySpeed: 5000,
  115.                 speed: 300,
  116.                 centerMode: true,
  117.                 centerPadding: '16%'
  118.             });
  119.         });
  120.     </script>
  121. {% endblock javascript %}
  123. {% block main %}
  124.     {#<style>#}
  125.     {#    .slick-slide{#}
  126.     {#        max-height: 400px;#}
  127.     {#    }#}
  128.     {#    .slick-slide a picture img {#}
  129.     {#        object-fit: contain;#}
  130.     {#    }#}
  131.     {#</style>#}
  132.     <div class="ec-sliderRole">
  133.         <div class="main_visual">
  134.             {% if campaign_valid %}
  135.             <div class="item slick-slide">
  136.                 <a href="./products/list?category_id={{ sale_category_id }}" target="_blank">
  137.                     <picture>
  138.                         <source media="(max-width: 768px)" srcset="{{ asset('../../user_data/assets/img/sale_20210906/os_sale_to_detail_sp.jpg') }}">
  139.                         <img src="{{ asset('../../user_data/assets/img/sale_20210906/os_sale_to_detail.jpg') }}">
  140.                     </picture>
  141.                 </a>
  142.             </div>
  143.             {% endif %}
  144.             <div class="item slick-slide">
  145.                 <a href="https://www.cosmopier.net/products/detail/1581" target="_blank">
  146.                     <picture>
  147.                         <source media="(max-width: 768px)" srcset="{{ asset('../../user_data/top/kidebc-sp.jpg') }}">
  148.                         <img src="{{ asset('../../user_data/top/kidebc.jpg') }}">
  149.                     </picture>
  150.                 </a>
  151.             </div>
  152.             <div class="item slick-slide">
  153.                 <a href="https://www.cosmopier.net/products/detail/1584" target="_blank">
  154.                     <picture>
  155.                         <source media="(max-width: 768px)" srcset="{{ asset('../../user_data/top/tagaki_shop-sp.jpg') }}">
  156.                         <img src="{{ asset('../../user_data/top/tagaki_shop.jpg') }}">
  157.                     </picture>
  158.                 </a>
  159.             </div>            <div class="item slick-slide">
  160.                 <a href="https://www.cosmopier.net/products/detail/1579" target="_blank">
  161.                     <picture>
  162.                         <source media="(max-width: 768px)" srcset="{{ asset('../../user_data/assets/img/slider/voa_sdgs_shop-sp.jpg') }}">
  163.                         <img src="{{ asset('../../user_data/assets/img/slider/voa_sdgs_shop.jpg') }}">
  164.                     </picture>
  165.                 </a>
  166.             </div>
  167.             <!-- スライダー1 ダウンロードステーション -->
  168.             <div class="item slick-slide">
  169.                 <a href="https://www.cosmopier.com/dlstation/" target="_blank">
  170.                     <picture>
  171.                         <source media="(max-width: 768px)" srcset="{{ asset('../../user_data/top/top-slider_20210416-sp.jpg') }}">
  172.                         <img src="{{ asset('../../user_data/top/top-slider_20210416.jpg') }}">
  173.                     </picture>
  174.                 </a>
  175.             </div>
  176.             <!-- スライダー2 -->
  177.             <div class="item slick-slide">
  178.                 <a href="https://www.cosmopier.net/products/list?mode=&category_id=75&name=&pageno=1&disp_number=0&orderby=1" target="_blank">
  179.                     <picture>
  180.                         <source media="(max-width: 768px)" srcset="{{ asset('../../user_data/top/top-slider_20210603_2_sp.jpg') }}">
  181.                         <img src="{{ asset('../../user_data/top/top-slider_20210603_2_PC.jpg') }}">
  182.                     </picture>
  183.                 </a>
  184.             </div>
  185.             <!-- スライダー3 -->
  186.             <div class="item slick-slide">
  187.                 <a href="https://www.cosmopier.net/products/list?mode=&category_id=77&name=&pageno=1&disp_number=0&orderby=1" target="_blank">
  188.                     <picture>
  189.                         <source media="(max-width: 768px)" srcset="{{ asset('../../user_data/top/top-slider_20210603_3_sp.jpg') }}">
  190.                         <img src="{{ asset('../../user_data/top/top-slider_20210603_3_PC.jpg') }}">
  191.                     </picture>
  192.                 </a>
  193.             </div>
  194.             <!-- スライダー4 -->
  195.             <div class="item slick-slide">
  196.                 <a href="https://www.cosmopier.net/products/list?mode=&category_id=83&name=&pageno=1&disp_number=0&orderby=3" target="_blank">
  197.                     <picture>
  198.                         <source media="(max-width: 768px)" srcset="{{ asset('../../user_data/top/top-slider_20210603_4_sp.jpg') }}">
  199.                         <img src="{{ asset('../../user_data/top/top-slider_20210603_4_PC.jpg') }}">
  200.                     </picture>
  201.                 </a>
  202.             </div>
  203.             <!-- スライダー5 -->
  204.             <div class="item slick-slide">
  205.                 <a href="https://www.cosmopier.net/products/list?mode=&category_id=84&name=&pageno=1&disp_number=0&orderby=3" target="_blank">
  206.                     <picture>
  207.                         <source media="(max-width: 768px)" srcset="{{ asset('../../user_data/top/top-slider_20210603_5_sp.jpg') }}">
  208.                         <img src="{{ asset('../../user_data/top/top-slider_20210603_5_PC.jpg') }}">
  209.                     </picture>
  210.                 </a>
  211.             </div>
  212.             <!--../../user_data/
  213.             <div class="item slick-slide"><picture><source media="(max-width: 768px)" srcset="{{ asset('../../user_data/top/top-slider_04-sp.jpg') }}"><img src="{{ asset('../../user_data/top/top-slider_04.jpg') }}"></picture></div>
  214.             <div class="item slick-slide"><picture><source media="(max-width: 768px)" srcset="{{ asset('../../user_data/top/top-slider_01-sp.jpg') }}"><img src="{{ asset('../../user_data/top/top-slider_01.jpg') }}"></picture></div>
  215.             <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div>
  216.             <div class="item slick-slide"><picture><source media="(max-width: 768px)" srcset="{{ asset('../../user_data/top/top-slider_05-sp.jpg') }}"><img src="{{ asset('../../user_data/top/top-slider_05.jpg') }}"></picture></div>
  217.             <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>
  218.             <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></div>
  219.             -->
  220.         </div>
  221.     </div>
  222. {% endblock %}