app/template/default/Recommended/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. {% block javascript %}
  11. <script>
  12. {#    eccube.productsClassCategories = {#}
  13. {#{% for Product in pagination %}#}
  14. {#"{{ Product.id|escape('js') }}": {{ class_categories_as_json(Product)|raw }}{% if loop.last == false %}, {% endif %}#}
  15. {#{% endfor %}#}
  16. {#};#}
  17. function orderbySubmit (orderId) {
  18.     $('#orderby').val(orderId);
  19.     $('#pageno').val(1);
  20.     $("#form1").submit();
  21. }
  22. $(document).mouseup(function(e)
  23. {
  24.     var container = $(".orderbyLabel");
  25.     // if the target of the click isn't the container nor a descendant of the container
  26.     if (!container.is(e.target) && container.has(e.target).length === 0)
  27.     {
  28.         $('.dropdownOrderbyList').css('visibility', 'hidden');
  29.     }
  30. });
  31. $(function() {
  32. var url_string = location.href;
  33. var url = new URL(url_string);
  34. var product_name = url.searchParams.get("name");
  35. var details_title = "商品一覧";
  36. if (product_name)
  37.     details_title = product_name + "の商品一覧";
  38. details_title = `<span>${details_title}</span>`
  39. $('#list_name').html(details_title);
  40. if (url.href.indexOf('orderby') < 0) {
  41.     $('.order-by > div:first-child input').prop('checked', true);
  42.     $('.orderbyLabel').text('並び替え');
  43.     $('.dropdownOrderbyList > li:first-child').addClass('active');
  44. } else {
  45.     var orderid = url.searchParams.get("orderby");
  46.     // pc
  47.     $(`.order-by input#orderby_${orderid}`).prop('checked', true);
  48.     // sp
  49.     $(`.dropdownOrderbyList__item#orderby__${orderid}`).addClass('active');
  50.     var orderLabel = $(`.dropdownOrderbyList__item#orderby__${orderid}`).text();
  51.     $('.orderbyLabel').text(orderLabel);
  52. }
  53. // sp 並び順を変更
  54. $('.orderbyLabel').on('click', function (e) {
  55.     e.preventDefault();
  56.     const element = document.querySelector('.dropdownOrderbyList');
  57.     const visibility = element.style.visibility;
  58.     if (visibility == 'visible') {
  59.         $('.dropdownOrderbyList').css('visibility', 'hidden');
  60.     } else {
  61.         $('.dropdownOrderbyList').css('visibility', 'visible');
  62.     }
  63. });
  64. // 並び順を変更
  65. $('.order-by input[name="orderby"]').change(function() {
  66.     var orderBy = $(this).val();
  67.     $('#orderby').val(orderBy);
  68.     $('#pageno').val(1);
  69.     $("#form1").submit();
  70. });
  71. });
  72. $('.ec-modal-wrap').on('click', function(e) {
  73. // モーダル内の処理は外側にバブリングさせない
  74. e.stopPropagation();
  75. });
  76. $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  77. $('.ec-modal').hide()
  78. });
  79. </script>
  80. {% endblock %}
  81. {% block main %}
  82.     <div class="ec-searchnavRole">
  83.         <div class="ec-searchnavRole__topicpath">
  84.             <ol class="ec-topicpath">
  85.                 <li class="ec-topicpath__item">
  86.                     <span>{{ 'おすすめ商品一覧' }}</span>
  87.                 </li>
  88.             </ol>
  89.         </div>
  90.     </div>
  91.     <div class="ec-blockspliter"></div>
  92.     <div class="ec-searchnavRole ec-searchnavRole-height ec-productListSPSearchNav">
  93.         <form name="form1" id="form1" method="get" action="?">
  94.             <input type="hidden" id="orderby" name="orderby" />
  95.         </form>
  96.         <div class="ec-searchnavRole__infospace show-resultPC">
  97.             <span>{{ '並び替え'|trans }}</span>
  98.         </div>
  99.         <div class="ec-searchnavRole__infos ec-spOrderby show-resultSP">
  100.             <div class="orderbyLabel"></div>
  101.             <ul class="dropdownOrderbyList">
  102.                 {% for orderitem in OrderList %}
  103.                     <li class="dropdownOrderbyList__item" id="orderby__{{ orderitem.id }}" onclick="orderbySubmit({{ orderitem.id }})">{{ orderitem.name }}</li>
  104.                 {% endfor %}
  105.             </ul>
  106.         </div>
  107.         <div class="ec-searchnavRole__infos show-resultPC">
  108.             <div class="order-by">
  109.                 {% for orderitem in OrderList %}
  110.                     <div class="form-check">
  111.                         <input type="radio" id="orderby_{{ orderitem.id }}" name="orderby" required="required" class="form-check-input" value="{{ orderitem.id }}">
  112.                         <label class="form-check-label required" for="orderby_{{ orderitem.id }}">{{ orderitem.name }}</label>
  113.                     </div>
  114.                 {% endfor %}
  115.             </div>
  116.         </div>
  117.     </div>
  118.     <div class="ec-blockspliter"></div>
  119.     {% if pagination|length > 0 %}
  120.         <div class="ec-role">
  121.             <div class="ec-newItemRole">
  122.                 <div class="ec-newItemRole__list">
  123.                     {% for key, RecommendProduct in pagination %}
  124.                         <div class="ec-newItemRole__listItem">
  125.                             <a href="{{ url('product_detail', {'id': RecommendProduct.Product.id}) }}">
  126.                                 <figure>
  127.                                     <img src="{{ asset(RecommendProduct.Product.mainFileName|no_image_product, 'save_image') }}"
  128.                                          alt="{{ RecommendProduct.Product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
  129.                                 </figure>
  130.                                 <span class="newitembadge" style="background-color: unset;"></span>
  131.                                 <div>
  132.                                     <p class="ec-newItemRole__listItemTitle">{{ RecommendProduct.Product.name|trans }}</p>
  133.                                     <p class="ec-newItemRole__listItemPrice">
  134.                                         {% if RecommendProduct.Product.hasProductClass %}
  135.                                             {% if RecommendProduct.Product.getPrice02Min == RecommendProduct.Product.getPrice02Max %}
  136.                                                 {{ RecommendProduct.Product.getPrice02IncTaxMin|price }}
  137.                                             {% else %}
  138.                                                 {{ RecommendProduct.Product.getPrice02IncTaxMin|price }} ~ {{ RecommendProduct.Product.getPrice02IncTaxMax|price }}
  139.                                             {% endif %}
  140.                                         {% else %}
  141.                                             {{ RecommendProduct.Product.getPrice02IncTaxMin|price }}
  142.                                         {% endif %}{{ '(税込)'|trans }}
  143.                                     </p>
  144.                                 </div>
  145.                             </a>
  146.                         </div>
  147.                     {% endfor %}
  148.                 </div>
  149.             </div>
  150. {#            {% if pagination|length > 1 %}#}
  151. {#                <div class="ec-blockspliter"></div>#}
  152. {#            {% endif %}#}
  153.         </div>
  154. {#        {% if pagination|length > 1 %}#}
  155. {#            <div class="ec-role">#}
  156. {#                <div class="ec-pagerRole ec-newsPagination">#}
  157. {#                    {% include "pager.twig" with {'pages': pagination.paginationData} %}#}
  158. {#                </div>#}
  159. {#            </div>#}
  160. {#        {% endif %}#}
  161.         <div class="ec-blockspliter productListSpliter"></div>
  162.         <div class="ec-blockempty"></div>
  163.         <div class="ec-modal">
  164.             <div class="ec-modal-overlay">
  165.                 <div class="ec-modal-wrap">
  166.                     <span class="ec-modal-close"><span class="ec-icon"><img
  167.                                     src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  168.                     <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  169.                     <div class="ec-modal-box">
  170.                         <div class="ec-role">
  171.                             <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  172.                             <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  173.                         </div>
  174.                     </div>
  175.                 </div>
  176.             </div>
  177.         </div>
  178.     {% endif %}
  179. {% endblock %}