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. {% set hasCategory = false %}
  11. {% set request_uri = app.request.server.get('REQUEST_URI') %}
  12. {% if 'name=' in request_uri and Category != "" %}
  13.     {% set RootCategory = Category.RootCategory %}
  14.     {% set hasCategory = true %}
  15. {% elseif Category != "" %}
  16.     {% set RootCategory = Category.RootCategory %}
  17.     {% set hasCategory = true %}
  18. {% elseif 'name=' in request_uri %}
  19.     {% set hasCategory = false %}
  20. {% endif %}
  21. {% if hasCategory %}
  22.     {% set RootCategory = Category.RootCategory %}
  23. {% endif %}
  24. {% set prm2 = app.request.query.get('type') %}
  25. {% set prm3 = app.request.query.get('category_id2') %}
  26. {% set prm4 = app.request.query.get('category_id3') %}
  27. {% set prm5 = app.request.query.get('category_id4') %}
  28. {% set prm6 = app.request.query.get('category_id5') %}
  29. {% set prm7 = app.request.query.get('tag_id') %}
  30. {% set pm2 = cast_to_int(prm2) %}
  31. {% set pm3 = cast_to_int(prm3) %}
  32. {% set pm4 = cast_to_int(prm4) %}
  33. {% set pm5 = cast_to_int(prm5) %}
  34. {% set pm6 = cast_to_int(prm6) %}
  35. {% set cn1 = app.request.query.get('name') %}
  36. {% if prm2 == 0 and prm2 != "" %}
  37.     {% set cn2 = "" %}
  38. {% elseif prm2 == 1 and prm2 != "" %}
  39.     {% set cn2 = "ヴァイスシュヴァルツ," %}
  40. {% elseif prm2 == 2 and prm2 != "" %}
  41.     {% set cn2 = "ポケモン," %}
  42. {% else %}
  43.     {% set cn2 = "" %}
  44. {% endif %}
  45. {% set cn3 = get_category_name(pm3) %}
  46. {% set cn4 = get_category_name(pm4) %}
  47. {% set cn5 = get_category_name(pm5) %}
  48. {% set cn6 = get_category_name(pm6) %}
  49. {% if prm7 == 4 and prm7 != "" %}
  50.     {% set cn7 = "傷あり商品," %}
  51. {% else %}
  52.     {% set cn7 = "" %}
  53. {% endif %}
  54. {% block javascript %}
  55.     <script>
  56.         eccube.productsClassCategories = {
  57.             {% for Product in pagination %}
  58.             "{{ Product.id|escape('js') }}": {{ class_categories_as_json(Product)|raw }}{% if not loop.last %}, {% endif %}
  59.             {% endfor %}
  60.         };
  61.         $(function() {
  62.             // 表示件数を変更
  63.             $('.disp-number').change(function() {
  64.                 var dispNumber = $(this).val();
  65.                 $('#disp_number').val(dispNumber);
  66.                 $('#pageno').val(1);
  67.                 $("#form1").submit();
  68.             });
  69.             // 並び順を変更
  70.             $('.order-by').change(function() {
  71.                 var orderBy = $(this).val();
  72.                 $('#orderby').val(orderBy);
  73.                 $('#pageno').val(1);
  74.                 $("#form1").submit();
  75.             });
  76.             $('.add-cart').on('click', function(e) {
  77.                 var $form = $(this).parents('li').find('form');
  78.                 // 個数フォームのチェック
  79.                 var $quantity = $form.parent().find('.quantity');
  80.                 if ($quantity.val() < 1) {
  81.                     $quantity[0].setCustomValidity('{{ 'front.product.invalid_quantity'|trans }}');
  82.                     setTimeout(function() {
  83.                         loadingOverlay('hide');
  84.                     }, 100);
  85.                     return true;
  86.                 } else {
  87.                     $quantity[0].setCustomValidity('');
  88.                 }
  89.                 e.preventDefault();
  90.                 $.ajax({
  91.                     url: $form.attr('action'),
  92.                     type: $form.attr('method'),
  93.                     data: $form.serialize(),
  94.                     dataType: 'json',
  95.                     beforeSend: function(xhr, settings) {
  96.                         // Buttonを無効にする
  97.                         $('.add-cart').prop('disabled', true);
  98.                     }
  99.                 }).done(function(data) {
  100.                     // レスポンス内のメッセージをalertで表示
  101.                     $.each(data.messages, function() {
  102.                         $('#ec-modal-header').text(this);
  103.                     });
  104.                     $('.ec-modal').show()
  105.                     // カートブロックを更新する
  106.                     $.ajax({
  107.                         url: '{{ url('block_cart') }}',
  108.                         type: 'GET',
  109.                         dataType: 'html'
  110.                     }).done(function(html) {
  111.                         $('.ec-headerRole__cart').html(html);
  112.                     });
  113.                 }).fail(function(data) {
  114.                     alert('{{ 'front.product.add_cart_error'|trans }}');
  115.                 }).always(function(data) {
  116.                     // Buttonを有効にする
  117.                     $('.add-cart').prop('disabled', false);
  118.                 });
  119.             });
  120.         });
  121.         $('.ec-modal-wrap').on('click', function(e) {
  122.             // モーダル内の処理は外側にバブリングさせない
  123.             e.stopPropagation();
  124.         });
  125.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  126.             $('.ec-modal').hide()
  127.         });
  128.         {% if hasCategory %}
  129.             {% if RootCategory == "買い取り" or Category == "買い取り" %}
  130.                 $('.bigbox').css('background-color','#22b573');
  131.                 $('.header-middle').css('background-color','#22b573');
  132.                 $('.side-searchbox').css('background-color','#22b573');
  133.                 $('.side-cat-more').css('background-color','#22b573');
  134.                 $('.side-cat-more2').css('background-color','#22b573');
  135.                 $('.side-cat-more3').css('background-color','#22b573');
  136.             {% endif %}
  137.         {% endif %}
  138.         $(document).ready(function() {
  139.           // プラスボタンがクリックされたとき
  140.           $('.spinner-up').click(function() {
  141.             // 対応する数量フィールドのIDを取得
  142.             var productId = $(this).closest('.number-spinner-wrap').find('input[type="number"]').attr('id');
  143.             
  144.             // 対応する数量フィールドの値を取得
  145.             var quantity = parseInt($('#' + productId).val());
  146.         
  147.             // 値を増加させて数量フィールドに設定
  148.             $('#' + productId).val(quantity + 1);
  149.           });
  150.         
  151.           // マイナスボタンがクリックされたとき
  152.           $('.spinner-down').click(function() {
  153.             // 対応する数量フィールドのIDを取得
  154.             var productId = $(this).closest('.number-spinner-wrap').find('input[type="number"]').attr('id');
  155.             
  156.             // 対応する数量フィールドの値を取得
  157.             var quantity = parseInt($('#' + productId).val());
  158.         
  159.             // 値を減少させて数量フィールドに設定 (1未満にはしない)
  160.             if (quantity > 1) {
  161.               $('#' + productId).val(quantity - 1);
  162.             }
  163.           });
  164.         });
  165.     </script>
  166. {% endblock %}
  167. {% block main %}
  168.     <div class="ec-layoutRole__mainTop">
  169.         <div class="top-content-box cat_mob_top-content-box">
  170.             {% if search_form.category_id.vars.errors|length > 0 %}
  171.                 <div class="test">
  172.                     <p class="errormsg text-danger">{{ 'front.product.search__category_not_found'|trans }}</p>
  173.                 </div>
  174.             {% else %}
  175.                 <div class="sort-big-box">
  176.                     <h2>商品一覧</h2>
  177.                     <div class="sort-box">
  178.                         <a href="{{ app.request.getUri }}&orderby=0">おすすめ順</a>
  179.                         <a href="{{ app.request.getUri }}&orderby=2">新着順</a>
  180.                         <a href="{{ app.request.getUri }}&orderby=1">価格の安い順</a>
  181.                         <a href="{{ app.request.getUri }}&orderby=3">価格の高い順</a>
  182.                     </div>
  183.                     {% if cn1 is not empty or cn2 is not empty or cn3 is not empty or cn4 is not empty or cn5 is not empty or cn6 is not empty %}
  184.                         <p class="search_res_text">検索ワード:{{ cn2 }}{{ cn3 }}{{ cn4 }}{{ cn5 }}{{ cn6 }}{{ cn7 }}{{ cn1 }}</p>
  185.                     {% endif %}
  186.                 </div>
  187.                <div class="product-big-list">
  188.                     {% if orderby %}
  189.                         {% if pagination.totalItemCount > 0 %}
  190.                             {% for Product in pagination %}
  191.                                 <div class="product-list-box">
  192.                                     {% if app.request.query.get('category_id') == 219 or app.request.query.get('category_id') == 218 %}
  193.                                         <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}">
  194.                                     {% else %}
  195.                                         <a href="{{ url('product_detail', {'id': Product.id}) }}">
  196.                                             <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}">
  197.                                         </a>
  198.                                     {% endif %}
  199.                                     <p>{{ Product.name }}</p>
  200.                                     <p class="price">
  201.                                         {% if Product.hasProductClass %}
  202.                                             {% if Product.getPrice02Min == Product.getPrice02Max %}
  203.                                                 {{ Product.getPrice02IncTaxMin|number_format }}
  204.                                             {% else %}
  205.                                                 {{ Product.getPrice02IncTaxMin|number_format }} ~ {{ Product.getPrice02IncTaxMax|number_format }}
  206.                                             {% endif %}
  207.                                         {% else %}
  208.                                             {{ Product.getPrice02IncTaxMin|number_format }}
  209.                                         {% endif %}
  210.                                         <span>円</span>
  211.                                     </p>
  212.                                     {% if Product.stock_find %}
  213.                                         <form name="form{{ Product.id }}" id="productForm{{ Product.id }}" action="{{ url('product_add_cart', {id:Product.id}) }}" method="post">
  214.                                                 {% if hasCategory %}
  215.                                                     {% if RootCategory == "買い取り" or Category == "買い取り" %}
  216.                                                         <input type="hidden" name="buyflg" value="1">
  217.                                                     {% else %}
  218.                                                     {% endif %}
  219.                                                 {% endif %}
  220.                                             <label class="number-spinner-wrap">
  221.                                                 <input type="number" id="quantity{{ Product.id }}" name="quantity" required="required" min="1" maxlength="9" class="test5" value="1">
  222.                                                 <span class="spinner spinner-down"> <img src="{{ asset('/html/user_data/assets/img/minus.png') }}" class="numcursul" alt=""> </span>
  223.                                                 <span class="spinner spinner-up"> <img src="{{ asset('/html/user_data/assets/img/plus.png') }}" class="numcursul" alt=""> </span>
  224.                                             </label>
  225.                                             <input type="hidden" id="product_id{{ Product.id }}" name="product_id" value="{{ Product.id }}">
  226.                                             <input type="hidden" id="ProductClass" name="ProductClass" value="{{ Product.ProductClasses[0].id }}">
  227.                                             <input type="hidden" id="_token{{ Product.id }}" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />
  228.                                         </form>
  229.                                             {% if hasCategory %}
  230.                                                 {% if RootCategory == "買い取り" or Category == "買い取り" %}
  231.                                                     <div class="cart-in-btn">
  232.                                                         <button class="add-cart-custom" data-cartid="{{ Product.id }}" form="productForm{{ Product.id }}" type="submit"> 売却する </button>
  233.                                                     </div>
  234.                                                 {% else %}
  235.                                                     <div class="cart-in-btn">
  236.                                                         <button class="add-cart-custom" data-cartid="{{ Product.id }}" form="productForm{{ Product.id }}" type="submit"> カートに入れる </button>
  237.                                                     </div>
  238.                                                 {% endif %}
  239.                                             {% endif %}
  240.                                     {% else %}
  241.                                         <div class="cart-in-btn">
  242.                                             <button type="button" class="add-cart-custom" disabled="disabled"> {{ '品切れ中'|trans }} </button>
  243.                                         </div>
  244.                                     {% endif %}
  245.                                 </div>
  246.                             {% endfor %}
  247.                         {% endif %}
  248.                     {% else %}
  249.                         {% if groupedProducts is defined and groupedProducts|length > 0 %}
  250.                             {% for rarity, products in groupedProducts %}
  251.                                 {% if products is not empty %}
  252.                                     <h2>{{ rarity }} 商品</h2>
  253.                                     <div class="rarity-group-{{ rarity|lower }} product-list-container">
  254.                                         {% for Product in products %}
  255.                                             <div class="product-list-box">
  256.                                                 {% if app.request.query.get('category_id') == 219 or app.request.query.get('category_id') == 218 %}
  257.                                                     <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}">
  258.                                                 {% else %}
  259.                                                     <a href="{{ url('product_detail', {'id': Product.id}) }}">
  260.                                                         <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}">
  261.                                                     </a>
  262.                                                 {% endif %}
  263.                                                 <p>{{ Product.name }}</p>
  264.                                                 <p class="price">
  265.                                                     {% if Product.hasProductClass %}
  266.                                                         {% if Product.getPrice02Min == Product.getPrice02Max %}
  267.                                                             {{ Product.getPrice02IncTaxMin|number_format }}
  268.                                                         {% else %}
  269.                                                             {{ Product.getPrice02IncTaxMin|number_format }} 〜 {{ Product.getPrice02IncTaxMax|number_format }}
  270.                                                         {% endif %}
  271.                                                     {% else %}
  272.                                                         {{ Product.getPrice02IncTaxMin|number_format }}
  273.                                                     {% endif %}
  274.                                                     <span>円</span>
  275.                                                 </p>
  276.                                                 {% if Product.stock_find %}
  277.                                                     <form name="form{{ Product.id }}" id="productForm{{ Product.id }}" action="{{ url('product_add_cart', {id:Product.id}) }}" method="post">
  278.                                                         {% if hasCategory and (RootCategory == "買い取り" or Category == "買い取り") %}
  279.                                                             <input type="hidden" name="buyflg" value="1">
  280.                                                         {% endif %}
  281.                                                         <label class="number-spinner-wrap">
  282.                                                             <input type="number" id="quantity{{ Product.id }}" name="quantity" required="required" min="1" maxlength="9" class="test5" value="1">
  283.                                                             <span class="spinner spinner-down">
  284.                                                                 <img src="{{ asset('/html/user_data/assets/img/minus.png') }}" class="numcursul" alt="">
  285.                                                             </span>
  286.                                                             <span class="spinner spinner-up">
  287.                                                                 <img src="{{ asset('/html/user_data/assets/img/plus.png') }}" class="numcursul" alt="">
  288.                                                             </span>
  289.                                                         </label>
  290.                                                         <input type="hidden" id="product_id{{ Product.id }}" name="product_id" value="{{ Product.id }}">
  291.                                                         <input type="hidden" id="ProductClass" name="ProductClass" value="{{ Product.ProductClasses[0].id }}">
  292.                                                         <input type="hidden" id="_token{{ Product.id }}" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />
  293.                                                     </form>
  294.                                                     <div class="cart-in-btn">
  295.                                                         {% if hasCategory and (RootCategory == "買い取り" or Category == "買い取り") %}
  296.                                                             <button class="add-cart-custom" data-cartid="{{ Product.id }}" form="productForm{{ Product.id }}" type="submit"> 売却する </button>
  297.                                                         {% else %}
  298.                                                             <button class="add-cart-custom" data-cartid="{{ Product.id }}" form="productForm{{ Product.id }}" type="submit"> カートに入れる </button>
  299.                                                         {% endif %}
  300.                                                     </div>
  301.                                                 {% else %}
  302.                                                     <div class="cart-in-btn">
  303.                                                         <button type="button" class="add-cart-custom" disabled="disabled">{{ '品切れ中'|trans }}</button>
  304.                                                     </div>
  305.                                                 {% endif %}
  306.                                             </div>
  307.                                         {% endfor %}
  308.                                     </div>
  309.                                 {% endif %}
  310.                             {% endfor %}
  311.                         {% endif %}
  312.                         {# その他の商品を表示するためのセクション #}
  313.                         {% if otherProducts is defined and otherProducts|length > 0 %}
  314.                             <h2>その他の商品</h2>
  315.                             <div class="rarity-group-other product-list-container">
  316.                                 {% for Product in otherProducts %}
  317.                                     <div class="product-list-box">
  318.                                         {% if app.request.query.get('category_id') == 219 or app.request.query.get('category_id') == 218 %}
  319.                                             <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}">
  320.                                         {% else %}
  321.                                             <a href="{{ url('product_detail', {'id': Product.id}) }}">
  322.                                                 <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}">
  323.                                             </a>
  324.                                         {% endif %}
  325.                                         <p>{{ Product.name }}</p>
  326.                                         <p class="price">
  327.                                             {% if Product.hasProductClass %}
  328.                                                 {% if Product.getPrice02Min == Product.getPrice02Max %}
  329.                                                     {{ Product.getPrice02IncTaxMin|number_format }}
  330.                                                 {% else %}
  331.                                                     {{ Product.getPrice02IncTaxMin|number_format }} 〜 {{ Product.getPrice02IncTaxMax|number_format }}
  332.                                                 {% endif %}
  333.                                             {% else %}
  334.                                                 {{ Product.getPrice02IncTaxMin|number_format }}
  335.                                             {% endif %}
  336.                                             <span>円</span>
  337.                                         </p>
  338.                                         {% if Product.stock_find %}
  339.                                             <form name="form{{ Product.id }}" id="productForm{{ Product.id }}" action="{{ url('product_add_cart', {id:Product.id}) }}" method="post">
  340.                                                 {% if hasCategory and (RootCategory == "買い取り" or Category == "買い取り") %}
  341.                                                     <input type="hidden" name="buyflg" value="1">
  342.                                                 {% endif %}
  343.                                                 <label class="number-spinner-wrap">
  344.                                                     <input type="number" id="quantity{{ Product.id }}" name="quantity" required="required" min="1" maxlength="9" class="test5" value="1">
  345.                                                     <span class="spinner spinner-down">
  346.                                                         <img src="{{ asset('/html/user_data/assets/img/minus.png') }}" class="numcursul" alt="">
  347.                                                     </span>
  348.                                                     <span class="spinner spinner-up">
  349.                                                         <img src="{{ asset('/html/user_data/assets/img/plus.png') }}" class="numcursul" alt="">
  350.                                                     </span>
  351.                                                 </label>
  352.                                                 <input type="hidden" id="product_id{{ Product.id }}" name="product_id" value="{{ Product.id }}">
  353.                                                 <input type="hidden" id="ProductClass" name="ProductClass" value="{{ Product.ProductClasses[0].id }}">
  354.                                                 <input type="hidden" id="_token{{ Product.id }}" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />
  355.                                             </form>
  356.                                             <div class="cart-in-btn">
  357.                                                 {% if hasCategory and (RootCategory == "買い取り" or Category == "買い取り") %}
  358.                                                     <button class="add-cart-custom" data-cartid="{{ Product.id }}" form="productForm{{ Product.id }}" type="submit"> 売却する </button>
  359.                                                 {% else %}
  360.                                                     <button class="add-cart-custom" data-cartid="{{ Product.id }}" form="productForm{{ Product.id }}" type="submit"> カートに入れる </button>
  361.                                                 {% endif %}
  362.                                             </div>
  363.                                         {% else %}
  364.                                             <div class="cart-in-btn">
  365.                                                 <button type="button" class="add-cart-custom" disabled="disabled">{{ '品切れ中'|trans }}</button>
  366.                                             </div>
  367.                                         {% endif %}
  368.                                     </div>
  369.                                 {% endfor %}
  370.                             </div>
  371.                         {% endif %}
  372.                     {% endif %}
  373.                 </div>
  374.                 <div class="ec-modal">
  375.                     <div class="ec-modal-overlay">
  376.                         <div class="ec-modal-wrap">
  377.                             <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  378.                             <div id="ec-modal-header" class="text-center">{{ 'front.product.add_cart_complete'|trans }}</div>
  379.                             <div class="ec-modal-box">
  380.                                 <div class="ec-role">
  381.                                     <span class="ec-inlineBtn--cancel">{{ 'front.product.continue'|trans }}</span>
  382.                                     <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'common.go_to_cart'|trans }}</a>
  383.                                 </div>
  384.                             </div>
  385.                         </div>
  386.                     </div>
  387.                 </div>
  388.                 <div class="ec-pagerRole">
  389.                    {% if orderby %}
  390.                        {% include "pager.twig" with {'pages': pagination.paginationData} %}
  391.                    {% elseif app.request.query.get('category_id') == 7 or app.request.query.get('category_id') == 8 %}
  392.                        {% include "pager.twig" with {'pages': otherProducts.paginationData} %}
  393.                    {% endif %}
  394.                 </div>
  395.             {% endif %}
  396.         </div>
  397.     </div>
  398. {% endblock %}