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. {% if Product.id in eccube_config.noindex %}
  12.     {% do Page.setMetaRobots('noindex') %}
  13. {% endif %}
  15. {% set sidbar_out = false %}
  16. {% set sidebar_type = 0 %}
  18.     {# 商品詳細からの場合 #}
  19.     {% if Product.ProductCategories is not empty %}
  20.         {% for ProductCategory in Product.ProductCategories %}
  21.             {% for Path in ProductCategory.Category.path %}
  22.                 {% if Path.hierarchy == 1 %}
  23.                     {% if Path.name == '部品' %}
  24.                         {% set sidebar_type = 1 %}
  25.                         {% set sidbar_out = true %}
  26.                     {% endif %}
  27.                     {% if Path.name == 'カートリッジ' %}
  28.                         {% set sidebar_type = 2 %}
  29.                         {% set sidbar_out = true %}
  30.                     {% endif %}
  31.                 {% endif %}
  32.             {% endfor %}
  33.         {% endfor %}
  34.     {% endif %}
  36. {% extends 'default_frame.twig' %}
  38. {% set body_class = 'product_page' %}
  40. {% block stylesheet %}
  41.     <style>
  43.         .slick-slider {
  44.             margin-bottom: 30px;
  45.         }
  47.         .slick-dots {
  48.             position: absolute;
  49.             bottom: -45px;
  50.             display: block;
  51.             width: 100%;
  52.             padding: 0;
  53.             list-style: none;
  54.             text-align: center;
  55.         }
  57.         .slick-dots li {
  58.             position: relative;
  59.             display: inline-block;
  60.             width: 20px;
  61.             height: 20px;
  62.             margin: 0 5px;
  63.             padding: 0;
  65.             cursor: pointer;
  66.         }
  68.         .slick-dots li button {
  69.             font-size: 0;
  70.             line-height: 0;
  71.             display: block;
  72.             width: 20px;
  73.             height: 20px;
  74.             padding: 5px;
  75.             cursor: pointer;
  76.             color: transparent;
  77.             border: 0;
  78.             outline: none;
  79.             background: transparent;
  80.         }
  82.         .slick-dots li button:hover,
  83.         .slick-dots li button:focus {
  84.             outline: none;
  85.         }
  87.         .slick-dots li button:hover:before,
  88.         .slick-dots li button:focus:before {
  89.             opacity: 1;
  90.         }
  92.         .slick-dots li button:before {
  93.             content: " ";
  94.             line-height: 20px;
  95.             position: absolute;
  96.             top: 0;
  97.             left: 0;
  98.             width: 12px;
  99.             height: 12px;
  100.             text-align: center;
  101.             opacity: .25;
  102.             background-color: black;
  103.             border-radius: 50%;
  105.         }
  107.         .slick-dots li.slick-active button:before {
  108.             opacity: .75;
  109.             background-color: black;
  110.         }
  112.         .slick-dots li button.thumbnail img {
  113.             width: 0;
  114.             height: 0;
  115.         }
  116.         .ec-price{
  117.             margin-bottom: 20px !important;
  118.         }
  119.         .ec-price__price{
  120.             padding: 0 0 5px 0 !important;
  121.             border-bottom: 1px solid !important;
  122.             font-size: 22px !important;
  123.             font-weight: bold !important;
  124.         }
  125.         .ec-price__tax{
  126.             font-size: 16px !important;
  127.         }
  128.         .ec-blockBtn--action{
  129.             margin-bottom: 0;
  130.             font-weight: bold;
  131.             text-align: center;
  132.             vertical-align: middle;
  133.             touch-action: manipulation;
  134.             cursor: pointer;
  135.             background-image: none;
  136.             border: 1px solid transparent;
  137.             white-space: nowrap;
  138.             font-size: 13px !important;
  139.             border-radius: 0px;
  140.             user-select: none;
  141.             padding: 10px 16px;
  142.             text-decoration: none;
  143.             color: #fff;
  144.             display: block;
  145.             width: 100%;
  146.             height: 40px !important;
  147.             line-height: 40px !important;
  148.             padding-top: 0;
  149.             padding-bottom: 0;
  150.         }
  151.         .ec-layoutRole__mainBottom{
  152.             padding: 0 2.5% !important;
  153.         }
  154.         
  155.         .rental-disclaimer{
  156.             margin-bottom: 10px;
  157.         }
  158.         
  159.     </style>
  160. {% endblock %}
  162. {% block javascript %}
  163.     <script>
  164.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  166.         // 規格2に選択肢を割り当てる。
  167.         function fnSetClassCategories(form, classcat_id2_selected) {
  168.             var $form = $(form);
  169.             var product_id = $form.find('input[name=product_id]').val();
  170.             var $sele1 = $form.find('select[name=classcategory_id1]');
  171.             var $sele2 = $form.find('select[name=classcategory_id2]');
  172.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  173.         }
  175.         {% if form.classcategory_id2 is defined %}
  176.         fnSetClassCategories(
  177.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  178.         );
  179.         {% elseif form.classcategory_id1 is defined %}
  180.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  181.         {% endif %}
  182.     </script>
  183.     <script>
  184.         $(function() {
  185.             // bfcache無効化
  186.             $(window).bind('pageshow', function(event) {
  187.                 if (event.originalEvent.persisted) {
  188.                     location.reload(true);
  189.                 }
  190.             });
  192.             $('.item_visual').slick({
  193.                 autoplay: true,         //自動再生
  194.                 speed: 300,             //スライドするスピード
  195.                 dots: true,             //ドット
  196.                 arrows: false,          //矢印
  197.                 infinite: true,         //スライドのループ
  198.                 pauseOnHover: false,    //ホバーしたときにスライドを一時停止しない
  199.                 responsive: [{
  200.                     breakpoint: 768,
  201.                     settings: {
  202.                         dots: true
  203.                     }
  204.                 }]
  205.             });
  207.             $('.slideThumb').on('click', function() {
  208.                 var index = $(this).attr('data-index');
  209.                 $('.item_visual').slick('slickGoTo', index, false);
  210.             })
  211.         });
  212.     </script>
  213.     <script>
  214.         if ($('[name="classcategory_id1"] option').length == 2) {
  215.             {# 選択肢は実質1つであるため、不要な操作をさせない #}
  216.             $('[name="classcategory_id1"] option[value="__unselected"]').remove();
  217.         } else {
  218.             {# 規格設定の選択項目を「選択してください」→「購入方法」へ変更 #}
  219.             $('[name="classcategory_id1"] option[value="__unselected"]').text("購入方法");
  220.         }
  221.         
  222.         $(function() {
  223.             $('#Product_contact').on('click', function() {
  224.                 window.location.href = '{{ eccube_config.multipure_contact }}';
  225.             });
  226.             $('#Product_rental').on('click', function() {
  227.                 let href = '{{ eccube_config.multipure_lp_rental }}';
  228.                 window.open(href, "_blank");
  229.             });
  230.             $('#Product_rental_contact').on('click', function() {
  231.                 window.location.href = '{{ eccube_config.multipure_contact_lp_rental }}';
  232.             });
  233.             $('#Product_rental_entry').on('click', function() {
  234.                 window.location.href = '{{ url('rental_entry', {id: Product.id}) }}';
  235.             });
  236.         {% for RelatedProduct in Product.RelatedProducts %}
  237.             {% set ChildProduct = RelatedProduct.ChildProduct %}
  238.             {% if ChildProduct.Status.id == constant("Eccube\\Entity\\Master\\ProductStatus::DISPLAY_SHOW") %}
  239.                 $('#Product_cartridge').on('click', function() {
  240.                     window.location.href = '{{ url('product_detail', {id : ChildProduct.id}) }}';
  241.                 });
  242.             {% endif %}
  243.         {% endfor %}
  245.             $('.add-cart').on('click', function(event) {
  246.                 {% if form.classcategory_id1 is defined %}
  247.                 // 規格1フォームの必須チェック
  248.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  249.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  250.                     return true;
  251.                 } else {
  252.                     $('#classcategory_id1')[0].setCustomValidity('');
  253.                 }
  254.                 {% endif %}
  256.                 {% if form.classcategory_id2 is defined %}
  257.                 // 規格2フォームの必須チェック
  258.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  259.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  260.                     return true;
  261.                 } else {
  262.                     $('#classcategory_id2')[0].setCustomValidity('');
  263.                 }
  264.                 {% endif %}
  266.                 // 個数フォームのチェック
  267.                 if ($('#quantity').val() < 1) {
  268.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  269.                     return true;
  270.                 } else {
  271.                     $('#quantity')[0].setCustomValidity('');
  272.                 }
  274.                 event.preventDefault();
  275.                 $form = $('#form1');
  276.                 $.ajax({
  277.                     url: $form.attr('action'),
  278.                     type: $form.attr('method'),
  279.                     data: $form.serialize(),
  280.                     dataType: 'json',
  281.                     beforeSend: function(xhr, settings) {
  282.                         // Buttonを無効にする
  283.                         $('.add-cart').prop('disabled', true);
  284.                     }
  285.                 }).done(function(data) {
  286.                     // レスポンス内のメッセージをalertで表示
  287.                     $.each(data.messages, function() {
  288.                         $('#ec-modal-header').html(this);
  289.                     });
  291.                     $('.ec-modal').show()
  293.                     // カートブロックを更新する
  294.                     $.ajax({
  295.                         url: "{{ url('block_cart') }}",
  296.                         type: 'GET',
  297.                         dataType: 'html'
  298.                     }).done(function(html) {
  299.                         $('.ec-headerRole__cart').html(html);
  300.                         
  301.                         // カートブロックが更新された場合、イベントが無効になるため再設定
  302.                         $('.ec-cartNavi').click(function() {
  303.                             window.location.href = '{{ url('cart') }}';
  304.                         });
  305.                     });
  306.                 }).fail(function(data) {
  307.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  308.                 }).always(function(data) {
  309.                     // Buttonを有効にする
  310.                     $('.add-cart').prop('disabled', false);
  311.                 });
  312.             });
  313.         });
  315.         $('.ec-modal-wrap').on('click', function(e) {
  316.             // モーダル内の処理は外側にバブリングさせない
  317.             e.stopPropagation();
  318.         });
  319.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  320.             $('.ec-modal').hide()
  321.         });
  322.     </script>
  323.     <script type="application/ld+json">
  324.     {
  325.         "@context": "https://schema.org/",
  326.         "@type": "Product",
  327.         "name": "{{ Product.name }}",
  328.         "image": [
  329.             {% for img in Product.ProductImage %}
  330.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  332.             {% else %}
  333.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  334.             {% endfor %}
  335.         ],
  336.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  337.         {% if Product.code_min %}
  338.         "sku": "{{ Product.code_min }}",
  339.         {% endif %}
  340.         "offers": {
  341.             "@type": "Offer",
  342.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  343.             "priceCurrency": "{{ eccube_config.currency }}",
  344.             "price": {{ Product.getPrice02IncTaxMin }},
  345.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  346.         }
  347.     }
  348.     </script>
  351. {# ここからは、カスタマイズ部分 #}
  352. <script>
  353. {# 規格選択イベントの上書き #}
  354. (function(window, undefined) {
  356.     // 名前空間の重複を防ぐ
  357.     if (window.eccube === undefined) {
  358.         window.eccube = {};
  359.     }
  361.     var eccube = window.eccube;
  363.     // グローバルに使用できるようにする
  364.     window.eccube = eccube;
  366.     /**
  367.      * 規格2のプルダウンを設定する.
  368.      */
  369.     eccube.setClassCategories = function($form, product_id, $sele1, $sele2, selected_id2) {
  370.         if ($sele1 && $sele1.length) {
  371.             var classcat_id1 = $sele1.val() ? $sele1.val() : '';
  372.             if ($sele2 && $sele2.length) {
  373.                 // 規格2の選択肢をクリア
  374.                 $sele2.children().remove();
  376.                 var classcat2;
  378.                 if (eccube.hasOwnProperty('productsClassCategories')) {
  379.                     // 商品一覧時
  380.                     classcat2 = eccube.productsClassCategories[product_id][classcat_id1];
  381.                 } else {
  382.                     // 詳細表示時
  383.                     classcat2 = eccube.classCategories[classcat_id1];
  384.                 }
  386.                 // 規格2の要素を設定
  387.                 for (var key in classcat2) {
  388.                     if (classcat2.hasOwnProperty(key)) {
  389.                         var id = classcat2[key].classcategory_id2;
  390.                         var name = classcat2[key].name;
  391.                         var option = $('<option />').val(id ? id : '').text(name);
  392.                         if (id === selected_id2) {
  393.                             option.attr('selected', true);
  394.                         }
  395.                         $sele2.append(option);
  396.                     }
  397.                 }
  398.                 eccube.checkStock($form, product_id, $sele1.val() ? $sele1.val() : '__unselected2',
  399.                     $sele2.val() ? $sele2.val() : '');
  400.             }
  401.         }
  402.     };
  404.     /**
  405.      * 規格の選択状態に応じて, フィールドを設定する.
  406.      */
  407.     // 税抜価格を格納
  408.     var price02_origin = [];
  409.     // 税込価格を格納
  410.     var price02Tax_origin = [];
  411.     eccube.checkStock = function($form, product_id, classcat_id1, classcat_id2) {
  413.         classcat_id2 = classcat_id2 ? classcat_id2 : '';
  415.         var classcat2;
  417.         if (eccube.hasOwnProperty('productsClassCategories')) {
  418.             // 商品一覧時
  419.             classcat2 = eccube.productsClassCategories[product_id][classcat_id1]['#' + classcat_id2];
  420.         } else {
  421.             // 詳細表示時
  422.             if (typeof eccube.classCategories[classcat_id1] !== 'undefined') {
  423.                 classcat2 = eccube.classCategories[classcat_id1]['#' + classcat_id2];
  424.             }
  425.         }
  427.         if (typeof classcat2 === 'undefined') {
  428.             // 商品コード
  429.             var $product_code = $('.product-code-default');
  430.             if (typeof this.product_code_origin === 'undefined') {
  431.                 // 初期値を保持しておく
  432.                 this.product_code_origin = $product_code.text();
  433.             }
  434.             $product_code.text(this.product_code_origin);
  436.             // 在庫(品切れ)
  437.             var $cartbtn = $form.parent().find('.add-cart').first();
  438.             if (typeof this.product_cart_origin === 'undefined') {
  439.                 // 初期値を保持しておく
  440.                 this.product_cart_origin = $cartbtn.text();
  441.             }
  442.             $cartbtn.prop('disabled', false);
  443.             $cartbtn.text(this.product_cart_origin);
  445.             // 通常価格
  446.             var $price01 = $form.parent().find('.price01-default-Custom').first();
  447.             if (typeof this.price01_origin === 'undefined') {
  448.                 // 初期値を保持しておく
  449.                 this.price01_origin = $price01.text();
  450.             }
  451.             $price01.text(this.price01_origin);
  453.             // 販売価格
  454.             var $price02 = $form.parent().find('.price02-default-Custom').first();
  455.             if (typeof price02_origin[product_id] === 'undefined') {
  456.                 // 初期値を保持しておく
  457.                 price02_origin[product_id] = $price02.text();
  458.             }
  459.             $price02.text(price02_origin[product_id]);
  460.             {# オートシップメント価格項目の表示 #}
  461.             var $price02_sub = $form.parent().find('.price02-default-Custom-sub').first();
  462.             $price02_sub.show();
  464.             // 通常価格（税込）
  465.             var $price01 = $form.parent().find('.price01Tax-default-Custom').first();
  466.             if (typeof this.price01Tax_origin === 'undefined') {
  467.                 // 初期値を保持しておく
  468.                 this.price01Tax_origin = $price01.text();
  469.             }
  470.             $price01.text(this.price01Tax_origin);
  472.             // 販売価格（税込）
  473.             var $price02 = $form.parent().find('.price02Tax-default-Custom').first();
  474.             if (typeof price02Tax_origin[product_id] === 'undefined') {
  475.                 // 初期値を保持しておく
  476.                 price02Tax_origin[product_id] = $price02.text();
  477.             }
  478.             $price02.text(price02Tax_origin[product_id]);
  481.             // 商品規格
  482.             var $product_class_id_dynamic = $form.find('[id^=ProductClass]');
  483.             $product_class_id_dynamic.val('');
  485.         } else {
  486.             // 商品コード
  487.             var $product_code = $('.product-code-default');
  488.             if (classcat2 && typeof classcat2.product_code !== 'undefined') {
  489.                 $product_code.text(classcat2.product_code);
  490.             } else {
  491.                 $product_code.text(this.product_code_origin);
  492.             }
  494.             // 在庫(品切れ)
  495.             var $cartbtn = $form.parent().find('.add-cart').first();
  496.             if (typeof this.product_cart_origin === 'undefined') {
  497.                 // 初期値を保持しておく
  498.                 this.product_cart_origin = $cartbtn.text();
  499.             }
  500.             if (classcat2 && classcat2.stock_find === false) {
  501.                 $cartbtn.prop('disabled', true);
  502.                 $cartbtn.text('ただいま品切れ中です');
  503.             } else {
  504.                 $cartbtn.prop('disabled', false);
  505.                 $cartbtn.text(this.product_cart_origin);
  506.             }
  508.             // 通常価格
  509.             var $price01 = $form.parent().find('.price01-default-Custom').first();
  510.             if (typeof this.price01_origin === 'undefined') {
  511.                 // 初期値を保持しておく
  512.                 this.price01_origin = $price01.text();
  513.             }
  514.             if (classcat2 && typeof classcat2.price01 !== 'undefined' && String(classcat2.price01).length >= 1) {
  515.                 $price01.text('￥' + classcat2.price01);
  516.             } else {
  517.                 $price01.text(this.price01_origin);
  518.             }
  520.             // 販売価格
  521.             var $price02 = $form.parent().find('.price02-default-Custom').first();
  522.             if (typeof price02_origin[product_id] === 'undefined') {
  523.                 // 初期値を保持しておく
  524.                 price02_origin[product_id] = $price02.text();
  525.             }
  526.             if (classcat2 && typeof classcat2.price02 !== 'undefined' && String(classcat2.price02).length >= 1) {
  527.                 {# $price02.text('￥' + classcat2.price02); #}
  528.                 $price02.text(classcat2.price02);
  529.                 {# オートシップメント価格項目の非表示 #}
  530.                 var $price02_sub = $form.parent().find('.price02-default-Custom-sub').first();
  531.                 $price02_sub.hide();
  532.             } else {
  533.                 $price02.text(price02_origin[product_id]);
  534.             }
  536.             // 通常価格（税込）
  537.             var $price01 = $form.parent().find('.price01Tax-default-Custom').first();
  538.             if (typeof this.price01Tax_origin === 'undefined') {
  539.                 // 初期値を保持しておく
  540.                 this.price01Tax_origin = $price01.text();
  541.             }
  542.             if (classcat2 && typeof classcat2.price01 !== 'undefined' && String(classcat2.price01).length >= 1) {
  543.                 $price01.text('￥' + classcat2.price01_inc_tax);
  544.             } else {
  545.                 $price01.text(this.price01Tax_origin);
  546.             }
  548.             // 販売価格（税込）
  549.             var $price02 = $form.parent().find('.price02Tax-default-Custom').first();
  550.             if (typeof price02Tax_origin[product_id] === 'undefined') {
  551.                 // 初期値を保持しておく
  552.                 price02Tax_origin[product_id] = $price02.text();
  553.             }
  554.             if (classcat2 && typeof classcat2.price02 !== 'undefined' && String(classcat2.price02).length >= 1) {
  555.                 {# $price02.text('￥' + classcat2.price02_inc_tax); #}
  556.                 $price02.text(classcat2.price02_inc_tax);
  557.             } else {
  558.                 $price02.text(price02Tax_origin[product_id]);
  559.             }
  561.             // ポイント
  562.             var $point_default = $form.find('[id^=point_default]');
  563.             var $point_dynamic = $form.find('[id^=point_dynamic]');
  564.             if (classcat2 && typeof classcat2.point !== 'undefined' && String(classcat2.point).length >= 1) {
  566.                 $point_dynamic.text(classcat2.point).show();
  567.                 $point_default.hide();
  568.             } else {
  569.                 $point_dynamic.hide();
  570.                 $point_default.show();
  571.             }
  573.             // 商品規格
  574.             var $product_class_id_dynamic = $form.find('[id^=ProductClass]');
  575.             if (classcat2 && typeof classcat2.product_class_id !== 'undefined' && String(classcat2.product_class_id).length >= 1) {
  576.                 $product_class_id_dynamic.val(classcat2.product_class_id);
  577.             } else {
  578.                 $product_class_id_dynamic.val('');
  579.             }
  580.         }
  581.     };
  584.     /**
  585.      * Initialize.
  586.      */
  587.     $(function() {
  588.         // 規格1選択時
  589.         $('select[name=classcategory_id1]')
  590.             .change(function() {
  591.                 var $form = $(this).parents('form');
  592.                 var product_id = $form.find('input[name=product_id]').val();
  593.                 var $sele1 = $(this);
  594.                 var $sele2 = $form.find('select[name=classcategory_id2]');
  596.                 // 規格1のみの場合
  597.                 if (!$sele2.length) {
  598.                     eccube.checkStock($form, product_id, $sele1.val(), null);
  599.                     // 規格2ありの場合
  600.                 } else {
  601.                     eccube.setClassCategories($form, product_id, $sele1, $sele2);
  602.                 }
  603.             });
  605.         // 規格2選択時
  606.         $('select[name=classcategory_id2]')
  607.             .change(function() {
  608.                 var $form = $(this).parents('form');
  609.                 var product_id = $form.find('input[name=product_id]').val();
  610.                 var $sele1 = $form.find('select[name=classcategory_id1]');
  611.                 var $sele2 = $(this);
  612.                 eccube.checkStock($form, product_id, $sele1.val(), $sele2.val());
  613.             });
  614.     });
  615. })(window);
  618. </script>
  619. {% endblock %}
  622. {% block main %}
  623.     <div class="ec-productRole">
  624.         <div class="ec-grid2" style="margin-bottom: 50px;">
  625.             <div class="ec-grid2__cell">
  626.                 <div class="ec-sliderItemRole">
  628.                     <div class="item_visual">
  629.                         {% for ProductImage in Product.ProductImage %}
  630.                             <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}"></div>
  631.                         {% else %}
  632.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" /></div>
  633.                         {% endfor %}
  634.                     </div>
  635.                     {# <div class="item_nav">#}
  636.                         {#{% for ProductImage in Product.ProductImage %}#}
  637.                             {#<div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt=""></div>#}
  638.                         {#{% endfor %}#}
  639.                     {#</div>#}
  640.                 </div>
  641.             </div>
  642.             <div class="ec-grid2__cell">
  643.                 <div class="ec-productRole__profile">
  644. {# 部品の場合 #}
  645. {% if sidebar_type == 1 %}
  646.                     {% if Product.code_min is not empty %}
  647.                         <p style="font-size: 12px;">型番<br /></p>
  648.                         <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  649.                     {% endif %}
  650. {% endif %}    
  651.                     {# 商品説明 #}
  652.                     <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  653.                     </div>
  654.                     {# 通常価格 #}
  655.                     {% if Product.hasProductClass -%}
  656.                         <div class="ec-productRole__priceRegular">
  657.                             {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  658.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  659.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  660.                             {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  661.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}～ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  662.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  663.                             {% endif %}
  664.                         </div>
  665.                     {% else %}
  666.                         {% if Product.getPrice01Max is not null %}
  667.                             <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：{{ Product.getPrice01IncTaxMin|price }}</span>
  668.                             <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  669.                         {% endif %}
  670.                     {% endif %}
  671.                     {% if customSaleTypeRental %}
  672.                     レンタル月額
  673.                     {% endif %}
  674.                     
  675.                     {# 販売価格 #}
  676.                     <div class="ec-productRole__price">
  677.                         {% if Product.hasProductClass -%}
  678.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  679.                                 <div class="ec-price">
  680.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  681.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  682.                                 </div>
  683.                             {% else %}
  684.                                 <div class="ec-price">
  685.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  686.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  687.                                     {# オートシップメント価格項目の非表示 #}
  688.                                     <span class="price02-default-Custom-sub" style="font-size: 12px;"><br />（オートシップメント契約価格{{ Product.getPrice02IncTaxMin|number_format }}円税込）</span>
  689.                                 </div>
  690.                             {% endif %}
  692.                         {% else %}
  693.                             <div class="ec-price">
  694.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  695.                                 <span class="ec-price__tax">{{ '税込'|trans }}</span>
  696.                             </div>
  697.                         {% endif %}
  698.                         {% if not customSaleTypeRental %}
  699.                         <p style="font-size: 12px;">※ 分割払いに対応しております（金利手数料無料）<br /></p>
  700.                         {% endif %}
  701.                     </div>
  702.                     
  703. {# カートリッジ/部品の場合 #}
  704. {% if sidebar_type == 2 or sidebar_type == 1 %}
  705.                         <br /><p style="font-size: 12px;">対応機種<br /></p>
  706. {% endif %}                    
  707.                     {# タグ #}
  708.                     <ul class="ec-productRole__tags">
  709.                         {% for Tag in Product.Tags %}
  710.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  711.                         {% endfor %}
  712.                     </ul>
  713.                     {# タグ #}
  714.                     {#<div>#}
  715.                     {#    <p>対応機種</p>#}
  716.      {#                   {% for Tag in Product.Tags %}#}
  717.      {#                       <p class="btn_txt tag_{{ Tag.id }}">{{ Tag }}</p>#}
  718.      {#                   {% endfor %}#}
  719.                     {#</div>#}
  720.                     
  722.                     {# カート #}
  723.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  724.                         {% if Product.stock_find %}
  725.                             <div class="ec-productRole__actions">
  726.                                 {% if form.classcategory_id1 is defined %}
  727.                                     <div class="ec-select">
  728.                                         {{ form_widget(form.classcategory_id1) }}
  729.                                         {{ form_errors(form.classcategory_id1) }}
  730.                                     </div>
  731.                                     {% if form.classcategory_id2 is defined %}
  732.                                         <div class="ec-select">
  733.                                             {{ form_widget(form.classcategory_id2) }}
  734.                                             {{ form_errors(form.classcategory_id2) }}
  735.                                         </div>
  736.                                     {% endif %}
  737.                                 {% endif %}
  738.                                 <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
  739.                                 {% if customSaleTypeRental %}
  740.                                     {{ form_widget(form.quantity, {attr: { disabled: 'disabled'}}) }}
  741.                                 {% else %}
  742.                                     {{ form_widget(form.quantity) }}
  743.                                     {{ form_errors(form.quantity) }}
  744.                                 {% endif %}
  745.                                 </div>
  746.                             </div>
  747.                             {% if customSaleTypeRental %}
  748.                             <div class="ec-productRole__btn">
  749.                                 <div class="ec-blockBtn--action" id="Product_rental">
  750.                                     {{ 'レンタルについて詳細・お申込み'|trans }}
  751.                                 </div>
  752.                             </div>
  753.                             <div class="rental-disclaimer">
  754.                                 <p>お申込み時は会員登録が必要です</p>
  755.                             </div>
  756.                             {% else %}
  757.                             <div class="ec-productRole__btn">
  758.                                 <button type="submit" class="ec-blockBtn--action add-cart">
  759.                                     {{ 'カートに入れる'|trans }}
  760.                                 </button>
  761.                             </div>
  762.                             {% endif %}
  763.                         {% else %}
  764.                             {#<div class="ec-productRole__btn">#}
  765.                             {#    <button type="button" class="ec-blockBtn--action" disabled="disabled">#}
  766.                             {#        {{ 'ただいま品切れ中です。'|trans }}#}
  767.                             {#    </button>#}
  768.                             {#</div>#}
  769.                         {% endif %}
  771.                         {{ form_rest(form) }}
  772.                     </form>
  773.                     <div class="ec-modal">
  774.                         <div class="ec-modal-overlay">
  775.                             <div class="ec-modal-wrap">
  776.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  777.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  778.                                 <div class="ec-modal-box">
  779.                                     <div class="ec-role">
  780.                                         <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  781.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action" style="color:#fff;">{{ 'カートへ進む'|trans }}</a>
  782.                                     </div>
  783.                                 </div>
  784.                             </div>
  785.                         </div>
  786.                     </div>
  787.                     {% if BaseInfo.option_favorite_product %}
  788.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  789.                             <div class="ec-productRole__btn">
  790.                                 {% if is_favorite == false %}
  791.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  792.                                         {{ 'お気に入りに追加'|trans }}
  793.                                     </button>
  794.                                 {% else %}
  795.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  796.                                             disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
  797.                                     </button>
  798.                                 {% endif %}
  799.                             </div>
  800.                         </form>
  801.                     {% endif %}
  802.                         <div class="ec-productRole__btn">
  803.                             {% if customSaleTypeRental %}
  804.                             <div class="ec-blockBtn--action" id="Product_rental_contact">
  805.                                 {{ '資料請求・お問い合わせ'|trans }}
  806.                             </div>
  807.                             {% else %}
  808.                             <div class="ec-blockBtn--action" id="Product_contact">
  809.                                 {{ '資料請求・お問い合わせ'|trans }}
  810.                             </div>
  811.                             {% endif %}
  812.                         </div>
  813.                         
  814.         {# 関連商品プラグインの設定情報を確認し、設定されていれば、「対応カートリッジを見る」ボタンを表示する #}
  815.         {# ※ただし、「関連商品設定」プラグインが無効の場合はエラーが発生します。 #}
  816.         {% for RelatedProduct in Product.RelatedProducts %}
  817.             {% set ChildProduct = RelatedProduct.ChildProduct %}
  818.             {% if ChildProduct.Status.id == constant("Eccube\\Entity\\Master\\ProductStatus::DISPLAY_SHOW") %}
  819.                         <div class="ec-productRole__btn">
  820.                             <div class="ec-blockBtn--action" id="Product_cartridge">
  821.                                 {{ '対応カートリッジを見る'|trans }}
  822.                             </div>
  823.                         </div>
  824.             {% endif %}
  825.         {% endfor %}
  826.                 </div>
  827.             </div>
  828.         </div>
  829.         {% if Product.freearea %}
  830.              <div class="ec-productRole__description">
  831.                  {{ include(template_from_string(Product.freearea)) }}
  832.             </div>
  833.         {% endif %}
  834.     </div>
  835. {% endblock %}