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. {% extends 'default_frame.twig' %}
  9. {% set body_class = 'product_page' %}
  10. {% block javascript %}
  11.    <script>
  12.       eccube.productsClassCategories = {
  13.         {% for Product in pagination %}
  14.           "{{ Product.id|escape('js') }}" : {{ class_categories_as_json(Product)|raw }}
  15.           {% if loop.last == false %},{% endif %}
  16.         {% endfor %}
  17.       };
  18.   
  19.       $(function () {
  20.         $('.disp-number').change(function () {
  21.           var dispNumber = $(this).val();
  22.           $('#disp_number').val(dispNumber);
  23.           $('#pageno').val(1);
  24.           $("#form1").submit();
  25.         });
  26.         $('.disp-number-artist').change(function () {
  27.             var dispNumber = $(this).val();
  28.             var currentUrl = window.location.href;
  29.             if (currentUrl.indexOf('disp_number=') !== -1) {
  30.                 currentUrl = currentUrl.replace(/(disp_number=)[^&]*/, '$1' + dispNumber);
  31.             } else {
  32.                 currentUrl += (currentUrl.indexOf('?') === -1 ? '?' : '&') + 'disp_number=' + dispNumber;
  33.             }
  34.             window.location.href = currentUrl;
  35.         });
  36.       $('.order-by-artist').change(function () {
  37.           var orderBy = $(this).val();
  38.           var currentUrl = window.location.href;
  39.           if (currentUrl.indexOf('order_by=') !== -1) {
  40.               currentUrl = currentUrl.replace(/(order_by=)[^&]*/, '$1' + orderBy);
  41.           } else {
  42.               currentUrl += (currentUrl.indexOf('?') === -1 ? '?' : '&') + 'order_by=' + orderBy;
  43.           }
  44.           window.location.href = currentUrl;
  45.       });
  46.         
  47.   
  48.         $('.order-by').change(function () {
  49.           var orderBy = $(this).val();
  50.           $('#orderby').val(orderBy);
  51.           $('#pageno').val(1);
  52.           $("#form1").submit();
  53.         });
  54.   
  55.         $('.add-cart').on('click', function (e) {
  56.           var $form = $(this).parents('li').find('form');
  57.   
  58.           // 個数フォームのチェック
  59.           var $quantity = $form.parent().find('.quantity');
  60.           if ($quantity.val() < 1) {
  61.             $quantity[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  62.             setTimeout(function () {
  63.               loadingOverlay('hide');
  64.             }, 100);
  65.             return true;
  66.           } else {
  67.             $quantity[0].setCustomValidity('');
  68.           }
  69.           e.preventDefault();
  70.           $.ajax({
  71.             url: $form.attr('action'),
  72.             type: $form.attr('method'),
  73.             data: $form.serialize(),
  74.             dataType: 'json',
  75.             beforeSend: function (xhr, settings) { // Buttonを無効にする
  76.               $('.add-cart').prop('disabled', true);
  77.             }
  78.           }).done(function (data) { // レスポンス内のメッセージをalertで表示
  79.             $.each(data.messages, function () {
  80.               $('#ec-modal-header').text(this);
  81.             });
  82.   
  83.             $('.ec-modal').show();
  84.   
  85.             // カートブロックを更新する
  86.             $.ajax({
  87.               url: '{{ url('block_cart') }}',
  88.               type: 'GET',
  89.               dataType: 'html'
  90.             }).done(function (html) {
  91.               $('.ec-headerRole__cart').html(html);
  92.             });
  93.           }).fail(function (data) {
  94.             alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  95.           }).always(function (data) { // Buttonを有効にする
  96.             $('.add-cart').prop('disabled', false);
  97.           });
  98.         });
  99.   
  100.         $('.ec-modal-wrap').on('click', function (e) {
  101.           e.stopPropagation();
  102.         });
  103.   
  104.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function () {
  105.           $('.ec-modal').hide();
  106.         });
  107.         $(document).ready(function() {
  108.           $('.custom-select').select2({
  109.             minimumResultsForSearch: -1,
  110.             dropdownCssClass: 'select2-dropdown-slide'
  111.           });
  112.         });
  113.       });
  114.     </script>
  115. {% endblock %}
  116. {% block main %}
  117.   <div class="ec-layoutRole__main custom-layout__product">
  118.     {# breadcumb #}
  119.     {% if GroupProduct is defined and GroupProduct %}
  120.       {% if GroupProduct.ProductCategories is not empty %}
  121.         <div class="ec-breadcrumbs_layout">
  122.           {% set shown_breadcrumb = false %}
  123.           {% for ProductCategory in GroupProduct.ProductCategories %}
  124.           {% if not shown_breadcrumb and (GroupProduct.ProductCategories|length == 1 or ProductCategory.Category.path|length >= 2) %}
  125.             <div class="ec-breadcrumbs">
  126.               <a href="/">Home</a>
  127.               <span> ></span>
  128.               {% for Category in ProductCategory.Category.path %}
  129.                 {% if Category.id == 1 %}
  130.                   <a href="/rock/">{{ Category.name }}</a> 
  131.                 {% else %}
  132.                   <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> 
  133.                 {% endif %}
  134.                 {%- if loop.last == false %}
  135.                   <span> ></span>
  136.                 {% endif -%}
  137.               {% endfor %}
  138.               <span> ></span> {{ GroupProduct.name }}
  139.             </div>
  140.             {% set shown_breadcrumb = true %}
  141.           {% endif %}
  142.           {% endfor %}
  143.         </div>
  144.         {% endif %}
  145.     {% else %}
  146.     <div class="ec-breadcrumbs">
  147.       <div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
  148.         <a href="/" itemprop="url">
  149.           <span itemprop="title">Home</span>
  150.         </a>
  151.       </div>
  152.       {% if Artist is defined and Artist %}
  153.         <div>
  154.           &gt;
  155.           <a href="{{ Artist.getCategoryLabelUrl() }}" itemprop="url">
  156.             <span itemprop="title">{{Artist.CategoryLabel.name}}</span>
  157.           </a>
  158.         </div>
  159.         <div>
  160.           &gt;
  161.           <span itemprop="title">{{Artist.name}}</span>
  162.         </div>
  163.       {% elseif Category is defined and Category %}
  164.         {% if Category.Parent %}
  165.         <div>
  166.           &gt;
  167.           <a href="{{ url('product_list') }}?category_id={{ Category.Parent.id }}" itemprop="url">
  168.             <span itemprop="title">{{Category.Parent.name}}</span>
  169.           </a>
  170.         </div>
  171.         {% endif %}
  172.         <div>
  173.           &gt;
  174.             <span itemprop="title">{{Category.name}}</span>
  175.         </div>
  176.       {% else %}
  177.         <div>
  178.           &gt;
  179.           <span itemprop="title">全商品</span>
  180.         </div>
  181.       {% endif %}
  182.     </div>
  183.     {% endif %}
  184.     {# end breadcumb #}
  185.     
  186.     {% if search_form.category_id.vars.errors|length > 0 %}
  187.       <div class="ec-searchnavRole">
  188.         <p class="errormsg text-danger">{{ 'ご指定のカテゴリは存在しません'|trans }}</p>
  189.       </div>
  190.     {% else %}
  191.       <div class="ec-searchnavRole">
  192.         <div class="ec-searchnavRole__search">
  193.           <form name="form1" id="form1" method="get" action="?">
  194.             {% for item in search_form %}
  195.               {% if item.vars.id not in ['name', 'field_type', 'genre_id'] %}
  196.                 <input type="hidden" id="{{ item.vars.id }}" name="{{ item.vars.full_name }}" {% if item.vars.value is not empty %} value="{{ item.vars.value }}" {% endif %}/>
  197.               {% endif %}
  198.             {% endfor %}
  199.             <input type="hidden" name="pageno" value="1">
  200.             <div class="d-flex align-items-center gap-1">
  201.               <div class="d-flex align-items-center p-0">
  202.                 <div class="ec-searchnavRole__search__input input-name">
  203.                   {{ form_widget(search_form.name) }}
  204.                   <button class="ec-headerSearch__keywordBtn" type="submit">
  205.                     <img src="{{ asset('assets/icon/btn_search_s.jpg') }}" alt="購入履歴">
  206.                   </button>
  207.                 </div>
  208.                 {{ form_errors(search_form.name) }}
  209.               </div>
  210.               <div class="">
  211.                 <div class="ec-searchnavRole__search__input input-select">
  212.                   {{ form_widget(search_form.field_type, {'attr': {'class': 'custom-select'}}) }}
  213.                   <button class="ec-headerSearch__keywordBtn" type="submit">
  214.                     <img src="{{ asset('assets/icon/btn_topsearch_music_genre.png') }}" alt="購入履歴">
  215.                   </button>
  216.                 </div>
  217.                 {{ form_errors(search_form.field_type) }}
  218.               </div>
  219.               <div class="">
  220.                 <div class="ec-searchnavRole__search__input input-select">
  221.                   {{ form_widget(search_form.genre_id, {'attr': {'class': 'custom-select'}}) }}
  222.                   <button class="ec-headerSearch__keywordBtn" type="submit">                  
  223.                     <img src="{{ asset('assets/icon/btn_topsearch_item_genre.png') }}" alt="購入履歴">
  224.                   </button>
  225.                 </div>
  226.                 {{ form_errors(search_form.genre_id) }}
  227.               </div>
  228.               <div class="">
  229.                 <button class="search-button" type="submit">
  230.                   <img src="{{ asset('assets/icon/btn_search.jpg') }}" alt="{{ '検索'|trans }}">
  231.                 </button>
  232.               </div>
  233.             </div>
  234.           </form>
  235.         </div>
  236.         {# artist detail #}
  237.         {% if Artist is defined and Artist %}
  238.           <div class="artist">
  239.             {% if ArtistImage is defined and ArtistImage %}
  240.               <div class="artist-image">
  241.                 <img src="{{ ArtistImage }}" class="artist-image" alt="{{ Artist.name }}">
  242.               </div>
  243.             {% endif %}
  244.             <div class="artist-detail">
  245.               <p>{{ Artist.category_content|raw|nl2br }}</p>
  246.             </div>
  247.           </div>
  248.         {% endif %}
  249.         {# end artist detail #}
  250.         <div class="ec-searchnavRole__infos">
  251.           <div class="ec-searchnavRole__counter">
  252.             {% if pagination.totalItemCount > 0 %}
  253.               {{ '<span class="attention">%count%件</span><span>の商品がございます。</span>'|trans({ '%count%': pagination.totalItemCount })|raw }}
  254.             {% else %}
  255.               <span>{{ 'お探しの商品は見つかりませんでした'|trans }}</span>
  256.             {% endif %}
  257.           </div>
  258.           <div class="ec-searchnavRole__actions">
  259.             {% if Artist is defined and Artist %}
  260.             <div class="ec-select">
  261.               {{ form_widget(search_form.orderby, {'id': '', 'attr': {'class': 'order-by-artist'}}) }}
  262.               {{ form_widget(search_form.disp_number, {'id': '', 'attr': {'class': 'disp-number-artist'}}) }}
  263.             </div>
  264.             {% else %}
  265.             <div class="ec-select">
  266.               {{ form_widget(search_form.orderby, {'id': '', 'attr': {'class': 'order-by'}}) }}
  267.               {{ form_widget(search_form.disp_number, {'id': '', 'attr': {'class': 'disp-number'}}) }}
  268.             </div>
  269.             {% endif %}  
  270.           </div>
  271.         </div>
  272.       </div>
  273.       {% if pagination.totalItemCount > 0 %}
  274.         <div class="ec-shelfRole">
  275.           <div class="ec-counterRole">
  276.             {% if pagination.totalItemCount > 0 %}
  277.               {{ '<span class="attention">%count%件</span><span>の商品がございます。</span>'|trans({ '%count%': pagination.totalItemCount })|raw }}
  278.             {% else %}
  279.               <span>{{ 'お探しの商品は見つかりませんでした'|trans }}</span>
  280.             {% endif %}
  281.           </div>
  282.           <ul class="ec-shelfGrid">
  283.             {% for Product in pagination %}
  284.               <li class="ec-shelfGrid__item">
  285.                 <a class="link-product" href="{{ url('product_detail', {id: Product.id}) }}">
  286.                   <p class="ec-shelfGrid__item-image">
  287.                     {% set isSoldOut = true %}
  288.                     {% for productClass in Product.ProductClasses %}
  289.                       {% if productClass.stock_find %}
  290.                         {% set isSoldOut = false %}
  291.                       {% endif %}
  292.                     {% endfor %}
  293.                     {% if isSoldOut %}
  294.                       <span class="soldout_box"></span>
  295.                       <span class="soldout">SOLD OUT</span>
  296.                     {% endif %}
  297.                     <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy" {% endif %}>
  298.                   </p>
  299.                     {% if Product.ProductStatusCusts|length > 0 %}
  300.                       <ul class="ec-productRole__status">
  301.                         {% set statusIds = [1, 2, 4, 5] %}
  302.                         {% set statusIdsSpicon = [6, 13, 14] %}
  303.                         {% for StatusItem in Product.ProductStatusCusts %}
  304.                           {% if StatusItem.Status.id == 3 %}
  305.                             <li class="ward-status">
  306.                               <span class="ec-productRole__status__item status_3">
  307.                                 <img src="{{ asset('assets/img/common/ico_wgen.jpg') }}" alt="ico_wgen">
  308.                               </span>
  309.                             </li>
  310.                           {% endif %}
  311.                         {% endfor %}
  312.                         {% for StatusItem in Product.ProductStatusCusts %}
  313.                           {% if StatusItem.Status.id != 3 %}
  314.                             {% set showSpicon = 0 %}
  315.                             {% if StatusItem.Status.id in statusIds %}
  316.                               <li class="ec-productRole__status__item status_{{ StatusItem.Status.id }}">
  317.                                 <span>{{ StatusItem.Status.name }}</span>
  318.                               </li>
  319.                             {% endif %}
  320.                             {% if StatusItem.Status.id == 11 %}
  321.                               <li class="ec-productRole__status__item status_{{ StatusItem.Status.id }}">
  322.                                 <span>お年玉セール</span>
  323.                               </li>
  324.                             {% endif %}
  325.                             {% if StatusItem.Status.id in statusIdsSpicon %}
  326.                               {% set showSpicon = StatusItem.Status.id %}
  327.                             {% endif %}
  328.                             {% if showSpicon == 6 %}
  329.                               <li class="ec-productRole__status__item status_12">
  330.                                 <span>直筆サイン付</span>
  331.                               </li>
  332.                             {% endif %}
  333.                           {% endif %}
  334.                         {% endfor %}
  335.                     </ul>
  336.                   {% endif %}
  337.                   {% if Product.getFirstArtist() is not null %}
  338.                     <p class="ec-shelfGrid__item-artist">
  339.                       {{ Product.getFirstArtist().name }}
  340.                     </p>
  341.                   {% endif %}
  342.                   <p class="ec-shelfGrid__item-name">
  343.                     {{ Product.papc3 }}
  344.                     {{ Product.name }}
  345.                     {{ Product.papc4 }}
  346.                   </p>
  347.                   <p class="price02-default">
  348.                     {# {% if productClass.sale_type01 == 0 %} #}
  349.                       {% if Product.hasProductClass %}
  350.                         {% if Product.getPrice02Min == Product.getPrice02Max %}
  351.                           <span class="ec-price__price price02-default">
  352.                             {{ Product.getPrice02IncTaxMin | number_format(0, '.', ',') }}円
  353.                           </span>
  354.                           <span class="ec-price__price price02-default tax-excluded-price">
  355.                             (税抜 {{ Product.getPrice02Min | number_format(0, '.', ',') }}円)
  356.                           </span>
  357.                           <span class="ec-price__price price02-default tax-excluded-price1">
  358.                             (税込)
  359.                           </span>
  360.                         {% else %}
  361.                           <div class="ec-price">
  362.                             <span class="ec-price__price price02-default">
  363.                               {{ Product.getPrice02IncTaxMin | number_format(0, '.', ',') }} ~ 
  364.                               {{ Product.getPrice02IncTaxMax | number_format(0, '.', ',') }}円
  365.                             </span>
  366.                             <span class="ec-price__price price02-default tax-excluded-price">
  367.                               (税抜 {{ Product.getPrice02Min | number_format(0, '.', ',') }} ~ 
  368.                               {{ Product.getPrice02Max | number_format(0, '.', ',') }}円)
  369.                             </span>
  370.                             <span class="ec-price__price price02-default tax-excluded-price1">
  371.                               (税込)
  372.                             </span>
  373.                           </div>
  374.                         {% endif %}
  375.                       {% else %}
  376.                         <div class="ec-price">
  377.                           <span class="ec-price__price">
  378.                             {{ Product.getPrice02IncTaxMin | number_format(0, '.', ',') }}円
  379.                           </span>
  380.                           <span class="ec-price__price tax-excluded-price">
  381.                             (税抜 {{ Product.getPrice02Min  | number_format(0, '.', ',') }}円)
  382.                           </span>
  383.                           <span class="ec-price__price price02-default tax-excluded-price1">
  384.                             (税込)
  385.                           </span>
  386.                         </div>
  387.                       {% endif %}
  388.                     {# {% else %}
  389.                       {% if Product.hasProductClass %}
  390.                         {% set sale_price = Product.ProductClasses.first().sale_price + 0 %}
  391.                         {% if Product.getPrice02Min == Product.getPrice02Max %}
  392.                           <span class="ec-price__price price02-default">
  393.                             {{ (sale_price * 1.1) | number_format(0, '.', ',') }}円
  394.                           </span>
  395.                           <span class="ec-price__price price02-default tax-excluded-price">
  396.                             (税抜 {{ sale_price | number_format(0, '.', ',') }}円)
  397.                           </span>
  398.                           <span class="ec-price__price price02-default tax-excluded-price1">
  399.                             (税込)
  400.                           </span>
  401.                         {% else %}
  402.                         {% set sale_price = Product.ProductClasses.first().sale_price + 0 %}
  403.                           <div class="ec-price">
  404.                             <span class="ec-price__price price02-default">
  405.                               {{ sale_price | number_format(0, '.', ',') }} ~ 
  406.                               {{ (sale_price * 1.1) | number_format(0, '.', ',') }}円
  407.                             </span>
  408.                             <span class="ec-price__price price02-default tax-excluded-price">
  409.                               (税抜 {{ (sale_price * 1.1) | number_format(0, '.', ',') }} ~ 
  410.                               {{ sale_price | number_format(0, '.', ',') }}円)
  411.                             </span>
  412.                             <span class="ec-price__price price02-default tax-excluded-price1">
  413.                               (税込)
  414.                             </span>
  415.                           </div>
  416.                         {% endif %}
  417.                       {% else %}
  418.                       {% set sale_price = Product.ProductClasses.first().sale_price + 0 %}
  419.                         <div class="ec-price">
  420.                           <span class="ec-price__price">
  421.                             {{ (sale_price * 1.1) | number_format(0, '.', ',') }}円
  422.                           </span>
  423.                           <span class="ec-price__price tax-excluded-price">
  424.                             (税抜 {{ sale_price | number_format(0, '.', ',') }}円)
  425.                           </span>
  426.                           <span class="ec-price__price price02-default tax-excluded-price1">
  427.                             (税込)
  428.                           </span>
  429.                         </div>
  430.                       {% endif %}
  431.                     {% endif %} #}
  432.                   </p>
  433.                   {% set original_price = Product.getPrice01IncTaxMin %}
  434.                   {% set sale_price = Product.getPrice02IncTaxMin %}
  435.                   {% if original_price > 0 and sale_price is not null and original_price > sale_price %}
  436.                     <div class="sale_price">
  437.                         {% set discount_percentage = ((original_price - sale_price) / original_price * 100)|round(2) %}
  438.                         <span class="plgShiro8PriceDownRate">
  439.                           {{ (discount_percentage // 1) }}%OFF
  440.                         </span>
  441.                     </div>
  442.                   {% endif %}
  443.                 </a>
  444.               </li>
  445.             {% endfor %}
  446.           </ul>
  447.           <div class="ec-pagerRole">
  448.             {% include "pager.twig" with {'pages': pagination.paginationData} %}
  449.           </div>
  450.         </div>
  451.         <div class="ec-modal">
  452.           <div class="ec-modal-overlay">
  453.             <div class="ec-modal-wrap">
  454.               <span class="ec-modal-close">
  455.                 <span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span>
  456.               </span>
  457.               <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  458.               <div class="ec-modal-box">
  459.                 <div class="ec-role">
  460.                   <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  461.                   <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  462.                 </div>
  463.               </div>
  464.             </div>
  465.           </div>
  466.         </div>
  467.       {% endif %}
  468.     {% endif %}
  469.   </div>
  470. {% endblock %}