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: 30px;
  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;
  40.             cursor: pointer;
  41.         }
  43.         .slick-dots li button {
  44.             font-size: 0;
  45.             line-height: 0;
  46.             display: block;
  47.             width: 20px;
  48.             height: 20px;
  49.             padding: 5px;
  50.             cursor: pointer;
  51.             color: transparent;
  52.             border: 0;
  53.             outline: none;
  54.             background: transparent;
  55.         }
  57.         .slick-dots li button:hover,
  58.         .slick-dots li button:focus {
  59.             outline: none;
  60.         }
  62.         .slick-dots li button:hover:before,
  63.         .slick-dots li button:focus:before {
  64.             opacity: 1;
  65.         }
  67.         .slick-dots li button:before {
  68.             content: " ";
  69.             line-height: 20px;
  70.             position: absolute;
  71.             top: 0;
  72.             left: 0;
  73.             width: 12px;
  74.             height: 12px;
  75.             text-align: center;
  76.             opacity: .25;
  77.             background-color: black;
  78.             border-radius: 50%;
  80.         }
  82.         .slick-dots li.slick-active button:before {
  83.             opacity: .75;
  84.             background-color: black;
  85.         }
  87.         .slick-dots li button.thumbnail img {
  88.             width: 0;
  89.             height: 0;
  90.         }
  92.     </style>
  93. {% endblock %}
  95. {% block javascript %}
  96.     <script>
  97.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  99.         // 規格2に選択肢を割り当てる。
  100.         function fnSetClassCategories(form, classcat_id2_selected) {
  101.             var $form = $(form);
  102.             var product_id = $form.find('input[name=product_id]').val();
  103.             var $sele1 = $form.find('select[name=classcategory_id1]');
  104.             var $sele2 = $form.find('select[name=classcategory_id2]');
  105.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  106.         }
  108.         {% if form.classcategory_id2 is defined %}
  109.         fnSetClassCategories(
  110.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  111.         );
  112.         {% elseif form.classcategory_id1 is defined %}
  113.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  114.         {% endif %}
  115.     </script>
  116.     <script>
  117.         $(function() {
  118.             // bfcache無効化
  119.             $(window).bind('pageshow', function(event) {
  120.                 if (event.originalEvent.persisted) {
  121.                     location.reload(true);
  122.                 }
  123.             });
  125.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  126.             // img タグに width, height が付与されている.
  127.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  128.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  129.             $('.ec-grid2__cell').hide();
  130.             var removeSize = function () {
  131.                 $('.slide-item').height('');
  132.                 $('.slide-item img')
  133.                     .removeAttr('width')
  134.                     .removeAttr('height')
  135.                     .removeAttr('style');
  136.             };
  137.             var slickInitial = function(slick) {
  138.                 $('.ec-grid2__cell').fadeIn(1500);
  139.                 var baseHeight = $(slick.target).height();
  140.                 var baseWidth = $(slick.target).width();
  141.                 var rate = baseWidth / baseHeight;
  143.                 $('.slide-item').height(baseHeight * rate); // 余白を削除する
  144.                 // transform を使用することでCLSの影響を受けないようにする
  145.                 $('.slide-item img')
  146.                     .css(
  147.                         {
  148.                             'transform-origin': 'top left',
  149.                             'transform': 'scaleY(' + rate + ')',
  150.                             'transition': 'transform .1s'
  151.                         }
  152.                     );
  153.                 // 正しいサイズに近くなったら属性を解除する
  154.                 setTimeout(removeSize, 500);
  155.             };
  156.             $('.item_visual').on('init', slickInitial);
  157.             // リサイズ時は CLS の影響を受けないため属性を解除する
  158.             $(window).resize(removeSize);
  159.             $('.item_visual').slick({
  160.                 dots: false,
  161.                 arrows: false,
  162.                 responsive: [{
  163.                     breakpoint: 768,
  164.                     settings: {
  165.                         adaptiveHeight: true,
  166.                         dots: true,
  167.                         arrows: true,
  168.                         prevArrow: `<button type="button" class="slick-prev tes"><img src="{{ asset('assets/icon/prev.png') }}" alt="pre"></button>`,
  169.                         nextArrow: `<button type="button" class="slick-next tess"><img src="{{ asset('assets/icon/next.png') }}" alt="next"></button>`,
  170.                     }
  171.                 }]
  172.             });
  174.             $('.slideThumb').on('click', function() {
  175.                 var index = $(this).attr('data-index');
  176.                 $('.item_visual').slick('slickGoTo', index, false);
  177.             })
  178.         });
  179.     </script>
  180.     <script>
  181.         $(function() {
  182.             $('.add-cart').on('click', function(event) {
  183.                 {% if form.classcategory_id1 is defined %}
  184.                 // 規格1フォームの必須チェック
  185.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  186.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  187.                     return true;
  188.                 } else {
  189.                     $('#classcategory_id1')[0].setCustomValidity('');
  190.                 }
  191.                 {% endif %}
  193.                 {% if form.classcategory_id2 is defined %}
  194.                 // 規格2フォームの必須チェック
  195.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  196.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  197.                     return true;
  198.                 } else {
  199.                     $('#classcategory_id2')[0].setCustomValidity('');
  200.                 }
  201.                 {% endif %}
  203.                 // 個数フォームのチェック
  204.                 if ($('#quantity').val() < 1) {
  205.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  206.                     return true;
  207.                 } else {
  208.                     $('#quantity')[0].setCustomValidity('');
  209.                 }
  211.                 event.preventDefault();
  212.                 $form = $('#form1');
  213.                 $.ajax({
  214.                     url: $form.attr('action'),
  215.                     type: $form.attr('method'),
  216.                     data: $form.serialize(),
  217.                     dataType: 'json',
  218.                     beforeSend: function(xhr, settings) {
  219.                         // Buttonを無効にする
  220.                         $('.add-cart').prop('disabled', true);
  221.                     }
  222.                 }).done(function(data) {
  223.                     // レスポンス内のメッセージをalertで表示
  224.                     $.each(data.messages, function() {
  225.                         $('#ec-modal-header').text(this);
  226.                     });
  228.                     $('.ec-modal').show()
  230.                     // カートブロックを更新する
  231.                     $.ajax({
  232.                         url: "{{ url('block_cart') }}",
  233.                         type: 'GET',
  234.                         dataType: 'html'
  235.                     }).done(function(html) {
  236.                         $('.ec-headerRole__cart').html(html);
  237.                     });
  238.                 }).fail(function(data) {
  239.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  240.                 }).always(function(data) {
  241.                     // Buttonを有効にする
  242.                     $('.add-cart').prop('disabled', false);
  243.                 });
  244.             });
  245.         });
  247.         $('.ec-modal-wrap').on('click', function(e) {
  248.             // モーダル内の処理は外側にバブリングさせない
  249.             e.stopPropagation();
  250.         });
  252.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  253.             $('.ec-modal').hide()
  254.         });
  256.         $('.show_modal').on('click', function() {
  257.             const scrollTop = $(window).scrollTop() + 12;
  258.             const imgSrc = $(this).find('.image').attr('src');
  260.             $('.ec-modal-box-image img').attr('src', imgSrc);
  261.             $('.ec-modal-box-image').css('top', scrollTop + 'px').show();
  262.             $('.ec-modal-box-image-overlay').show();
  263.         });
  265.         $('.show_modal__sub_image').on('click', function() {
  266.             const scrollTop = $(window).scrollTop() + 12;
  267.             const newSrc = $(this).data('src');
  269.             $('.ec-modal-box-image img').attr('src', newSrc);
  270.             $('.ec-modal-box-image').css('top', scrollTop + 'px').show();
  271.             $('.ec-modal-box-image-overlay').show();
  272.         });
  274.         $('.icon-close').on('click', function(){
  275.             $('.ec-modal-box-image').hide();
  276.             $('.ec-modal-box-image-overlay').hide();
  277.         });
  279.         $('.ec-modal-box-image-overlay').on('click', function(){
  280.             $('.ec-modal-box-image').hide();
  281.             $(this).hide();
  282.         });
  284.         const urlToShare = encodeURIComponent(window.location.href);
  285.         $('.mixi').on("click", function (event) {
  286.             event.preventDefault();
  287.             const mixiURL = `https://mixi.jp/share.pl?u=${urlToShare}`;
  288.             window.open(mixiURL, "mixiShareWindow", "width=600, height=400, scrollbars=yes, resizable=yes");
  289.         });
  291.         $('.twitter').on("click", function (event) {
  292.             event.preventDefault();
  293.             let productName = $('#product-name').data('value');
  294.             const twitterURL = `https://twitter.com/intent/tweet?text=${productName}`;
  295.             window.open(twitterURL, "twitterShareWindow", "width=600, height=400, scrollbars=yes, resizable=yes");
  296.         });
  298.         $('.btn-action').on("click", function() {
  299.             $(this).closest('.main-item').find('.item__active').slideToggle()
  300.             if ($(this).attr("src").includes("btn_minus.png")) {
  301.                 $(this).attr("src", "{{ asset('assets/img/common/btn_plus.png') }}");
  302.             } else {
  303.                 $(this).attr("src", "{{ asset('assets/img/common/btn_minus.png') }}");
  304.             }
  305.         });
  306.     </script>
  307.     <script type="application/ld+json">
  308.     {
  309.         "@context": "https://schema.org/",
  310.         "@type": "Product",
  311.         "name": "{{ BaseInfo.shop_name ~ ' / ' ~ Product.papc3 ~ Product.name ~ Product.papc4 }}",
  312.         "image": [
  313.             {% for img in Product.ProductImage %}
  314.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  316.             {% else %}
  317.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  318.             {% endfor %}
  319.         ],
  320.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  321.         {% if Product.code_min %}
  322.         "sku": "{{ Product.code_min }}",
  323.         {% endif %}
  324.         "offers": {
  325.             "@type": "Offer",
  326.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  327.             "priceCurrency": "{{ eccube_config.currency }}",
  328.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  329.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  330.         }
  331.     }
  332.     </script>
  333. {% endblock %}
  335. {% set GroupRelatedProduct = get_group_parent_product_by_id(Product.id) %}
  336. {% block main %}
  337.     <div class="ec-productRole custom-productDetail">
  338.         {# breadcumb #}
  339.         {% if Product.ProductCategories is not empty %}
  340.             {% for ProductCategory in Product.ProductCategories %}
  341.             {% if Product.ProductCategories|length == 1 or ProductCategory.Category.path|length >= 2 %}
  342.                 <div class="ec-breadcrumb">
  343.                     <a href="{{ url('homepage') }}">Home</a>
  344.                     <span> ＞</span>
  345.                     {% for Category in ProductCategory.Category.path %}
  346.                         {% if Category.id == 1 %}
  347.                         <a href="/rock/">{{ Category.name }}</a> 
  348.                         {% else %}
  349.                         <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> 
  350.                         {% endif %}
  351.                         {%- if loop.last == false %}
  352.                             <span> ＞</span>
  353.                         {% endif -%}
  354.                     {% endfor %}
  355.                     {% if GroupRelatedProduct %}
  356.                     {% set GroupProduct = GroupRelatedProduct.Product %}
  357.                     <span> ＞</span> <a href="{{ url('product_list') }}?group_id={{ GroupProduct.id }}">{{ GroupProduct.name }}</a> 
  358.                     {% endif %}
  359.                 </div>
  360.             {% endif %}
  361.             {% endfor %}
  362.         {% else %}
  363.             <div class="ec-breadcrumb">
  364.                 <a href="{{ url('homepage') }}">Home</a>
  365.             </div>
  366.         {% endif %}
  367.         {# end breadcumb #}
  369.         <div class="guide_title bold" id="product-name" data-value="{{ Product.papc3 }} {{ Product.name }}{{ Product.papc4 }} {{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}">
  370.             {{ Product.papc3 }} {{ Product.getFirstArtist().name ?? '' }}{% if Product.getFirstArtist() is not null %}/{% endif %}{{ Product.name }}{{ Product.papc4 }}
  371.         </div>
  373.         {% if Product.papc12 %}
  374.             <div class="center mB20 banner">
  375.                 <img src="{{ Product.papc12 }}" alt="{{ Product.papc13 }}" class="maxw950" />
  376.             </div>
  377.         {% endif %}
  379.         <div class="pro-details_area1">
  380.             {{ Product.description_list|raw }}
  381.         </div>
  382.         <div class="pro-details_line"></div>
  383.         <div class="ec-grid2">
  384.             <div class="ec-grid2__cell">
  385.                 <div class="ec-sliderItemRole">
  386.                     <div class="list-image">
  387.                         {% for i in 1..10 %}
  388.                             {% set image = attribute(Product, 'sub_image' ~ i) %}
  389.                             {% set largeImage = attribute(Product, 'sub_large_image' ~ i) %}
  390.                             {% if image %}
  391.                                 <div class="image__item show_modal__sub_image" data-src="{{ asset(largeImage ?: image, 'save_image') }}">
  392.                                     <img class="image" src="{{ asset(image, 'save_image') }}" alt="Image Item" loading="lazy">
  393.                                 </div>
  394.                             {% endif %}
  395.                         {% endfor %}
  396.                     </div>
  397.                     <div class="item_visual slide-mobile">
  398.                         {% for ProductImage in Product.ProductImage %}
  399.                             <div class="slide-item show_modal">
  400.                                 <img src="{{ asset('assets/img/common/btn_item_detail.png') }}" class="icon-detail" alt="Icon Detail">
  401.                                 <img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" class="image" width="550" height="550"{% if loop.index > 1 %} loading="lazy"{% endif %}>
  402.                             </div>
  403.                         {% else %}
  404.                             <div class="slide-item show_modal">
  405.                                 <img src="{{ asset('assets/img/common/btn_item_detail.png') }}" class="icon-detail" alt="Icon Detail">
  406.                                 <img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" class="image" width="550" height="550">
  407.                             </div>
  408.                         {% endfor %}
  410.                         {% for i in 1..10 %}
  411.                             {% set image = attribute(Product, 'sub_image' ~ i) %}
  412.                             {% set largeImage = attribute(Product, 'sub_large_image' ~ i) %}
  413.                             {% if image %}
  414.                                 <div class="slide-item show_modal only-mobile">
  415.                                     <img src="{{ asset(largeImage ?: image, 'save_image') }}" alt="{{ Product.name }}" class="image" width="550" height="550" loading="lazy">
  416.                                 </div>
  417.                             {% endif %}
  418.                         {% endfor %}
  419.                     </div>
  420.                     <div class="item_visual slide-pc">
  421.                         {% for ProductImage in Product.ProductImage %}
  422.                             <div class="slide-item show_modal">
  423.                                 <img src="{{ asset('assets/img/common/btn_item_detail.png') }}" class="icon-detail" alt="Icon Detail">
  424.                                 <img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" class="image" width="550" height="550"{% if loop.index > 1 %} loading="lazy"{% endif %}>
  425.                             </div>
  426.                         {% else %}
  427.                             <div class="slide-item show_modal">
  428.                                 <img src="{{ asset('assets/img/common/btn_item_detail.png') }}" class="icon-detail" alt="Icon Detail">
  429.                                 <img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" class="image" width="550" height="550">
  430.                             </div>
  431.                         {% endfor %}
  432.                     </div>
  433.                     <!-- <div class="item_nav">
  434.                         {% for ProductImage in Product.ProductImage %}
  435.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="133" height="133" loading="lazy"></div>
  436.                         {% endfor %}
  437.                     </div> -->
  438.                 </div>
  439.             </div>
  441.             <div class="ec-grid2__cell">
  442.                 <div class="ec-productRole__profile">
  443.                     {# アーティスト #}
  444.                     {% if Product.getFirstArtist() is not null %}
  445.                         <span class="artist">
  446.                             <a href="{{ url('product_list') }}?artist_id={{Product.getFirstArtist().id}}">
  447.                             {{Product.getFirstArtist().name}}</a>
  448.                         </span>
  449.                     {% endif %}
  451.                     {# 商品名 #}
  452.                     <div class="ec-productRole__title">
  453.                         <h2 class="ec-headingTitle{% if Product.ProductStatusCusts|length <= 0 %} no-status-custs{% endif %}">{{ Product.name }}</h2>
  454.                     </div>
  455. {% set VisibleStatusItems = [] %}
  457. {% for StatusItem in Product.ProductStatusCusts %}
  458.     {% if StatusItem.Status.id != 13 %}
  459.         {% set VisibleStatusItems = VisibleStatusItems|merge([StatusItem]) %}
  460.     {% endif %}
  461. {% endfor %}
  463. {% if VisibleStatusItems|length > 0 %}
  464.     <ul class="ec-productRole__status">
  465.         {% for StatusItem in VisibleStatusItems %}
  466.             <li class="ec-productRole__status__item status_{{ StatusItem.Status.id }}">
  467.                 <span>
  468.                     {{ StatusItem.Status.name }}
  469.                 </span>
  470.             </li>
  471.         {% endfor %}
  472.     </ul>
  473. {% endif %}
  474.                     {# タグ #}
  475.                     {# <ul class="ec-productRole__tags">
  476.                         {% for Tag in Product.Tags %}
  477.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  478.                         {% endfor %}
  479.                     </ul> #}
  480.                     
  481.                     {# 商品形態 #}
  482.                     {% if Product.papc14 is not empty %}
  483.                     <div class="ec-productRole__jan">
  484.                         {{ '商品形態'|trans }} <span class="product-jan-default">{{ Product.papc14 }}</span>
  485.                     </div>
  486.                     {% endif %}
  488.                     {# 品番(商品コード) #}
  489.                     {% if Product.code_min is not empty %}
  490.                         <div class="ec-productRole__code">
  491.                             {{ '品番'|trans }} <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  492.                         </div>
  493.                     {% endif %}
  495.                     {# JANコード #}
  496.                     {% if Product.comment1 is not empty %}
  497.                     <div class="ec-productRole__jan custom-ec-productRole__jan">
  498.                         {{ 'JANコード'|trans }} <span class="product-jan-default">{{ Product.comment1 }}</span>
  499.                     </div>
  500.                     {% endif %}
  502.                     {# 通常価格 #}
  503.                     {% if Product.hasProductClass -%}
  504.                         {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  505.                             <div class="ec-productRole__priceRegular">
  506.                                 <span class="ec-productRole__priceRegularPrice"><span class="ec-productRole__price__label">{{ '通常価格'|trans }}</span><span class="price01-default product-jan-default1">{{ Product.getPrice01IncTaxMin|price|replace({' ': ''}) }}</span></span>
  507.                             </div>
  508.                         {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  509.                             <div class="ec-productRole__priceRegular">
  510.                                 <span class="ec-productRole__priceRegularPrice"><span class="ec-productRole__price__label">{{ '通常価格'|trans }}</span><span class="price01-default product-jan-default1">{{ Product.getPrice01IncTaxMin|price|replace({' ': ''}) }}～ {{ Product.getPrice01IncTaxMax|price|replace({' ': ''}) }}</span></span>
  511.                             </div>
  512.                         {% endif %}
  513.                     {% else %}
  514.                         {% if Product.getPrice01Max is not null %}
  515.                             <span class="ec-productRole__priceRegularPrice"><span class="ec-productRole__price__label">{{ '通常価格'|trans }}</span><span class="price01-default product-jan-default1">{{ Product.getPrice01IncTaxMin|price|replace({' ': ''}) }}</span></span>
  516.                             <!-- <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span> -->
  517.                         {% endif %}
  518.                     {% endif %}
  520.                     {# 販売価格 #}
  521.                     {# {% if Product.ProductClasses.first().sale_type01 %}
  522.                         <div class="ec-productRole__jan">
  523.                             {{ '通常価格'|trans }} <span class="product-jan-default1">{{ Product.getPrice02IncTaxMin|number_format(0, '.', ',') }}円</span>
  524.                         </div>
  525.                         <div class="ec-productRole__price">
  526.                             <div class="ec-productRole__price__label">
  527.                                 価格
  528.                             </div>
  529.                             {% if Product.hasProductClass -%}
  530.                                 {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  531.                                     {% set sale_price = Product.ProductClasses.first().sale_price + 0 %}
  532.                                     <div class="ec-price">
  533.                                         <span class="ec-price__price price02-default">
  534.                                             <s>{{ (sale_price * 1.1) | number_format(0, '.', ',') }}円</s>
  535.                                         </span>
  536.                                         <span class="ec-price__price price02-default tax-excluded-price1">
  537.                                             (税抜 {{ (sale_price) | number_format(0, '.', ',') }}円)
  538.                                         </span>
  539.                                     </div>
  540.                                 {% else %}
  541.                                     {% set sale_price = Product.ProductClasses.first().sale_price + 0 %}
  542.                                     <div class="ec-price">
  543.                                         <span class="ec-price__price price02-default">
  544.                                             <s>{{ (sale_price  * 1.1)}} ～ {{ (sale_price  * 1.1) | number_format(0, '.', ',') }}円</s>
  545.                                         </span>
  546.                                         <span class="ec-price__price price02-default tax-excluded-price1">
  547.                                             (税抜 {{ (sale_price)}} ～ {{ (sale_price) | number_format(0, '.', ',') }}円)
  548.                                         </span>
  549.                                     </div>
  550.                                 {% endif %}
  551.                             {% else %}
  552.                                 {% set sale_price = Product.ProductClasses.first().sale_price + 0 %}
  553.                                 <div class="ec-price">
  554.                                     <span class="ec-price__price">{{ (sale_price * 1.1) | number_format(0, '.', ',') }}円</span>
  555.                                     <span class="ec-price__price tax-excluded-price1">(税抜 {{ (sale_price) | number_format(0, '.', ',') }}円)</span>
  556.                                 </div>
  557.                             {% endif %}
  558.                         </div>
  559.                     {% else %} #}
  560.                         <div class="ec-productRole__price">
  561.                             <div class="ec-productRole__price__label">
  562.                                 価格
  563.                             </div>
  564.                             {% if Product.hasProductClass -%}
  565.                                 {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  566.                                     <div class="ec-price">
  567.                                         <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin | number_format(0, '.', ',') }}円</span>
  568.                                         <span class="ec-price__price price02-default tax-excluded-price1">(税抜 {{ Product.getPrice02Min | number_format(0, '.', ',')}}円)</span>
  569.                                     </div>
  570.                                 {% else %}
  571.                                     <div class="ec-price">
  572.                                         <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin | number_format(0, '.', ',') }} ～ {{ Product.getPrice02IncTaxMax | number_format(0, '.', ',') }}円</span>
  573.                                         <span class="ec-price__price price02-default tax-excluded-price1">(税抜 {{ Product.getPrice02Min | number_format(0, '.', ',')}} ～ {{ Product.getPrice02Max | number_format(0, '.', ',')}}円)</span>
  574.                                     </div>
  575.                                 {% endif %}
  576.                             {% else %}
  577.                                 <div class="ec-price">
  578.                                     <span class="ec-price__price">{{ Product.getPrice02IncTaxMin | number_format(0, '.', ',')}}円</span>
  579.                                     <span class="ec-price__price tax-excluded-price1">(税抜 {{ Product.getPrice02Min | number_format(0, '.', ',')}}円)</span>
  580.                                 </div>
  581.                             {% endif %}
  582.                         </div>
  583.                     {# {% endif %} #}
  585.                     {# 関連カテゴリ #}
  586.                     {# {% if Product.ProductCategories is not empty %}
  587.                         <div class="ec-productRole__category">
  588.                             <div>{{ '関連カテゴリ'|trans }}</div>
  589.                             {% for ProductCategory in Product.ProductCategories %}
  590.                                 <ul>
  591.                                     <li>
  592.                                         {% for Category in ProductCategory.Category.path %}
  593.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  594.                                             <span>＞</span>{% endif -%}
  595.                                         {% endfor %}
  596.                                     </li>
  597.                                 </ul>
  598.                             {% endfor %}
  599.                         </div>
  600.                     {% endif %} #}
  601.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  602.                         {% if Product.stock_find %}
  603.                             <div class="ec-productRole__actions">
  604.                                 {% if form.classcategory_id1 is defined %}
  605.                                     <div class="ec-select">
  606.                                         {{ form_row(form.classcategory_id1) }}
  607.                                         {{ form_errors(form.classcategory_id1) }}
  608.                                     </div>
  609.                                     {% if form.classcategory_id2 is defined %}
  610.                                         <div class="ec-select">
  611.                                             {{ form_row(form.classcategory_id2) }}
  612.                                             {{ form_errors(form.classcategory_id2) }}
  613.                                         </div>
  614.                                     {% endif %}
  615.                                 {% endif %}
  616.                                 <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
  617.                                     {{ form_widget(form.quantity) }}
  618.                                     {{ form_errors(form.quantity) }}
  619.                                 </div>
  620.                             </div>
  622.                             <a class="guide" href="{{ url('guide_order') }}">※返品について必ずご確認ください</a>
  624.                             <div class="ec-productRole__btn">
  625.                                 <button type="submit" class="ec-blockBtn--action add-cart">
  626.                                     <!-- {{ 'カートに入れる'|trans }} -->
  627.                                     <img class="cart-pc" src="{{ asset('assets/img/common/btn_go_cart.jpg') }}"  alt="Btn Cart">
  628.                                     <div class="cart-mobile">
  629.                                         <img src="{{ asset('assets/img/common/btn--cart.png') }}"  alt="Cart">
  630.                                         カートへ入れる
  631.                                     </div>
  632.                                 </button>
  633.                             </div>
  634.                         {% else %}
  635.                             <a class="guide guide-sold-old" href="{{ url('guide_order') }}">※返品について必ずご確認ください</a>
  636.                             <div class="ec-productRole__btn">
  637.                                 <button type="button" class="ec-blockBtn--action disabled-button" disabled="disabled">
  638.                                     <!-- {{ 'ただいま品切れ中です。'|trans }} -->
  639.                                     <!-- <img src="{{ asset('assets/img/common/btn_go_cart.jpg') }}"  alt="Btn Cart"> -->
  640.                                     <span class="attention-empty">SOLD OUT</span>
  641.                                     <span class="attention-empty__mobile">申し訳ございませんが、只今品切れ中です。</span>
  642.                                 </button>
  643.                             </div>
  644.                         {% endif %}
  646.                         {{ form_rest(form) }}
  647.                     </form>
  649.                     <div class="ec-modal">
  650.                         <div class="ec-modal-overlay">
  651.                             <div class="ec-modal-wrap">
  652.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  653.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  654.                                 <div class="ec-modal-box">
  655.                                     <div class="ec-role">
  656.                                         <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  657.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  658.                                     </div>
  659.                                 </div>
  660.                             </div>
  661.                         </div>
  662.                     </div>
  664.                     <!-- {% if BaseInfo.option_favorite_product %}
  665.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  666.                             <div class="ec-productRole__btn">
  667.                                 {% if is_favorite == false %}
  668.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  669.                                         {{ 'お気に入りに追加'|trans }}
  670.                                     </button>
  671.                                 {% else %}
  672.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  673.                                             disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
  674.                                     </button>
  675.                                 {% endif %}
  676.                             </div>
  677.                         </form>
  678.                     {% endif %} -->
  680.                     <div class="share_social">
  681.                         <div class="twitter">
  682.                             <img src="{{ asset('assets/img/common/twitter-b.png') }}" alt="Icon Twitter">
  683.                         </div>
  684.                         <div class="facebook">
  685.                             <img src="{{ asset('assets/img/common/like.png') }}" alt="Icon Twitter">
  686.                             <span>いいね！0</span>
  687.                         </div>
  688.                         <div class="mixi">
  689.                             <img src="{{ asset('assets/img/common/icon-mixi.png') }}" alt="Icon Twitter">
  690.                         </div>
  691.                     </div>
  692.                 </div>
  693.             </div>
  694.         </div>
  696.         {# 別形態 #}
  697.         {% set GroupProductData = get_relared_product_by_id(Product.id) %}
  698.         {% if GroupProductData is not empty or Product.getFirstArtist() is not null %}
  699.             <div class="samegroup">
  700.                 {% if GroupProductData is not empty and GroupProductData['arrRecommendData']|length > 0 %}
  701.                     <div class="left-content">
  702.                         <div class="thumb">
  703.                             <img src="{{ asset(GroupProductData['group_main_list_image'], 'save_image') }}" class="image">
  704.                         </div>
  705.                         <div class="sametext">
  706.                             <p class="title__name">『{{ Product.name|e }}』別形態</p>
  707.                             <ul class="list-data">
  708.                                 {% for productItem in GroupProductData['arrRecommendData'] %}
  709.                                     <li>
  710.                                         <a href="{{ url('product_detail', {id: productItem.id}) }}">
  711.                                             {{ productItem.papc14 ? productItem.papc14|e : productItem.name }}
  712.                                     </a>
  713.                                     </li>
  714.                                 {% endfor %}
  715.                             </ul>
  716.                         </div>
  717.                     </div>
  718.                 {% endif %}
  719.                 {# 作品一覧 #}
  720.                 {% if Product.getFirstArtist() is not null %}
  721.                     <a class="right-content" href="{{ url('product_list') }}?artist_id={{Product.getFirstArtist().id}}">
  722.                         <div class="clickartist2"><b>{{Product.getFirstArtist().name}}</b> <span><br>作品一覧</span></div>
  723.                     </a>
  724.                 {% endif %}
  725.             </div>
  726.         {% endif %}
  727.         
  728.         <article class="s_title u_mar50 topmargin">
  729.             <section>
  730.                 <div class="u_mar50">
  731.                     <h4 class="s_title_left blue">
  732.                         商品説明 
  733.                         <span class="title">
  734.                             DETAIL
  735.                         </span>
  736.                     </h4>
  737.                     <!-- <div class="s_title_right gold"></div> -->
  738.                     <img src="{{ asset('assets/img/common/cat_line.jpg') }}" class="line_cart">
  739.                 </div>
  740.                 <div class="ec-productRole__description pro-deitals_subcomment content__mobile">
  741.                     {{ Product.description_detail|raw }}
  742.                 </div>
  743.             </section>
  744.         </article>
  746.         {% set lastIndex = null %}
  747.         {% for i in 1..10 if attribute(Product, 'sub_title_' ~ i)|trim is not empty or attribute(Product, 'sub_comment' ~ i)|trim is not empty %}
  748.             {% set lastIndex = i %}
  749.         {% endfor %}
  752.         {% for i in 1..10  %}
  753.             {% if attribute(Product, 'sub_title_' ~ i)|trim is not empty or attribute(Product, 'sub_comment' ~ i)|trim is not empty %}
  754.                 <div class="main-item">
  755.                     {% if i == lastIndex %}
  756.                         <div class="title__info">
  757.                             商品情報
  758.                             <img src="{{ asset('assets/img/common/btn_minus.png') }}" class="btn-action" alt="Btn Minus">
  759.                         </div>
  760.                     {% endif %}
  761.                     <div class="ec-productRole__description pro-deitals_subcomment item__active">
  762.                         <b>{{ attribute(Product, 'sub_title_' ~ i)|raw }}</b>
  763.                         {% if attribute(Product, 'sub_title_' ~ i)|trim is not empty %}
  764.                             <br>
  765.                         {% endif %}
  766.                         {{ attribute(Product, 'sub_comment' ~ i)|raw }}
  767.                     </div>
  768.                 </div>
  769.             {% endif %}
  770.         {% endfor %}
  772.         <div class="ec-modal-box-image-overlay"></div>
  773.         <div class="ec-modal-box-image">
  774.             <div class="icon-close">
  775.                 <i class="fa-solid fa-x"></i>
  776.             </div>
  777.             <div class="image-container">
  778.                 <img src="" alt="Image Detail">
  779.             </div>
  780.         </div>
  781.     </div>
  782. {% endblock %}