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

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  4. http://www.ec-cube.co.jp/
  5. For the full copyright and license information, please view the LICENSE
  6. file that was distributed with this source code.
  7. #}
  8. {% set Category = repository("Eccube\\Entity\\Category").find(1) %}
  9. {%
  10. set products = repository("Eccube\\Entity\\Product")
  11. .getQueryBuilderBySearchData({'category_id':Category})
  12. .setMaxResults(5)
  13. .getQuery()
  14. .getResult()
  15. %}
  16. {# <div class="ec-categoryRole" id="Category">
  17.     <div class="ec-role">
  18.         <div class="ec-secHeading">
  19.             <div class="ec-secHeading_back">
  20.                 <p class="outline">Category</p>
  21.             </div>
  22.             <h2 class="ec-secHeading__ja">{{ 'カテゴリ'|trans }}</h2>
  23.         </div>
  24.         <div class="ec-itemNav gnavi__list_sp">
  25.             <ul class="gnavi__list_sp">
  26.                 <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=1" class="sp">
  27.                     ソファ<span class="dli-chevron-down"></span>
  28.                 </a>
  29.                 <ul class="dropdown__lists_sp">
  30.                     <ul class="ec-itemNav__nav">
  31.                         <li class="pc">
  32.                             <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=1">
  33.                                 ソファ</a>
  34.                         </li>
  35.                         <li class="dropdown__list_sp">
  36.                             <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=2">
  37.                                 ベッド</a>
  38.                         </li>
  39.                         <li class="dropdown__list_sp">
  40.                             <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=5">
  41.                                 テーブル</a>
  42.                         </li>
  43.                         <li class="dropdown__list_sp">
  44.                             <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=7">
  45.                                 チェア</a>
  46.                         </li>
  47.                         <li class="dropdown__list_sp">
  48.                             <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=8">
  49.                                 収納家具</a>
  50.                         </li>
  51.                     </ul>
  52.                     <ul class="ec-itemNav__nav">
  53.                         <li class="dropdown__list_sp">
  54.                             <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=9">
  55.                                 ラグ</a>
  56.                         </li>
  57.                         <li class="dropdown__list_sp">
  58.                             <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=10">
  59.                                 インテリア雑貨</a>
  60.                         </li>
  61.                         <li class="dropdown__list_sp">
  62.                             <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=11">
  63.                                 照明</a>
  64.                         </li>
  65.                         <li class="dropdown__list_sp">
  66.                             <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=12">
  67.                                 キッチン</a>
  68.                         </li>
  69.                         <li class="dropdown__list_sp">
  70.                             <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=13">
  71.                                 ガーデン・アウトドア</a>
  72.                         </li>
  73.                         <li class="dropdown__list_sp">
  74.                             <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=14">
  75.                                 ペット</a>
  76.                         </li>
  77.                         <li class="dropdown__list_sp">
  78.                             <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=15">
  79.                                 季節商品</a>
  80.                         </li>
  81.                     </ul>
  82.                 </ul>
  83.             </ul>
  84.         </div>
  85.     </div>
  86.     <div class="ec-role">
  87.         <div class="ec-newItemRole">
  88.             <div class="category_list_scroll">
  89.                 <div class="ec-newItemRole__list">
  90.                     {% if products %}
  91.                         {% for p in products %}
  92.                             <div class="ec-newItemRole__listItem ec-newItemRole__list_category">
  93.                                 <a href="{{ url('product_detail', {'id': p.id}) }}">
  94.                                     <img src="{{ asset(p.main_list_image|no_image_product, 'save_image') }}">
  95.                                 </a>
  96.                             </div>
  97.                         {% endfor %}
  98.                     {% endif %}
  99.                 </div>
  100.             </div>
  101.         </div>
  102.     </div>
  103.     <div class="ec-more__btn">
  104.         <a class="more-btn" href="{{ url('product_list') }}">View More</a>
  105.     </div>
  106. </div> #}
  107. {# 
  108. <div class="ec-itemNav gnavi__list_sp">
  109.     <ul class="gnavi__list_sp">
  110.         <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=1" class="sp">
  111.             ソファ<span class="dli-chevron-down"></span>
  112.         </a>
  113.         <ul class="dropdown__lists_sp">
  114.             <ul class="ec-itemNav__nav">
  115.                 <li class="pc">
  116.                     <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=1">
  117.                         ソファ</a>
  118.                 </li>
  119.                 <li class="dropdown__list_sp">
  120.                     <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=2">
  121.                         ベッド</a>
  122.                 </li>
  123.                 <li class="dropdown__list_sp">
  124.                     <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=5">
  125.                         テーブル</a>
  126.                 </li>
  127.                 <li class="dropdown__list_sp">
  128.                     <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=7">
  129.                         チェア</a>
  130.                 </li>
  131.                 <li class="dropdown__list_sp">
  132.                     <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=8">
  133.                         収納家具</a>
  134.                 </li>
  135.             </ul>
  136.             <ul class="ec-itemNav__nav">
  137.                 <li class="dropdown__list_sp">
  138.                     <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=9">
  139.                         ラグ</a>
  140.                 </li>
  141.                 <li class="dropdown__list_sp">
  142.                     <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=10">
  143.                         インテリア雑貨</a>
  144.                 </li>
  145.                 <li class="dropdown__list_sp">
  146.                     <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=11">
  147.                         照明</a>
  148.                 </li>
  149.                 <li class="dropdown__list_sp">
  150.                     <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=12">
  151.                         キッチン</a>
  152.                 </li>
  153.                 <li class="dropdown__list_sp">
  154.                     <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=13">
  155.                         ガーデン・アウトドア</a>
  156.                 </li>
  157.                 <li class="dropdown__list_sp">
  158.                     <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=14">
  159.                         ペット</a>
  160.                 </li>
  161.                 <li class="dropdown__list_sp">
  162.                     <a href="{{ url('user_data', {'route': 'category'}) }}?category_id=15">
  163.                         季節商品</a>
  164.                 </li>
  165.             </ul>
  166.         </ul>
  167.     </ul>
  168. </div> #}
  169. <div class="ec-categoryRole" id="Category">
  170.     <div class="ec-role">
  171.         <div class="ec-secHeading">
  172.             <div class="ec-secHeading_back">
  173.                 <p class="outline">Category</p>
  174.             </div>
  175.             <h2 class="ec-secHeading__ja">{{ 'カテゴリ'|trans }}</h2>
  176.         </div>
  177.         <div class="ec-itemNav">
  178.             {% set categories = repository("Eccube\\Entity\\Category").findBy({}, {'id': 'ASC'}, 12) %}
  179.             {% set selected_category_id = app.request.query.get('category_id') %}
  180.             {# カテゴリーリストSP #}
  181.             <div class="ec-itemNav__listSp">
  182.                 <div class="ec-itemNav gnavi__list_sp">
  183.                                                 <span class="ec-itemNav-dropdown js-dropdown">
  184.                                     選択してください<span class="dli-chevron-down"></span>
  185.                                 </span>
  186.                     {# <div class="gnavi__list_sp"> #}
  187.                         <div class="dropdown__lists_sp js-dropdown-contents">
  188.                             <ul class="ec-itemNav__nav">
  189.                                 {% for category in categories %}
  190.                                     <li>
  191.                                         <button data-category-id="{{ category.id }}" {% if category.id == selected_category_id %} class="active" {% endif %}>
  192.                                             {{ category.name }}
  193.                                         </button>
  194.                                     </li>
  195.                                 {% endfor %}
  196.                             </ul>
  197.                         </div>
  198.                     {# </div> #}
  199.                 </div>
  200.             </div>
  201.             {# カテゴリーリストPC #}
  202.             <div class="ec-itemNav__listPc">
  203.                 <ul class="ec-itemNav__nav">
  204.                     {% for category in categories %}
  205.                         <li class="pc">
  206.                             <button data-category-id="{{ category.id }}" {% if category.id == selected_category_id %} class="active" {% endif %}>
  207.                                 {{ category.name }}
  208.                             </button>
  209.                         </li>
  210.                     {% endfor %}
  211.                 </ul>
  212.             </div>
  213.         </div>
  214.     </div>
  215.     <div
  216.         class="ec-role">
  217.         {# タブで切り替えたいエリア #}
  218.         {% for category in categories %}
  219.             <div class="ec-newItemRole js-tabChange" data-category-id="{{ category.id }}">
  220.                 <div class="category_list_scroll">
  221.                     <div class="ec-newItemRole__list">
  222.                         {% set products = repository("Eccube\\Entity\\Product").getQueryBuilderBySearchData({'category_id': category}).setMaxResults(5).getQuery().getResult() %}
  223.                         {% if products %}
  224.                             {% for p in products %}
  225.                                 <div class="ec-newItemRole__listItem ec-newItemRole__list_category">
  226.                                     <a href="{{ url('product_detail', {'id': p.id}) }}">
  227.                                         <img src="{{ asset(p.main_list_image|no_image_product, 'save_image') }}">
  228.                                     </a>
  229.                                 </div>
  230.                             {% endfor %}
  231.                         {% else %}
  232.                             <div class="ec-newItemRole__listItem ec-newItemRole__list_category">
  233.                                 商品がありません。
  234.                             </div>
  235.                         {% endif %}
  236.                     </div>
  237.                 </div>
  238.             </div>
  239.         {% endfor %}
  240.         {# ボタン #}
  241.         {% for category in categories %}
  242.             <div class="ec-more__btn js-tabChange" data-category-id="{{ category.id }}">
  243.                 <a class="more-btn" href="{{ url('product_list') }}?category_id={{ category.id }}">View More</a>
  244.             </div>
  245.         {% endfor %}
  246.     </div>
  247. </div>
  248. </div>{% block javascript %}
  249.  <script>
  250.       $(document).ready(function() {
  251.             var defaultCategoryId = 1;
  252.             var changeList = $('.js-tabChange');
  253.     
  254.             changeList.each(function() {
  255.                 var categoryDataId = $(this).data('category-id');
  256.                 if (categoryDataId == defaultCategoryId) {
  257.                     $(this).show();
  258.                 } else {
  259.                     $(this).hide();
  260.                 }
  261.             });
  262.     
  263.             $('.ec-itemNav__nav button').click(function() {
  264.                 var categoryId = $(this).data('category-id');
  265.                 changeList.each(function() {
  266.                     var categoryDataId = $(this).data('category-id');
  267.                     if (categoryDataId == categoryId) {
  268.                         $(this).show();
  269.                     } else {
  270.                         $(this).hide();
  271.                     }
  272.                 });
  273.             });
  274.         });
  275.                     </script>
  276.                     
  277.                     <script>
  278.     $(document).ready(function() {
  279.         $('.js-dropdown').click(function() {
  280.             $('.js-dropdown-contents').toggle();
  281.         });
  282.         $('.js-dropdown-contents button').click(function() {
  283.             $('.js-dropdown-contents').hide();
  284.         });
  285.     });
  286. </script>{% endblock %}