app/template/meldiastore/Block/category.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) LOCKON CO.,LTD. All Rights Reserved.
  6. http://www.lockon.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. <style>
  12.     .b-category:after {
  13.     background-image: none;
  14. }
  15. .b-category__slide .swiper-scrollbar-drag {
  16.     background-color: #807245;
  17. }
  18. .b-category__title--main {
  19.     font-family: "Times New Roman","Josefin Sans",sans-serif;
  20. }
  21. .b-category__item-link {
  22.     color: #000;
  23. }
  24. </style>
  25. <section class="b-category">
  26.     <h2 class="b-category__title c-animation-fade js-animation-fade">
  27.         <span class="b-category__title--main">{{ 'Categories'|trans }}</span>
  28.         <span class="b-category__title--sub">{{ '商品カテゴリ'|trans }}</span>
  29.     </h2>
  30.      
  31.     <div class="b-category__contents c-animation-fade js-animation-fade">
  32.         <div class="b-category__slide" id="js-category__slide">
  33.             <div class="b-category__slide-contents swiper-wrapper">
  34.                 <div class="b-category__item swiper-slide">
  35.                     <a class="b-category__item-link" href="{{ url('product_list') }}?category_id=95">
  36.                         <figure class="b-category__item-image">
  37.                             <picture>
  38.                                 <source media="(max-width: 839px)" srcset="{{ asset('/html/user_data/assets/shop_item_img/new_sp.jpg') }}">
  39.                                 <img class="b-category__item-image-pic" src="{{ asset('/html/user_data/assets/shop_item_img/new_pc.jpg') }}" alt="{{ '新商品'|trans }}">
  40.                             </picture>
  41.                         </figure>
  42.                         <p class="b-category__item-name">
  43.                             <span class="b-category__item-name--ja">{{ '新商品'|trans }}</span>
  44.                             <!--<span class="b-category__item-name--en">{{ 'Category<br>04'|trans|raw }}</span>-->
  45.                         </p>
  46.                     </a>
  47.                 </div>
  48.                 <div class="b-category__item swiper-slide">
  49.                     <a class="b-category__item-link" href="{{ url('product_list') }}?category_id=50">
  50.                         <figure class="b-category__item-image">
  51.                             <picture>
  52.                                 <source media="(max-width: 839px)" srcset="{{ asset('/html/user_data/assets/shop_item_img/beauty_sp.jpg') }}">
  53.                                 <img class="b-category__item-image-pic" src="{{ asset('/html/user_data/assets/shop_item_img/beauty_pc.jpg') }}" alt="{{ 'シャワーヘッド'|trans }}">
  54.                             </picture>
  55.                         </figure>
  56.                         <p class="b-category__item-name">
  57.                             <span class="b-category__item-name--ja">{{ 'シャワーヘッド'|trans }}</span>
  58.                             <!--<span class="b-category__item-name--en">{{ 'Category<br>04'|trans|raw }}</span>-->
  59.                         </p>
  60.                     </a>
  61.                 </div>
  62.                 <div class="b-category__item swiper-slide">
  63.                     <a class="b-category__item-link" href="{{ url('product_list') }}?category_id=67">
  64.                         <figure class="b-category__item-image">
  65.                             <picture>
  66.                                 <source media="(max-width: 839px)" srcset="{{ asset('/html/user_data/assets/shop_item_img/ReFa_sp.jpg') }}">
  67.                                 <img class="b-category__item-image-pic" src="{{ asset('/html/user_data/assets/shop_item_img/ReFa_pc.jpg') }}" alt="{{ 'ビューティ・健康家電(ReFa)'|trans }}">
  68.                             </picture>
  69.                         </figure>
  70.                         <p class="b-category__item-name">
  71.                             <span class="b-category__item-name--ja">{{ 'ビューティ・健康家電(ReFa)'|trans }}</span>
  72.                             <!--<span class="b-category__item-name--en">{{ 'Category<br>04'|trans|raw }}</span>-->
  73.                         </p>
  74.                     </a>
  75.                 </div>
  76.                 <div class="b-category__item swiper-slide">
  77.                     <a class="b-category__item-link" href="{{ url('product_list') }}?category_id=45">
  78.                         <figure class="b-category__item-image">
  79.                             <picture>
  80.                                 <source media="(max-width: 839px)" srcset="{{ asset('/html/user_data/assets/shop_item_img/zakka_sp.jpg') }}">
  81.                                 <img class="b-category__item-image-pic" src="{{ asset('/html/user_data/assets/shop_item_img/zakka_pc.jpg') }}" alt="{{ '山﨑実業の雑貨'|trans }}">
  82.                             </picture>
  83.                         </figure>
  84.                         <p class="b-category__item-name">
  85.                             <span class="b-category__item-name--ja">{{ '生活雑貨 TOWER・RIN'|trans }}</span>
  86.                             <!--<span class="b-category__item-name--en">{{ 'Category<br>04'|trans|raw }}</span>-->
  87.                         </p>
  88.                     </a>
  89.                 </div>
  90.                 <div class="b-category__item swiper-slide">
  91.                     <a class="b-category__item-link" href="{{ url('product_list') }}?category_id=44">
  92.                         <figure class="b-category__item-image">
  93.                             <picture>
  94.                                 <source media="(max-width: 839px)" srcset="{{ asset('/html/user_data/assets/shop_item_img/shomei_sp.jpg') }}">
  95.                                 <img class="b-category__item-image-pic" src="{{ asset('/html/user_data/assets/shop_item_img/shomei_pc.jpg') }}" alt="{{ '照明'|trans }}">
  96.                             </picture>
  97.                         </figure>
  98.                         <p class="b-category__item-name">
  99.                             <span class="b-category__item-name--ja">{{ '照明'|trans }}</span>
  100.                             <!--<span class="b-category__item-name--en">{{ '照明'|trans|raw }}</span>-->
  101.                         </p>
  102.                     </a>
  103.                 </div>
  104.                 <div class="b-category__item swiper-slide">
  105.                     <a class="b-category__item-link" href="{{ url('product_list') }}?category_id=66">
  106.                         <figure class="b-category__item-image">
  107.                             <picture>
  108.                                 <source media="(max-width: 839px)" srcset="{{ asset('/html/user_data/assets/shop_item_img/footfit2_sp.jpg') }}">
  109.                                 <img class="b-category__item-image-pic" src="{{ asset('/html/user_data/assets/shop_item_img/footfit2_pc.jpg') }}" alt="{{ 'SIXPAD'|trans }}">
  110.                             </picture>
  111.                         </figure>
  112.                         <p class="b-category__item-name">
  113.                             <span class="b-category__item-name--ja">{{ 'SIXPAD'|trans }}</span>
  114.                             <!--<span class="b-category__item-name--en">{{ 'Category<br>02'|trans|raw }}</span>-->
  115.                         </p>
  116.                     </a>
  117.                 </div>
  118.                 <div class="b-category__item swiper-slide">
  119.                     <a class="b-category__item-link" href="{{ url('product_list') }}?category_id=69">
  120.                         <figure class="b-category__item-image">
  121.                             <picture>
  122.                                 <source media="(max-width: 839px)" srcset="{{ asset('/html/user_data/assets/shop_item_img/kirara_sp.jpg') }}">
  123.                                 <img class="b-category__item-image-pic" src="{{ asset('/html/user_data/assets/shop_item_img/kirara_pc.jpg') }}" alt="{{ '空気清浄機'|trans }}">
  124.                             </picture>
  125.                         </figure>
  126.                         <p class="b-category__item-name">
  127.                             <span class="b-category__item-name--ja">{{ '空気清浄機'|trans }}</span>
  128.                             <!--<span class="b-category__item-name--en">{{ 'Category<br>02'|trans|raw }}</span>-->
  129.                         </p>
  130.                     </a>
  131.                 </div>
  132.                 <div class="b-category__item swiper-slide">
  133.                     <a class="b-category__item-link" href="{{ url('product_list') }}?category_id=9">
  134.                         <figure class="b-category__item-image">
  135.                             <picture>
  136.                                 <source media="(max-width: 839px)" srcset="{{ asset('/html/user_data/assets/shop_item_img/torikae_sp.jpg') }}">
  137.                                 <img class="b-category__item-image-pic" src="{{ asset('/html/user_data/assets/shop_item_img/torikae_pc.jpg') }}" alt="{{ '取替用住設機器'|trans }}">
  138.                             </picture>
  139.                         </figure>
  140.                         <p class="b-category__item-name">
  141.                             <span class="b-category__item-name--ja">{{ '取替用住設機器'|trans }}</span>
  142.                             <!--<span class="b-category__item-name--en">{{ 'Category<br>02'|trans|raw }}</span>-->
  143.                         </p>
  144.                     </a>
  145.                 </div>
  146.                 <div class="b-category__item swiper-slide">
  147.                     <a class="b-category__item-link" href="{{ url('product_list') }}?category_id=93">
  148.                         <figure class="b-category__item-image">
  149.                             <picture>
  150.                                 <source media="(max-width: 839px)" srcset="{{ asset('/html/user_data/assets/shop_item_img/bousai_sp.jpg') }}">
  151.                                 <img class="b-category__item-image-pic" src="{{ asset('/html/user_data/assets/shop_item_img/bousai_pc.jpg') }}" alt="{{ '防災用品'|trans }}">
  152.                             </picture>
  153.                         </figure>
  154.                         <p class="b-category__item-name">
  155.                             <span class="b-category__item-name--ja">{{ '防災用品'|trans }}</span>
  156.                             <!--<span class="b-category__item-name--en">{{ '防災用品'|trans|raw }}</span>-->
  157.                         </p>
  158.                     </a>
  159.                 </div>
  160.                 <div class="b-category__item swiper-slide">
  161.                     <a class="b-category__item-link" href="{{ url('product_list') }}?category_id=76">
  162.                         <figure class="b-category__item-image">
  163.                             <picture>
  164.                                 <source media="(max-width: 839px)" srcset="{{ asset('/html/user_data/assets/shop_item_img/pet_sp_.jpg') }}">
  165.                                 <img class="b-category__item-image-pic" src="{{ asset('/html/user_data/assets/shop_item_img/pet_pc.jpg') }}" alt="{{ 'ペット用雑貨'|trans }}">
  166.                             </picture>
  167.                         </figure>
  168.                         <p class="b-category__item-name">
  169.                             <span class="b-category__item-name--ja">{{ 'ペット用雑貨'|trans }}</span>
  170.                             <!--<span class="b-category__item-name--en">{{ 'Category<br>03'|trans|raw }}</span>-->
  171.                         </p>
  172.                     </a>
  173.                 </div>
  174.                 <div class="b-category__item swiper-slide">
  175.                     <a class="b-category__item-link" href="{{ url('product_list') }}?category_id=70">
  176.                         <figure class="b-category__item-image">
  177.                             <picture>
  178.                                 <source media="(max-width: 839px)" srcset="{{ asset('/html/user_data/assets/shop_item_img/kadenpack_sp.jpg') }}">
  179.                                 <img class="b-category__item-image-pic" src="{{ asset('/html/user_data/assets/shop_item_img/kadenpack_pc_.jpg') }}" alt="{{ '家電パック'|trans }}">
  180.                             </picture>
  181.                         </figure>
  182.                         <p class="b-category__item-name">
  183.                             <span class="b-category__item-name--ja">{{ '家電パック'|trans }}</span>
  184.                             <!--<span class="b-category__item-name--en">{{ 'Category<br>04'|trans|raw }}</span>-->
  185.                         </p>
  186.                     </a>
  187.                 </div>
  188.                 <div class="b-category__item swiper-slide">
  189.                     <a class="b-category__item-link" href="{{ url('product_list') }}?category_id=80">
  190.                         <figure class="b-category__item-image">
  191.                             <picture>
  192.                                 <source media="(max-width: 839px)" srcset="{{ asset('/html/user_data/assets/shop_item_img/kaden2_sp_.jpg') }}">
  193.                                 <img class="b-category__item-image-pic" src="{{ asset('/html/user_data/assets/shop_item_img/kaden2_pc.jpg') }}" alt="{{ '家電単品'|trans }}">
  194.                             </picture>
  195.                         </figure>
  196.                         <p class="b-category__item-name">
  197.                             <span class="b-category__item-name--ja">{{ '家電単品'|trans }}</span>
  198.                             <!--<span class="b-category__item-name--en">{{ 'Category<br>02'|trans|raw }}</span>-->
  199.                         </p>
  200.                     </a>
  201.                 </div>
  202.                 <div class="b-category__item swiper-slide">
  203.                     <a class="b-category__item-link" href="{{ url('product_list') }}?category_id=23">
  204.                         <figure class="b-category__item-image">
  205.                             <picture>
  206.                                 <source media="(max-width: 839px)" srcset="{{ asset('/html/user_data/assets/shop_item_img/modern_sp.jpg') }}">
  207.                                 <img class="b-category__item-image-pic" src="{{ asset('/html/user_data/assets/shop_item_img/modern_pc.jpg') }}" alt="{{ 'カテゴリ02 Category02'|trans }}">
  208.                             </picture>
  209.                         </figure>
  210.                         <p class="b-category__item-name">
  211.                             <span class="b-category__item-name--ja">{{ '家具'|trans }}</span>
  212.                             <!--<span class="b-category__item-name--en">{{ 'Category<br>02'|trans|raw }}</span>-->
  213.                         </p>
  214.                     </a>
  215.                 </div>
  216.                 
  217.                 <!--<div class="b-category__item swiper-slide">
  218.                     <a class="b-category__item-link" href="{{ url('product_list') }}">
  219.                         <figure class="b-category__item-image">
  220.                             <picture>
  221.                                 <source media="(max-width: 839px)" srcset="{{ asset('assets/img/top/sp/b-category__item-image-pic-1.jpg') }}">
  222.                                 <img class="b-category__item-image-pic" src="{{ asset('assets/img/top/pc/b-category__item-image-pic-1.jpg') }}" alt="{{ 'カテゴリ05 Category05'|trans }}">
  223.                             </picture>
  224.                         </figure>
  225.                         <p class="b-category__item-name">
  226.                             <span class="b-category__item-name--ja">{{ '家電単品'|trans }}</span>
  227.                             <span class="b-category__item-name--en">{{ 'Category<br>05'|trans|raw }}</span>
  228.                         </p>
  229.                     </a>
  230.                 </div>
  231.                 <div class="b-category__item swiper-slide">
  232.                     <a class="b-category__item-link" href="{{ url('product_list') }}">
  233.                         <figure class="b-category__item-image">
  234.                             <picture>
  235.                                 <source media="(max-width: 839px)" srcset="{{ asset('/html/user_data/assets/shop_item_img/kaden_sp.jpg') }}">
  236.                                 <img class="b-category__item-image-pic" src="{{ asset('/html/user_data/assets/shop_item_img/kaden_pc.jpg') }}" alt="{{ 'カテゴリ06 Category06'|trans }}">
  237.                             </picture>
  238.                         </figure>
  239.                         <p class="b-category__item-name">
  240.                             <span class="b-category__item-name--ja">{{ 'カテゴリ06'|trans }}</span>
  241.                             <span class="b-category__item-name--en">{{ 'Category<br>06'|trans|raw }}</span>
  242.                         </p>
  243.                     </a>
  244.                 </div>
  245.                 <div class="b-category__item swiper-slide">
  246.                     <a class="b-category__item-link" href="{{ url('product_list') }}">
  247.                         <figure class="b-category__item-image">
  248.                             <picture>
  249.                                 <source media="(max-width: 839px)" srcset="{{ asset('assets/img/top/sp/b-category__item-image-pic-1.jpg') }}">
  250.                                 <img class="b-category__item-image-pic" src="{{ asset('assets/img/top/pc/b-category__item-image-pic-3.jpg') }}" alt="{{ 'カテゴリ07 Category07'|trans }}">
  251.                             </picture>
  252.                         </figure>
  253.                         <p class="b-category__item-name">
  254.                             <span class="b-category__item-name--ja">{{ 'カテゴリ07'|trans }}</span>
  255.                             <span class="b-category__item-name--en">{{ 'Category<br>07'|trans|raw }}</span>
  256.                         </p>
  257.                     </a>
  258.                 </div>
  259.                 <div class="b-category__item swiper-slide">
  260.                     <a class="b-category__item-link" href="{{ url('product_list') }}">
  261.                         <figure class="b-category__item-image">
  262.                             <picture>
  263.                                 <source media="(max-width: 839px)" srcset="{{ asset('assets/img/top/sp/b-category__item-image-pic-2.jpg') }}">
  264.                                 <img class="b-category__item-image-pic" src="{{ asset('assets/img/top/pc/b-category__item-image-pic-4.jpg') }}" alt="{{ 'カテゴリ04 Category04'|trans }}">
  265.                             </picture>
  266.                         </figure>
  267.                         <p class="b-category__item-name">
  268.                             <span class="b-category__item-name--ja">{{ 'カテゴリ08'|trans }}</span>
  269.                             <span class="b-category__item-name--en">{{ 'Category<br>08'|trans|raw }}</span>
  270.                         </p>
  271.                     </a>
  272.                 </div>-->
  273.             </div>
  274.             <div class="b-category__slide-scrollbar swiper-scrollbar" id="js-category__slide-scrollbar"></div>
  275.         </div>
  276.     </div>
  277. </section>
  279. {# scrollのjavascriptはindex.twigに記載 #}
  280. {# 背景画像のCSSはindex.twigに記載 #}