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('.cart_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. window.onload = function() {
  75.     // product_nameクラスの要素を全て取得
  76.     var elements = document.getElementsByClassName('product_name');
  77.     var maxHeight = 0;
  78.     // 最大の高さを見つける
  79.     for (var i = 0; i < elements.length; i++) {
  80.         if (elements[i].offsetHeight > maxHeight) {
  81.             maxHeight = elements[i].offsetHeight;
  82.         }
  83.     }
  84.     // 全てのproduct_name要素の高さを最大の高さに設定
  85.     for (var i = 0; i < elements.length; i++) {
  86.         elements[i].style.height = maxHeight + 'px';
  87.     }
  88. };
  89.     </script>
  90. {% endblock %}
  91. {% block main %}
  92. {% if search_form.category_id.vars.errors|length > 0 %}
  93.     
  94. {% else %}
  95.         {% if pagination.totalItemCount > 0 %}
  96.             <div class="ec-shelfRole"> {% set categories = repository('Eccube\\Entity\\Category').getList() %}
  97.             {% for category in categories%}
  98.                     <h3 id="cat_{{ category.id }}">{{ ('front.block.category.list_text.id.' ~ category.id)|trans }}</h3>
  99.                     {# カテゴリー名 #}
  100.                     {% set qb = repository("Eccube\\Entity\\Product").getQueryBuilderBySearchData({'category_id': category}) %}
  101.                     {% set products = qb.orderBy('p.id', 'ASC').setMaxResults(99).getQuery().getResult() %}
  102.                     <ul
  103.                         class="ec-shelfGrid">
  104.                         {% for key, Product in products %}
  105.                             {#定期商品は詳細画面へ移動#}
  106.                             {% if Product.id  == 18 %}
  107.                             <li class="ec-shelfGrid__item">
  108.                                 <a href="{{ url('bib_detail', {'id': 40, 'id2': 18}) }}">
  109.                                     <p class="ec-shelfGrid__item-image">
  110.                                         <img src="/html/user_data/assets/img/item/bib_regular_set_100ppm.png" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy" {% endif %}>
  111.                                         <div class="product_name product-list_title">{{ 'front.block.product_list.subscription_100ppm'|trans }}</div>
  112.                                     </p>
  113.                                 </a>
  114.                                 <div class="ec-productRole__btn">
  115.                                         <a href="{{ url('bib_detail', {'id': 40, 'id2': 18}) }}" class="ec-blackBtn--custom ec-blockBtn--action bib_detail_btn">
  116.                                             {{ 'common.btn.detail'|trans }}
  117.                                         </a>
  118.                                     </div>
  119.                             </li>
  120.                             {% elseif Product.id  == 42 %}
  121.                             <li class="ec-shelfGrid__item">
  122.                                 <a href="{{ url('bib_detail_200ppm', {'id': 38, 'id2': 42}) }}">
  123.                                     <p class="ec-shelfGrid__item-image">
  124.                                         <img src="/html/user_data/assets/img/item/bib_regular_set_200ppm.png" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy" {% endif %}>
  125.                                         <div class="product_name product-list_title">
  126.                                             {{ 'front.block.product_list.subscription_200ppm'|trans }}
  127.                                             <div class="product-tags plus_tag">
  128.                                                 <span class="tag tag_plus">
  129.                                                     <img src="/html/user_data/assets/img/item/tag_pllus.png" alt="plus badge">
  130.                                                 </span>
  131.                                             </div>
  132.                                         </div>
  133.                                     </p>
  134.                                 </a>
  135.                                 <div class="ec-productRole__btn">
  136.                                         <a href="{{ url('bib_detail_200ppm', {'id': 38, 'id2': 42}) }}" class="ec-blackBtn--custom ec-blockBtn--action bib_detail_btn">
  137.                                             {{ 'common.btn.detail'|trans }}
  138.                                         </a>
  139.                                     </div>
  140.                             </li>
  141.                             {% elseif Product.id  == 9 or Product.id == 36 or Product.id == 38 or Product.id == 40 %}
  142.                             {#通常定期アイテムは非表示#}
  143.                             {% else %}
  144.                             <li class="ec-shelfGrid__item ec-shelfGrid__item_category_{{category.id}}"
  145.                             {#表示順番制御#}
  146.                             {#プラスパック#}
  147.                             {% if Product.id  == 15 %}
  148.                             style="order:-1";
  149.                             {#つめかえ用 BIB 10L(200ppm)#}
  150.                             {% elseif Product.id  == 19 %}
  151.                             style="order:-3";
  152.                             {#つめかえ用 パウチ 800mL(200ppm)#}
  153.                             {% elseif Product.id  == 39 %}
  154.                             style="order:-2";
  155.                             {#つめかえ用 BIB 10L#}
  156.                             {% elseif Product.id  == 10%}
  157.                             style="order:-2";
  158.                             {#つめかえ用 パウチ 800mL#}
  159.                             {% elseif Product.id  == 41%}
  160.                             style="order:-1";
  161.                             {% endif %}
  162.                             >
  163.                                 <a href="{{ url('product_detail', {'id': Product.id}) }}">
  164.                                     <p class="ec-shelfGrid__item-image">
  165.                                         <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy" {% endif %}>
  166.                                         <div class="product_name product-list_title">
  167.                                             {# {{ Product.name }} #}
  168.                                             {{ Product|trans_product_name }}
  169.                                             <div class="product-tags plus_tag">
  170.                                                 {% for tag in Product.tags %}
  171.                                                         {% if tag.id == 7 %}
  172.                                                         <span class="tag tag_plus">
  173.                                                             <img src="/html/user_data/assets/img/item/tag_pllus.png" alt="plus badge">
  174.                                                         </span>
  175.                                                         {% endif %}
  176.                                                 {% endfor %}
  177.                                             </div>
  178.                                             {# お気に入り状態を安全に判定する #}
  179.                                             {% set is_favorite = favorites[Product.id]|default(false) %}
  180.                                             {#<form action="{{ url('product_add_favorite_list', {id:Product.id}) }}" method="post" class="favorite_form">#}
  181.                                             {#    {% if is_favorite %}#}
  182.                                             {#        <button type="submit" id="favorite-{{ Product.id }}" class="product_favorite_btn favorited" disabled="disabled">#}
  183.                                             {#            <i class="fas fa-heart"></i>#}
  184.                                             {#        </button>#}
  185.                                             {#    {% else %}#}
  186.                                             {#        <button type="submit" id="favorite-{{ Product.id }}" class="product_favorite_btn">#}
  187.                                             {#            <i class="far fa-heart"></i>#}
  188.                                             {#        </button>#}
  189.                                             {#    {% endif %}#}
  190.                                             {#</form>#}
  191.                                         </div>
  192.                                     </p>
  193.                                     </a>
  194.                                     <div class="list_detail_block" style="line-height:1.7;">
  195.                                         {% if Product.description_list %}
  196.                                             <p>{{ Product.description_list|raw|nl2br }}</p>
  197.                                         {% endif %}
  198.                                         
  199.                                         <p class="price02-default price_default_text" style="line-height:1.3;margin-bottom: 12px;">
  200.                                             <span class="web_price_text">{{ 'front.block.product_list.web_member_price'|trans }}</span>
  201.                                             {% for tag in Product.tags %}
  202.                                                 {% if tag.id != 1 and tag.id != 7 %}
  203.                                                     {#タグは非表示#}
  204.                                                     {#<span class="product-tag-new">{{ tag.name }}</span>#}
  205.                                                 {% endif %}
  206.                                             {% endfor %}
  207.                                             <br>{{ Product.getPrice02IncTaxMin|price }}{{ 'front.block.product_list.tax_included'|trans }}
  208.                                         </p>
  209.                                         {% if Product.stock_find %}
  210.                                             {% set form = forms[Product.id] %}
  211.                                             <form class="add-cart-form" name="form{{ Product.id }}" id="productForm{{ Product.id }}" action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" class="cart_form">
  212.                                                 <div class="ec-productRole__actions">
  213.                                                     {% if form.classcategory_id1 is defined %}
  214.                                                         <div class="ec-select">
  215.                                                             {{ form_widget(form.classcategory_id1) }}
  216.                                                             {{ form_errors(form.classcategory_id1) }}
  217.                                                         </div>
  218.                                                         {% if form.classcategory_id2 is defined %}
  219.                                                             <div class="ec-select">
  220.                                                                 {{ form_widget(form.classcategory_id2) }}
  221.                                                                 {{ form_errors(form.classcategory_id2) }}
  222.                                                             </div>
  223.                                                         {% endif %}
  224.                                                     {% endif %}
  225.                                                     <div class="ec-numberInput">
  226.                                                         <span style="height:30px; display:inline-block;">{{ 'front.block.product_list.quantity'|trans }}</span>
  227.                                                         {{ form_widget(form.quantity, {'attr': {'class': 'quantity'}}) }}
  228.                                                         {{ form_errors(form.quantity) }}
  229.                                                     </div>
  230.                                                 </div>
  231.                                                 {{ form_rest(form) }}
  232.                                             </form>
  233.                                         </div>
  234.                                         {% if Product.id  == 9 %}
  235.                                         <div class="ec-productRole__btn">
  236.                                             <a href="{{ url('bib_detail', {'id': 9, 'id2': 18}) }}" class="ec-blockBtn--action bib_detail_btn">
  237.                                                 {{ 'common.btn.detail'|trans }}
  238.                                             </a>
  239.                                         </div>
  240.                                         {% else %}
  241.                                         <div class="ec-productRole__btn">
  242.                                             <button type="submit" class="ec-blockBtn--action add-cart" data-cartid="{{ Product.id }}" form="productForm{{ Product.id }}">
  243.                                                 {{ 'front.product.add_cart'|trans }}
  244.                                             </button>
  245.                                         </div>
  246.                                         {% endif %}
  247.                                 {% else %}
  248.                                     </div>
  249.                                     <div class="ec-productRole__btn">
  250.                                         <button type="button" class="ec-blockBtn--action" disabled="disabled">
  251.                                             {{ 'front.block.product_list.out_of_stock'|trans }}
  252.                                         </button>
  253.                                     </div>
  254.                                 {% endif %}
  255.                             </li>
  256.                             {% endif %}
  257.                 {% endfor %}
  258.             </ul>
  259.     {% endfor %}
  260. </div>
  261. <div class="ec-modal">
  262.     <div class="ec-modal-overlay">
  263.         <div class="ec-modal-wrap">
  264.             <span class="ec-modal-close">
  265.                 <span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span>
  266.             </span>
  267.             <div id="ec-modal-header" class="text-center">{{ 'common.btn.added_cart'|trans }}</div>
  268.             <div class="ec-modal-box list-modal-box">
  269.                 <div class="ec-role list-role">
  270.                     <span class="ec-blockBtn--cancel ec-inlineBtn--cancel">{{ 'common.btn.continue_shopping'|trans }}</span>
  271.                     <a href="{{ url('cart') }}" class="ec-blockBtn--action ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  272.                 </div>
  273.             </div>
  274.         </div>
  275.     </div>
  276. </div>
  277. <div class="ec-pagerRole">
  278.     {% include "pager.twig" with {'pages': pagination.paginationData} %}
  279. </div>{% endif %}{% endif %}{% endblock %}