app/template/default/Product/list.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% set sale_type = app.request.attributes.get('product_list_sale_type', 1) %}
  3. {% if sale_type == 2 %}
  4.     {% set body_class = 'product_page plaza-products' %}
  5. {% else %}
  6.     {% set body_class = 'product_page normal-products' %}
  7. {% endif %}
  8. {% block javascript %}
  9.   <script>
  10.     eccube.productsClassCategories = {
  11.     {% for Product in pagination %}
  12.         "{{ Product.id|escape('js') }}":{{ class_categories_as_json(Product)|raw }}{% if loop.last == false %},{% endif %}
  13.     {% endfor %}
  14.       };
  15.       $(function () {
  16.         // 表示件数を変更
  17.         $('.disp-number').change(function () {
  18.           var dispNumber = $(this).val();
  19.           $('#disp_number').val(dispNumber);
  20.           $('#pageno').val(1);
  21.           $("#form1").submit();
  22.         });
  23.         // 並び順を変更
  24.         $('.order-by').change(function () {
  25.           var orderBy = $(this).val();
  26.           $('#orderby').val(orderBy);
  27.           $('#pageno').val(1);
  28.           $("#form1").submit();
  29.         });
  30.         $('.add-cart').on('click', function (e) {
  31.           var $form = $(this).parents('li').find('form');
  32.           // 個数フォームのチェック
  33.           var $quantity = $form.parent().find('.quantity');
  34.           if ($quantity.val() < 1) {
  35.             $quantity[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  36.             setTimeout(function () {
  37.               loadingOverlay('hide');
  38.             }, 100);
  39.             return true;
  40.           } else {
  41.             $quantity[0].setCustomValidity('');
  42.           }
  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) {
  50.               // Buttonを無効にする
  51.               $('.add-cart').prop('disabled', true);
  52.             }
  53.           }).done(function (data) {
  54.             // レスポンス内のメッセージをalertで表示
  55.             $.each(data.messages, function () {
  56.               $('#ec-modal-header').text(this);
  57.             });
  58.             $('.ec-modal').show()
  59.             // カートブロックを更新する
  60.             $.ajax({
  61.               url: '{{ url('block_cart') }}',
  62.               type: 'GET',
  63.               dataType: 'html'
  64.             }).done(function (html) {
  65.               $('.ec-headerRole__cart').html(html);
  66.             });
  67.           }).fail(function (data) {
  68.             alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  69.           }).always(function (data) {
  70.             // Buttonを有効にする
  71.             $('.add-cart').prop('disabled', false);
  72.           });
  73.         });
  74.       });
  75.       $('.ec-modal-wrap').on('click', function (e) {
  76.         // モーダル内の処理は外側にバブリングさせない
  77.         e.stopPropagation();
  78.       });
  79.       $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function () {
  80.         $('.ec-modal').hide()
  81.       });
  82.       $(function () {
  83.         $("input[type='checkbox']").each(function () {
  84.           $(this).click(function () {
  85.             $("#fm1").submit();
  86.             return false;
  87.           });
  88.         });
  89.       });
  90.       $(function(){
  91.         $("select.select_area").each(function(){
  92.           $(this).on("change", function () {
  93.             $("#fm1").submit();
  94.             return false;
  95.           });
  96.         });
  97.       });
  98.       // 商品一覧の高さを揃える
  99.       $(function () {
  100.         var h = 0;
  101.         $("#ichiran_coinlist ul li").each(function () {
  102.           if ($(this).height() > h) {
  103.             h = $(this).height();
  104.           }
  105.         });
  106.         $("#ichiran_coinlist ul li").css("height", h + "px");
  107.       });
  108.       // 並び順を変更
  109.       function fmSubmit() {
  110.         $("#fm1").submit();
  111.       }
  112.       // 表示件数を変更
  113.       function fnChangeDispNumber() {
  114.         $("#fm1").submit();
  115.       }
  116.   </script>
  117.   <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js" defer></script>
  118.   <script src="/js/list-hover-zoom.js?v=2" defer></script>
  119. {% endblock %}
  120. {% block main %}
  121.   <form name="form1" id="form1" method="get" action="?">
  122.     {% for item in search_form %}
  123.       <input type="hidden" id="{{ item.vars.id }}"
  124.              name="{{ item.vars.full_name }}"
  125.              {% if item.vars.value is not empty %}value="{{ item.vars.value }}" {% endif %}/>
  126.     {% endfor %}
  127.   </form>
  128.   <div id="wraps">
  129.       <div id="ichiran_wrap">
  130.         <form name="fm1" id="fm1" method="get" action="?">
  131.           <input type="hidden" id="category_id" name="category_id" value="{{ category_id }}" />
  132.           <dl>
  133.             <dt id="ichiran_left">
  134.               <div class="ichiran_left_wrap">
  135.                   <p class="left_title0">条件で絞り込む</p>
  136.                   <p class="left_title">価格帯</p>
  137.                     <select id="search_price" name="search_price[]" class="select_area">
  138.                       <option value="">選択してください</option>
  139.                       {% for k,v in htPrice %}
  140.                       {% set sel = (params["search_price"][k] is defined) ? "selected" : "" %}
  141.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  142.                       {% endfor %}
  143.                     </select>
  144.                   <p class="left_title">素材</p>
  145.                   <select id="search_material" name="search_material[]" class="select_area">
  146.                     <option value="">選択してください</option>
  147.                     {% for k,v in htMaterial %}
  148.                       {% set sel = (params["search_material"][k] is defined) ? "selected" : "" %}
  149.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  150.                     {% endfor %}
  151.                   </select>
  152.                   <p class="left_title">国</p>
  153.                   <select id="search_country" name="search_country[]" class="select_area">
  154.                     <option value="">選択してください</option>
  155.                     {% for k,v in htCountry %}
  156.                       {% set sel = (params["search_country"][k] is defined) ? "selected" : "" %}
  157.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  158.                     {% endfor %}
  159.                   </select>
  160.                   <p class="left_title">年代</p>
  161.                   <select id="search_year" name="search_year[]" class="select_area">
  162.                     <option value="">選択してください</option>
  163.                     {% for k,v in htYear %}
  164.                       {% set sel = (params["search_year"][k] is defined) ? "selected" : "" %}
  165.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  166.                     {% endfor %}
  167.                   </select>
  168.                   <p class="left_title">重量</p>
  169.                   <select id="search_weight" name="search_weight[]" class="select_area">
  170.                     <option value="">選択してください</option>
  171.                     {% for k,v in htWeight %}
  172.                       {% set sel = (params["search_weight"][k] is defined) ? "selected" : "" %}
  173.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  174.                     {% endfor %}
  175.                   </select>
  176.                   <p class="left_title">グレード数</p>
  177.                   <select id="search_grade" name="search_grade[]" class="select_area">
  178.                     <option value="">選択してください</option>
  179.                     {% for k,v in htGrade %}
  180.                       {% set sel = (params["search_grade"][k] is defined) ? "selected" : "" %}
  181.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  182.                     {% endfor %}
  183.                   </select>
  184.                   <p class="left_title">カテゴリー</p>
  185.                   <select id="search_category" name="search_category[]" class="select_area">
  186.                     <option value="">選択してください</option>
  187.                     {% for k,v in htCategory %}
  188.                       {% set sel = (params["search_category"][k] is defined) ? "selected" : "" %}
  189.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  190.                     {% endfor %}
  191.                   </select>
  192.                   <p class="left_title">レアリティ</p>
  193.                   <select id="search_rare" name="search_rare[]" class="select_area">
  194.                     <option value="">選択してください</option>
  195.                     {% for k,v in htRare %}
  196.                       {% set sel = (params["search_rare"][k] is defined) ? "selected" : "" %}
  197.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  198.                     {% endfor %}
  199.                   </select>
  200.                   <p class="left_title">発行枚数</p>
  201.                   <select id="search_num" name="search_num[]" class="select_area">
  202.                     <option value="">選択してください</option>
  203.                     {% for k,v in htNum %}
  204.                       {% set sel = (params["search_num"][k] is defined) ? "selected" : "" %}
  205.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  206.                     {% endfor %}
  207.                   </select>
  208.                 </div>
  209.             </dt><!-- ichiran_left -->
  210.             <dd id="ichiran_right">
  211.               {% if Category.name is defined %}
  212.                 <h1>{{ Category.name }}</h1>
  213.               {% else %}
  214.                 <h1>全商品</h1>
  215.               {% endif %}
  216.               <div id="narabikae">
  217.                 <p>並び替え:</p>
  218.                 <select id="" name="disp_number" onchange="javascript:fmSubmit();" class="select_area">
  219.                   {% for k,v in htPageNum %}
  220.                   {% set sel = (k == params["disp_number"]) ? "selected" : "" %}
  221.                   <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  222.                   {% endfor %}
  223.                 </select>
  224.                 <select id="" name="orderby" onchange="javascript:fmSubmit();" class="select_area">
  225.                   {% for k,v in htOrderBy %}
  226.                   {% set sel = (k == params["orderby"]) ? "selected" : "" %}
  227.                   <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  228.                   {% endfor %}
  229.                 </select>
  230.                 <label><input type="checkbox" id="stock_flg_chk" name="stock_flg_chk" value="1" {% if params.stock_flg_chk %}checked{% endif %}> 販売中のみ表示する</label>
  231.               </div><!--//narabikae-->
  232.               <hr>
  233.               {% include "pager.twig" with {'pages': pagination.paginationData} %}
  234.               {% include "page_num.twig" with {'pages': pagination.paginationData} %}
  235.               <div id="ichiran_coinlist">
  236.                 <ul>
  237.                   {% for Product in pagination %}
  238.                     {% set p_id = Product.id %}
  239.                     <li>
  240.                       <a href="{{ url('product_detail', {'id': p_id}) }}">
  241.                         <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
  242.                         {% if htStatus[p_id] is defined and htStatus[p_id] == "8" %}
  243.                           <b class="tab_yoyaku">ご予約可</b>
  244.                         {% else %}
  245.                           {% if Product.stock_find %}
  246.                             <b class="tab_zaiko">在庫有り</b>
  247.                             {% if htJigane[p_id] is defined %}
  248.                               <span class="stock_num">残り {{ Product.stock_min }}点</span>
  249.                             {% endif %}
  250.                           {% else %}
  251.                             <em class="stock_ng">現在取扱いが御座いません。</em>
  252.                           {% endif %}
  253.                         {% endif %}
  254.                         <h2>{{ Product.name }}</h2>
  255.                         {% if htStatus[p_id] is defined and htStatus[p_id] == "8" %}
  256.                           {# 予約品の場合 #}
  257.                           {% if htMeyasu[p_id] is defined and htMeyasu[p_id] > 0 %}
  258.                             <p class="meyasu_price">目安価格:{{ htMeyasu[p_id]|number_format }}円(税込)</p>
  259.                           {% endif %}
  260.                         {% elseif Product.getPrice02IncTaxMin == 0 %}
  261.                           {# 価格0円の場合 #}
  262.                           {% if htMeyasu[p_id] is defined and htMeyasu[p_id] > 0 %}
  263.                             <p class="meyasu_price">目安価格:{{ htMeyasu[p_id]|number_format }}円(税込)</p>
  264.                           {% else %}
  265.                             <p class="coin_contact">
  266.                               <a href="/product_contact?id={{ p_id }}">
  267.                                 誠にお手数ですが、お問合せお願い申し上げます。<br>新商品は現在価格が確定しておりませんので、確定次第ご案内申し上げます。
  268.                               </a>
  269.                             </p>
  270.                           {% endif %}
  271.                         {% else %}
  272.                           {# 通常の価格表示 #}
  273.                           <p>
  274.                             {% if htCPrice[p_id] is defined and htCPrice[p_id] > 0 %}
  275.                               <s>一般価格:{{ Product.getPrice02IncTaxMin|number_format }}円(税込)</s><br>
  276.                               <strong>会員価格:{{ htCPrice[p_id]|number_format }}円(税込)</strong>
  277.                             {% else %}
  278.                               一般価格:{{ Product.getPrice02IncTaxMin|number_format }}円(税込)
  279.                             {% endif %}
  280.                           </p>
  281.                         {% endif %}                        
  282.                       </a>
  283.                     </li>
  284.                   {% endfor %}
  285.                 </ul>
  286.               </div><!-- ichiran_coinlist -->
  287.               {% include "pager.twig" with {'pages': pagination.paginationData} %}
  288.               {% include "page_num.twig" with {'pages': pagination.paginationData} %}
  289.             </dd><!-- ichiran_right -->
  290.           </dl>
  291.         </form>
  292.       </div><!-- ▲ichiran_wrap -->
  293.   </div>
  294. {% endblock %}