app/template/default/Product/list.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 Categories = repository('Eccube\\Entity\\Category').getList() %}
  9. {% extends 'default_frame.twig' %}
  10. {% set body_class = 'product_page' %}
  11. {% block javascript %}
  12.     <script>
  13.         eccube.productsClassCategories = {
  14.             {% for Product in pagination %}
  15.             "{{ Product.id|escape('js') }}": {{ class_categories_as_json(Product)|raw }}{% if loop.last == false %}, {% endif %}
  16.             {% endfor %}
  17.         };
  18.         $(function() {
  19.             $('.disp-number').change(function() {
  20.                 var dispNumber = $(this).val();
  21.                 $('#disp_number').val(dispNumber);
  22.                 $('#pageno').val(1);
  23.                 $("#form1").submit();
  24.             });
  25.             $('.order-by').change(function() {
  26.                 var orderBy = $(this).val();
  27.                 $('#orderby').val(orderBy);
  28.                 $('#pageno').val(1);
  29.                 $("#form1").submit();
  30.             });
  31.             $('.add-cart').on('click', function(e) {
  32.                 var $form = $(this).parents('li').find('form');
  33.                
  34.                 var $quantity = $form.parent().find('.quantity');
  35.                 if ($quantity.val() < 1) {
  36.                     $quantity[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  37.                     setTimeout(function() {
  38.                         loadingOverlay('hide');
  39.                     }, 100);
  40.                     return true;
  41.                 } else {
  42.                     $quantity[0].setCustomValidity('');
  43.                 }
  44.                 e.preventDefault();
  45.                 $.ajax({
  46.                     url: $form.attr('action'),
  47.                     type: $form.attr('method'),
  48.                     data: $form.serialize(),
  49.                     dataType: 'json',
  50.                     beforeSend: function(xhr, settings) {
  51.                         
  52.                         $('.add-cart').prop('disabled', true);
  53.                     }
  54.                 }).done(function(data) {
  55.                     
  56.                     $.each(data.messages, function() {
  57.                         $('#ec-modal-header').text(this);
  58.                     });
  59.                     $('.ec-modal').show()
  60.                     
  61.                     $.ajax({
  62.                         url: '{{ url('block_cart') }}',
  63.                         type: 'GET',
  64.                         dataType: 'html'
  65.                     }).done(function(html) {
  66.                         $('.ec-headerRole__cart').html(html);
  67.                     });
  68.                 }).fail(function(data) {
  69.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  70.                 }).always(function(data) {
  71.                     
  72.                     $('.add-cart').prop('disabled', false);
  73.                 });
  74.             });
  75.         });
  76.         $('.ec-modal-wrap').on('click', function(e) {
  77.             
  78.             e.stopPropagation();
  79.         });
  80.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  81.             $('.ec-modal').hide()
  82.         });
  83.     </script>
  84. {% endblock %}
  85. {% block stylesheet %}
  86.     <link rel="stylesheet" href="/test-ec-05/html/user_data/assets/css/recommend.min.css">
  87.     <style>
  88.         .ec-layoutRole .ec-layoutRole__contents {
  89.             max-width: unset;
  90.         }
  91.         .p-top__merchandise .p-top__items__box .p-top__item {
  92.             padding: 20px 16px;
  93.         }
  94.         .ec-topicpath .ec-topicpath__item a {
  95.             color: #333;
  96.         }
  97.         .p-top__merchandise {
  98.             padding: 10% 0 20%;
  99.         }
  100.         
  101.         .p-top__merchandise .p-top__items__box {
  102.             margin-top: 0;
  103.         }
  104.         .p-top__item__title,
  105.         .p-top__item__price {
  106.             text-align: center;
  107.         }
  108.         .p-top__merchandise .absolute1 {
  109.             width: 22%;
  110.         }
  111.         .p-top__merchandise .absolute2 {
  112.             width: 30%;
  113.         }
  114.         .ec-pager .ec-pager__item--active,
  115.         .ec-pager .ec-pager__item:hover, {
  116.             background-color: inherit;
  117.         }
  118.         .ec-pager__item a {
  119.             background-color: #333;
  120.             color: #fefefe !important;
  121.             padding: 10px 20px !important;
  122.             border-radius: 50%;
  123.         }
  124.         .ec-pager__item .small{
  125.             padding: 10px 16px !important;
  126.         }
  127.         .ec-pager__item--active a {
  128.             background-color: #b72c11;
  129.             padding: 10px 20px !important;
  130.             border-radius: 50%;
  131.             color: #fefefe !important;
  132.         }
  133.         .ec-pager .ec-pager__item--active,
  134.         .ec-pager .ec-pager__item:hover{
  135.             background: unset;
  136.         }
  137.         .sale {
  138.             display: none;
  139.         }
  140.         .p-top__merchandise .p-top__items__box .p-top__item {
  141.             overflow: hidden;
  142.             position: relative;
  143.         }
  144.         .cart.absolute {
  145.             position: absolute;
  146.             z-index: 1;
  147.             transform: rotate(40deg);
  148.             right: -70px;
  149.             overflow: hidden;
  150.             top: 20px;
  151.         }
  152.         @media (max-width:768px) {
  153.             .p-top__items__box .p-top__item {
  154.              width: auto; 
  155.             min-width: 220px;
  156.             margin-left: 5%;
  157.             }
  158.             
  159.         }
  160.         @media only screen and (min-width: 768px) {
  161.         .ec-searchnavRole .ec-searchnavRole__infos {
  162.             border-top-color: #333;
  163.             }
  164.         }
  165.         @media screen and (max-width:1024px) {
  166.             .p-top__items__box .p-top__item__meet {
  167.             width: 200px !important;
  168.             }
  169.             .p-top__items__box .p-top__item {
  170.                 min-width: 230px;
  171.             }
  172.             .cart.absolute {
  173.                 right: -55px;
  174.                 top: 12px;
  175.             }
  176.         }
  177.         
  178.     </style>
  179. {% endblock %}
  180. {% block main %}
  181. <section class="p-ranking__fv">
  182.             <div class="p-ranking__fv__inner">
  183.                 <div class="section__title top__fix">
  184.                     <h2 >商品一覧</h2>
  185.                 </div>
  186.                 
  187.             </div>
  188.             <!-- banner -->
  189.             {{include('Block/banner.twig')}}
  190.             <!-- banner -->
  191. </section>
  192. <section class="p-top__merchandise">
  193.             <img class="absolute1" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cloud__gl2.webp')}}" alt="雲">
  194.             <img class="absolute2" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cloud_gl1.webp')}}" alt="雲">
  195.             <img class="absolute3" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/meetbox.webp')}}" alt="お肉BOX">
  196.             <img class="absolute4" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/nabe.webp')}}" alt="鍋">
  197.             <div class="section__title">
  198.                 <img src="{{asset ('/test-ec-04/html/user_data/assets/img/common/cow.webp')}}" alt="牛のイラスト">
  199.                 <h2>商品一覧</h2>
  200.                 
  201.             </div>
  202.             
  203.         {% macro tree(Category) %}
  204.     {% from _self import tree %}
  205.     <a class="more__page" href="{{ url('product_list') }}?category_id={{ Category.id }}#page_anchor">
  206.         {{ Category.name }}
  207.     </a>
  208.     {#{% if Category.children|length > 0 %}#}
  209.     {#    <ul>#}
  210.     {#        {% for ChildCategory in Category.children %}#}
  211.     {#            <li>#}
  212.     {#                {{ tree(ChildCategory) }}#}
  213.     {#            </li>#}
  214.     {#        {% endfor %}#}
  215.     {#    </ul>#}
  216.     {#{% endif %}#}
  217. {% endmacro %}
  218. {# @see https://github.com/bolt/bolt/pull/2388 #}
  219. {% from _self import tree %}
  220. <div class="p-top__merchandise__category" id="page_anchor">
  221.         <p>カテゴリー選択<span>|</span></p>
  222.         <div class="p-top__merchandise__category__items">
  223.                 {% for Category in Categories %}
  224.                         {{ tree(Category) }}
  225.                 {% endfor %}
  226.         </div>
  227.     </div>
  228.     <p style="text-align: center; margin-top:20px;">※当店の商品は全て税込となっております。</p>
  229.     {% if search_form.category_id.vars.errors|length > 0 %}
  230.         <div class="ec-searchnavRole">
  231.             <p class="errormsg text-danger">{{ 'ご指定のカテゴリは存在しません'|trans }}</p>
  232.         </div>
  233.     {% else %}
  234.         <div class="ec-searchnavRole">
  235.             <form name="form1" id="form1" method="get" action="?">
  236.                 {% for item in search_form %}
  237.                     <input type="hidden" id="{{ item.vars.id }}"
  238.                            name="{{ item.vars.full_name }}"
  239.                            {% if item.vars.value is not empty %}value="{{ item.vars.value }}" {% endif %}/>
  240.                 {% endfor %}
  241.             </form>
  242.             <div class="ec-searchnavRole__topicpath">
  243.                 <ol class="ec-topicpath">
  244.                     <li class="ec-topicpath__item"><a href="{{ url('product_list') }}">{{ '全て'|trans }}</a>
  245.                     </li>
  246.                     {% if Category is not null %}
  247.                         {% for Path in Category.path %}
  248.                             <li class="ec-topicpath__divider">|</li>
  249.                             <li class="ec-topicpath__item{% if loop.last %}--active{% endif %}"><a
  250.                                         href="{{ url('product_list') }}?category_id={{ Path.id }}">{{ Path.name }}</a>
  251.                             </li>
  252.                         {% endfor %}
  253.                     {% endif %}
  254.                     {% if search_form.vars.value and search_form.vars.value.name %}
  255.                         <li class="ec-topicpath__divider">|</li>
  256.                         <li class="ec-topicpath__item">{{ '「%name%」の検索結果'|trans({ '%name%': search_form.vars.value.name }) }}</li>
  257.                     {% endif %}
  258.                 </ol>
  259.             </div>
  260.             <div class="ec-searchnavRole__infos">
  261.                 <div class="ec-searchnavRole__counter">
  262.                     {% if pagination.totalItemCount > 0 %}
  263.                         {{ '<span class="ec-font-bold">%count%件</span><span>の商品が見つかりました</span>'|trans({ '%count%': pagination.totalItemCount })|raw }}
  264.                     {% else %}
  265.                         <span>{{ 'お探しの商品は見つかりませんでした'|trans }}</span>
  266.                     {% endif %}
  267.                 </div>
  268.                 {% if pagination.totalItemCount > 0 %}
  269.                     <div class="ec-searchnavRole__actions">
  270.                         <div class="ec-select">
  271.                             {{ form_widget(search_form.disp_number, {'id': '', 'attr': {'class': 'disp-number'}}) }}
  272.                             {{ form_widget(search_form.orderby, {'id': '', 'attr': {'class': 'order-by'}}) }}
  273.                         </div>
  274.                     </div>
  275.                 {% endif %}
  276.             </div>
  277.         </div>
  278.         {% if pagination.totalItemCount > 0 %}
  279.             <div class="ec-shelfRole">
  280.                 <ul class="ec-shelfGrid p-top__items__box">
  281.                     {% for Product in pagination %}
  282.                         <li class="ec-shelfGrid__item p-top__item">
  283.                             <a href="{{ url('product_detail', {'id': Product.id}) }}">
  284.                                 {% for Tag in Product.Tags %}
  285.                                     <p class="cart absolute">{{ Tag }}</p>
  286.                                     {% endfor %}
  287.                                 <p class="ec-shelfGrid__item-image">
  288.                                     <img class="p-top__item__meet" src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
  289.                                 </p>
  290.                                 <p class="p-top__item__title">{{ include(template_from_string(Product.freearea)) }}</p>
  291.                                 {% if Product.description_list %}
  292.                                     <p>{{ Product.description_list|raw|nl2br }}</p>
  293.                                 {% endif %}
  294.                                 <p class="price02-default p-top__item__price">
  295.                                     {% if Product.hasProductClass %}
  296.                                         {% if Product.getPrice02Min == Product.getPrice02Max %}
  297.                                             {{ Product.getPrice02IncTaxMin|price }}
  298.                                         {% else %}
  299.                                             {{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}
  300.                                         {% endif %}
  301.                                     {% else %}
  302.                                         {{ Product.getPrice02IncTaxMin|price }}
  303.                                     {% endif %}
  304.                                     {#{% if Product.hasProductClass %}#}
  305.                                     {#    {% if Product.getPrice02Min == Product.getPrice02Max %}#}
  306.                                     {#        {{ Product.getPrice02IMin|price }}#}
  307.                                     {#    {% else %}#}
  308.                                     {#        {{ Product.getPrice02Min|price }} ~ {{ Product.getPrice02Max|price }}#}
  309.                                     {#    {% endif %}#}
  310.                                     {#{% else %}#}
  311.                                     {#    {{ Product.getPrice02Min|price }}#}
  312.                                     {#{% endif %}#}
  313.                                 </p>
  314.                             </a>
  315.                             {% if Product.stock_find %}
  316.                                 {#{% set form = forms[Product.id] %}#}
  317.                                 {#<form name="form{{ Product.id }}" id="productForm{{ Product.id }}" action="{{ url('product_add_cart', {id:Product.id}) }}" method="post">#}
  318.                                 {#    <div class="ec-productRole__actions">#}
  319.                                 {#        {% if form.classcategory_id1 is defined %}#}
  320.                                 {#            <div class="ec-select">#}
  321.                                 {#                {{ form_widget(form.classcategory_id1) }}#}
  322.                                 {#                {{ form_errors(form.classcategory_id1) }}#}
  323.                                 {#            </div>#}
  324.                                 {#            {% if form.classcategory_id2 is defined %}#}
  325.                                 {#                <div class="ec-select">#}
  326.                                 {#                    {{ form_widget(form.classcategory_id2) }}#}
  327.                                 {#                    {{ form_errors(form.classcategory_id2) }}#}
  328.                                 {#                </div>#}
  329.                                 {#            {% endif %}#}
  330.                                 {#        {% endif %}#}
  331.                                         {#<div class="ec-numberInput"><span>{{ '数量'|trans }}</span>#}
  332.                                         {#    {{ form_widget(form.quantity, {'attr': {'class': 'quantity'}}) }}#}
  333.                                         {#    {{ form_errors(form.quantity) }}#}
  334.                                         {#</div>#}
  335.                                 {#    </div>#}
  336.                                 {#    {{ form_rest(form) }}#}
  337.                                 </form>
  338.                                 <div class="ec-productRole__btn">
  339.                                     <a class="detail-buttons cart" href="{{ url('product_detail', {'id': Product.id}) }}">詳細を見る</a>
  340.                                     {#<button type="submit" class="ec-blockBtn--action add-cart" data-cartid="{{ Product.id }}" form="productForm{{ Product.id }}">#}
  341.                                     {#    {{ '詳細を見る'|trans }}#}
  342.                                     {#</button>#}
  343.                                 </div>
  344.                             {% else %}
  345.                                 <div class="ec-productRole__btn">
  346.                                     <button type="button" class="ec-blockBtn--action" disabled="disabled">
  347.                                         {{ 'ただいま品切れ中です。'|trans }}
  348.                                     </button>
  349.                                 </div>
  350.                             {% endif %}
  351.                         </li>
  352.                     {% endfor %}
  353.                 </ul>
  354.             </div>
  355.             <div class="ec-modal">
  356.                 <div class="ec-modal-overlay">
  357.                     <div class="ec-modal-wrap">
  358.                         <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  359.                         <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  360.                         <div class="ec-modal-box">
  361.                             <div class="ec-role">
  362.                                 <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  363.                                 <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  364.                             </div>
  365.                         </div>
  366.                     </div>
  367.                 </div>
  368.             </div>
  369.             <div class="ec-pagerRole">
  370.                 {% include "pager.twig" with {'pages': pagination.paginationData} %}
  371.             </div>
  372.         {% endif %}
  373.     {% endif %}
  374. </section>
  375. {% endblock %}