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

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'product_page' %}
  15. {% block javascript %}
  16.     <script>
  17.         eccube.productsClassCategories = {
  18. {% for Product in pagination %}
  19. "{{ Product.id|escape('js') }}" : {{ class_categories_as_json(Product)|raw }}
  20. {% if loop.last == false %},{% endif %}{% endfor %}
  21. };
  23. $(function () { // 表示件数を変更
  24. $('.disp-number').change(function () {
  25. var dispNumber = $(this).val();
  26. $('#disp_number').val(dispNumber);
  27. $('#pageno').val(1);
  28. $("#form1").submit();
  29. });
  31. // 並び順を変更
  32. $('.order-by').change(function () {
  33. var orderBy = $(this).val();
  34. $('#orderby').val(orderBy);
  35. $('#pageno').val(1);
  36. $("#form1").submit();
  37. });
  39. $('.add-cart').on('click', function (e) {
  40. var $form = $(this).parents('li').find('form');
  42. // 個数フォームのチェック
  43. var $quantity = $form.parent().find('.quantity');
  44. if ($quantity.val() < 1) {
  45. $quantity[0].setCustomValidity('{{ 'front.product.invalid_quantity'|trans }}');
  46. setTimeout(function () {
  47. loadingOverlay('hide');
  48. }, 100);
  49. return true;
  50. } else {
  51. $quantity[0].setCustomValidity('');
  52. } e.preventDefault();
  53. $.ajax({
  54. url: $form.attr('action'),
  55. type: $form.attr('method'),
  56. data: $form.serialize(),
  57. dataType: 'json',
  58. beforeSend: function (xhr, settings) { // Buttonを無効にする
  59. $('.add-cart').prop('disabled', true);
  60. }
  61. }).done(function (data) { // レスポンス内のメッセージをalertで表示
  62. $.each(data.messages, function () {
  63. $('#ec-modal-header').text(this);
  64. });
  66. $('.ec-modal').show()
  68. // カートブロックを更新する
  69. $.ajax({url: '{{ url('block_cart') }}', type: 'GET', dataType: 'html'}).done(function (html) {
  70. $('.ec-headerRole__cart').html(html);
  71. });
  72. }).fail(function (data) {
  73. alert('{{ 'front.product.add_cart_error'|trans }}');
  74. }).always(function (data) { // Buttonを有効にする
  75. $('.add-cart').prop('disabled', false);
  76. });
  77. });
  78. });
  80. $('.ec-modal-wrap').on('click', function (e) { // モーダル内の処理は外側にバブリングさせない
  81. e.stopPropagation();
  82. });
  83. $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function () {
  84. $('.ec-modal').hide()
  85. });
  86.     </script>
  87. {% endblock %}
  89. {% block main %}
  90.     <div class="pb-[120px] md:pb-20 w-full">
  91.         <div>
  92.             <div class="flex gap-4 md:gap-2 items-start mx-auto w-full pl-[10.625vw] md:pl-6 pt-[120px] md:pt-20 pb-10 md:pb-1">
  93.                 <hr class="md:h-[64px] h-[120px] w-[2px] bg-gradient-to-b from-[#ADAAA6] to-[#F0EDE900] border-none">
  94.                 <h1 class="text-2xl md:text-xl font-light leading-9 tracking-widest">LINEUP</h1>
  95.             </div>
  96.             {% set breadcrumbs = [{'name': "LINEUP" }] %}
  97.             {{ include('Block/breadcrumb.twig') }}
  98.         </div>
  99.         {% if pagination.totalItemCount > 0 %}
  100.             <div class="w-full flex flex-col items-center lg:px-6 justify-center">
  101.                 <ul class="grid grid-cols-2 md:flex md:flex-col gap-x-[140px] lg:gap-x-20 gap-y-[120px] md:gap-y-10 w-full md:items-center justify-center max-w-[800px]">
  102.                     {% for Product in pagination %}
  103.                         <a href="{{ url('product_detail', { id: Product.id }) }}">
  104.                             <li class="flex flex-col items-center text-center w-[330px] lg:w-full hover">
  105.                                 <div class="flex flex-col items-center">
  106.                                     <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy" {% endif %} class="w-[330px] h-[330px] md:w-[327px] md:h-[327px] mb-10 md:mb-6">
  107.                                     <div class="mb-6">
  108.                                         <p class="font-light font-notoserif text-[32px] mb-2 tracking-[6.4px]">{{ Product.name }}</p>
  109.                                         <p class="text-xs font-notoserif font-light tracking-wide">{{Product.name_kana}}</p>
  110.                                     </div>
  111.                                     <p class="h-14 mb-4 text-sm text-center leading-7 flex items-center">{{ Product.description_list|raw|nl2br }}</p>
  112.                                     <div class="flex items-baseline gap-1 mb-6">
  113.                                         <p class="text-xl leading-9">
  114.                                             {% if Product.hasProductClass %}
  115.                                                 {% if Product.getPrice02Min == Product.getPrice02Max %}
  116.                                                     {{ Product.getPrice02IncTaxMin| number_format }}
  117.                                                 {% else %}
  118.                                                     {{ Product.getPrice02IncTaxMin| number_format }}
  119.                                                     ～
  120.                                                     {{ Product.getPrice02IncTaxMax| number_format}}
  121.                                                 {% endif %}
  122.                                             {% else %}
  123.                                                 {{ Product.getPrice02IncTaxMin| number_format }}
  124.                                             {% endif %}
  125.                                         </p>
  126.                                         <p class="text-xs leading-4 font-medium">円(税込)</p>
  127.                                     </div>
  128.                                 </div>
  129.                                 <div href="{{ url('product_detail', {'id': Product.id}) }}" class="w-[238px] border-black border py-3 rounded-[3px] md:w-[258px] mb-10 text-sm">詳しくはこちら</div>
  130.                                 <div class="w-[330px] h-[88px] sm:w-[100vw] md:mx-[calc(50%-50vw)] sm:px-[calc(50%-50vw)] bg-background-default">
  131.                                     <p class="px-8 py-4 text-center leading-7 text-sm">{{Product.free_area|raw|nl2br}}</p>
  132.                                 </div>
  133.                             </li>
  134.                         </a>
  135.                     {% endfor %}
  136.                 </ul>
  137.             </div>
  138.             <div class="ec-pagerRole">
  139.                 {% include "pager.twig" with {'pages': pagination.paginationData} %}
  140.             </div>
  141.         {% endif %}
  142.     </div>
  143. {% endblock %}