app/template/default/Product/detail.twig line 720

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.             margin-top: -20px;
  21.         }
  23.         .slick-dots {
  24.             position: absolute;
  25.             bottom: -45px;
  26.             display: block;
  27.             width: 100%;
  28.             padding: 0;
  29.             list-style: none;
  30.             text-align: center;
  31.         }
  33.         .slick-dots li {
  34.             position: relative;
  35.             display: inline-block;
  36.             width: 20px;
  37.             height: 20px;
  38.             margin: 0 5px;
  39.             padding: 0;
  41.             cursor: pointer;
  42.         }
  44.         .slick-dots li button {
  45.             font-size: 0;
  46.             line-height: 0;
  47.             display: block;
  48.             width: 20px;
  49.             height: 20px;
  50.             padding: 5px;
  51.             cursor: pointer;
  52.             color: transparent;
  53.             border: 0;
  54.             outline: none;
  55.             background: transparent;
  56.         }
  58.         .slick-dots li button:hover,
  59.         .slick-dots li button:focus {
  60.             outline: none;
  61.         }
  63.         .slick-dots li button:hover:before,
  64.         .slick-dots li button:focus:before {
  65.             opacity: 1;
  66.         }
  68.         .slick-dots li button:before {
  69.             content: " ";
  70.             line-height: 20px;
  71.             position: absolute;
  72.             top: 0;
  73.             left: 0;
  74.             width: 12px;
  75.             height: 12px;
  76.             text-align: center;
  77.             opacity: .25;
  78.             background-color: black;
  79.             border-radius: 50%;
  81.         }
  83.         .slick-dots li.slick-active button:before {
  84.             opacity: .75;
  85.             background-color: black;
  86.         }
  88.         .slick-dots li button.thumbnail img {
  89.             width: 0;
  90.             height: 0;
  91.         }
  93.     </style>
  94.     <link rel="stylesheet" href="/html/user_data/js/style.css">
  95.     <link rel="stylesheet" href="/html/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  96. {% endblock %}
  98. {% block javascript %}
  100.     <script>
  101.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  103.         // 規格2に選択肢を割り当てる。
  104.         function fnSetClassCategories(form, classcat_id2_selected) {
  105.             var $form = $(form);
  106.             var product_id = $form.find('input[name=product_id]').val();
  107.             var $sele1 = $form.find('select[name=classcategory_id1]');
  108.             var $sele2 = $form.find('select[name=classcategory_id2]');
  109.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  110.         }
  112.         {% if form.classcategory_id2 is defined %}
  113.         fnSetClassCategories(
  114.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  115.         );
  116.         {% elseif form.classcategory_id1 is defined %}
  117.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  118.         {% endif %}
  119.     </script>
  120.     <script>
  121.         $(function() {
  122.             // bfcache無効化
  123.             $(window).bind('pageshow', function(event) {
  124.                 if (event.originalEvent.persisted) {
  125.                     location.reload(true);
  126.                 }
  127.             });
  129.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  130.             // img タグに width, height が付与されている.
  131.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  132.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  133.             $('.ec-grid2__cell').hide();
  134.             var removeSize = function () {
  135.                 $('.slide-item').height('');
  136.                 $('.slide-item img')
  137.                     .removeAttr('width')
  138.                     .removeAttr('height')
  139.                     .removeAttr('style');
  141.             };
  142.             var slickInitial = function(slick) {
  143.                 $('.ec-grid2__cell').fadeIn(1500);
  144.                 var baseHeight = $(slick.target).height();
  145.                 var baseWidth = $(slick.target).width();
  146.                 var rate = baseWidth / baseHeight;
  147.                 if(baseHeight * rate < 400){
  148.                     $('.slide-item').height(baseHeight * rate); // 余白を削除する
  149.                 }else{
  150.                     $('.slide-item').height(400); // 余白を削除する
  151.                 }
  152.                 // transform を使用することでCLSの影響を受けないようにする
  153.                 $('.slide-item img')
  154.                     .css(
  155.                         {
  156.                             'transform-origin': 'top left',
  157.                             'transform': 'scaleY(' + rate + ')',
  158.                             'transition': 'transform .1s'
  159.                         }
  160.                     );
  161.                 // 正しいサイズに近くなったら属性を解除する
  162.                 setTimeout(removeSize, 500);
  163.             };
  164.             $('.item_visual').on('init', slickInitial);
  165.             // リサイズ時は CLS の影響を受けないため属性を解除する
  166.             $(window).resize(removeSize);
  167.             $('.item_visual').slick({
  168.                 dots: false,
  169.                 arrows: true,
  170.                 responsive: [{
  171.                     breakpoint: 768,
  172.                     settings: {
  173.                         dots: true,
  174.                         arrows: false
  175.                     }
  176.                 }]
  177.             });
  179.             $('.slideThumb').on('click', function() {
  180.                 var index = $(this).attr('data-index');
  181.                 $('.item_visual').slick('slickGoTo', index, false);
  182.             })
  183.         });
  185.     </script>
  186.     <script>
  187.         $(function() {
  188.             $('.add-cart').on('click', function(event) {
  189.                 {% if form.classcategory_id1 is defined %}
  190.                 // 規格1フォームの必須チェック
  191.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  192.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  193.                     return true;
  194.                 } else {
  195.                     $('#classcategory_id1')[0].setCustomValidity('');
  196.                 }
  197.                 {% endif %}
  199.                 {% if form.classcategory_id2 is defined %}
  200.                 // 規格2フォームの必須チェック
  201.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  202.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  203.                     return true;
  204.                 } else {
  205.                     $('#classcategory_id2')[0].setCustomValidity('');
  206.                 }
  207.                 {% endif %}
  209.                 // 個数フォームのチェック
  210.                 if ($('#quantity').val() < 1) {
  211.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  212.                     return true;
  213.                 } else {
  214.                     $('#quantity')[0].setCustomValidity('');
  215.                 }
  217.                 event.preventDefault();
  218.                 $form = $('#form1');
  219.                 $.ajax({
  220.                     url: $form.attr('action'),
  221.                     type: $form.attr('method'),
  222.                     data: $form.serialize(),
  223.                     dataType: 'json',
  224.                     beforeSend: function(xhr, settings) {
  225.                         // Buttonを無効にする
  226.                         $('.add-cart').prop('disabled', true);
  227.                     }
  228.                 }).done(function(data) {
  229.                     // レスポンス内のメッセージをalertで表示
  230.                     $.each(data.messages, function() {
  231.                         $('#ec-modal-header').text(this);
  232.                     });
  234.                     $('.ec-modal').show()
  236.                     // カートブロックを更新する
  237.                     $.ajax({
  238.                         url: "{{ url('block_cart') }}",
  239.                         type: 'GET',
  240.                         dataType: 'html'
  241.                     }).done(function(html) {
  242.                         $('.ec-headerRole__cart').html(html);
  243.                     });
  244.                 }).fail(function(data) {
  245.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  246.                 }).always(function(data) {
  247.                     // Buttonを有効にする
  248.                     $('.add-cart').prop('disabled', false);
  249.                 });
  250.             });
  251.         });
  253.         $('.ec-modal-wrap').on('click', function(e) {
  254.             // モーダル内の処理は外側にバブリングさせない
  255.             e.stopPropagation();
  256.         });
  257.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  258.             $('.ec-modal').hide()
  259.         });
  262.         var pw = "";
  263.         var pd = "";
  264.         var ph = "";
  265.         var pm = "";
  266.         var pc = "";
  267.         var op0 = "";
  268.         var op1 = "";
  269.         var op2 = "";
  270.         var op3 = "";
  271.         var op4 = "";
  272.         var op5 = "";
  273.         var op6 = "";
  274.         var op7 = "";
  275.         var op8 = "";
  276.         var op9 = "";
  277.         var op10 = "";
  279.         const formatter = new Intl.NumberFormat('ja-JP');
  281.         function mitsumori_simulation(type , value_id){
  282.             var pp = {{ pp|raw }};
  283.             if(type == "pw"){
  284.                 pw = $('#'+value_id).val();
  285.             }
  286.             if(type == "pd"){
  287.                 pd = $('#'+value_id).val();
  288.             }
  289.             if(type == "ph"){
  290.                 ph = $('#'+value_id).val();
  291.             }
  292.             if(type == "pm"){
  293.                 pm = $('#'+value_id).val();
  294.             }
  295.             if(type == "pc"){
  296.                 pc = $('#'+value_id).val();
  297.             }
  298.             if(type == "op0"){ op0 = $('#'+value_id).val(); }
  299.             if(type == "op1"){ op1 = $('#'+value_id).val(); }
  300.             if(type == "op2"){ op2 = $('#'+value_id).val(); }
  301.             if(type == "op3"){ op3 = $('#'+value_id).val(); }
  302.             if(type == "op4"){ op4 = $('#'+value_id).val(); }
  303.             if(type == "op5"){ op5 = $('#'+value_id).val(); }
  304.             if(type == "op6"){ op6 = $('#'+value_id).val(); }
  305.             if(type == "op7"){ op7 = $('#'+value_id).val(); }
  306.             if(type == "op8"){ op8 = $('#'+value_id).val(); }
  307.             if(type == "op9"){ op9 = $('#'+value_id).val(); }
  308.             if(type == "op10"){ op10 = $('#'+value_id).val(); }
  310.             if(pm == ""){
  311.                 $('#mitsumori_message').text("素材を選択してください");
  312.             }
  313.             if(ph == ""){
  314.                 $('#mitsumori_message').text("高さを選択してください");
  315.             }
  316.             if(pd == ""){
  317.                 $('#mitsumori_message').text("奥行きを選択してください");
  318.             }
  319.             if(pw == ""){
  320.                 $('#mitsumori_message').text("幅を選択してください");
  321.             }
  322.             if(pc == ""){
  323.                 $('#mitsumori_message').text("カラーを選択してください");
  324.                 $('#mitsumori_btn').hide();
  325.                 $('#mitsumori_goukei').text("---円");
  326.                 $('#mitsumori_off').text("---円");
  327.                 $('#mitsumori_price').text("---円");
  328.                 $('#maker_price').text("---円");
  329.                 $('#mitsumori_ct').text("---円");
  330.                 $('#mitsumori_option').text("---円");
  331.             }
  332.             if(pw != "" && pd != "" && ph != "" && pm != "" && pc != ""){
  333.                 $('#mitsumori_btn').show();
  334.                 
  335.                 pp.forEach((el) => {
  336.                   if(pw == el.w && pd == el.d && ph == el.h && pm == el.m && pc == el.c){
  338.                     if(op0 == "商品購入のみ" || op1 == "商品購入のみ" || op2 == "商品購入のみ" || op3 == "商品購入のみ" || op4 == "商品購入のみ" 
  339.                         || op5 == "商品購入のみ" || op6 == "商品購入のみ" || op7 == "商品購入のみ" || op8 == "商品購入のみ" || op9 == "商品購入のみ"){
  340.                           $('#mitsumori_message').text(formatter.format(parseInt(el.price)) + "円");
  341.                           $('#mitsumori_goukei').text(formatter.format(parseInt(el.price)) + "円");
  342.                           $('#mitsumori_off').text(formatter.format(parseInt(el.price) - parseInt(el.maker_price)) + "円");
  343.                           $('#mitsumori_price').text(formatter.format(parseInt(el.price)) + "円");
  344.                           $('#maker_price').text(formatter.format(parseInt(el.maker_price)) + "円");
  345.                           $('#mitsumori_ct').text("0円");
  346.                           $('#mitsumori_option').text("0円");
  348.                           $('#mitsumori_kei').text(formatter.format(parseInt(el.price)) + "円");
  349.                           $('#mitsumori_price_01').text(formatter.format(parseInt(el.price)) + "円");
  350.                           $('#mitsumori_price_02').text(formatter.format(parseInt(el.price)) + "円");
  351.                           $('#mitsumori_ct_01').text("0円");
  352.                           $('#mitsumori_ct_02').text("0円");
  353.                           $('#mitsumori_goukei_02').text(formatter.format(parseInt(el.price)) + "円");
  354.                         
  355.                         mitsumori_goukei = (parseInt(el.price));
  356.                         shoukei = mitsumori_goukei / 1.1;
  357.                         tax = parseInt(mitsumori_goukei - shoukei);
  358.                           $('#mitsumori_shoukei').text(formatter.format(parseInt(shoukei)) + "円");
  359.                           $('#mitsumori_tax').text(formatter.format(parseInt(tax)) + "円");
  360.                     }else{
  361.                           $('#mitsumori_message').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  362.                           $('#mitsumori_goukei').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  363.                           $('#mitsumori_off').text(formatter.format(parseInt(el.price) - parseInt(el.maker_price)) + "円");
  364.                           $('#mitsumori_price').text(formatter.format(parseInt(el.price)) + "円");
  365.                           $('#maker_price').text(formatter.format(parseInt(el.maker_price)) + "円");
  366.                           $('#mitsumori_ct').text(formatter.format(parseInt(el.ct)) + "円");
  367.                           $('#mitsumori_option').text("0円");
  369.                           $('#mitsumori_kei').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  372.                           $('#mitsumori_price_01').text(formatter.format(parseInt(el.price)) + "円");
  373.                           $('#mitsumori_price_02').text(formatter.format(parseInt(el.price)) + "円");
  374.                           $('#mitsumori_ct_01').text(formatter.format(parseInt(el.ct)) + "円");
  375.                           $('#mitsumori_ct_02').text(formatter.format(parseInt(el.ct)) + "円");
  376.                           $('#mitsumori_goukei_02').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  378.                         mitsumori_goukei = (parseInt(el.price) + parseInt(el.ct));
  379.                         shoukei = mitsumori_goukei / 1.1;
  380.                         tax = parseInt(mitsumori_goukei - shoukei);
  382.                           $('#mitsumori_shoukei').text(formatter.format(parseInt(shoukei)) + "円");
  383.                           $('#mitsumori_tax').text(formatter.format(parseInt(tax)) + "円");
  386.                     }
  387.                   }
  388.                 });
  389.             }
  392.         }
  393.         mitsumori_simulation("","");
  395.     </script>
  396.     <script type="application/ld+json">
  397.     {
  398.         "@context": "https://schema.org/",
  399.         "@type": "Product",
  400.         "name": "{{ Product.name }}",
  401.         "image": [
  402.             {% for img in Product.ProductImage %}
  403.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  405.             {% else %}
  406.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  407.             {% endfor %}
  408.         ],
  409.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  410.         {% if Product.code_min %}
  411.         "sku": "{{ Product.code_min }}",
  412.         {% endif %}
  413.         "offers": {
  414.             "@type": "Offer",
  415.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  416.             "priceCurrency": "{{ eccube_config.currency }}",
  417.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  418.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  419.         }
  420.     }
  421.     </script>
  423. {% endblock %}
  425. {% block main %}
  426.     <div class="ec-productRole" style="margin-top:20px;">
  427.         <div class="ec-grid2">
  428.             <div class="ec-grid2__cell">
  429.                 <div class="ec-sliderItemRole">
  430.                     {# 商品名 #}
  431.                     <div class="ec-productRole__title">
  432.                         <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  433.                     </div>
  434.                     {% if BaseInfo.option_favorite_product %}
  435.                      <div style="position:relative;top: 20px;left: 10px;z-index:100;">
  436.                         {% if is_favorite == false %}
  437.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  438.                            <button type="submit" id="favorite" class="favorite">&#9825;</button>
  439.                         </form>
  440.                         {% else %}
  441.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  442.                            <button type="submit" id="favorite" class="favorite" style="color:red;">&#9829;</button>
  443.                         </form>
  444.                         {% endif %}
  445.                      </div>
  446.                     {% endif %}
  447.                     <div class="item_visual">
  448.                         {% for ProductImage in Product.ProductImage %}
  449.                             <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550" style="max-height: 400px;"{% if loop.index > 1 %} loading="lazy"{% endif %}></div>
  450.                         {% else %}
  451.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550" style="max-height: 400px;"></div>
  452.                         {% endfor %}
  453.                     </div>
  454.                     <div class="item_nav">
  455.                         {% for ProductImage in Product.ProductImage %}
  456.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="80" height="80" loading="lazy"></div>
  457.                         {% endfor %}
  458.                     </div>
  460.                 </div>
  462.             </div>
  464.             <div class="ec-grid2__cell2">
  465.                 <div class="ec-productRole__profile" >
  466.                     {# 関連カテゴリ #}
  467.                     {% if Product.ProductCategories is not empty %}
  468.                         <div class="ec-productRole__category" style="padding:10px 0;">
  469.                             {% for ProductCategory in Product.ProductCategories %}
  470.                                 <ul>
  471.                                     <li>
  472.                                         {% for Category in ProductCategory.Category.path %}
  473.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  474.                                             <span>＞</span>{% endif -%}
  475.                                         {% endfor %}
  476.                                     </li>
  477.                                 </ul>
  478.                             {% endfor %}
  479.                         </div>
  480.                     {% endif %}
  481.                     {# 販売価格 #}
  482.                     <div class="ec-productRole__price">
  483.                         <span style="color:black;font-size:15px;">工事費込み価格</span>
  484.                         {% if Product.hasProductClass -%}
  485.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  486.                                 <div class="ec-price">
  487.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  488.                                     <span class="ec-price__tax">({{ '税込'|trans }})～</span>
  489.                                 </div>
  490.                             {% else %}
  491.                                 <div class="ec-price">
  492.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  493.                                     <span class="ec-price__tax">({{ '税込'|trans }})</span>
  494.                                 </div>
  495.                             {% endif %}
  496.                         {% else %}
  497.                             <div class="ec-price">
  498.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  499.                                     <span class="ec-price__tax">({{ '税込'|trans }})～</span>
  500.                             </div>
  501.                         {% endif %}
  502.                     </div>
  503.                     {# タグ #}
  504.                     <ul class="ec-productRole__tags">
  505.                         {% for Tag in Product.Tags %}
  506.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  507.                         {% endfor %}
  508.                     </ul>
  509.                     {# 商品コード #}
  510.                     {% if Product.code_min is not empty %}
  511.                         <div class="ec-productRole__code">
  512.                             {{ '商品コード'|trans }}： <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  513.                         </div>
  514.                     {% endif %}
  516.                     <div class="ec-productRole__description">
  517.                         <div class="ec-rectHeading">
  518.                             <h4>製品情報</h4>
  519.                         </div>
  520.                         {{ Product.sales_infomation|raw|nl2br }}
  521.                     </div>
  524.                     <div class="card card-danger" style="clear:both;margin:1px;">
  525.                       <div class="card-header">
  526.                         <h3 class="card-title">見積シミュレーション</h3>
  527.                       </div>
  528.                       <div class="card-body p-2">
  529.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">この商品のタイプを選択してください。</label></div>
  532.                         {% set type1 = getProduct_field(Product.id,"related_name1") %}
  533.                         {% if type1 and related_product1 and related_product1|length %}
  534.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  535.                           <label class="col-4 col-form-label mt-2">{{ type1 }}</label>
  536.                           <div class="col-8 mt-2">
  537.                             <div class="form-group clearfix">
  538.                               {% for rp_id, rp_name in related_product1 %}
  539.                               <div class="icheck-danger d-inline">
  540.                                 <input type="radio" name="rp1" id="rp1_{{ rp_id }}" value="{{ rp_name }}" {% if base_select1 == rp_name %}checked{% endif %} onclick="location.href='/products/detail/{{ rp_id }}';"><label for="rp1_{{ rp_id }}">{{ rp_name }}</label>
  541.                               </div>
  542.                               {% endfor %}
  543.                             </div>
  544.                           </div>
  545.                         </div>
  546.                         {% endif %}
  548.                         {% set type2 = getProduct_field(Product.id,"related_name2") %}
  549.                         {% if type2 and related_product2 and related_product2|length %}
  550.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  551.                           <label class="col-4 col-form-label mt-2">{{ type2 }}</label>
  552.                           <div class="col-8 mt-2">
  553.                             <div class="form-group clearfix">
  554.                               {% for rp_id, rp_name in related_product2 %}
  555.                               <div class="icheck-danger d-inline">
  556.                                 <input type="radio" name="rp2" id="rp2_{{ rp_id }}" value="{{ rp_name }}" {% if base_select2 == rp_name %}checked{% endif %} onclick="location.href='/products/detail/{{ rp_id }}';"><label for="rp2_{{ rp_id }}">{{ rp_name }}</label>
  557.                               </div>
  558.                               {% endfor %}
  559.                             </div>
  560.                           </div>
  561.                         </div>
  562.                         {% endif %}
  564.                         {% set type3 = getProduct_field(Product.id,"related_name3") %}
  565.                         {% if type3 and related_product3 and related_product3|length %}
  566.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  567.                           <label class="col-4 col-form-label mt-2">{{ type3 }}</label>
  568.                           <div class="col-8 mt-2">
  569.                             <div class="form-group clearfix">
  570.                               {% for rp_id, rp_name in related_product3 %}
  571.                               <div class="icheck-danger d-inline">
  572.                                 <input type="radio" name="rp3" id="rp3_{{ rp_id }}" value="{{ rp_name }}" {% if base_select3 == rp_name %}checked{% endif %} onclick="location.href='/products/detail/{{ rp_id }}';"><label for="rp3_{{ rp_id }}">{{ rp_name }}</label>
  573.                               </div>
  574.                               {% endfor %}
  575.                             </div>
  576.                           </div>
  577.                         </div>
  578.                         {% endif %}
  580.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">この商品のカラー、サイズ、素材を選択してください。</label></div>
  581.                         {% if color and color|length %}
  582.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  583.                           <label class="col-4 col-form-label mt-2">カラー</label>
  584.                           <div class="col-8 mt-2">
  585.                             <div class="form-group clearfix">
  586.                             {% set idx = 0 %}
  587.                             {% for cc in color %}
  588.                               {% if cc and cc['name'] %}
  589.                               {% set idx = idx + 1 %}
  590.                               <div class="icheck-danger d-inline">
  591.                                 <input type="radio" name="color" id="cc_{{ idx }}" value="{{ cc['name'] }}" onclick="mitsumori_simulation('pc','cc_{{ idx }}');"><label for="cc_{{ idx }}">{{ cc['name'] }}</label>
  592.                               </div>
  593.                               {% endif %}
  594.                             {% endfor %}
  595.                             </div>
  596.                           </div>
  597.                         </div>
  598.                         {% endif %}
  599.                         {% if p_w and p_w|length %}
  600.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  601.                           <label class="col-4 col-form-label">幅</label>
  602.                           <div class="col-8">
  603.                             <div class="form-group clearfix">
  604.                             {% set idx = 0 %}
  605.                             {% for pw in p_w %}
  606.                               {% if pw %}
  607.                               {% set idx = idx + 1 %}
  608.                               <div class="icheck-danger d-inline">
  609.                                 <input type="radio" name="pw" id="pw_{{ idx }}" value="{{ pw }}" onclick="mitsumori_simulation('pw','pw_{{ idx }}');"><label for="pw_{{ idx }}">{{ pw }}</label>
  610.                               </div>
  611.                               {% endif %}
  612.                             {% endfor %}
  613.                             </div>
  614.                           </div>
  615.                         </div>
  616.                         {% endif %}
  617.                         {% if p_d and p_d|length %}
  618.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  619.                           <label class="col-4 col-form-label">奥行き</label>
  620.                           <div class="col-8">
  621.                             <div class="form-group clearfix">
  622.                             {% set idx = 0 %}
  623.                             {% for pd in p_d %}
  624.                               {% if pd %}
  625.                               {% set idx = idx + 1 %}
  626.                               <div class="icheck-danger d-inline">
  627.                                 <input type="radio" name="pd" id="pd_{{ idx }}" value="{{ pd }}" onclick="mitsumori_simulation('pd','pd_{{ idx }}');"><label for="pd_{{ idx }}">{{ pd }}</label>
  628.                               </div>
  629.                               {% endif %}
  630.                             {% endfor %}
  631.                             </div>
  632.                           </div>
  633.                         </div>
  634.                         {% endif %}
  635.                         {% if p_h and p_h|length %}
  636.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  637.                           <label class="col-4 col-form-label">高さ</label>
  638.                           <div class="col-8">
  639.                             <div class="form-group clearfix">
  640.                             {% set idx = 0 %}
  641.                             {% for ph in p_h %}
  642.                               {% if ph %}
  643.                               {% set idx = idx + 1 %}
  644.                               <div class="icheck-danger d-inline">
  645.                                 <input type="radio" name="ph" id="ph_{{ idx }}" value="{{ ph }}" onclick="mitsumori_simulation('ph','ph_{{ idx }}');"><label for="ph_{{ idx }}">{{ ph }}</label>
  646.                               </div>
  647.                               {% endif %}
  648.                             {% endfor %}
  649.                             </div>
  650.                           </div>
  651.                         </div>
  652.                         {% endif %}
  653.                         {% if p_w and p_w|length %}
  654.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  655.                           <label class="col-4 col-form-label">素材</label>
  656.                           <div class="col-8">
  657.                             <div class="form-group clearfix">
  658.                             {% set idx = 0 %}
  659.                             {% for pm in p_m %}
  660.                               {% if pm %}
  661.                               {% set idx = idx + 1 %}
  662.                               <div class="icheck-danger d-inline">
  663.                                 <input type="radio" name="pm" id="pm_{{ idx }}" value="{{ pm }}" onclick="mitsumori_simulation('pm','pm_{{ idx }}');"><label for="pm_{{ idx }}">{{ pm }}</label>
  664.                               </div>
  665.                               {% endif %}
  666.                             {% endfor %}
  667.                             </div>
  668.                           </div>
  669.                         </div>
  670.                         {% endif %}
  671.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">取り付け工事のご希望に関してお答えください。</label></div>
  672.                         {% for i in 0..10 %}
  673.                             {% if op and op|length >= i+1 %}
  674.                             {% if op[i]['name'] %}
  675.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  676.                               <label class="col-4 col-form-label">{{ op[i]['name'] }}</label>
  677.                               <div class="col-8">
  678.                                 {{ op[i]['comment'] }}
  679.                                 <div class="form-group clearfix">
  680.                                   <div class="icheck-danger d-inline">
  681.                                     <input type="radio" name="op{{ i }}" id="op{{ i }}_1" value="{{ op[i]['on'] }}" onclick="mitsumori_simulation('op{{ i }}','op{{ i }}_1');"><label for="op{{ i }}_1">{{ op[i]['on'] }}</label>
  682.                                   </div>
  683.                                 </div>
  684.                                 <div class="form-group clearfix">
  685.                                   <div class="icheck-danger d-inline">
  686.                                     <input type="radio" name="op{{ i }}" id="op{{ i }}_2" value="{{ op[i]['off'] }}" onclick="mitsumori_simulation('op{{ i }}','op{{ i }}_2');"><label for="op{{ i }}_2">{{ op[i]['off'] }}</label>
  687.                                   </div>
  688.                                 </div>
  689.                               </div>
  690.                             </div>
  691.                             {% endif %}
  692.                             {% endif %}
  693.                         {% endfor %}
  694.                       </div>
  695.                       <!-- /.card-body -->
  696.                     </div>
  699.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  700.                         {% if Product.stock_find %}
  701.                             <div class="ec-productRole__actions">
  702.                                 {% if form.classcategory_id1 is defined %}
  703.                                     <div class="ec-select">
  704.                                         {{ form_row(form.classcategory_id1) }}
  705.                                         {{ form_errors(form.classcategory_id1) }}
  706.                                     </div>
  707.                                     {% if form.classcategory_id2 is defined %}
  708.                                         <div class="ec-select">
  709.                                             {{ form_row(form.classcategory_id2) }}
  710.                                             {{ form_errors(form.classcategory_id2) }}
  711.                                         </div>
  712.                                     {% endif %}
  713.                                 {% endif %}
  714.                                 <div class="ec-numberInput">
  715.                                     {{ form_widget(form.quantity, { type: 'hidden' }) }}
  716.                                     {{ form_errors(form.quantity) }}
  717.                                 </div>
  718.                             </div>
  720.                             {% if ProductClass.SaleType.id != 9 %}
  721.                             <div class="ec-productRole__btn">
  722.                             </div>
  723.                             {% else %}
  724.                             <div class="ec-productRole__btn">
  725.                                 <button type="submit" class="ec-blockBtn--action add-cart">
  726.                                     {{ 'カートに入れる'|trans }}
  727.                                 </button>
  728.                             </div>
  729.                             {% endif %}
  730.                         {% else %}
  731.                             <div class="ec-productRole__btn">
  732.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  733.                                     {{ 'ただいま品切れ中です。'|trans }}
  734.                                 </button>
  735.                             </div>
  736.                         {% endif %}
  737.                         {{ form_rest(form) }}
  738.                     </form>
  739.                     <div class="ec-modal">
  740.                         <div class="ec-modal-overlay">
  741.                             <div class="ec-modal-wrap">
  742.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  743.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  744.                                 <div class="ec-modal-box">
  745.                                     <div class="ec-role">
  746.                                         <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  747.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  748.                                     </div>
  749.                                 </div>
  750.                             </div>
  751.                         </div>
  752.                     </div>
  753.                     <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  754.                     </div>
  755.                 </div>
  756.                 <div class="card col-12 collapsed-card sticky-top float-right">
  757.                     <div class="card-header">
  758.                       <h3 class="card-title">現在のお見積り額</h3>
  759.                       <div class="card-tools">
  760.                         <span class="float-left" id="mitsumori_message">395000円</span>
  761.                         <button type="button" class="btn btn-tool" data-card-widget="collapse">
  762.                           <i class="fas fa-plus"></i>
  763.                         </button>
  764.                       </div>
  765.                     </div>
  766.                     <div class="card-body p-0">
  767.                       <ul class="nav nav-pills flex-column">
  768.                         <li class="nav-item active">
  769.                           <a class="nav-link">
  770.                             <i class="far fa-file-alt"></i> 合計(工事費・税込)
  771.                             <span class="float-right" id="mitsumori_goukei">395,000円</span>
  772.                           </a>
  773.                         </li>
  774.                         <li class="nav-item active">
  775.                           <a class="nav-link">
  776.                             <i class="far fa-file-alt"></i> 商品価格
  777.                             <span class="float-right" id="mitsumori_price">307,008円</span>
  778.                           </a>
  779.                         </li>
  780.                         <li class="nav-item">
  781.                           <a class="nav-link">
  782.                             &nbsp;&nbsp;<i class="far fa-file-alt"></i> カタログ価格
  783.                             <span class="float-right" id="maker_price">479,700円</span>
  784.                           </a>
  785.                         </li>
  786.                         <li class="nav-item">
  787.                           <a class="nav-link">
  788.                             &nbsp;&nbsp;<i class="far fa-file-alt"></i> お値引き
  789.                             <span class="float-right" id="mitsumori_off">-172,692円</span>
  790.                           </a>
  791.                         </li>
  792.                         <li class="nav-item">
  793.                           <a class="nav-link">
  794.                             <i class="far fa-file-alt"></i> 基本工事費
  795.                             <span class="float-right" id="mitsumori_ct">53,250円</span>
  796.                           </a>
  797.                         </li>
  798.                         <li class="nav-item">
  799.                           <a class="nav-link">
  800.                             <i class="far fa-file-alt"></i> 施工オプション
  801.                             <span class="float-right"id="mitsumori_option">6,297円</span>
  802.                           </a>
  803.                         </li>
  804.                       </ul>
  805.                     </div>
  806.                     <div class="card-footer">
  808.                         <button type="button" id="mitsumori_btn" class="btn btn-info" data-toggle="modal" data-target="#modal-mitsumori">
  809.                           見積書表示
  810.                         </button>
  811.                         <button id="contact" class="btn btn-info" onclick="location.href='/contact?product={{ Product.id }}';">無料現地調査へ進む</button>
  813.                     </div>
  814.                 </div>
  815.             </div>
  817.         </div>
  819.     </div>
  821.   <div class="modal" id="modal-mitsumori">
  822.     <div class="modal-dialog modal-mitsumori" style="max-width:1000px">
  823.       <div class="modal-content">
  824.         <div class="modal-header">
  825.           <h4 class="modal-title">お見積書</h4>
  826.           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  827.             <span aria-hidden="true">&times;</span>
  828.           </button>
  829.         </div>
  830.         <div class="modal-body">
  831.             <div class="invoice p-3 mb-5" style="max-width:1000px; margin:auto;">
  832.               <!-- title row -->
  833.               <div class="row">
  834.                 <div class="col-12">
  835.                   <h2>概算お見積書 
  836.                     <small class="float-right" style="font-size:14px;">発行日: 2025/03/14</small>
  837.                   </h2>
  838.                 </div>
  839.                 <!-- /.col -->
  840.               </div>
  841.               <!-- info row -->
  842.               <div class="row invoice-info">
  843.                 <div class="col-sm-8 invoice-col">
  844.                   <h3>お客様</h3>
  845.                   <span>下記の通り、お見積もり申し上げます。</span>
  846.                   <br />
  847.                   <br / >
  848.                   <br />
  849.                   <h2>お見積金額：　<span id="mitsumori_kei">399,080円</span></h2>
  850.                   <span>
  851.                     <br/>
  852.                     <br/>
  853.                     <br/>
  854.                     <br/>
  855.                   </span>
  856.                 </div>
  857.                 <div class="col-sm-4 invoice-col">
  858.                   <p>
  859.                     <img alt="" src="/html/user_data/js/images/logo.png" style="width: 260px; max-width: 100%; max-height: 10mm;">
  860.                   </p>
  861.                   <p>有限会社プラス</p>
  862.                   <p>〒400-0334</p>
  863.                   <p>山梨県南アルプス市藤田1450番地2</p>
  864.                   <p>TEL: 055-284-6480</p>
  865.                   <img alt="" src="/html/user_data/js/images/seal.svg" style="z-index: 2; position: absolute; width: 21mm; left: 58mm; top: 36mm;">
  866.                 </div>
  867.                 <!-- /.col -->
  868.                 <!-- /.col -->
  869.               </div>
  870.               <!-- /.row -->
  871.               <!-- Table row -->
  872.               <div class="row">
  873.                 <div class="col-12 table-responsive">
  874.                   <table class="table table-striped">
  875.                     <thead>
  876.                       <tr>
  877.                         <th>項目</th>
  878.                         <th>数量</th>
  879.                         <th>単位</th>
  880.                         <th>単価</th>
  881.                         <th>小計</th>
  882.                       </tr>
  883.                     </thead>
  884.                     <tbody>
  885.                       <tr>
  886.                         <td>プレーンルーフ 600タイプ 1台用 単体セット</td>
  887.                         <td>1</td>
  888.                         <td>式</td>
  889.                         <td id="mitsumori_price_01">352,800</td>
  890.                         <td id="mitsumori_price_02">352,800</td>
  891.                       </tr>
  892.                       <tr>
  893.                         <td>基本工事費</td>
  894.                         <td>1</td>
  895.                         <td>式</td>
  896.                         <td id="mitsumori_ct_01">10,000</td>
  897.                         <td id="mitsumori_ct_02">10,000</td>
  898.                       </tr>
  899.                       <tr>
  900.                         <td>残土・ガラ処理</td>
  901.                         <td>1</td>
  902.                         <td>式</td>
  903.                         <td>0円</td>
  904.                         <td></td>
  905.                       </tr>
  906.                       <tr>
  907.                         <td>　</td>
  908.                         <td></td>
  909.                         <td></td>
  910.                         <td></td>
  911.                         <td></td>
  912.                       </tr>
  913.                     </tbody>
  914.                   </table>
  915.                 </div>
  916.                 <!-- /.col -->
  917.               </div>
  918.               <!-- /.row -->
  919.               <div class="row">
  920.                 <!-- accepted payments column -->
  921.                 <div class="col-6">
  922.                   <p class="lead">お支払い方法</p>
  923.                   <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">銀行振込、クレジットカード決済、PAYPAY決済
  924.                     <br>銀行振込：山梨中央銀行　白根支店　普通口座　391402
  925.                     <br>※商品代金と工事代金の総額が金100万円（税込）を超える場合、着手金として代金の半額をご契約後お支払いいただきます。 
  926.                   </p>
  927.                 </div>
  928.                 <!-- /.col -->
  929.                 <div class="col-6">
  930.                   <div class="table-responsive">
  931.                     <table class="table">
  932.                       <tbody>
  933.                         <tr>
  934.                           <th style="width:50%">小計:</th>
  935.                           <td id="mitsumori_shoukei">362,800</td>
  936.                         </tr>
  937.                         <tr>
  938.                           <th>消費税 (10%)</th>
  939.                           <td id="mitsumori_tax">36,280</td>
  940.                         </tr>
  941.                         <tr>
  942.                           <th>合計:</th>
  943.                           <td id="mitsumori_goukei_02">399,080</td>
  944.                         </tr>
  945.                       </tbody>
  946.                     </table>
  947.                   </div>
  948.                 </div>
  949.                 <!-- /.col -->
  950.               </div>
  951.               <!-- /.row -->
  952.             </div>
  953.         </div>
  954.         <div class="modal-footer justify-content-between">
  955.                   <button type="button" class="btn btn-primary float-right" style="margin-right: 5px;">
  956.                     <i class="fas fa-download"></i>PDF出力
  957.                   </button>
  958.           <button type="button" class="btn btn-info" onclick="location.href='/contact?product={{ Product.id }}';">無料現地調査へ進む</button>
  959.         </div>
  960.       </div>
  961.       <!-- /.modal-content -->
  962.     </div>
  963.     <!-- /.modal-dialog -->
  964.   </div>
  965.   <!-- /.modal -->
  969. {% endblock %}