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 }}{% if loop.last == false %}, {% endif %}
  20.             {% endfor %}
  21.         };
  23.         $(function() {
  24.             // 表示件数を変更
  25.             $('.disp-number').change(function() {
  26.                 var dispNumber = $(this).val();
  27.                 $('#disp_number').val(dispNumber);
  28.                 $('#pageno').val(1);
  29.                 $("#form1").submit();
  30.             });
  32.             // 並び順を変更
  33.             $('.order-by').change(function() {
  34.                 var orderBy = $(this).val();
  35.                 $('#orderby').val(orderBy);
  36.                 $('#pageno').val(1);
  37.                 $("#form1").submit();
  38.             });
  40.             $('.add-cart').on('click', function(e) {
  41.                 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.                 }
  53.                 e.preventDefault();
  54.                 $.ajax({
  55.                     url: $form.attr('action'),
  56.                     type: $form.attr('method'),
  57.                     data: $form.serialize(),
  58.                     dataType: 'json',
  59.                     beforeSend: function(xhr, settings) {
  60.                         // Buttonを無効にする
  61.                         $('.add-cart').prop('disabled', true);
  62.                     }
  63.                 }).done(function(data) {
  64.                     // レスポンス内のメッセージをalertで表示
  65.                     $.each(data.messages, function() {
  66.                         $('#ec-modal-header').text(this);
  67.                     });
  69.                     $('.ec-modal').show()
  71.                     // カートブロックを更新する
  72.                     $.ajax({
  73.                         url: '{{ url('block_cart') }}',
  74.                         type: 'GET',
  75.                         dataType: 'html'
  76.                     }).done(function(html) {
  77.                         $('.ec-headerRole__cart').html(html);
  78.                     });
  79.                 }).fail(function(data) {
  80.                     alert('{{ 'front.product.add_cart_error'|trans }}');
  81.                 }).always(function(data) {
  82.                     // Buttonを有効にする
  83.                     $('.add-cart').prop('disabled', false);
  84.                 });
  85.             });
  86.         });
  88.         {# ページ内のフリーエリアの高さをすべて取得し、すべてのフリーエリアをその高さにあわせる #}
  89.         $(document).ready(function(){
  90.             var maxOuterHeight = 0;
  91.             $('.free_area').each(function() {
  92.                 var elementOuterHeight = $(this).outerHeight();
  93.                 if (elementOuterHeight > maxOuterHeight) {
  94.                     maxOuterHeight = elementOuterHeight;
  95.                 }
  96.             });
  97.             if(maxOuterHeight > 0 ){
  98.                 $('.free_area').each(function(){
  99.                     $(this).outerHeight(maxOuterHeight);
  100.                 })
  101.             }
  102.         });
  104.         $('.ec-modal-wrap').on('click', function (e) { // モーダル内の処理は外側にバブリングさせない
  105.             e.stopPropagation();
  106.         });
  107.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function () {
  108.             $('.ec-modal').hide()
  109.         });
  110.     </script>
  111. {% endblock %}
  113. {% set category_id = app.request.query.get('category_id') %}
  114. {% set colors =
  115.     [
  116.         {
  117.             code: "#000000",
  118.         },
  119.         {
  120.             code: "#ffffff",
  121.         },
  122.     ]
  123. %}
  125. {% set category_descriptions = [
  126.     {
  127.         id: 2,
  128.         description: "あなたの想いを、置ける場所"
  129.     },
  130.     {
  131.         id: 1,
  132.         description: "想いそのものを、かたちに"
  133.     },
  134.     {
  135.         id: 3,
  136.         description: "あなたの想いに、らしさを加える"
  137.     },
  138.     {
  139.         id: 4,
  140.         description: "おすすめ、人気のコーディネート"
  141.     },
  142.     {
  143.         id: 21,
  144.         description: "お仏壇のない、小さなご供養"
  145.     },
  146. ] %}
  149. {% set parent_category_ids = [1,2,3,4,21] %}
  151. {% block main %}
  152.     {% if search_form.category_id.vars.errors|length > 0 %}
  153.         <div class="ec-searchnavRole"> <p class="errormsg text-danger">{{ 'front.product.search__category_not_found'|trans }}</p>
  154.         </div>
  155.     {% else %}
  156.         <div class="pt-24 pb-10 md:py-6 xl:px-7 max-w-[1120px] mx-auto lg:mx-0">
  157.             <div
  158.                 class="w-full flex flex-col font-extralight">
  159.                 {% if Category.Parent is not null %}
  160.                     {% set parent_category_name = Category.Parent.name %}
  161.                     {% set parent_category_id = Category.Parent.id %}
  162.                     <h1 class="font-extralight text-[40px] tracking-[8px] md:tracking-[6px] md:text-[22px] mb-5 md:mb-2">
  163.                         {% if parent_category_id == 2 %}
  164.                             お仏壇・ステージ
  165.                         {% elseif Category.id == 3 %}
  166.                             仏具・日用品
  167.                         {% else %}
  168.                             {{parent_category_name}}
  169.                         {% endif %}
  170.                     </h1>
  171.                     {% for category_description in category_descriptions %}
  172.                         {% if parent_category_id == category_description.id %}
  173.                             <p class="text-[22px] font-extralight md:text-sm">{{category_description.description}}</p>
  174.                         {% endif %}
  175.                     {% endfor %}
  176.                     {% else %}
  177.                     <h1 class="font-extralight text-[40px] tracking-[8px] md:tracking-[6px] md:text-[22px] mb-5 md:mb-2">
  178.                          {% if Category.id == 2 %}
  179.                             お仏壇・ステージ
  180.                         {% elseif Category.id == 3 %}
  181.                             仏具・日用品
  182.                         {% else %}
  183.                             {{Category.name}}
  184.                         {% endif %}
  185.                     </h1>
  186.                     {% for category_description in category_descriptions %}
  187.                         {% if Category.id == category_description.id %}
  188.                             <p class="text-2xl font-extralight md:text-sm tracking-[2px]">{{category_description.description}}</p>
  189.                         {% endif %}
  190.                     {% endfor %}
  191.                 {% endif %}
  192.             </div>
  193.         </div>
  194.         {# 商品一覧 #}
  195.         <div class="w-full max-w-[1120px] mx-auto xl:px-7">
  196.             <ul class="gap-4 md:gap-3 grid grid-cols-4 md:grid-cols-2 font-extralight">
  197.                 {% set category_length = Category.getChildren|length %}
  198.                 {# MEMO: isParentは中カテゴリの場合、trueとなる #}
  199.                 {% set isParent = Category.Parent is not null %}
  200.                 <a
  201.                     {% if isParent %}
  202.                         href="{{ url('product_list', {'category_id': Category.Parent.id}) }}"
  203.                     {% else %}
  204.                         href="{{ url('product_list', {'category_id': Category.id}) }}"
  205.                     {% endif %}>
  206.                     <li class="tabs w-full max-w-[calc(100%÷{{ category_length + 1 }})] border-[#E2DFD6] border hover:opacity-70 duration-700 py-3 md:text-sm rounded text-center {% if category_id in parent_category_ids %} bg-[#E2DFD6] {% endif %}">すべて</li>
  207.                 </a>
  208.                 {% set childCategories = isParent ? Category.Parent.Children : Category.Children %}
  209.                 {% for category in childCategories %}
  210.                     <a href="{{ url('product_list', {'category_id': category.id}) }}">
  211.                         <li class="tabs w-full max-w-[calc(100%÷{{ category_length + 1 }})] border-[#E2DFD6] border hover:opacity-70 duration-700 py-3 md:text-sm rounded text-center {% if category.id == category_id %} bg-[#E2DFD6] {% else %} bg-white {% endif %}">
  212.                             {{category.name}}
  213.                         </li>
  214.                     </a>
  215.                 {% endfor %}
  216.             </ul>
  217.             <div class="tab-content">
  218.                 <ul class="flex gap-8 grid grid-cols-3 lg:grid-cols-2 justify-center mt-16 md:mt-8 md:gap-4 md:px-0 mx-0 mx-auto">
  219.                 {% for Product in pagination %}
  220.                     <li class="w-full shadow-lg hover:opacity-70 duration-700 lg:w-full h-auto">
  221.                         <a href="{{ url('product_detail', {'id': Product.id}) }}" class="flex flex-col h-full">
  222.                             <div>
  223.                                 <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" class="w-full h-[350px] md:h-[150px]">
  224.                                 <div class="px-8 py-6 md:p-3 bg-white min-h-[292px] md:min-h-[195px] h-auto">
  225.                                     <div class="min-h-10 flex flex-col items-center justify-end h-auto">
  226.                                         <p class="text-sm text-center md:text-[10px] h-auto tracking-[0.1em] mb-1 flex mt-auto min-h-5">
  227.                                             {% if Product.name_kana %}
  228.                                                 {{ Product.name_kana }}
  229.                                             {% endif %}
  230.                                         </p>
  231.                                         <p class="text-2xl text-center md:text-sm tracking-[0.1em]">{{ Product.name }}</p>
  232.                                     </div>
  233.                                     {# カテゴリ #}
  234.                                     <p class="mx-auto w-fit px-3 whitespacenowrap text-sm py-1 border border-[#AFAFAF] text-center md:text-[8px] mt-3 mb-1 leading-normal">
  235.                                         {% if Category.id == 2 %}
  236.                                             お仏壇・ステージ
  237.                                         {% elseif Category.id == 3 %}
  238.                                             仏具・日用品
  239.                                         {% else %}
  240.                                             {{Category.name}}
  241.                                         {% endif %}
  242.                                     </p>
  243.                                     {# カラーコード #}
  244.                                     <div class="flex item-center flex-wrap justify-center gap-2 py-3">
  245.                                         {% for ProductClass in Product.ProductClasses %}
  246.                                             {# MEMO: Tailwindのbgクラスで変数展開ができなかった為、style属性を使ってスタイリングした #}
  247.                                             <span style="background-color: {{ ProductClass.color_code }};" class="w-4 h-4 rounded-[50%] md:w-2 md:h-2"></span>
  248.                                         {% endfor %}
  249.                                     </div>
  250.                                     <div>
  251.                                         {# 商品説明(一覧) #}
  252.                                         {% if Product.description_detail %}
  253.                                             <p class="text-center mb-4 md:text-xs md:mb-2 min-h-12 md:min-h-8 leading-normal tracking-[0.1em]">{{ Product.description_detail|raw|nl2br }}</p>
  254.                                         {% endif %}
  255.                                         {# 値段 #}
  256.                                         <p class="text-2xl text-center md:text-sm md:min-h-10 h-auto tracking-[0.1em]">
  257.                                             {% if Product.hasProductClass %}
  258.                                                 {% if Product.getPrice02Min == Product.getPrice02Max %}
  259.                                                     {{ Product.getPrice02IncTaxMin|number_format }}
  260.                                                 {% else %}
  261.                                                     {{ Product.getPrice02IncTaxMin|number_format }}
  262.                                                     ～
  263.                                                     {{ Product.getPrice02IncTaxMax|number_format }}
  264.                                                 {% endif %}
  265.                                             {% else %}
  266.                                                 {{ Product.getPrice02IncTaxMin|number_format }}
  267.                                             {% endif %}
  268.                                             <span class="text-xs md:text-[10px]">円(税込)</span>
  269.                                         </p>
  270.                                     </div>
  271.                                 </div>
  272.                             </div>
  273.                             {# フリーエリア #}
  274.                             {% if Product.free_area %}
  275.                                 <p class="free_area text-center px-10 py-3 bg-manakaBeige tracking-[0.2em] md:text-[10px] md:px-2 md:py-2 flex items-center justify-center mt-auto min-h-[72px]">
  276.                                     {{Product.free_area|raw|nl2br}}
  277.                                 </p>
  278.                             {% endif %}
  279.                         </a>
  280.                     </li>
  281.                 {% endfor %}
  282.             </ul>
  283.             </div>
  284.         </div>
  285.         {# ショールームのご案内 #}
  286.         <a href={{url( "user_data", { route : "showroom" })}} class="block my-16 mx-auto w-[840px] lg:w-[calc(100%-60px)] hover h-auto">
  287.             <img src="{{ asset('assets/img/list/showroom_pc.jpg') }}" class="shadow-lg lg:hidden"/>
  288.             <img src="{{ asset('assets/img/list/showroom_sp.jpg') }}" class="hidden lg:block max-h-[300px] shadow-lg  mx-auto"/>
  289.         </a>
  290.         {# 商品選びサポートサービス #}
  291.         <div class="flex flex-col  gap-10 md:gap-8 py-20 px-[104px] bg-manakaBeige w-full max-w-[1120px] xl:w-[calc(100%-60px)] mx-auto lg:px-5 lg:py-8">
  292.             <h3 class="text-[40px] text-center md:text-xl font-extralight">商品選びサポートサービス</h3>
  293.             <p class="text-xl text-center md:text-xs leading-relaxed">
  294.                 お客様と故人様の関係にふさわしい祈りのかたちを見つけていただくために、<br/>
  295.                 いくつかのサポートサービスをご用意しました。
  296.             </p>
  297.             <ul class="w-full flex gap-12 flex-wrap justify-center md:gap-5">
  298.                 <li class="w-[432px] xl:w-full hover">
  299.                     <a href={{url( "user_data", { route : "catalog" })}} class="w-full">
  300.                         <img src="{{ asset('assets/img/top/catalog-service.webp') }}" class="w-full"/>
  301.                     </a>
  302.                 </li>
  303.                 <li class="w-[432px] xl:w-full hover">
  304.                     <a href={{url('coordinate_confirm')}} class="w-full">
  305.                         <img src="{{ asset('assets/img/top/coordinate-service.webp') }}" class="w-full"/>
  306.                     </a>
  307.                 </li>
  308.                 <li class="w-[432px] xl:w-full hover">
  309.                     <a href={{url("user_data", {route:"pick_up_altar"})}} class="w-full">
  310.                         <img src="{{ asset('assets/img/top/takuover-service.webp') }}" class="w-full"/>
  311.                     </a>
  312.                 </li>
  313.             </ul>
  314.         </div>
  315.     {% endif %}
  316.     {% set breadcrumbs = [{'name': subtitle }] %}
  317.     {{ include('Block/breadcrumbs.twig') }}
  318. {% endblock %}