app/template/default/Product/detail.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 stylesheet %}
  16.     <style>
  18.         .slick-slider {
  19.             margin-bottom: 10px;
  20.         }
  22.         .slick-dots {
  23.             position: absolute;
  24.             bottom: -45px;
  25.             display: block;
  26.             width: 100%;
  27.             padding: 0;
  28.             list-style: none;
  29.             text-align: center;
  30.         }
  32.         .slick-dots li {
  33.             position: relative;
  34.             display: inline-block;
  35.             width: 20px;
  36.             height: 20px;
  37.             margin: 0 5px;
  38.             padding: 0;
  39.             cursor: pointer;
  40.         }
  42.         .slick-dots li button {
  43.             font-size: 0;
  44.             line-height: 0;
  45.             display: block;
  46.             width: 20px;
  47.             height: 20px;
  48.             padding: 5px;
  49.             cursor: pointer;
  50.             color: transparent;
  51.             border: 0;
  52.             outline: none;
  53.             background: transparent;
  54.         }
  56.         .slick-dots li button:hover,
  57.         .slick-dots li button:focus {
  58.             outline: none;
  59.         }
  61.         .slick-dots li button:hover:before,
  62.         .slick-dots li button:focus:before {
  63.             opacity: 1;
  64.         }
  66.         .slick-dots li button:before {
  67.             content: " ";
  68.             line-height: 20px;
  69.             position: absolute;
  70.             top: 0;
  71.             left: 0;
  72.             width: 12px;
  73.             height: 12px;
  74.             text-align: center;
  75.             opacity: .25;
  76.             background-color: black;
  77.             border-radius: 50%;
  78.         }
  80.         .slick-dots li.slick-active button:before {
  81.             opacity: .75;
  82.             background-color: black;
  83.         }
  85.         .slick-dots li button.thumbnail img {
  86.             width: 0;
  87.             height: 0;
  88.         }
  90.         @media only screen and (min-width: 768px) {
  91.             .ec-sliderItemRole {
  92.                 margin-bottom: 3rem ;
  93.             }
  94.         }
  95.         .ec-sliderItemRole .slideThumb {
  96.             width: 10%;
  97.         }
  98.         .ec-sliderItemRole .slideThumb img {
  99.             width: 90%;
  100.         }
  102.         /* ///////////////////詳細情報1/////////////////// */
  104.         .ec-productRole__movie {
  105.             width: 100%;
  106.             display: grid;
  107.             grid-template-columns: 1fr;
  108.             gap: 20px;
  109.         }
  110.         @media only screen and (min-width: 768px) {
  111.             .ec-productRole__movie {
  112.                 grid-template-columns: repeat(3, 1fr);
  113.             }
  114.         }
  115.         .ec-productRole__movie iframe {
  116.             width: 100%;
  117.             aspect-ratio: 16 / 9;
  118.         }
  119.         .movie-caption {
  120.             font-size: 16px;
  121.         }
  123.         /* 住所 */
  124.         @media only screen and (min-width: 768px) {
  125.             .ec-productRole__kofun-address {
  126.                 font-size: 28px;
  127.                 font-weight: bold;
  128.                 padding: 1rem 0;
  129.                 border-bottom: 1px dotted #ccc;
  130.             }
  131.         }
  132.         /* 価格 */
  133.         .ec-productRole .ec-productRole__price {
  134.             color:var(--e-global-color-global_color_5);
  135.             padding-top:0px;
  136.             font-size: 30px;
  137.         }
  139.         /* 説明テキスト */
  140.         .ec-productRole .ec-productRole__description {
  141.             margin-top: 20px;
  142.         }
  144.         /* 購入ボタン */
  145.         @media only screen and (min-width: 768px) {
  146.             .ec-productRole .ec-productRole__btn {
  147.                 text-align: center;
  148.                 min-width: 350px;
  149.                 width: 40%;
  150.                 margin:0 auto;
  151.             }
  152.         }
  154.         .blueprint-image {
  155.             width: 100%;
  156.             max-width: 768px;
  157.             margin: 15px auto;
  158.         }
  159.         .ec-grid3__cell.product-image {
  160.             margin: 5px 15px;
  161.         }
  163.         .detail-top-image {
  164.             width: 100%;
  165.             max-width: 1080px;
  166.             margin: 15px auto;
  167.         }
  169. /* ///////////////////詳細情報2/////////////////// */
  171. /* 見出し_下グリーンライン */
  172.         .ec-productRole__kofun-content h2 {
  173.             font-size: 20px;
  174.             font-weight: bold;
  175.             color: var(--e-global-color-global_color_4);
  176.             margin-top: 4rem;
  177.             margin-bottom: 1rem;
  178.             padding-bottom: 0.5rem;
  179.             background: linear-gradient(to right,
  180.                 var(--e-global-color-global_color_1) 0%,
  181.                 var(--e-global-color-global_color_1) 20%,
  182.                 #ddd 20%,
  183.                 #ddd 100%);
  184.             background-size: 100% 3px;
  185.             background-repeat: no-repeat;
  186.             background-position: bottom;
  187.         }
  188.         @media only screen and (min-width: 768px) {
  189.             .ec-productRole__kofun-content h2 {
  190.                 font-size: 26px;
  191.             }
  192.         }
  193. /* 見出し_左横グリーンライン */
  194.         .ec-productRole__kofun-content h3 {
  195.             font-size: 20px;
  196.             font-weight: bold;
  197.             color: var(--e-global-color-global_color_4);
  198.             margin-top: 4rem;
  199.             margin-bottom: 1rem;
  200.             padding-left: 0.5rem;
  201.             border-left: 10px solid var(--e-global-color-global_color_1);
  202.             line-height: 1.8;
  203.         }
  205. /* おすすめポイント */
  206.         .ec-productRole__kofun-appeal-points .title {
  207.             font-size: 18px;
  208.             font-weight: bold;
  209.             color: var(--e-global-color-global_color_9);
  210.             background-color: var(--e-global-color-global_color_1);
  211.             padding: 0.5rem 4rem 0.5rem 1rem;
  212.             margin: 2rem 1rem 0 1rem;
  213.             width: fit-content;
  214.             border-radius: 6px 6px 0 0;  /* 上側の角だけを丸く */
  215.         }
  217.         .ec-productRole__kofun-appeal-points .content {
  218.             margin: 0 1rem;
  219.             padding: 1rem;
  220.             background-color: var(--e-global-color-global_color_7);
  221.             border-radius: 4px;
  222.         }
  224.         .ec-productRole__kofun-content {
  225.             padding-bottom: 20px;
  226.             margin-bottom: 20px;
  227.         }
  229.         .ec-productRole__kofun-content .content {
  230.             display: flex;
  231.             align-items: flex-start;
  232.         }
  234.         .ec-productRole__kofun-content.basicline .content {
  235.             padding: 0.5rem 0;
  236.             border-bottom: 1px dotted #ccc;
  237.         }
  239.         .tab-content.active .content {
  240.             padding: 0.5rem 0;
  241.             border-bottom: 1px dotted #ccc;
  242.         }
  244.         .ec-productRole__kofun-content.buy_process .content {
  245.             line-height:1.8;
  246.             padding-left:0.5rem;
  247.         }
  250.         .ec-productRole__kofun-content .content-group {
  251.             margin-top: 1rem;
  252.         }
  254.         .ec-productRole__kofun-content .content span.label {
  255.             display: inline-block;
  256.             width: 120px;  /* 項目名の幅を固定 */
  257.             color: var(--e-global-color-global_color_5);
  258.             font-weight: bold;
  259.             flex-shrink: 0;
  260.         }
  262.         .ec-productRole__kofun-content.base-info .label::before {
  263.             content: "【";
  264.         }
  266.         .ec-productRole__kofun-content.base-info .label::after {
  267.             content: "】";
  268.         }
  270.         .ec-productRole__kofun-content.basicline a {
  271.             color: #333 !important;
  272.             text-decoration: underline !important;
  273.         }
  275.         .ec-productRole__kofun-content.basicline a:hover {
  276.             color: var(--e-global-color-global_color_2) !important;
  277.         }
  279.         .ec-productRole__kofun-content .content span.label2 {
  280.             display: inline-block;
  281.             width: 120px;  /* 項目名の幅を固定 */
  282.             color: var(--e-global-color-global_color_1);
  283.             font-weight: bold;
  284.             flex-shrink: 0;
  285.         }
  287.         .ec-productRole__kofun-content .content.note {
  288.             margin-top: 1rem;
  289.             font-size: 0.9em;
  290.             line-height:1.5;
  291.         }
  293.         .ec-productRole__kofun-content .content.sub {
  294.             padding-left: 1.5rem;
  295.             margin-bottom: 1rem;
  296.             font-size: 0.9em;
  297.             line-height:1.5;
  298.         }
  300.         .ec-productRole__kofun-content .content.link {
  301.             margin-top: 1rem;
  302.         }
  304.         .warning {
  305.             color: red;
  306.         }
  308.         .value {
  309.             display: flex;
  310.             flex-direction: column;
  311.         }
  314.         .ec-productRole__kofun-content.description-detail {
  315.             margin-top: 50px;
  316.         }
  318.         .ec-productRole__kofun-content.description-detail strong {
  319.             font-size: 30px;
  320.             color: var(--e-global-color-global_color_2);
  321.         }
  324. /* 価格表 */
  325.         .ec-productRole__kofun-content.price-table .header {
  326.             display: flex;
  327.             align-items: flex-start;
  328.             font-weight: bold;
  329.             padding: 0.8rem;
  330.             border-bottom: 1px dashed var(--e-global-color-global_color_2);
  331.         }
  333.         .ec-productRole__kofun-content.price-table .content {
  334.             padding: 0.8em;
  335.             border-bottom: 1px dashed var(--e-global-color-global_color_2);
  336.         }
  338.         .ec-productRole__kofun-content.price-table span.label {
  339.             width: 30%;
  340.         }
  341.         @media only screen and (min-width: 768px) {
  342.             .ec-productRole__kofun-content.price-table span.label {
  343.                 width: 320px;
  344.             }
  345.         }
  346.         .ec-productRole__kofun-content.price-table .note {
  347.             padding-top: 1rem;
  348.             font-size: 0.9em;
  349.         }
  353. /* タブ切り替え用のスタイル追加 */
  354.         .tab-container {
  355.             margin: 2rem 0;
  356.         }
  358.         .tab-buttons {
  359.             display: flex;
  360.             position: relative;
  361.             z-index: 1;
  362.         }
  364.         .tab-button {
  365.             padding: 1rem 2rem;
  366.             background: #ffffff;
  367.             border: none;
  368.             border-bottom: 1px solid var(--e-global-color-global_color_2);
  369.             cursor: pointer;
  370.             font-size: 16px;
  371.             font-weight: bold;
  372.             margin-right: 4px;
  373.             margin-bottom: -1px;
  374.             position: relative;
  375.         }
  377.         .tab-button.active {
  378.             background: #ECF2D3;
  379.             border: 1px solid var(--e-global-color-global_color_2);
  380.             border-bottom: none;
  381.         }
  383.         .tab-content {
  384.             display: none;
  385.             padding: 2rem;
  386.             background: #ECF2D3;
  387.             border: 1px solid var(--e-global-color-global_color_2);
  388.         }
  390.         .tab-content.active {
  391.             display: block;
  392.         }
  394.         .fee-note {
  395.             margin-top: 1rem;
  396.             font-size: 0.9em;
  397.             color: #666;
  398.         }
  400.         .ec-productRole__kofun-content.scroll-to-checkout {
  401.             text-align: center;
  402.             margin-top: 50px;
  403.         }
  404.         .ec-productRole__kofun-content.scroll-to-checkout a span {
  405.             text-decoration: inherit;
  406.             display: inline-block;
  407.         }
  408.         .ec-productRole__kofun-content.scroll-to-checkout a {
  409.             margin: 0 auto;
  410.             display: flex;
  411.             align-items: center;
  412.             justify-content: center;
  413.             line-height: 1;
  414.             font-weight: bold;
  415.             border-radius: 3px;
  416.             color: #ffffff;
  417.             fill: #ffffff;
  418.             text-align: center;
  419.             transition: all .3s;
  420.             background-color: #000000;
  421.             padding: 20px;
  422.             width: 300px;
  423.             height: 45px;
  424.         }
  426.         @media only screen and (max-width: 768px) {
  427.             .ec-productRole__kofun-content.scroll-to-checkout a {
  428.                 font-size: 17px;
  429.                 padding: 20px 22px;
  430.             }
  431.         }
  433.         .ec-productRole__stock {
  434.             display: none;
  435.         }
  437.         .ec-productRole__kofun-content.visit-reservation {
  438.             text-align: center;
  439.             margin-top: 50px;
  440.         }
  441.         .ec-productRole__kofun-content.visit-reservation a {
  442.             margin: 0 auto;
  443.             display: flex;
  444.             align-items: center;
  445.             justify-content: center;
  446.             line-height: 1;
  447.             font-weight: bold;
  448.             border-radius: 3px;
  449.             color: #ffffff;
  450.             fill: #ffffff;
  451.             text-align: center;
  452.             transition: all .3s;
  453.             background-color: #000000;
  454.             padding: 20px;
  455.             width: 300px;
  456.             height: 45px;
  457.             text-decoration: none;
  458.         }
  460.         @media only screen and (max-width: 768px) {
  461.             .ec-productRole__kofun-content.visit-reservation a {
  462.                 font-size: 17px;
  463.                 padding: 20px 22px;
  464.             }
  465.         }
  466.     </style>
  467. {% endblock %}
  469. {% block javascript %}
  470.     <script>
  471.         eccube.classCategories = {{ get_extended_class_categories_as_json(Product)|raw }};
  473.         // 規格2に選択肢を割り当てる。
  474.         function fnSetClassCategories(form, classcat_id2_selected) {
  475.             var $form = $(form);
  476.             var product_id = $form.find('input[name=product_id]').val();
  477.             var $sele1 = $form.find('select[name=classcategory_id1]');
  478.             var $sele2 = $form.find('select[name=classcategory_id2]');
  479.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  480.         }
  482.         {% if form.classcategory_id2 is defined %}
  483.         fnSetClassCategories(
  484.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  485.         );
  486.         {% elseif form.classcategory_id1 is defined %}
  487.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  488.         {% endif %}
  489.     </script>
  490.     <script>
  491.         $(function() {
  492.             // bfcache無効化
  493.             $(window).bind('pageshow', function(event) {
  494.                 if (event.originalEvent.persisted) {
  495.                     location.reload(true);
  496.                 }
  497.             });
  499.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  500.             // img タグに width, height が付与されている.
  501.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  502.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  503.             $('.ec-grid2__cell').hide();
  504.             var removeSize = function () {
  505.                 $('.slide-item').height('');
  506.                 $('.slide-item img')
  507.                     .removeAttr('width')
  508.                     .removeAttr('height')
  509.                     .removeAttr('style');
  510.             };
  511.             var slickInitial = function(slick) {
  512.                 $('.ec-grid2__cell').fadeIn(1500);
  513.                 var baseHeight = $(slick.target).height();
  514.                 var baseWidth = $(slick.target).width();
  515.                 var rate = baseWidth / baseHeight;
  517.                 $('.slide-item').height(baseHeight * rate); // 余白を削除する
  518.                 // transform を使用することでCLSの影響を受けないようにする
  519.                 $('.slide-item img')
  520.                     .css(
  521.                         {
  522.                             'transform-origin': 'top left',
  523.                             'transform': 'scaleY(' + rate + ')',
  524.                             'transition': 'transform .1s'
  525.                         }
  526.                     );
  527.                 // 正しいサイズに近くなったら属性を解除する
  528.                 setTimeout(removeSize, 500);
  529.             };
  530.             $('.item_visual').on('init', slickInitial);
  531.             // リサイズ時は CLS の影響を受けないため属性を解除する
  532.             $(window).resize(removeSize);
  533.             $('.item_visual').slick({
  534.                 dots: false,
  535.                 arrows: false,
  536.                 responsive: [{
  537.                     breakpoint: 768,
  538.                     settings: {
  539.                         dots: true
  540.                     }
  541.                 }]
  542.             });
  544.             $('.slideThumb').on('click', function() {
  545.                 var index = $(this).attr('data-index');
  546.                 $('.item_visual').slick('slickGoTo', index, false);
  547.             })
  549.             // タブ切り替え用のJavaScript
  550.             $('.tab-button').on('click', function() {
  551.                 // すべてのタブとコンテンツからactiveクラスを削除
  552.                 $('.tab-button').removeClass('active');
  553.                 $('.tab-content').removeClass('active');
  555.                 // クリックされたタブとそれに対応するコンテンツにactiveクラスを追加
  556.                 $(this).addClass('active');
  557.                 const tabId = $(this).data('tab');
  558.                 $('#' + tabId).addClass('active');
  559.             });
  560.         });
  561.     </script>
  562.     <script>
  563.         $(function() {
  564.             $('.add-cart').on('click', function(event) {
  565.                 {% if form.classcategory_id1 is defined %}
  566.                 // 規格1フォームの必須チェック
  567.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  568.                     $('#classcategory_id1')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  569.                     return true;
  570.                 } else {
  571.                     $('#classcategory_id1')[0].setCustomValidity('');
  572.                 }
  573.                 {% endif %}
  575.                 {% if form.classcategory_id2 is defined %}
  576.                 // 規格2フォームの必須チェック
  577.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  578.                     $('#classcategory_id2')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  579.                     return true;
  580.                 } else {
  581.                     $('#classcategory_id2')[0].setCustomValidity('');
  582.                 }
  583.                 {% endif %}
  585.                 // 個数フォームのチェック
  586.                 if ($('#quantity').val() < 1) {
  587.                     $('#quantity')[0].setCustomValidity('{{ 'front.product.invalid_quantity'|trans }}');
  588.                     return true;
  589.                 } else {
  590.                     $('#quantity')[0].setCustomValidity('');
  591.                 }
  593.                 event.preventDefault();
  594.                 $form = $('#form1');
  595.                 $.ajax({
  596.                     url: $form.attr('action'),
  597.                     type: $form.attr('method'),
  598.                     data: $form.serialize(),
  599.                     dataType: 'json',
  600.                     beforeSend: function(xhr, settings) {
  601.                         // Buttonを無効にする
  602.                         $('.add-cart').prop('disabled', true);
  603.                     }
  604.                 }).done(function(data) {
  605.                     // レスポンス内のメッセージをalertで表示
  606.                     $.each(data.messages, function() {
  607.                         $('#ec-modal-header').text(this);
  608.                     });
  610.                     $('.ec-modal').show()
  612.                     // カートブロックを更新する
  613.                     $.ajax({
  614.                         url: "{{ url('block_cart') }}",
  615.                         type: 'GET',
  616.                         dataType: 'html'
  617.                     }).done(function(html) {
  618.                         $('.ec-headerRole__cart').html(html);
  619.                     });
  620.                 }).fail(function(data) {
  621.                     alert('{{ 'front.product.add_cart_error'|trans }}');
  622.                 }).always(function(data) {
  623.                     // Buttonを有効にする
  624.                     $('.add-cart').prop('disabled', false);
  625.                 });
  626.             });
  628.             $('.scroll-to-checkout a').on('click', function(e) {
  629.                 e.preventDefault();
  630.                 const targetId = $(this).attr('href');
  631.                 const targetPosition = $(targetId).offset().top;
  632.                 $('html, body').animate({
  633.                     scrollTop: targetPosition
  634.                 }, 600); // 800ミリ秒かけてスクロール
  635.             });
  636.         });
  638.         $('.ec-modal-wrap').on('click', function(e) {
  639.             // モーダル内の処理は外側にバブリングさせない
  640.             e.stopPropagation();
  641.         });
  642.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  643.             $('.ec-modal').hide()
  644.         });
  645.     </script>
  646.     <script type="application/ld+json">
  647.     {
  648.         "@context": "https://schema.org/",
  649.         "@type": "Product",
  650.         "name": "{{ Product.name }}",
  651.         "image": [
  652.             {% for img in Product.ProductImage %}
  653.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  655.             {% else %}
  656.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  657.             {% endfor %}
  658.         ],
  659.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  660.         {% if Product.code_min %}
  661.         "sku": "{{ Product.code_min }}",
  662.         {% endif %}
  663.         "offers": {
  664.             "@type": "Offer",
  665.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  666.             "priceCurrency": "{{ eccube_config.currency }}",
  667.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  668.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  669.         }
  670.     }
  671.     </script>
  672.     <script>
  673.         $(function() {
  674.             // 規格1が変更されたとき
  675.             $('#classcategory_id1').on('change', function() {
  676.                 updateStock();
  677.             });
  679.             // 規格2が変更されたとき
  680.             $('#classcategory_id2').on('change', function() {
  681.                 updateStock();
  682.             });
  684.             // 初期表示時
  685.             updateStock();
  687.             // 在庫表示を更新する関数
  688.             function updateStock() {
  689.                 // 現在選択されているProductClassのデータを取得
  690.                 var productClassId = $('#ProductClass').val();
  692.                 if (!productClassId) {
  693.                     $('#selected-stock-quantity').text('{{ 'front.product.please_select_product_class'|trans }}');
  694.                     return;
  695.                 }
  697.                 // 選択された商品規格の情報を取得
  698.                 var classCategory1 = $('#classcategory_id1').val() || '__unselected';
  699.                 var classCategory2 = $('#classcategory_id2').val() || '';
  701.                 // 商品規格情報を取得
  702.                 var productClass = null;
  703.                 if (eccube.classCategories[classCategory1]) {
  704.                     if (classCategory2 && eccube.classCategories[classCategory1]['#' + classCategory2]) {
  705.                         productClass = eccube.classCategories[classCategory1]['#' + classCategory2];
  706.                     } else if (eccube.classCategories[classCategory1]['#']) {
  707.                         productClass = eccube.classCategories[classCategory1]['#'];
  708.                     }
  709.                 }
  711.                 if (!productClass) {
  712.                     $('#selected-stock-quantity').text('{{ 'front.product.please_select_product_class'|trans }}');
  713.                     return;
  714.                 }
  716.                 // 在庫表示を更新
  717.                 var stockQuantityElement = $('#selected-stock-quantity');
  719.                 if (productClass.stock !== null && productClass.stock > 0) {
  720.                     stockQuantityElement.text(productClass.stock);
  721.                 } else {
  722.                     stockQuantityElement.text('{{ 'front.product.out_of_stock'|trans }}');
  723.                 }
  724.             }
  725.         });
  726.     </script>
  727. {% endblock %}
  729. {% block main %}
  730.     <div class="ec-productRole">
  731.         <div class="ec-pageHeader">
  732.             <h1 class="km_pagetitle">{{ Product.name }}</h1>
  733.         </div>
  735.         <div class="detail-top-image">
  736.             <img src="{{ asset(Product.ProductImage[0], 'save_image') }}">
  737.         </div>
  739.         <div class="ec-productRole__profile">
  740.             {# 住所 #}
  741.             {% if Product.kofun_product_type and Product.kofun_product_type.id == 1 %}
  742.                 <div class="ec-productRole__kofun-address">
  743.                     {{ Product.Kofun.Pref.name ?? '' }}{{ Product.Kofun.addr01 }}{{ Product.Kofun.addr02 }}
  744.                 </div>
  745.             {% endif %}
  746.             {# タグ #}
  747.             {% if Product.Tags is not empty %}
  748.                 <ul class="ec-productRole__tags">
  749.                     {% for Tag in Product.Tags %}
  750.                         <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  751.                     {% endfor %}
  752.                 </ul>
  753.             {% endif %}
  754.             {# 通常価格 #}
  755.             {% if Product.hasProductClass -%}
  756.                 <div class="ec-productRole__priceRegular">
  757.                     {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  758.                         <span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  759.                         <span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span>
  760.                     {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  761.                         <span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}～ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  762.                         <span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span>
  763.                     {% endif %}
  764.                 </div>
  765.             {% else %}
  766.                 {% if Product.getPrice01Max is not null %}
  767.                     <span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}：{{ Product.getPrice01IncTaxMin|price }}</span>
  768.                     <span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span>
  769.                 {% endif %}
  770.             {% endif %}
  771.             {# 販売価格 #}
  772.             <div class="ec-productRole__price">
  773.                 {% if Product.hasProductClass -%}
  774.                     {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  775.                         <div class="ec-price">
  776.                             <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  777.                             <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span>
  778.                         </div>
  779.                     {% else %}
  780.                         <div class="ec-price">
  781.                             <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  782.                             <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span>
  783.                         </div>
  784.                     {% endif %}
  785.                 {% else %}
  786.                     <div class="ec-price">
  787.                         <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  788.                         <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span>
  789.                     </div>
  790.                 {% endif %}
  791.             </div>
  792.         </div>
  794.         {% if Product.kofun_product_type and Product.kofun_product_type.id == 1 %}
  795.             <div class="ec-productRole__kofun">
  797.                 <div class="ec-productRole__kofun-content description-detail">
  798.                     {{ Product.Kofun.descriptionDetail|raw|nl2br }}
  799.                 </div>
  800.                 <div class="ec-productRole__kofun-appeal-points">
  801.                     <div class="title">{{ 'front.kofun.appeal_points_title'|trans }}</div>
  802.                     <div class="content">
  803.                         {{ Product.Kofun.appealPoints|raw|nl2br }}
  804.                     </div>
  805.                 </div>
  807.                 <div class="ec-productRole__kofun-content scroll-to-checkout">
  808.                     <a href="#checkout">
  809.                         <span>ご購入はこちらから</span>
  810.                     </a>
  811.                 </div>
  813.                 <div class="ec-productRole__kofun-content access">
  814.                     <h2>アクセス</h2>
  815.                     <div class="content">
  816.                         {{ Product.Kofun.access|raw|nl2br }}
  817.                     </div>
  818.                 </div>
  820.                 {% if app.environment == 'prod' %}
  821.                     {% if Product.Kofun.id == 'bj0zQKulUcfULgr06dwy' %}
  822.                         {% set visit_url = 'https://calendar.app.google/DSkdUAXqMmRxZnti8' %}
  823.                     {% elseif Product.Kofun.id == 'FaUkQoWKRHRumqlKIvgg' %}
  824.                         {% set visit_url = 'https://calendar.app.google/SasLwuKaFwQSZZrz7' %}
  825.                     {% endif %}
  826.                 {% elseif app.environment == 'dev' %}
  827.                     {% set visit_url = 'https://calendar.app.google/ECkmJUvKpra9SSQU9' %}
  828.                 {% endif %}
  830.                 {% if visit_url is defined %}
  831.                 <div class="ec-productRole__kofun-content visit-reservation">
  832.                     <a href="{{ visit_url }}" target="_blank">
  833.                         <span>見学のご予約はこちらから</span>
  834.                     </a>
  835.                 </div>
  836.                 {% endif %}
  838.                 <div class="ec-productRole__kofun-content basicline">
  839.                     <h2>基本情報</h2>
  840.                     <div class="content">
  841.                         <span class="label">{{ 'front.kofun.base_info__danka_duty'|trans }}</span>{{ Product.Kofun.dankaDuty|raw|nl2br }}
  842.                     </div>
  843.                     <div class="content">
  844.                         <span class="label">{{ 'front.kofun.base_info__religion'|trans }}</span>{{ Product.Kofun.religion|raw|nl2br }}
  845.                     </div>
  846.                     <div class="content">
  847.                         <span class="label">{{ 'front.kofun.base_info__successor'|trans }}</span>{{ Product.Kofun.successor|raw|nl2br }}
  848.                     </div>
  849.                     <div class="content">
  850.                         <span class="label">{{ 'front.kofun.base_info__ritual'|trans }}</span>{{ Product.Kofun.ritual|raw|nl2br }}
  851.                     </div>
  852.                     <div class="content">
  853.                         <span class="label">{{ 'front.kofun.base_info__features'|trans }}</span>{{ Product.Kofun.features|raw|nl2br }}
  854.                     </div>
  855.                     <div class="content">
  856.                         <span class="label">{{ 'front.kofun.base_info__facilities'|trans }}</span>{{ Product.Kofun.facilities|raw|nl2br }}
  857.                     </div>
  858.                     <div class="content">
  859.                         <span class="label">{{ 'front.kofun.base_info__business_hours'|trans }}</span>{{ Product.Kofun.businessHours|raw|nl2br }}
  860.                     </div>
  861.                     <div class="content">
  862.                         <span class="label">{{ 'front.kofun.base_info__holidays'|trans }}</span>{{ Product.Kofun.holidays|raw|nl2br }}
  863.                     </div>
  864.                 </div>
  865.                 <div class="ec-productRole__kofun-content basicline">
  866.                     <h2>古墳の概要</h2>
  867.                     <div class="content">
  868.                         <span class="label">【形状】</span>
  869.                         <div class="value">
  870.                             {{ Product.Kofun.shape|raw|nl2br }}
  871.                         </div>
  872.                     </div>
  873.                     <div class="content">
  874.                         <span class="label">【区画】</span>
  875.                         <div class="value">
  876.                             <div>{{ 'front.kofun.kofun_summary__section_one_person'|trans({'%count%': Product.Kofun.onePersonSectionCount}) }}</div>
  877.                             {% if (Product.Kofun.twoPersonSectionCount > 0) %}
  878.                             <div>{{ 'front.kofun.kofun_summary__section_two_person'|trans({'%count%': Product.Kofun.twoPersonSectionCount}) }}</div>
  879.                             {% endif %}
  880.                             <div>{{ 'front.kofun.kofun_summary__section_communal'|trans({'%count%': Product.Kofun.communalSectionCount}) }}</div>
  881.                         </div>
  882.                     </div>
  883.                     <div class="content">
  884.                         <span class="label">【副葬品】</span>
  885.                         <div class="value">
  886.                             {{ Product.Kofun.burialGoods|raw|nl2br }}
  887.                         </div>
  888.                     </div>
  889.                     <div class="content">
  890.                         <span class="label">【販売開始日】</span>
  891.                         <div class="value">
  892.                             {{ Product.Kofun.salesStartDate|raw|nl2br }}
  893.                         </div>
  894.                     </div>
  895.                     <div class="content">
  896.                         <span class="label">【完成予定日】</span>
  897.                         <div class="value">
  898.                             {{ Product.Kofun.completionDate|raw|nl2br }}
  899.                         </div>
  900.                     </div>
  901.                     {% for BlueprintImage in Product.Kofun.BlueprintImage %}
  902.                         <div class="blueprint-image">
  903.                             <img src="{{ asset(BlueprintImage, 'save_image') }}">
  904.                         </div>
  905.                     {% endfor %}
  906.                     <div class="ec-grid3">
  907.                         {% set descriptions = Product.imageDescriptions|split('|') %}
  908.                         {% for ProductImage in Product.ProductImage|slice(1, 3) %}
  909.                             <div class="ec-grid3__cell product-image">
  910.                                 <img src="{{ asset(ProductImage, 'save_image') }}" alt="" loading="lazy">
  911.                                 {% if descriptions[loop.index0] is defined %}
  912.                                     <div class="product-image-description">
  913.                                         {{ descriptions[loop.index0]|raw|nl2br }}
  914.                                     </div>
  915.                                 {% endif %}
  916.                             </div>
  917.                         {% endfor %}
  918.                     </div>
  919.                 </div>
  921.                 <div class="ec-productRole__kofun-content scroll-to-checkout">
  922.                     <a href="#checkout">
  923.                         <span>ご購入はこちらから</span>
  924.                     </a>
  925.                 </div>
  927.                 {% if Product.movie_url %}
  928.                 <div class="ec-productRole__kofun-content introduction_movie">
  929.                     <h2>{{ 'front.kofun.introduction_movie'|trans }}</h2>
  930.                     <div class="ec-productRole__movie">
  931.                         {% for movie_url in Product.movie_url|split('\n') %}
  932.                             <div class="movie-item">
  933.                                 <iframe src="https://www.youtube.com/embed/{{ movie_url|split(',')|first }}?mute=1&rel=0&loop=1" frameborder="0" allow="picture-in-picture" allowfullscreen></iframe>
  934.                                 {% if movie_url|split(',')|length > 1 %}
  935.                                     <div class="movie-caption">
  936.                                         {{ movie_url|split(',', 2)|last }}
  937.                                     </div>
  938.                                 {% endif %}
  939.                             </div>
  940.                         {% endfor %}
  941.                     </div>
  942.                 </div>
  943.                 {% endif %}
  945.                 <div class="ec-productRole__kofun-content price-table">
  946.                     <h2>{{ 'front.kofun.price_table'|trans }}</h2>
  947.                     <div class="header">
  948.                         <span class="label">{{ 'front.kofun.price_table_header__type'|trans }}</span>
  949.                         <div class="value">
  950.                             {{ 'front.kofun.price_table_header__price'|trans }}
  951.                         </div>
  952.                     </div>
  953.                     {% for ProductClass in Product.ProductClasses %}
  954.                     <div class="content">
  955.                         <span class="label">{{ ProductClass.ClassCategory1.Name }}</span>
  956.                         <div class="value">
  957.                             {{ 'front.kofun.price_table_data__price'|trans({'%price1%': ProductClass.eternalUseFee|number_format, '%price2%': ProductClass.miscellaneousFee|number_format, '%price3%': ProductClass.Price02|number_format}) }}
  958.                         </div>
  959.                     </div>
  960.                     {% endfor %}
  961.                     <div class="note">{{ 'front.kofun.price_table_note'|trans }}</div>
  962.                 </div>
  963.                 <div class="ec-productRole__kofun-content">
  964.                     <h3>{{ 'front.kofun.fee_list'|trans }}</h3>
  965.                     <div class="tab-container">
  966.                         <div class="tab-buttons">
  967.                             <button class="tab-button active" data-tab="eternal">{{ 'front.kofun.fee_list__eternal'|trans }}</button>
  968.                             <button class="tab-button" data-tab="communal">{{ 'front.kofun.fee_list__communal'|trans }}</button>
  969.                         </div>
  970.                         <div id="eternal" class="tab-content active">
  971.                             {% if (Product.Kofun.eternalBurialFee > 0) %}
  972.                             <div class="content">
  973.                                 <span class="label">{{ 'front.kofun.fee_list__burial'|trans }}</span>
  974.                                 <div class="value">
  975.                                     {{ 'front.kofun.fee_list__unit_price'|trans({'%price%': Product.Kofun.eternalBurialFee|number_format}) }}
  976.                                     <div class="fee-note">{{ 'front.kofun.fee_list__note'|trans }}</div>
  977.                                 </div>
  978.                             </div>
  979.                             <div class="content">
  980.                                 <span class="label">{{ 'front.kofun.fee_list__inscription'|trans }}</span>
  981.                                 <div class="value">
  982.                                     {{ 'front.kofun.fee_list__unit_price'|trans({'%price%': Product.Kofun.eternalInscriptionFee|number_format}) }}
  983.                                 </div>
  984.                             </div>
  985.                             <div class="content">
  986.                                 <span class="label">{{ 'front.kofun.fee_list__maintenance'|trans }}</span>
  987.                                 <div class="value">
  988.                                     {{ 'front.kofun.fee_list__section_price'|trans({'%price%': Product.Kofun.eternalMaintenanceFee|number_format}) }}
  989.                                 </div>
  990.                             </div>
  991.                             <div class="content-group">
  992.                                 <div class="content">
  993.                                     <span class="label">{{ 'front.kofun.fee_list__eternal_single_misc'|trans }}</span>
  994.                                     <div class="value">
  995.                                         {{ 'front.kofun.fee_list__total_price'|trans({'%price%': Product.Kofun.singleMiscFee|number_format}) }}
  996.                                     </div>
  997.                                 </div>
  998.                                 <div class="content">
  999.                                     <span class="label">{{ 'front.kofun.fee_list__eternal_double_misc'|trans }}</span>
  1000.                                     <div class="value">
  1001.                                         {{ 'front.kofun.fee_list__total_price'|trans({'%price%': Product.Kofun.doubleMiscFee|number_format}) }}
  1002.                                     </div>
  1003.                                 </div>
  1004.                             </div>
  1005.                             {% else %}
  1006.                             <div class="content">
  1007.                                 <span class="label">諸費用</span>
  1008.                                 <div class="value">
  1009.                                     入山費、納骨料、骨壺代、植栽維持費（管理費）合わせて{{ Product.Kofun.eternalMaintenanceFee|number_format }}円（税込）
  1010.                                     <div class="fee-note">※ 墓誌銘板および彫刻は含まれていません。</div>
  1011.                                 </div>
  1012.                             </div>
  1013.                             {% endif %}
  1014.                             <div class="content-group">
  1015.                                 <h5>オプション</h5>
  1016.                                 {% if (Product.Kofun.eternalBurialFee > 0) %}
  1017.                                 <div class="content">
  1018.                                     <span class="label">{{ 'front.kofun.fee_list__option_extension'|trans }}</span>
  1019.                                     <div class="value">
  1020.                                         {{ 'front.kofun.fee_list__option_extension_price'|trans({'%price%': Product.Kofun.extensionFee|number_format}) }}
  1021.                                         <div class="fee-note">{{ 'front.kofun.fee_list__option_note'|trans }}</div>
  1022.                                     </div>
  1023.                                 </div>
  1024.                                 {% else %}
  1025.                                 <div class="content">
  1026.                                     <span class="label">{{ 'front.kofun.fee_list__option_extension'|trans }}</span>
  1027.                                     <div class="value">
  1028.                                         20年まで10年間ごとに{{ Product.Kofun.extensionFee|number_format }}円（非課税）<br/>
  1029.                                         永年使用は515,000円（非課税）
  1030.                                         <div class="fee-note">{{ 'front.kofun.fee_list__option_note'|trans }}</div>
  1031.                                     </div>
  1032.                                 </div>
  1033.                                 <div class="content">
  1034.                                     <span class="label">墓誌彫刻</span>
  1035.                                     <div class="value">
  1036.                                         22,000円（税込）
  1037.                                         <div class="fee-note">※ ご希望のお客様は古墳墓をご購入後、お問い合わせからお申し込みください。</div>
  1038.                                     </div>
  1039.                                 </div>
  1040.                                 {% endif %}
  1041.                             </div>
  1042.                         </div>
  1043.                         <div id="communal" class="tab-content">
  1044.                             {% if (Product.Kofun.communalBurialFee > 0) %}
  1045.                             <div class="content">
  1046.                                 <span class="label">{{ 'front.kofun.fee_list__burial'|trans }}</span>
  1047.                                 <div class="value">
  1048.                                     {{ 'front.kofun.fee_list__price'|trans({'%price%': Product.Kofun.communalBurialFee|number_format}) }}
  1049.                                 </div>
  1050.                             </div>
  1051.                             <div class="content">
  1052.                                 <span class="label">{{ 'front.kofun.fee_list__inscription'|trans }}</span>
  1053.                                 <div class="value">
  1054.                                     {{ 'front.kofun.fee_list__price'|trans({'%price%': Product.Kofun.communalInscriptionFee|number_format}) }}
  1055.                                 </div>
  1056.                             </div>
  1057.                             <div class="content">
  1058.                                 <span class="label">{{ 'front.kofun.fee_list__maintenance'|trans }}</span>
  1059.                                 <div class="value">
  1060.                                     {{ 'front.kofun.fee_list__price'|trans({'%price%': Product.Kofun.communalMaintenanceFee|number_format}) }}
  1061.                                 </div>
  1062.                             </div>
  1063.                             <div class="content-group">
  1064.                                 <div class="content">
  1065.                                     <span class="label">{{ 'front.kofun.fee_list__communal_misc'|trans }}</span>
  1066.                                     <div class="value">
  1067.                                         {{ 'front.kofun.fee_list__total_price'|trans({'%price%': Product.Kofun.communalMiscFee|number_format}) }}
  1068.                                     </div>
  1069.                                 </div>
  1070.                             </div>
  1071.                             {% else %}
  1072.                             <div class="content">
  1073.                                 <span class="label">諸費用</span>
  1074.                                 <div class="value">
  1075.                                     入山費、納骨料、植栽維持費（管理費）合わせて{{ Product.Kofun.communalMaintenanceFee|number_format }}円（税込）
  1076.                                 </div>
  1077.                             </div>
  1078.                             {% endif %}
  1079.                         </div>
  1080.                     </div>
  1081.                 </div>
  1082.                 <div class="ec-productRole__kofun-content buy_process">
  1083.                     <h2>古墳墓のお手続き</h2>
  1084.                     <div class="content">
  1085.                         ①料金表と霊園規則をご確認の上、ご注文ください。
  1086.                     </div>
  1087.                     <div class="content">
  1088.                         ②ご購入に際し、お申込者様の続柄確認書類をご提出いただきます。写真のアップロード、または郵送にてご提出をお願いいたします。
  1089.                     </div>
  1090.                     <div class="content sub">
  1091.                         ※続柄確認書類とはお申込者及び埋葬予定者の本籍地と世帯全員のお名前が記載されたものとなります。（住民票や戸籍謄本など）発行から3カ月以内
  1092.                     </div>
  1093.                     <div class="content">
  1094.                         ③お支払い確認後、霊園から「永代使用承諾証」をお送りいたします。
  1095.                     </div>
  1096.                     <div class="content link">
  1097.                         {% if Product.Kofun.termsFileName %}
  1098.                             <a href="{{ asset(Product.Kofun.termsFileName, 'terms_file') }}" target="_blank">墓地使用規則>></a>
  1099.                         {% else %}
  1100.                             <div class="warning">墓地使用規則がアップロードされていません。</div>
  1101.                         {% endif %}
  1102.                     </div>
  1103.                 </div>
  1104.             </div>
  1105.         {% endif %}
  1106.         <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  1107.         </div>
  1108.         {% if Product.freearea %}
  1109.              <div class="ec-productRole__description">
  1110.                  {{ include(template_from_string(Product.freearea), sandboxed = true) }}
  1111.             </div>
  1112.         {% endif %}
  1114.         <div class="ec-productRole__profile" id="checkout">
  1115.             {# タグ #}
  1116.             {% if Product.Tags is not empty %}
  1117.                 <ul class="ec-productRole__tags">
  1118.                     {% for Tag in Product.Tags %}
  1119.                         <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  1120.                     {% endfor %}
  1121.                 </ul>
  1122.             {% endif %}
  1123.             {# 通常価格 #}
  1124.             {% if Product.hasProductClass -%}
  1125.                 <div class="ec-productRole__priceRegular">
  1126.                     {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  1127.                         <span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  1128.                         <span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span>
  1129.                     {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  1130.                         <span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}～ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  1131.                         <span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span>
  1132.                     {% endif %}
  1133.                 </div>
  1134.             {% else %}
  1135.                 {% if Product.getPrice01Max is not null %}
  1136.                     <span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}：{{ Product.getPrice01IncTaxMin|price }}</span>
  1137.                     <span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span>
  1138.                 {% endif %}
  1139.             {% endif %}
  1140.             {# 販売価格 #}
  1141.             <div class="ec-productRole__price">
  1142.                 {% if Product.hasProductClass -%}
  1143.                     {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  1144.                         <div class="ec-price">
  1145.                             <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  1146.                             <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span>
  1147.                         </div>
  1148.                     {% else %}
  1149.                         <div class="ec-price">
  1150.                             <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  1151.                             <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span>
  1152.                         </div>
  1153.                     {% endif %}
  1154.                 {% else %}
  1155.                     <div class="ec-price">
  1156.                         <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  1157.                         <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span>
  1158.                     </div>
  1159.                 {% endif %}
  1160.             </div>
  1161.             {# 商品コード #}
  1162.             {% if Product.code_min is not empty %}
  1163.                 <div class="ec-productRole__code">
  1164.                     {{ 'front.product.code'|trans }}： <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  1165.                 </div>
  1166.             {% endif %}
  1167.             {# 関連カテゴリ #}
  1168.             {% if Product.ProductCategories is not empty %}
  1169.                 <div class="ec-productRole__category">
  1170.                     {% for ProductCategory in Product.ProductCategories %}
  1171.                         <ul>
  1172.                             <li>
  1173.                                 {% for Category in ProductCategory.Category.path %}
  1174.                                     <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  1175.                                     <span>＞</span>{% endif -%}
  1176.                                 {% endfor %}
  1177.                             </li>
  1178.                         </ul>
  1179.                     {% endfor %}
  1180.                 </div>
  1181.             {% endif %}
  1182.             <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  1183.                 {% if Product.stock_find %}
  1184.                     <div class="ec-productRole__actions">
  1185.                         {% if form.classcategory_id1 is defined %}
  1186.                             <div class="ec-select">
  1187.                                 {{ form_row(form.classcategory_id1) }}
  1188.                                 {{ form_errors(form.classcategory_id1) }}
  1189.                             </div>
  1190.                             {% if form.classcategory_id2 is defined %}
  1191.                                 <div class="ec-select">
  1192.                                     {{ form_row(form.classcategory_id2) }}
  1193.                                     {{ form_errors(form.classcategory_id2) }}
  1194.                                 </div>
  1195.                             {% endif %}
  1196.                         {% endif %}
  1197.                         <div class="ec-productRole__stock" id="selected-product-stock" style="margin-bottom: 10px;">
  1198.                             <span>{{ 'front.product.stock'|trans }}</span>
  1199.                             <span class="ec-productRole__stockQuantity" id="selected-stock-quantity">
  1200.                                 {{ 'front.product.please_select_product_class'|trans }}
  1201.                             </span>
  1202.                         </div>
  1203.                         <div class="ec-numberInput"><span>{{ 'common.quantity'|trans }}</span>
  1204.                             {{ form_widget(form.quantity) }}
  1205.                             {{ form_errors(form.quantity) }}
  1206.                         </div>
  1207.                     </div>
  1208.                     {% if Product.isCanAddCart %}
  1209.                         <div class="ec-productRole__btn">
  1210.                             <button type="submit" class="ec-blockBtn--action add-cart">
  1211.                                 {{ 'front.product.add_cart'|trans }}
  1212.                             </button>
  1213.                         </div>
  1214.                     {% else %}
  1215.                         <div class="ec-productRole__btn">
  1216.                             <button type="button" class="ec-blockBtn--action" disabled="disabled">
  1217.                                 {{ 'front.product.can_not_add_cart'|trans }}
  1218.                             </button>
  1219.                         </div>
  1220.                     {% endif %}
  1221.                 {% else %}
  1222.                     <div class="ec-productRole__btn">
  1223.                         <button type="button" class="ec-blockBtn--action" disabled="disabled">
  1224.                             {{ 'front.product.out_of_stock'|trans }}
  1225.                         </button>
  1226.                     </div>
  1227.                 {% endif %}
  1229.                 {{ form_rest(form) }}
  1230.             </form>
  1231.             <div class="ec-modal">
  1232.                 <div class="ec-modal-overlay">
  1233.                     <div class="ec-modal-wrap">
  1234.                         <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  1235.                         <div id="ec-modal-header" class="text-center">{{ 'front.product.add_cart_complete'|trans }}</div>
  1236.                         <div class="ec-modal-box">
  1237.                             <div class="ec-role">
  1238.                                 <span class="ec-inlineBtn--cancel">{{ 'front.product.continue'|trans }}</span>
  1239.                                 <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'common.go_to_cart'|trans }}</a>
  1240.                             </div>
  1241.                         </div>
  1242.                     </div>
  1243.                 </div>
  1244.             </div>
  1245.             {% if BaseInfo.option_favorite_product %}
  1246.                 <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  1247.                     <div class="ec-productRole__btn">
  1248.                         {% if is_favorite == false %}
  1249.                             <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  1250.                                 {{ 'front.product.add_favorite'|trans }}
  1251.                             </button>
  1252.                         {% else %}
  1253.                             <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  1254.                                     disabled="disabled">{{ 'front.product.add_favorite_alrady'|trans }}
  1255.                             </button>
  1256.                         {% endif %}
  1257.                     </div>
  1258.                 </form>
  1259.             {% endif %}
  1260.         </div>
  1261.     </div>
  1262. {% endblock %}