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 %}{% endfor %}
  16. };
  17. $(function () { // 表示件数を変更
  18. $('.disp-number').change(function () {
  19. var dispNumber = $(this).val();
  20. $('#disp_number').val(dispNumber);
  21. $('#pageno').val(1);
  22. $("#form1").submit();
  23. });
  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. } e.preventDefault();
  44. $.ajax({
  45. url: $form.attr('action'),
  46. type: $form.attr('method'),
  47. data: $form.serialize(),
  48. dataType: 'json',
  49. beforeSend: function (xhr, settings) { // Buttonを無効にする
  50. $('.add-cart').prop('disabled', true);
  51. }
  52. }).done(function (data) { // レスポンス内のメッセージをalertで表示
  53. $.each(data.messages, function () {
  54. $('#ec-modal-header').text(this);
  55. });
  56. $('.ec-modal').show()
  57. // カートブロックを更新する
  58. $.ajax({url: '{{ url('block_cart') }}', type: 'GET', dataType: 'html'}).done(function (html) {
  59. $('.ec-headerRole__cart').html(html);
  60. });
  61. }).fail(function (data) {
  62. alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  63. }).always(function (data) { // Buttonを有効にする
  64. $('.add-cart').prop('disabled', false);
  65. });
  66. });
  67. });
  68. $('.ec-modal-wrap').on('click', function (e) { // モーダル内の処理は外側にバブリングさせない
  69. e.stopPropagation();
  70. });
  71. $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function () {
  72. $('.ec-modal').hide()
  73. });
  74.     </script>
  75. {% endblock %}
  76. {# カテゴリページ #}
  77. {% set category_id = app.request.query.get('category_id') %}
  78. {# カテゴリまたは検索クエリ #}
  79. {% set page_type_name = category_id ? repository('Eccube\\Entity\\Category').find(category_id) : app.request.query.get('name')  %}
  80. {% block breadcrumb %}
  81.     <div class="breadcrumb-root">
  82.         <div class="breadcrumb-wrapper container">
  83.             <ul>
  84.                 <li>
  85.                     <a href="{{ url('homepage') }}">
  86.                         トップ
  87.                     </a>
  88.                     <svg width="5" height="8" viewbox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
  89.                         <path d="M0.90918 1L3.63645 4L0.90918 7" stroke="#1A1A1A" stroke-linecap="round" stroke-linejoin="round"/>
  90.                     </svg>
  91.                     <span>
  92.                         {{ page_type_name }}
  93.                     </span>
  94.                 </li>
  95.             </ul>
  96.         </div>
  97.     </div>
  98. {% endblock %}
  99. {% block main %}
  100.     <div class="xs-gutter">
  101.         <h2 class="product-list-page-title">
  102.             {{ page_type_name }}
  103.         </h2>
  104.         {% if category_id  %}
  105.             <p class="product-list-page-description">
  106.                 {{ page_type_name.description|raw }}
  107.             </p>
  108.         {% endif %}
  109.     </div>
  110.     {# SP用バナー #}
  111.     <div class="d-lg-none mt-6">
  112.         <img src="{{ asset('assets/img/sm-toujitu-banner2.png','user_data') }}" alt="12時までのご注文で当日発送" width="390" height="auto" class="w-100"/>
  113.     </div>
  114.     {# コンテンツ #}
  115.     <div
  116.         class="page-content-root mt-9 mt-md-15">
  117.         {# カテゴリページなら子カテゴリ用のテンプレートを読み込む - カテゴリページならばcategory_idがURLに含まれている #}
  118.         {% if category_id is not empty %}
  119.             {{ include('Block/category_list_child.twig', {
  120.             category: Category}) }}
  121.         {% else %}
  122.             {# 検索結果ページの場合はデフォルトのカテゴリリストを表示 #}
  123.             {{ include('Block/category_list.twig', {label: 'カテゴリーから探す', href_label: 'すべてのカテゴリーを見る'}) }}
  124.         {% endif %}
  125.         <div>
  126.             {% if search_form.category_id.vars.errors|length > 0 %}
  127.                 <div class="ec-searchnavRole xs-gutter">
  128.                     <p class="errormsg text-danger">{{ 'ご指定のカテゴリは存在しません'|trans }}</p>
  129.                 </div>
  130.             {% else %}
  131.                 <div>
  132.                     <form name="form1" id="form1" method="get" action="?">
  133.                         {% for item in search_form %}
  134.                             <input type="hidden" id="{{ item.vars.id }}" name="{{ item.vars.full_name }}" {% if item.vars.value is not empty %} value="{{ item.vars.value }}" {% endif %}/>
  135.                         {% endfor %}
  136.                     </form>
  137.                     {# 商品一覧のタイトルと件数とSelect #}
  138.                     <div>
  139.                         <h2 class="section-heading mb-4 xs-gutter">{{ page_type_name }}商品一覧</h2>
  140.                         <div class="product-list-page-list-header">
  141.                             <div>
  142.                                 検索結果
  143.                                 {% if search_form.category_id.vars.errors|length > 0 %}
  144.                                     <span class="product-list-page-list-header-label">0</span>
  145.                                 {% else %}
  146.                                     <span class="product-list-page-list-header-label">{{ pagination.totalItemCount }}</span>
  147.                                 {% endif %}
  148.                                 件
  149.                             </div>
  150.                             {% if pagination.totalItemCount > 0 %}
  151.                                 <div class="ec-select-custom">
  152.                                     {{ form_widget(search_form.disp_number, {'id': '', 'attr': {'class': 'disp-number'}}) }}
  153.                                     {{ form_widget(search_form.orderby, {'id': '', 'attr': {'class': 'order-by'}}) }}
  154.                                 </div>
  155.                             {% endif %}
  156.                         </div>
  157.                     </div>
  158.                 </div>
  159.                 {% if pagination.totalItemCount > 0 %}
  160.                     <div class="product-list-page-products-container">
  161.                         {% for Product in pagination %}
  162.                             <a href="{{ url('product_detail', {'id': Product.id}) }}" class="product-list-page-products-item">
  163.                                 <div class="product-list-page-products-item__image">
  164.                                     <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy" {% endif %}>
  165.                                 </div>
  166.                                 <div class="flex-1">
  167.                                     <p class="product-list-page-products-item__name">{{  Product.name|striptags  }}</p>
  168.                                     {% if Product.description_list %}
  169.                                         <p class="product-list-page-products-item__description_list">{{ Product.description_list|striptags }}</p>
  170.                                     {% endif %}
  171.                                     <div class="product-list-page-products-item-price">
  172.                                         <p class="product-list-page-products-item-price__number ">
  173.                                             {% if Product.hasProductClass %}
  174.                                                 {% if Product.getPrice02Min == Product.getPrice02Max %}
  175.                                                     {{ Product.getPrice02IncTaxMin|number_format }}
  176.                                                 {% else %}
  177.                                                     {{ Product.getPrice02IncTaxMin|price }}
  178.                                                     ~
  179.                                                     {{ Product.getPrice02IncTaxMax|number_format }}
  180.                                                 {% endif %}
  181.                                             {% else %}
  182.                                                 {{ Product.getPrice02IncTaxMin|number_format }}
  183.                                             {% endif %}
  184.                                         </p>
  185.                                         <p class="product-list-page-products-item-price__yen">
  186.                                             円
  187.                                         </p>
  188.                                         {# 送料無料条件よりも商品価格が上だったら表示 9,800 #}
  189.                                         {% if Product.getPrice02IncTaxMin > BaseInfo.delivery_free_amount  %}
  190.                                             <p class="product-list-page-products-item-price__freeship">
  191.                                                 送料無料
  192.                                             </p>
  193.                                         {% endif %}
  194.                                     </div>
  195.                                 </div>
  196.                             </a>
  197.                         {% endfor %}
  198.                     </div>
  199.                     <div class="ec-pagerRole mt-7 mt-lg-10">
  200.                         {% include "Block/pager.twig" with {'pages': pagination.paginationData} %}
  201.                     </div>
  202.                 {% else %}
  203.                     <div class="ec-searchnavRole xs-gutter">
  204.                         <p class="errormsg text-danger mt-4">{{ '検索条件に該当する商品はありませんでした。'|trans }}</p>
  205.                     </div>
  206.                 {% endif %}
  207.             {% endif %}
  208.         </div>
  209.         {# 当日発送・送料無料 PC only #}
  210.         <div class="d-none d-md-block">
  211.             {{ include('Block/large-banners.twig') }}
  212.         </div>
  213.         {# おすすめ当店在庫品 #}
  214.         {{ include('Block/recommend_list.twig', {label: 'おすすめ当店在庫品', category_id: 32}) }}
  215.         {# 取り扱いメーカー #}
  216.         <div class="d-none d-md-block">
  217.             {{ include('Block/makers.twig') }}
  218.         </div>
  219.         <div class="d-md-none">
  220.             {{ include('Block/large-banners.twig') }}
  221.         </div>
  222.     </div>
  223. {% endblock %}