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

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% set body_class = 'product_page' %}
  3. {% block javascript %}
  4.     <script>
  5.         eccube.productsClassCategories = {
  6.             {% for Product in pagination %}
  7.             "{{ Product.id|escape('js') }}": {{ class_categories_as_json(Product)|raw }}{% if loop.last == false %}, {% endif %}
  8.             {% endfor %}
  9.         };
  10.         $(function() {
  11.             // 検索条件を追加
  12.             $('.btn-condition').click(function() {
  13.                 $('#active_idx').val($(this).index());
  14.             });
  15.             $('.form-check-input').change(function() {
  16.                 $("#form1").submit();
  17.             });
  18.             // 表示件数を変更
  19.             $('.disp-number').change(function() {
  20.                 var dispNumber = $(this).val();
  21.                 $('#disp_number').val(dispNumber);
  22.                 $('#pageno').val(1);
  23.                 $("#form1").submit();
  24.             });
  25.             // 並び順を変更
  26.             $('.order-by').change(function() {
  27.                 var orderBy = $(this).val();
  28.                 $('#orderby').val(orderBy);
  29.                 $('#pageno').val(1);
  30.                 $("#form1").submit();
  31.             });
  32.             $('.add-cart').on('click', function(e) {
  33.                 var $form = $(this).parents('li').find('form');
  34.                 // TODO: test 修正要
  35.                 // 規格1フォームの必須チェック
  36.                 var $form_select = $form.parent().find('.form-select');
  37.                 if ($form_select.val() == '__unselected' || $form_select.val() == '') {
  38.                     $form_select[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  39.                     setTimeout(function() {
  40.                         loadingOverlay('hide');
  41.                     }, 100);
  42.                     return true;
  43.                 } else {
  44.                     $form_select[0].setCustomValidity('');
  45.                 }
  46.                 // 個数フォームのチェック
  47.                 var $quantity = $form.parent().find('.quantity');
  48.                 if ($quantity.val() < 1) {
  49.                     $quantity[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  50.                     setTimeout(function() {
  51.                         loadingOverlay('hide');
  52.                     }, 100);
  53.                     return true;
  54.                 } else {
  55.                     $quantity[0].setCustomValidity('');
  56.                 }
  57.                 e.preventDefault();
  58.                 $.ajax({
  59.                     url: $form.attr('action'),
  60.                     type: $form.attr('method'),
  61.                     data: $form.serialize(),
  62.                     dataType: 'json',
  63.                     beforeSend: function(xhr, settings) {
  64.                         // Buttonを無効にする
  65.                         $('.add-cart').prop('disabled', true);
  66.                     }
  67.                 }).done(function(data) {
  68.                     // レスポンス内のメッセージをalertで表示
  69.                     $.each(data.messages, function() {
  70.                         $('#ec-modal-header').text(this);
  71.                     });
  72.                     $('.ec-modal').show()
  73.                     // カートブロックを更新する
  74.                     $.ajax({
  75.                         url: '{{ url('block_cart') }}',
  76.                         type: 'GET',
  77.                         dataType: 'html'
  78.                     }).done(function(html) {
  79.                         $('.ec-headerRole__cart').html(html);
  80.                     });
  81.                 }).fail(function(data) {
  82.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  83.                 }).always(function(data) {
  84.                     // Buttonを有効にする
  85.                     $('.add-cart').prop('disabled', false);
  86.                 });
  87.             });
  88.             $('.favorite').click(function(event) {
  89.                 if ($(this).attr('disabled') != 'disabled') {
  90.                     $(this).closest('li.product').find('.list-add-favorite').submit();
  91.                 }
  92.             });
  93.         });
  94.         $('.ec-modal-wrap').on('click', function(e) {
  95.             // モーダル内の処理は外側にバブリングさせない
  96.             e.stopPropagation();
  97.         });
  98.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  99.             $('.ec-modal').hide()
  100.         });
  101.     </script>
  102.     <script>
  103.         $(document).ready(function(){
  104.             //チェックボックス処理
  105.             $(".left .list-btn .btn-condition").eq($('#active_idx').val()).addClass('active');
  106.             $(".right .item").eq($('#active_idx').val()).addClass('active');
  107.             $(".right .item").each(function(index, el) {
  108.                 var chk_cnt = $(this).find("input[type='checkbox']:checked").length;
  109.                 $('.btn-condition').eq(index).find('.chk-cnt').text(chk_cnt);
  110.                 if (chk_cnt > 0) {
  111.                     $('.btn-condition').eq(index).find('.chk-cnt').show();
  112.                 }
  113.                 else {
  114.                     $('.btn-condition').eq(index).find('.chk-cnt').hide();
  115.                 }
  116.             });
  117.             $(".left .list-btn .btn-condition").click(function(e){
  118.                 if (!$(this).hasClass("active")) {
  119.                     var tabNum = $(this).index();
  120.                     var nthChild = tabNum+1;
  121.                     $(".left .list-btn .btn-condition.active").removeClass("active");
  122.                     $(this).addClass("active");
  123.                     $(".right .item.active").removeClass("active");
  124.                     $(".right .item:nth-child("+nthChild+")").addClass("active");
  125.                 }
  126.             });
  127.             $(".reset").click(function(e){
  128.                 $(".item input[type='checkbox']:checked").prop('checked', false);
  129.                 $("#form1").submit();
  130.             });
  131.         });
  132.     </script>
  133. {% endblock %}
  134. {% block main %}
  135.     <div class="ec-product-page v2">
  136.         <div class="ec-banner" {% if Category.id == 118 %} style="background-color: #fff;" {% endif %}>
  137.             <div class="ec-banner__inner">
  138.                 <div class="inner">
  139.                     {% if Category is not null %}
  140.                         {% if Category.id == 115 %}
  141.                             <h2>{{ Category.name }}</h2>
  142.                         {% elseif Category.id == 118  %}
  143.                             <h2>自社ローン対象商品<br />(分割24回のみ)</h2>
  144.                         {% else %}
  145.                             <h2>{{ Category.name }}商品一覧</h2>
  146.                         {% endif %}
  147.                     {% else %}
  148.                         <h2>商品一覧</h2>
  149.                     {% endif %}
  150.                 </div>
  151.             </div>
  152.             <div class="ec-breadcrumb" {% if Category is not null and Category.id == 115 %}style="margin-bottom: 2rem"{% endif %} {% if Category.id == 118 %} style="margin-bottom: 2rem;" {% endif %}>
  153.                 <ul class="ec-breadcrumb__menu">
  154.                     <li class="ec-breadcrumb__item"><a href="{{ url('homepage') }}">TOP</a></li>
  155.                     <li class="ec-breadcrumb__item"><span>></span></li>
  156.                     <li class="ec-breadcrumb__item">
  157.                     {% if Category is not null %}
  158.                         {% if Category.id == 115 %}
  159.                             <p>{{ Category.name }}</p>
  160.                         {% elseif Category.id == 118  %}
  161.                             <p>自社ローン対象商品(分割24回のみ)</p>
  162.                         {% else %}
  163.                             <p>{{ Category.name }}商品一覧</p>
  164.                         {% endif %}
  165.                     {% else %}
  166.                         <p>商品一覧</p>
  167.                     {% endif %}
  168.                     </li>
  169.                 </ul>
  170.             </div>
  171.         </div>
  172.         <div class="ec-product-main">
  173.             {% if Category is null or Category.id != 115 %}
  174.                 {% if Category.id != 118 %}
  175.                 <div class="ec-product__inner v2">
  176.                     <div class="inner">
  177.                         <div class="ec-product__group">
  178.                              <form name="form1" id="form1" method="get" action="?">
  179.                                 {% for item in search_form %}
  180.                                     {% if item.vars.value is not iterable %}
  181.                                         <input type="hidden" id="{{ item.vars.id }}"
  182.                                         name="{{ item.vars.full_name }}"
  183.                                         {% if item.vars.value is not empty %}value="{{ item.vars.value }}" {% endif %}/>
  184.                                     {% endif %}
  185.                                 {% endfor %}
  186.                                 <div class="conditions">
  187.                                     <div class="left">
  188.                                         <div class="list-btn">
  189.                                         {% if Category is not null and Category.id == 7 %}
  190.                                             <a class="btn-condition"><span>業種</span><span class="chk-cnt">1</span></a>
  191.                                             <a class="btn-condition"><span>形</span><span class="chk-cnt">1</span></a>
  192.                                             <a class="btn-condition"><span>馬力</span><span class="chk-cnt">1</span></a>
  193.                                         {% else %}
  194.                                             <a class="btn-condition"><span>機能</span><span class="chk-cnt">1</span></a>
  195.                                             <a class="btn-condition"><span>お部屋の広さ</span><span class="chk-cnt">1</span></a>
  196.                                             <a class="btn-condition"><span>メーカー</span><span class="chk-cnt">1</span></a>
  197.                                         {% endif %}
  198.                                             <a class="btn-condition"><span>価格</span><span class="chk-cnt">1</span></a>
  199.                                         </div>
  200.                                         <a class="reset">
  201.                                             <span>条件をリセット</span>
  202.                                             <img src="{{ asset('assets/img/common/ic-reset.png') }}" alt="">
  203.                                         </a>
  204.                                         <div class="count">
  205.                                             <p><span>検索結果</span>{{ pagination.totalItemCount }}件</p>
  206.                                         </div>
  207.                                     </div>
  208.                                     <div style="flex: 1;">
  209.                                         <div class="right">
  210.                                             {% if Category is not null and Category.id == 7 %}
  211.                                                 {{ form_widget(search_form.kind, {'id': '', 'attr': {'class': 'item'}}) }}
  212.                                                 {{ form_widget(search_form.shape, {'id': '', 'attr': {'class': 'item'}}) }}
  213.                                                 {{ form_widget(search_form.power, {'id': '', 'attr': {'class': 'item'}}) }}
  214.                                                 {{ form_widget(search_form.search_price_workplace, {'id': '', 'attr': {'class': 'item'}}) }}
  215.                                             {% else %}
  216.                                                 {{ form_widget(search_form.feature, {'id': '', 'attr': {'class': 'item'}}) }}
  217.                                                 {{ form_widget(search_form.room, {'id': '', 'attr': {'class': 'item'}}) }}
  218.                                                 {{ form_widget(search_form.maker, {'id': '', 'attr': {'class': 'item'}}) }}
  219.                                                 {{ form_widget(search_form.search_price_room, {'id': '', 'attr': {'class': 'item'}}) }}
  220.                                             {% endif %}
  221.                                         </div>
  222.                                         {% if Category is not null and Category.id == 8 %}
  223.                                             <div class="conditions__0yen">
  224.                                                 {{ form_widget(search_form.search_0_yen, {'id': '', 'attr': {'class': 'item'}}) }}    
  225.                                             </div>
  226.                                         {% endif %}
  227.                                     </div>                            
  228.                                 </div>
  229.                             </form>
  230.                         </div>
  231.                     </div>
  232.                 </div>
  233.                 {% endif %}
  234.             {% else %}
  235.                 <form name="form1" id="form1" method="get" action="?">
  236.                 {% for item in search_form %}
  237.                     {% if item.vars.value is not iterable %}
  238.                         <input type="hidden" id="{{ item.vars.id }}"
  239.                         name="{{ item.vars.full_name }}"
  240.                         {% if item.vars.value is not empty %}value="{{ item.vars.value }}" {% endif %}/>
  241.                     {% endif %}
  242.                 {% endfor %}
  243.                 </form>
  244.             {% endif %}
  245.             <div class="ec-product__inner">
  246.                 <div class="inner">
  247.                     <div class="ec-product__group">
  248.                         {% if Category.id == 118 %}
  249.                         <div class="title-add">
  250.                             <p>他で購入できなかった方も安心<i>!</i><br />
  251.                                 高性能自社ローン限定商品<span>( 分割24回のみ) </span></p>
  252.                         </div>
  253.                         {% endif %}
  254.                         <div class="arrange">
  255.                             {{ form_widget(search_form.orderby, {'id': '', 'attr': {'class': 'order-by'}}) }}
  256.                         </div>
  257.                         {% if pagination.totalItemCount > 0 %}
  258.                             <ul class="list-product" style="padding-left: 2px;">
  259.                             {% for Product in pagination %}
  260.                                 {% set isTelProduct = false %}
  261.                                 {% set isLoanProduct = false %}
  262.                                 {% if Product.ProductCategories is not empty %}
  263.                                     {% for ProductCategory in Product.ProductCategories %}
  264.                                         {% if ProductCategory.Category.id == 117 %}
  265.                                             {% set isTelProduct = true %}
  266.                                         {% endif %}
  267.                                         {% if ProductCategory.Category.id == 118 %}
  268.                                             {% set isLoanProduct = true %}
  269.                                         {% endif %}
  270.                                     {% endfor %}
  271.                                 {% endif %}
  272.                                 <li class="product" style="margin: -1px 0 0 -1px;">
  273.                                     <a href="{{ url('product_detail', {'id': Product.id}) }}">
  274.                                         <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
  275.                                         <div class="text">
  276.                                             <p style="font-weight: bold;">{{ Product.name }}</p>
  277.                                             {% if Product.description_list %}
  278.                                                 <p>{{ Product.description_list|raw|nl2br }}</p>
  279.                                             {% endif %}
  280.                                         </div>
  281.                                     </a>
  282.                                     <div class="product__price">
  283.                                         <div class="group">
  284.                                             <div class="price">
  285.                                             {% if Product.hasProductClass %}
  286.                                                 {% if Product.getPrice02Min == Product.getPrice02Max %}
  287.                                                     <p>{{ Product.getPrice02IncTaxMin|price }}<small>(税込)</small></p>
  288.                                                 {% else %}
  289.                                                     <p>{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}<small>(税込)</small></p>
  290.                                                 {% endif %}
  291.                                             {% else %}
  292.                                                 <p {% if isLoanProduct == true %} class="text-b" {% endif %}>
  293.                                                     {{ Product.getPrice02IncTaxMin|price }}<small>(税込)</small>
  294.                                                 </p>
  295.                                             {% endif %}
  296.                                             </div>
  297.                                             <div class="list-cate">
  298.                                                 {% if Product.ProductCategories is not empty %}
  299.                                                     {% for ProductCategory in Product.ProductCategories %}
  300.                                                         {% if ProductCategory.Category.Parent is not empty %}
  301.                                                             {% set parentCat = ProductCategory.Category.Parent %}
  302.                                                             {% if parentCat.id == 20 %}
  303.                                                                 <p>{{ ProductCategory.Category.name }}</p>
  304.                                                             {% endif %}
  305.                                                         {% endif %}
  306.                                                     {% endfor %}
  307.                                                 {% endif %}
  308.                                             </div>
  309.                                             <div class="num-product">
  310.                                                 {% if Category is not null and Category.id == 7 %}
  311.                                                     {% if Product.ProductCategories is not empty %}
  312.                                                         {% for ProductCategory in Product.ProductCategories %}
  313.                                                             {% if ProductCategory.Category.Parent is not empty %}
  314.                                                                 {% set parentCat = ProductCategory.Category.Parent %}
  315.                                                                 {% if parentCat.id == 51 %}
  316.                                                                     <p>{{ ProductCategory.Category.name }}</p>
  317.                                                                 {% endif %}
  318.                                                             {% endif %}
  319.                                                         {% endfor %}
  320.                                                     {% endif %}
  321.                                                 {% else %}
  322.                                                     {% if Product.code_min is not empty %}
  323.                                                         <p>品番 {{ Product.code_min }}{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}</p>
  324.                                                     {% endif %}
  325.                                                 {% endif %}
  326.                                             </div>
  327.                                         </div>
  328.                                         {% if Product.stock_find %}
  329.                                             {% set form = forms[Product.id] %}
  330.                                             <form name="form{{ Product.id }}" id="productForm{{ Product.id }}" action="{{ url('product_add_cart', {id:Product.id}) }}" method="post">
  331.                                                 {{ form_widget(form._token) }}
  332.                                                 {{ form_widget(form.product_id) }}
  333.                                                 {{ form_widget(form.ProductClass) }}
  334.                                                 
  335.                                                 <div class="ec-productRole__actions" style="margin-top: 1rem;">
  336.                                                     {% if form.classcategory_id1 is defined %}
  337.                                                         <div class="ec-select">
  338.                                                             <label class="form-label required" style="min-width: 3rem;">カラー</label>
  339.                                                             {{ form_widget(form.classcategory_id1) }}
  340.                                                             {{ form_errors(form.classcategory_id1) }}
  341.                                                         </div>
  342.                                                         {% if form.classcategory_id2 is defined %}
  343.                                                             <div class="ec-select">
  344.                                                                 {{ form_widget(form.classcategory_id2) }}
  345.                                                                 {{ form_errors(form.classcategory_id2) }}
  346.                                                             </div>
  347.                                                         {% endif %}
  348.                                                     {% endif %}
  349.                                                     {% if isTelProduct != true %}
  350.                                                         <div class="ec-numberInput">
  351.                                                             <span style="min-width: 5rem">{{ '数量'|trans }}</span>
  352.                                                             {{ form_widget(form.quantity, {'attr': {'class': 'quantity'}}) }}
  353.                                                             {{ form_errors(form.quantity) }}
  354.                                                         </div>
  355.                                                     {% endif %}
  356.                                                 </div>
  357.                                                 {# {{ form_rest(form) }} #}
  358.                                             </form>
  359.                                             <div class="group">
  360.                                                 <div class="list-btn ec-productRole__btn">
  361.                                                     {% if isTelProduct == true %}
  362.                                                         <a href="tel:080-0222-4466" class="cart cart-tel" style="border: none;">
  363.                                                             <img src="{{ asset('assets/img/common/ic-tel2-white.png') }}" width="15" alt="">
  364.                                                             <span>{{ '080-0222-4466'|trans }}</span>
  365.                                                         </a>
  366.                                                     {% elseif isLoanProduct == true %}
  367.                                                         <a href="{{ url('loan_examination') }}?id={{ Product.id }}" class="cart cart-loan" style="border: none;">
  368.                                                             <span>{{ '審査のお申込み'|trans }}</span>
  369.                                                         </a>
  370.                                                     {% else %}
  371.                                                         <button type="submit" class="add-cart cart" data-cartid="{{ Product.id }}" form="productForm{{ Product.id }}" style="border: none;">
  372.                                                             <img src="{{ asset('assets/img/common/ic-cart-v2.png') }}" alt="">
  373.                                                             <span>カートに入れる</span>
  374.                                                         </button>
  375.                                                     {% endif %}
  376.                                                     {% if BaseInfo.option_favorite_product %}
  377.                                                         {% set is_favorite = false %}
  378.                                                         {% if is_granted('ROLE_USER') %}
  379.                                                             {% set is_favorite = repository('\\Eccube\\Entity\\CustomerFavoriteProduct').isFavorite(Customer, Product) %}
  380.                                                         {% endif %}
  381.                                                         {% if is_favorite == false %}
  382.                                                             <a href="javascript:void(0);" class="favorite">
  383.                                                                 <span></span> 
  384.                                                             </a>
  385.                                                         {% else %}
  386.                                                             <a href="javascript:void(0);" class="favorite active" disabled="disabled">
  387.                                                                 <span></span> 
  388.                                                             </a>
  389.                                                         {% endif %}
  390.                                                     {% endif %}
  391.                                                 </div>
  392.                                             </div>
  393.                                             {% if BaseInfo.option_favorite_product %}
  394.                                                 <div style="display: none;">
  395.                                                     <form class="list-add-favorite" action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  396.                                                         <div class="ec-productRole__btn">
  397.                                                             <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  398.                                                                 {{ 'お気に入りに追加'|trans }}
  399.                                                             </button>
  400.                                                         </div>
  401.                                                     </form>
  402.                                                 </div>
  403.                                             {% endif %}
  404.                                         {% else %}
  405.                                             <div class="group">
  406.                                                 <div class="list-btn ec-productRole__btn">
  407.                                                     <button type="button" class="cart" disabled="disabled">
  408.                                                         <img src="{{ asset('assets/img/common/ic-cart-v2.png') }}" alt="">
  409.                                                         <span>ただいま品切れ中です。</span>
  410.                                                     </button>
  411.                                                 </div>
  412.                                             </div>
  413.                                         {% endif %}
  414.                                     </div>
  415.                                 </li>
  416.                             {% endfor %}
  417.                             </ul>
  418.                             <div class="pagenation">
  419.                                 {% include "pager.twig" with {'pages': pagination.paginationData} %}                                
  420.                             </div>
  421.                         {% endif %}
  422.                         <div class="list-btn">
  423.                             {{ include('Block/list-btn.twig') }}
  424.                         </div>
  425.                     </div>
  426.                 </div>
  427.             </div>
  428.         </div>
  429.     </div>
  430. {% endblock %}