app/template/raspia/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 NowId = app.request.get('category_id') %}{# get から現在のカテゴリを取得#}
  11. {% set NowPage = app.request.get('pageno') %}
  12. {% if NowPage == null %}
  13. {% set NowPage = 1 %}
  14. {% endif %}
  15. {% block javascript %}
  16.     <script>
  17.         eccube.productsClassCategories = {
  18.             {% for Product in pagination %}
  19.             "{{ Product.id|escape('js') }}": {{ class_categories_as_json(Product)|raw }}{% if loop.last == false %}, {% endif %}
  20.             {% endfor %}
  21.         };
  22.         $(function() {
  23.             // 表示件数を変更
  24.             $('.disp-number').change(function() {
  25.                 var dispNumber = $(this).val();
  26.                 $('#disp_number').val(dispNumber);
  27.                 $('#pageno').val(1);
  28.                 $("#form1").submit();
  29.             });
  30.             // 並び順を変更
  31.             $('.order-by').change(function() {
  32.                 var orderBy = $(this).val();
  33.                 $('#orderby').val(orderBy);
  34.                 $('#pageno').val(1);
  35.                 $("#form1").submit();
  36.             });
  37.             $('.add-cart').on('click', function(e) {
  38.                 var $form = $(this).parents('li').find('form');
  39.                 // 個数フォームのチェック
  40.                 var $quantity = $form.parent().find('.quantity');
  41.                 if ($quantity.val() < 1) {
  42.                     $quantity[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  43.                     setTimeout(function() {
  44.                         loadingOverlay('hide');
  45.                     }, 100);
  46.                     return true;
  47.                 } else {
  48.                     $quantity[0].setCustomValidity('');
  49.                 }
  50.                 e.preventDefault();
  51.                 $.ajax({
  52.                     url: $form.attr('action'),
  53.                     type: $form.attr('method'),
  54.                     data: $form.serialize(),
  55.                     dataType: 'json',
  56.                     beforeSend: function(xhr, settings) {
  57.                         // Buttonを無効にする
  58.                         $('.add-cart').prop('disabled', true);
  59.                     }
  60.                 }).done(function(data) {
  61.                     // レスポンス内のメッセージをalertで表示
  62.                     $.each(data.messages, function() {
  63.                         $('#ec-modal-header').html(this);
  64.                     });
  65.                     $('.ec-modal').show()
  66.                     // カートブロックを更新する
  67.                     $.ajax({
  68.                         url: '{{ url('block_cart') }}',
  69.                         type: 'GET',
  70.                         dataType: 'html'
  71.                     }).done(function(html) {
  72.                         $('.ec-headerRole__cart').html(html);
  73.                     });
  74.                 }).fail(function(data) {
  75.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  76.                 }).always(function(data) {
  77.                     // Buttonを有効にする
  78.                     $('.add-cart').prop('disabled', false);
  79.                 });
  80.             });
  81.         });
  82.         $('.ec-modal-overlay, .ec-modal .ec-inlineBtn--cancel').on('click', function() {
  83.             $('.ec-modal').hide()
  84.         });
  85.     </script>
  86. {% endblock %}
  87. {% block main %}
  88. <form name="form1" id="form1" method="get" action="?">
  89.     {% for item in search_form %}
  90.         <input type="hidden" id="{{ item.vars.id }}"
  91.                name="{{ item.vars.full_name }}"
  92.                {% if item.vars.value is not empty %}
  93.                value="{{ item.vars.value }}"
  94.                 {% endif %}/>
  95.     {% endfor %}
  96.     {% if Params.multi_category is defined %}
  97.         {% for cate in Params.multi_category %}
  98.         <input type="hidden" name="multi_category[{{ cate }}]" value="{{ cate }}">
  99.         {% endfor %}
  100.     {% endif %}
  101.     {% if Params.pricerange is defined %}
  102.         {% for key,pricerange in Params.pricerange %}
  103.         <input type="hidden" name="pricerange[{{ key }}]" value="{{ pricerange }}">
  104.         {% endfor %}
  105.     {% endif %}
  106. </form>
  107. <style>
  108. .mvList{
  109.     background-image:url( {{ mv_path_pc }} )!important;
  110. }
  111. @media screen and (max-width: 768px){
  112.     .mvList{
  113.         background-image:url( {{ mv_path_sp }} )!important;
  114.     }
  115. }
  116. </style>
  117. {% if Params.name is defined or Params.categories is defined %}
  118. <div class="mvLow">
  119.     <h1 class="ttl01">COLLECTION</h1>
  120. </div>
  121. {% else %}
  122. <div class="type01 mvList {% if mv_path_pc == "/html/template/raspia/img/low/low_cate_noimage.png" %}spTxtCenter{% endif %}" style="">
  123.     {% if NowId == "" %}
  124.     <div class="textArea type01">
  125.         <h1 class="ttl01">
  126.         {% if Categories is empty %}
  127.             ALL ITEM
  128.         {% else %}
  129.             {{ Categories['title'] }}
  130.         {% endif %}
  131.         </h1>
  132.         <p>全ての商品を見る
  133.         <br><span>All item</span></p>
  134.     </div>
  135.     {% else %}
  136.         {% if Category.mv_html != "" %}
  137.             {{ Category.mv_html|raw }}
  138.         {% else %}
  139.             <div class="textArea noimage spTxtCenter">
  140.                 <h1 class="ttl01">
  141.                     {# カテゴリ名の自動取得 #}
  142.                     {% for Category in ListCategories %}
  143.                         {% if Category.id == NowId %}
  144.                             {{ Category.name }}
  145.                         {% endif %}
  146.                         {% if Category.children|length > 0 %}
  147.                             {% for Cate in Category.children %}
  148.                                 {% if Cate.id == NowId %}
  149.                                     {{ Cate.name }}
  150.                                 {% endif %}
  151.                             {% endfor %}
  152.                         {% endif %}
  153.                     {% endfor %}
  154.                 </h1>
  155.                 <p>全ての商品を見る
  156.                 <br><span>All item</span></p>
  157.             </div>
  158.         {% endif %}
  159.     {% endif %}
  160. </div>
  161. {%  endif %}
  162. {# Layout: CONTENTS_TOP #}
  163. {% if Layout.ContentsTop %}
  164. <div class="listBreadcrumbs">
  165.     <ul>
  166.         <li><a href="/">HOME</a></li>
  167.         <li><a href="{{ url('product_list') }}">コレクション</a></li>
  168.         {% if Category is not null %}
  169.             {% for Path in Category.path %}
  170.                 <li><a href="{{ url('product_list') }}?category_id={{ Path.id }}">{{ Path.name }}</a></li>
  171.             {% endfor %}
  172.         {% endif %}
  173.     </ul>
  174. </div>
  175. <div class="spSearchArea">
  176.     <div class="menuTrigger" id="contentTopTrigger" data-cateId="searchMenu">
  177.         <p>
  178.             絞り込み検索
  179.             {# <span><img src="/html/template/raspia/img/common/menu_allow.webp"></span> #}
  180.         </p>
  181.     </div>
  182.     <div class="ec-layoutRole__contentTop">
  183.         {{ include('block.twig', {'Blocks': Layout.ContentsTop}) }}
  184.     </div>
  185. </div>
  186. {% endif %}
  187. <section class="mainWrap01">
  188. {% set ListCate = "" %}{# リストを表示したいカテゴリのデータ 初期化 #}
  189. {% for Category in ListCategories %}
  190.     {% if Category.id == NowId %}
  191.         {% set ListCate = Category %}
  192.     {% else %}
  193.         {% for ChildCate in Category.children %}
  194.             {% if ChildCate.id == NowId %}
  195.                 {% set ListCate = ChildCate.parent %}
  196.             {% endif %}
  197.         {% endfor %}
  198.     {% endif %}
  199. {% endfor %}
  200.         {% macro tree(Category) %}
  201.             <li><span>{{ Category.name }}{% if Category.id == 24 or Category.id == 12 or Category.id == 41 or Category.id == 44 %}から探す{% endif %}</span>
  202.                 {% if Category.children|length > 0 %}
  203.                     <ul style="display: none">
  204.                         <a href="{{ url('product_list') }}?category_id={{ Category.id }}"><li><span>すべてを表示</span></li></a>
  205.                         {% for ChildCategory in Category.children %}
  206.                             <a href="{{ url('product_list') }}?category_id={{ ChildCategory.id }}">{{ _self.tree(ChildCategory) }}</a>
  207.                         {% endfor %}
  208.                     </ul>
  209.                 {% endif %}
  210.             </li>
  211.         {% endmacro %}
  212.         <!--<div class="flexWrapSb01">
  213.             <div class="txtBoxType01">
  214.                 <h3 class="searchTtl01">検索結果</h3>
  215.                 <p class="resultCountPc pc">{{ pagination.totalItemCount }} 件の商品の {{ NowPage }} ページ目を表示しています。</p>
  216.             </div>
  217.             {% if pagination.totalItemCount >= 5 %}
  218.                 {% include "pagination.twig" with { 'pages' : pagination.paginationData } %}
  219.             {% endif %}
  220.             {% if pagination.totalItemCount == 0 and SimilarProducts != "" %}
  221.                 <h2 class="comTtl03 type01">
  222.                     「{{ Categories['title']}}」<br>
  223.                     の該当商品はみつかりませんでした。
  224.                 </h2>
  225.                 <div class="flexBox type01">
  226.                     <a href="/products/list">商品一覧へ戻る</a>
  227.                     <a href="/">トップページへ戻る</a>
  228.                 </div>
  229.             {% endif %}
  230.         </div>-->
  231.         <div class="searchKeywords">
  232.             <p class="ttl">絞り込み条件:</p>
  233.             <p class='keywords'>
  234.                 {{ SearchKeywords }}
  235.             </p>
  236.         </div>
  237.         <div class="navi cf">
  238.             <div class="cf categoryWrapp">
  239.                 <ul class="resultInfoBox sp">
  240.                     <li class="count">
  241.                             全 {{ pagination.totalItemCount }} 件  {{ NowPage }} ページ目
  242.                     </li>
  243.                     {% if pagination.totalItemCount > 0 %}
  244.                     <li><form name="page_navi_top" id="page_navi_top" action="?">
  245.                             <div id="result_info_box__menu_box" class="no-padding ec-searchnavRole__actions">
  246.                                 <ul id="result_info_box__menu" class="pagenumberarea clearfix ec-select">
  247.                                     <li id="result_info_box__disp_menu">
  248.                                     {{ form_widget(disp_number_form, {'id': '', 'attr': {'class': 'disp-number'}}) }}
  249.                                     </li>
  250.                                     <li id="result_info_box__order_menu">
  251.                                     {{ form_widget(order_by_form, {'id': '', 'attr': {'class': 'order-by'}}) }}
  252.                                     </li>
  253.                                 </ul>
  254.                             </div>
  255.                             {% for f in disp_number_form.getIterator %}
  256.                                 {% if f.vars.name matches '[^plg*]' %}
  257.                                     {{ form_label(f) }}
  258.                                     {{ form_widget(f) }}
  259.                                     {{ form_errors(f) }}
  260.                                 {% endif %}
  261.                             {% endfor %}
  262.                             {% for f in order_by_form.getIterator %}
  263.                                 {% if f.vars.name matches '[^plg*]' %}
  264.                                     {{ form_label(f) }}
  265.                                     {{ form_widget(f) }}
  266.                                     {{ form_errors(f) }}
  267.                                 {% endif %}
  268.                             {% endfor %}
  269.                         {% else %}
  270.                             <p><strong><span>{{ pagination.totalItemCount }}</span>件</strong>
  271.                             該当する商品はありません</p>
  272.                         {% endif %}
  273.                         </form>
  274.                     </li>
  275.                 </ul>
  276.             </div>
  277.         </div>
  278. <main>
  279.     <!-- ▼item_list▼ -->
  280.     <div class="itemList" data-list-name="コレクション{% if Category is not null %}{% for Path in Category.path %}{{ Path.name }} {% endfor %}{% endif %} 商品一覧">
  281.         {% for Product in pagination %}
  282.         {% if Product.hasProductClass -%}
  283.             {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  284.                 {% set price = Product.getPrice01()[0] %}
  285.                 {% set taxIn = Product.getPrice01IncTaxs()[0] %}
  286.             {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  287.                 {% set price = Product.getPrice01()[0] %}
  288.                 {% set taxIn = Product.getPrice01IncTaxs()[0] %}
  289.             {% endif %}
  290.         {% else -%}
  291.             {% if Product.getPrice01Max is not null %}
  292.                 {% set price = Product.getPrice01()[0] %}
  293.                 {% set taxIn = Product.getPrice01IncTaxs()[0] %}
  294.             {% endif %}
  295.         {% endif -%}
  296.         {% if Product.hasProductClass -%}
  297.             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  298.                 {% set price = Product.getPrice02()[0] %}
  299.                 {% set taxIn = Product.getPrice02IncTaxs()[0] %}
  300.             {% else %}
  301.                 {% set price = Product.getPrice02()[0] %}
  302.                 {% set taxIn = Product.getPrice02IncTaxs()[0] %}
  303.             {% endif %}
  304.         {% else -%}
  305.             {% set price = Product.getPrice02()[0] %}
  306.             {% set taxIn = Product.getPrice02IncTaxs()[0] %}
  307.         {% endif -%}
  308.             <div class="item product-box" data-id="{{ Product.id }}" data-name="{{ Product.name }}" data-category="{% for ProductCategory in Product.ProductCategories %}{% for Category in ProductCategory.Category.path %}{% if(loop.parent.loop.index != 1) %}{{ Category.name }}{%  endif  %}{% endfor %}{% endfor %}
  309. " data-price="{{ Product.getPrice02IncTaxMax() }}">
  310.                 <a href="{{ url('product_detail', {'id': Product.id}) }}" class="product-link">
  311.                 <img class="lazyload" src="/html/template/raspia/img/common/load_logo.png" data-src="{{ asset(Product.main_list_image.getWebpImage|no_image_product, 'save_image') }}">
  312.                     <h3 class="ttl">{{ Product.name }}</h3>
  313.                 </a>
  314.                 <p>
  315.                     {{ taxIn|price }} <span class="small">(税込)</span>
  316.                     {% if Product.stock_find %}
  317.                     {% else %}
  318.                         <span class="soldOut">SOLD OUT</span>
  319.                     {% endif %}
  320.                 </p>
  321.             </div>
  322.         {% endfor %}
  323.     </div>
  324.     <!-- ▲item_list▲ -->
  325. </main>
  326. {% if pagination.totalItemCount == 0 and SimilarProducts != "" %}
  327. <div>
  328.     <h2 class="comTtl03 type01">
  329.         「{{ Categories['title']}}」<br>
  330.         の該当商品はみつかりませんでした。
  331.     </h2>
  332.     <div class="flexBox type01">
  333.         <a href="/products/list">商品一覧へ戻る</a>
  334.         <a href="/">トップページへ戻る</a>
  335.     </div>
  336. </div>
  337. {% else %}
  338.     <div class="flexWrapSb01 type02">
  339.         <div class="txtBoxType01">
  340.             <p class="resultCountPc pc">{{ pagination.totalItemCount }} 件の商品の {{ NowPage }} ページ目を表示しています。</p>
  341.         </div>
  342.         {% if pagination.totalItemCount >= 5 %}
  343.             {% include "pagination.twig" with { 'pages' : pagination.paginationData } %}
  344.         {% endif %}
  345.     </div>
  346.     {% endif %}
  347.     {% if SimilarProducts != "" %}
  348.     <div class="ec-secHeading">
  349.         <h2 class="comTtl03 type02">「{{ Categories['title']}}」<br>関連商品</h2>
  350.     </div>
  351.     <!-- ▼item_list▼ -->
  352.     <div class="itemList" data-list-name="コレクション{% if Category is not null %}{% for Path in Category.path %}{{ Path.name }} {% endfor %}{% endif %} 商品一覧">
  353.         {% for Product in SimilarProducts %}
  354.             <div class="item product-box" data-id="{{ Product.id }}" data-name="{{ Product.name }}" data-category="{% for ProductCategory in Product.ProductCategories %}{% for Category in ProductCategory.Category.path %}{% if(loop.parent.loop.index != 1) %}{{ Category.name }}{%  endif  %}{% endfor %}{% endfor %}
  355. " data-price="{{ Product.getPrice02IncTaxMax() }}">
  356.                 <a href="{{ url('product_detail', {'id': Product.id}) }}" class="product-link">
  357.                 <img class="lazyload" src="/html/template/raspia/img/common/load_logo.png" data-src="{{ asset(Product.main_list_image.getWebpImage|no_image_product, 'save_image') }}">
  358.                     <h3 class="ttl">{{ Product.name }}</h3>
  359.                 </a>
  360.                 <p>
  361.                     {{ (Product.default_price * 1.1)|price }} <span class="small">(税込)</span>
  362.                     {% if Product.stock_find %}
  363.                     {% else %}
  364.                         <span class="soldOut">SOLD OUT</span>
  365.                     {% endif %}
  366.                 </p>
  367.             </div>
  368.         {% endfor %}
  369.     </div>
  370.     {% endif %}
  371. </section>
  372. <!--Criteo BEGIN-->
  373. <script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
  374. <script type="text/javascript">
  375. async function sha256(text){
  376.     const uint8  = new TextEncoder().encode(text)
  377.     const digest = await crypto.subtle.digest('SHA-256', uint8)
  378.     return Array.from(new Uint8Array(digest)).map(v => v.toString(16).padStart(2,'0')).join('')
  379. }
  380.     {% if is_granted('ROLE_USER') %}
  381.     var crto_hem = sha256("{{ app.user.email }}");
  382.     {% endif %}
  383.   var crto_list =[];
  384.    {% for crto_list in pagination %}
  385.   crto_list.push("{{ crto_list.id }}");
  386.    {% endfor %}
  387.     if(crto_list.length > 0){
  388.         crto_list_top3 =[];
  389.         for(var i =0; i< 3; i++){
  390.             if(crto_list[i] !== undefined){
  391.                 crto_list_top3.push(crto_list[i]);
  392.             }
  393.         }
  394.         window.criteo_q = window.criteo_q || [];
  395.         window.criteo_q.push(
  396.             { event: "setAccount", account: 82881 },
  397.             { event: "setSiteType", type: /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d" },
  398.     {% if is_granted('ROLE_USER') %}        
  399.         { event: "setEmail", email: crto_hem, hash_method: "sha256" },
  400.     {% endif %}               
  401.             { event: "viewList", item: crto_list_top3, ecpplugin: "ec-cube-4gd"}
  402.         );
  403.      }
  404. </script>
  405. <div id="lineButtonArea">
  406. <a href="https://lin.ee/qJTCKzZ" target="_blank" alt="LINEで相談" onclick="gtag('event', 'tap', {'event_category': 'entry','event_label': 'line'});"><span>LINE</span>で相談</a>
  407. </div>
  408. <!--Criteo END-->
  409. {% endblock %}