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. {% endblock %}
  118. {% block main %}
  119.   <form name="form1" id="form1" method="get" action="?">
  120.     {% for item in search_form %}
  121.       <input type="hidden" id="{{ item.vars.id }}"
  122.              name="{{ item.vars.full_name }}"
  123.              {% if item.vars.value is not empty %}value="{{ item.vars.value }}" {% endif %}/>
  124.     {% endfor %}
  125.   </form>
  126.   <div id="wraps">
  127.       <div id="ichiran_wrap">
  128.         <form name="fm1" id="fm1" method="get" action="?">
  129.           <input type="hidden" id="category_id" name="category_id" value="{{ category_id }}" />
  130.           <dl>
  131.             <dt id="ichiran_left">
  132.               <div class="ichiran_left_wrap">
  133.                   <p class="left_title0">条件で絞り込む</p>
  134.                   <p class="left_title">価格帯</p>
  135.                     <select id="search_price" name="search_price[]" class="select_area">
  136.                       <option value="">選択してください</option>
  137.                       {% for k,v in htPrice %}
  138.                       {% set sel = (params["search_price"][k] is defined) ? "selected" : "" %}
  139.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  140.                       {% endfor %}
  141.                     </select>
  142.                   <p class="left_title">素材</p>
  143.                   <select id="search_material" name="search_material[]" class="select_area">
  144.                     <option value="">選択してください</option>
  145.                     {% for k,v in htMaterial %}
  146.                       {% set sel = (params["search_material"][k] is defined) ? "selected" : "" %}
  147.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  148.                     {% endfor %}
  149.                   </select>
  150.                   <p class="left_title">国</p>
  151.                   <select id="search_country" name="search_country[]" class="select_area">
  152.                     <option value="">選択してください</option>
  153.                     {% for k,v in htCountry %}
  154.                       {% set sel = (params["search_country"][k] is defined) ? "selected" : "" %}
  155.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  156.                     {% endfor %}
  157.                   </select>
  158.                   <p class="left_title">年代</p>
  159.                   <select id="search_year" name="search_year[]" class="select_area">
  160.                     <option value="">選択してください</option>
  161.                     {% for k,v in htYear %}
  162.                       {% set sel = (params["search_year"][k] is defined) ? "selected" : "" %}
  163.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  164.                     {% endfor %}
  165.                   </select>
  166.                   <p class="left_title">重量</p>
  167.                   <select id="search_weight" name="search_weight[]" class="select_area">
  168.                     <option value="">選択してください</option>
  169.                     {% for k,v in htWeight %}
  170.                       {% set sel = (params["search_weight"][k] is defined) ? "selected" : "" %}
  171.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  172.                     {% endfor %}
  173.                   </select>
  174.                   <p class="left_title">グレード数</p>
  175.                   <select id="search_grade" name="search_grade[]" class="select_area">
  176.                     <option value="">選択してください</option>
  177.                     {% for k,v in htGrade %}
  178.                       {% set sel = (params["search_grade"][k] is defined) ? "selected" : "" %}
  179.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  180.                     {% endfor %}
  181.                   </select>
  182.                   <p class="left_title">カテゴリー</p>
  183.                   <select id="search_category" name="search_category[]" class="select_area">
  184.                     <option value="">選択してください</option>
  185.                     {% for k,v in htCategory %}
  186.                       {% set sel = (params["search_category"][k] is defined) ? "selected" : "" %}
  187.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  188.                     {% endfor %}
  189.                   </select>
  190.                   <p class="left_title">レアリティ</p>
  191.                   <select id="search_rare" name="search_rare[]" class="select_area">
  192.                     <option value="">選択してください</option>
  193.                     {% for k,v in htRare %}
  194.                       {% set sel = (params["search_rare"][k] is defined) ? "selected" : "" %}
  195.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  196.                     {% endfor %}
  197.                   </select>
  198.                   <p class="left_title">発行枚数</p>
  199.                   <select id="search_num" name="search_num[]" class="select_area">
  200.                     <option value="">選択してください</option>
  201.                     {% for k,v in htNum %}
  202.                       {% set sel = (params["search_num"][k] is defined) ? "selected" : "" %}
  203.                       <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  204.                     {% endfor %}
  205.                   </select>
  206.                 </div>
  207.             </dt><!-- ichiran_left -->
  208.             <dd id="ichiran_right">
  209.               {% if Category.name is defined %}
  210.                 <h1>{{ Category.name }}</h1>
  211.               {% else %}
  212.                 <h1>全商品</h1>
  213.               {% endif %}
  214.               <div id="narabikae">
  215.                 <p>並び替え:</p>
  216.                 <select id="" name="disp_number" onchange="javascript:fmSubmit();" class="select_area">
  217.                   {% for k,v in htPageNum %}
  218.                   {% set sel = (k == params["disp_number"]) ? "selected" : "" %}
  219.                   <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  220.                   {% endfor %}
  221.                 </select>
  222.                 <select id="" name="orderby" onchange="javascript:fmSubmit();" class="select_area">
  223.                   {% for k,v in htOrderBy %}
  224.                   {% set sel = (k == params["orderby"]) ? "selected" : "" %}
  225.                   <option value="{{ k }}" {{ sel }}>{{ v }}</option>
  226.                   {% endfor %}
  227.                 </select>
  228.                 <label><input type="checkbox" id="stock_flg_chk" name="stock_flg_chk" value="1" {% if params.stock_flg_chk %}checked{% endif %}> 販売中のみ表示する</label>
  229.               </div><!--//narabikae-->
  230.               <hr>
  231.               {% include "pager.twig" with {'pages': pagination.paginationData} %}
  232.               {% include "page_num.twig" with {'pages': pagination.paginationData} %}
  233.               <div id="ichiran_coinlist">
  234.                 <ul>
  235.                   {% for Product in pagination %}
  236.                     {% set p_id = Product.id %}
  237.                     <li>
  238.                       <a href="{{ url('product_detail', {'id': p_id}) }}">
  239.                         <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
  240.                         {% if htStatus[p_id] is defined and htStatus[p_id] == "8" %}
  241.                           <b class="tab_yoyaku">ご予約可</b>
  242.                         {% else %}
  243.                           {% if Product.stock_find %}
  244.                             <b class="tab_zaiko">在庫有り</b>
  245.                             {% if htJigane[p_id] is defined %}
  246.                               <span class="stock_num">残り {{ Product.stock_min }}点</span>
  247.                             {% endif %}
  248.                           {% else %}
  249.                             <em class="stock_ng">現在取扱いが御座いません。</em>
  250.                           {% endif %}
  251.                         {% endif %}
  252.                         <h2>{{ Product.name }}</h2>
  253.                         {% if htStatus[p_id] is defined and htStatus[p_id] == "8" %}
  254.                           {# 予約品の場合 #}
  255.                           {% if htMeyasu[p_id] is defined and htMeyasu[p_id] > 0 %}
  256.                             <p class="meyasu_price">目安価格:{{ htMeyasu[p_id]|number_format }}円(税込)</p>
  257.                           {% endif %}
  258.                         {% elseif Product.getPrice02IncTaxMin == 0 %}
  259.                           {# 価格0円の場合 #}
  260.                           {% if htMeyasu[p_id] is defined and htMeyasu[p_id] > 0 %}
  261.                             <p class="meyasu_price">目安価格:{{ htMeyasu[p_id]|number_format }}円(税込)</p>
  262.                           {% else %}
  263.                             <p class="coin_contact">
  264.                               <a href="/product_contact?id={{ p_id }}">
  265.                                 誠にお手数ですが、お問合せお願い申し上げます。<br>新商品は現在価格が確定しておりませんので、確定次第ご案内申し上げます。
  266.                               </a>
  267.                             </p>
  268.                           {% endif %}
  269.                         {% else %}
  270.                           {# 通常の価格表示 #}
  271.                           <p>
  272.                             {% if htCPrice[p_id] is defined and htCPrice[p_id] > 0 %}
  273.                               <s>一般価格:{{ Product.getPrice02IncTaxMin|number_format }}円(税込)</s><br>
  274.                               <strong>会員価格:{{ htCPrice[p_id]|number_format }}円(税込)</strong>
  275.                             {% else %}
  276.                               一般価格:{{ Product.getPrice02IncTaxMin|number_format }}円(税込)
  277.                             {% endif %}
  278.                           </p>
  279.                         {% endif %}                        
  280.                       </a>
  281.                     </li>
  282.                   {% endfor %}
  283.                 </ul>
  284.               </div><!-- ichiran_coinlist -->
  285.               {% include "pager.twig" with {'pages': pagination.paginationData} %}
  286.               {% include "page_num.twig" with {'pages': pagination.paginationData} %}
  287.             </dd><!-- ichiran_right -->
  288.           </dl>
  289.         </form>
  290.       </div><!-- ▲ichiran_wrap -->
  291.   </div>
  292. {% endblock %}