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

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 = "{% if mitsumori_json %}{{ mitsumori_json.pw }}{% endif %}";
  263.         var pd = "{% if mitsumori_json %}{{ mitsumori_json.pd }}{% endif %}";
  264.         var ph = "{% if mitsumori_json %}{{ mitsumori_json.ph }}{% endif %}";
  265.         var pm = "{% if mitsumori_json %}{{ mitsumori_json.pm }}{% endif %}";
  266.         var pc = "{% if mitsumori_json %}{{ mitsumori_json.pc }}{% endif %}";
  267.         var op0 = "{% if mitsumori_json %}{{ mitsumori_json.op[0] }}{% endif %}";
  268.         var op1 = "{% if mitsumori_json %}{{ mitsumori_json.op[1] }}{% endif %}";
  269.         var op2 = "{% if mitsumori_json %}{{ mitsumori_json.op[2] }}{% endif %}";
  270.         var op3 = "{% if mitsumori_json %}{{ mitsumori_json.op[3] }}{% endif %}";
  271.         var op4 = "{% if mitsumori_json %}{{ mitsumori_json.op[4] }}{% endif %}";
  272.         var op5 = "{% if mitsumori_json %}{{ mitsumori_json.op[5] }}{% endif %}";
  273.         var op6 = "{% if mitsumori_json %}{{ mitsumori_json.op[6] }}{% endif %}";
  274.         var op7 = "{% if mitsumori_json %}{{ mitsumori_json.op[7] }}{% endif %}";
  275.         var op8 = "{% if mitsumori_json %}{{ mitsumori_json.op[8] }}{% endif %}";
  276.         var op9 = "{% if mitsumori_json %}{{ mitsumori_json.op[9] }}{% endif %}";
  277.         var op10 = "{% if mitsumori_json %}{{ mitsumori_json.op[10] }}{% endif %}";
  279.         const formatter = new Intl.NumberFormat('ja-JP');
  281.         function cartbutton(option){
  282.             if(option == '商品購入のみ' || option == '商品取り付け工事も希望する'){
  283.                 if(option == '商品購入のみ'){
  284.                     $('#cart_btn').show();
  285.                 }else{
  286.                     $('#cart_btn').hide();
  287.                 }
  288.             }
  289.         }
  290.         function mitsumori_simulation(type , value_id){
  291.             var pp = {{ pp|raw }};
  292.             if(type == "pw"){
  293.                 pw = $('#'+value_id).val();
  294.             }
  295.             if(type == "pd"){
  296.                 pd = $('#'+value_id).val();
  297.             }
  298.             if(type == "ph"){
  299.                 ph = $('#'+value_id).val();
  300.             }
  301.             if(type == "pm"){
  302.                 pm = $('#'+value_id).val();
  303.             }
  304.             if(type == "pc"){
  305.                 pc = $('#'+value_id).val();
  306.             }
  307.             if(type == "op0"){ op0 = $('#'+value_id).val(); }
  308.             if(type == "op1"){ op1 = $('#'+value_id).val(); }
  309.             if(type == "op2"){ op2 = $('#'+value_id).val(); }
  310.             if(type == "op3"){ op3 = $('#'+value_id).val(); }
  311.             if(type == "op4"){ op4 = $('#'+value_id).val(); }
  312.             if(type == "op5"){ op5 = $('#'+value_id).val(); }
  313.             if(type == "op6"){ op6 = $('#'+value_id).val(); }
  314.             if(type == "op7"){ op7 = $('#'+value_id).val(); }
  315.             if(type == "op8"){ op8 = $('#'+value_id).val(); }
  316.             if(type == "op9"){ op9 = $('#'+value_id).val(); }
  317.             if(type == "op10"){ op10 = $('#'+value_id).val(); }
  319.             if(pm == ""){
  320.                 $('#mitsumori_message').text("素材を選択してください");
  321.             }
  322.             if(ph == ""){
  323.                 $('#mitsumori_message').text("高さを選択してください");
  324.             }
  325.             if(pd == ""){
  326.                 $('#mitsumori_message').text("奥行きを選択してください");
  327.             }
  328.             if(pw == ""){
  329.                 $('#mitsumori_message').text("幅を選択してください");
  330.             }
  331.             if(pc == ""){
  332.                 $('#mitsumori_message').text("カラーを選択してください");
  333.                 $('#mitsumori_btn').hide();
  334.                 $('#mitsumori_goukei').text("---円");
  335.                 $('#mitsumori_off').text("---円");
  336.                 $('#mitsumori_price').text("---円");
  337.                 $('#maker_price').text("---円");
  338.                 $('#mitsumori_ct').text("---円");
  339.                 $('#mitsumori_option').text("---円");
  340.             }
  341.             if(pw != "" && pd != "" && ph != "" && pm != "" && pc != ""){
  342.                 $('#mitsumori_btn').show();
  343.                 
  344.                 pp.forEach((el) => {
  345.                   if((pw == el.w || pw == "指定なし") && (pd == el.d || pd == "指定なし") && (ph == el.h || ph == "指定なし") && (pm == el.m || pm == "指定なし") && (pc == el.c || pc == "指定なし")){
  347.                     if(op0 == "商品購入のみ" || op1 == "商品購入のみ" || op2 == "商品購入のみ" || op3 == "商品購入のみ" || op4 == "商品購入のみ" 
  348.                         || op5 == "商品購入のみ" || op6 == "商品購入のみ" || op7 == "商品購入のみ" || op8 == "商品購入のみ" || op9 == "商品購入のみ"){
  349.                           $('#mitsumori_message').text(formatter.format(parseInt(el.price)) + "円");
  350.                           $('#mitsumori_goukei').text(formatter.format(parseInt(el.price)) + "円");
  351.                           $('#mitsumori_off').text(formatter.format(parseInt(el.price) - parseInt(el.maker_price)) + "円");
  352.                           $('#mitsumori_price').text(formatter.format(parseInt(el.price)) + "円");
  353.                           $('#maker_price').text(formatter.format(parseInt(el.maker_price)) + "円");
  354.                           $('#mitsumori_ct').text("0円");
  355.                           $('#mitsumori_option').text("0円");
  357.                           $('#mitsumori_kei').text(formatter.format(parseInt(el.price)) + "円");
  358.                           $('#mitsumori_price_01').text(formatter.format(parseInt(el.price)) + "円");
  359.                           $('#mitsumori_price_02').text(formatter.format(parseInt(el.price)) + "円");
  360.                           $('#mitsumori_ct_01').text("0円");
  361.                           $('#mitsumori_ct_02').text("0円");
  362.                           $('#mitsumori_goukei_02').text(formatter.format(parseInt(el.price)) + "円");
  363.                         
  364.                         mitsumori_goukei = (parseInt(el.price));
  365.                         shoukei = mitsumori_goukei / 1.1;
  366.                         tax = parseInt(mitsumori_goukei - shoukei);
  367.                           $('#mitsumori_shoukei').text(formatter.format(parseInt(shoukei)) + "円");
  368.                           $('#mitsumori_tax').text(formatter.format(parseInt(tax)) + "円");
  369.                     }else{
  370.                           $('#mitsumori_message').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  371.                           $('#mitsumori_goukei').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  372.                           $('#mitsumori_off').text(formatter.format(parseInt(el.price) - parseInt(el.maker_price)) + "円");
  373.                           $('#mitsumori_price').text(formatter.format(parseInt(el.price)) + "円");
  374.                           $('#maker_price').text(formatter.format(parseInt(el.maker_price)) + "円");
  375.                           $('#mitsumori_ct').text(formatter.format(parseInt(el.ct)) + "円");
  376.                           $('#mitsumori_option').text("0円");
  378.                           $('#mitsumori_kei').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  381.                           $('#mitsumori_price_01').text(formatter.format(parseInt(el.price)) + "円");
  382.                           $('#mitsumori_price_02').text(formatter.format(parseInt(el.price)) + "円");
  383.                           $('#mitsumori_ct_01').text(formatter.format(parseInt(el.ct)) + "円");
  384.                           $('#mitsumori_ct_02').text(formatter.format(parseInt(el.ct)) + "円");
  385.                           $('#mitsumori_goukei_02').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  387.                         mitsumori_goukei = (parseInt(el.price) + parseInt(el.ct));
  388.                         shoukei = mitsumori_goukei / 1.1;
  389.                         tax = parseInt(mitsumori_goukei - shoukei);
  391.                           $('#mitsumori_shoukei').text(formatter.format(parseInt(shoukei)) + "円");
  392.                           $('#mitsumori_tax').text(formatter.format(parseInt(tax)) + "円");
  394.                     }
  395.                   }
  396.                 });    
  399.                 var mitsumori_json = { "mitsumori_goukei": $('#mitsumori_goukei').text(),
  400.                                         "mitsumori_goukei_02": $('#mitsumori_goukei_02').text(),
  401.                                         "mitsumori_price": $('#mitsumori_price').text(),
  402.                                         "maker_price": $('#maker_price').text(),
  403.                                         "mitsumori_off": $('#mitsumori_off').text(),
  404.                                         "mitsumori_ct": $('#mitsumori_ct').text(),
  405.                                         "mitsumori_option": $('#mitsumori_option').text(),
  406.                                         "product_id": {{ Product.id }},
  407.                                         "pw": pw,
  408.                                         "pd": pd,
  409.                                         "ph": ph,
  410.                                         "pm": pm,
  411.                                         "pc": pc,
  412.                                         "op": [op0,op1,op2,op3,op4,op5,op6,op7,op8,op9,op10] };
  414.                 $('#mitsumori_json').val(JSON.stringify(mitsumori_json));
  415.                 
  416.             }
  417.             
  419.         }
  421.         {% if color and color|length == 1 %}
  422.             pc = "指定なし";
  423.             {% for cc in color %}{% if cc and cc['name'] %} pc = "{{ cc['name'] }}"; {% endif %}{% endfor %}
  424.         {% endif %}
  426.         {% if p_w and (p_w|length == 1 or p_w|join == "") %}
  427.             pw = "指定なし";
  428.             {% for pw in p_w %}{% if pw %} pw = "{{ pw }}"; {% endif %}{% endfor %}
  429.         {% endif %}
  431.         {% if p_d and (p_d|length == 1 or p_d|join == "") %}
  432.             pd = "指定なし";
  433.             {% for pd in p_d %}{% if pd %} pd = "{{ pd }}"; {% endif %}{% endfor %}
  434.         {% endif %}
  436.         {% if p_h and (p_h|length == 1 or p_h|join == "") %}
  437.             ph = "指定なし";
  438.             {% for ph in p_h %}{% if ph %} ph = "{{ ph }}"; {% endif %}{% endfor %}
  439.         {% endif %}
  441.         {% if p_m and (p_m|length == 1 or p_m|join == "") %}
  442.             pm = "指定なし";
  443.             {% for pm in p_m %}{% if pm %} pm = "{{ pm }}"; {% endif %}{% endfor %}
  444.         {% endif %}
  446.         mitsumori_simulation("","");
  447.         function contact_form(product_id){
  448.             $('#form1').attr('action', '{{ url('contact', {product:Product.id}) }}');
  449.             $('#form1').submit();
  450.         }
  452.         function maisu(mai){
  453.             $('#maisu').val(parseInt($('#maisu').val()) + mai);
  454.             if(parseInt($('#maisu').val()) < 3){ $('#maisu').val(3); }
  455.             if(parseInt($('#maisu').val()) > 20){ $('#maisu').val(20); }
  456.             $('#quantity').val($('#maisu').val());
  457.         }
  459.         function madoset(mai){
  460.             $('#set').val(parseInt($('#set').val()) + mai);
  461.             if(parseInt($('#set').val()) < 1){ $('#set').val(1); }
  462.             if(parseInt($('#set').val()) > 20){ $('#set').val(20); }
  463.             $('#quantity').val($('#set').val());
  464.         }
  467.         function heibei(bei){
  468.             $('#heibei').val(parseInt($('#heibei').val()) + dai);
  469.             if(parseInt($('#heibei').val()) < 1){ $('#heibei').val(1); }
  470.             if(parseInt($('#heibei').val()) > 100){ $('#heibei').val(100); }
  471.             $('#quantity').val($('#heibei').val());
  472.         }
  473.         function daisu(dai){
  474.             $('#daisu').val(parseInt($('#daisu').val()) + dai);
  475.             if(parseInt($('#daisu').val()) < 1){ $('#daisu').val(1); }
  476.             if(parseInt($('#daisu').val()) > 10){ $('#daisu').val(10); }
  477.             $('#quantity').val($('#daisu').val());
  478.         }
  480.     </script>
  481.     <script type="application/ld+json">
  482.     {
  483.         "@context": "https://schema.org/",
  484.         "@type": "Product",
  485.         "name": "{{ Product.name }}",
  486.         "image": [
  487.             {% for img in Product.ProductImage %}
  488.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  490.             {% else %}
  491.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  492.             {% endfor %}
  493.         ],
  494.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  495.         {% if Product.code_min %}
  496.         "sku": "{{ Product.code_min }}",
  497.         {% endif %}
  498.         "offers": {
  499.             "@type": "Offer",
  500.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  501.             "priceCurrency": "{{ eccube_config.currency }}",
  502.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  503.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  504.         }
  505.     }
  506.     </script>
  508. {% endblock %}
  510. {% block main %}
  511.     <div class="ec-productRole" style="margin-top:20px;">
  512.         <div class="ec-grid2">
  513.             <div class="ec-grid2__cell">
  514.                 <div class="ec-sliderItemRole">
  515.                     {# 商品名 #}
  516.                     <div class="ec-productRole__title">
  517.                         <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  518.                     </div>
  519.                     {% if BaseInfo.option_favorite_product %}
  520.                      <div style="position:relative;top: 20px;left: 10px;z-index:100;">
  521.                         {% if is_favorite == false %}
  522.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  523.                            <button type="submit" id="favorite" class="favorite">&#9825;</button>
  524.                         </form>
  525.                         {% else %}
  526.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  527.                            <button type="submit" id="favorite" class="favorite" style="color:red;">&#9829;</button>
  528.                         </form>
  529.                         {% endif %}
  530.                      </div>
  531.                     {% endif %}
  532.                     <div class="item_visual">
  533.                         {% for ProductImage in Product.ProductImage %}
  534.                             <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>
  535.                         {% else %}
  536.                             <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>
  537.                         {% endfor %}
  538.                     </div>
  539.                     <div class="item_nav">
  540.                         {% for ProductImage in Product.ProductImage %}
  541.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="80" height="80" loading="lazy"></div>
  542.                         {% endfor %}
  543.                     </div>
  545.                 </div>
  547.             </div>
  549.             <div class="ec-grid2__cell2">
  550.                 <div class="ec-productRole__profile" >
  551.                     {# 関連カテゴリ #}
  552.                     {% if Product.ProductCategories is not empty %}
  553.                         <div class="ec-productRole__category" style="padding:10px 0;">
  554.                             {% for ProductCategory in Product.ProductCategories %}
  555.                                 <ul>
  556.                                     <li>
  557.                                         {% for Category in ProductCategory.Category.path %}
  558.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  559.                                             <span>＞</span>{% endif -%}
  560.                                         {% endfor %}
  561.                                     </li>
  562.                                 </ul>
  563.                             {% endfor %}
  564.                         </div>
  565.                     {% endif %}
  566.                     {# 販売価格 #}
  567.                     <div class="ec-productRole__price">
  568.                         <span style="color:black;font-size:15px;">工事費込み価格</span>
  569.                         {% if Product.hasProductClass -%}
  570.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  571.                                 <div class="ec-price">
  572.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  573.                                     <span class="ec-price__tax">({{ '税込'|trans }})～</span>
  574.                                 </div>
  575.                             {% else %}
  576.                                 <div class="ec-price">
  577.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  578.                                     <span class="ec-price__tax">({{ '税込'|trans }})</span>
  579.                                 </div>
  580.                             {% endif %}
  581.                         {% else %}
  582.                             <div class="ec-price">
  583.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  584.                                     <span class="ec-price__tax">({{ '税込'|trans }})～</span>
  585.                             </div>
  586.                         {% endif %}
  587.                     </div>
  588.                     {# タグ #}
  589.                     <ul class="ec-productRole__tags">
  590.                         {% for Tag in Product.Tags %}
  591.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  592.                         {% endfor %}
  593.                     </ul>
  594.                     {# 商品コード #}
  595.                     {% if Product.code_min is not empty %}
  596.                         <div class="ec-productRole__code">
  597.                             {{ '商品コード'|trans }}： <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  598.                         </div>
  599.                     {% endif %}
  601.                     <div class="ec-productRole__description">
  602.                         <div class="ec-rectHeading">
  603.                             <h4>製品情報</h4>
  604.                         </div>
  605.                         {{ Product.sales_infomation|raw|nl2br }}
  606.                     </div>
  609.                     <div class="card card-danger" style="clear:both;margin:1px;">
  610.                       <div class="card-header">
  611.                         <h3 class="card-title">見積シミュレーション</h3>
  612.                       </div>
  613.                       <div class="card-body p-2">
  615.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">この商品のタイプを選択してください。</label></div>
  616.                         {% set type1 = getProduct_field(Product.id,"related_name1") %}
  617.                         {% if type1 and related_product1 and related_product1|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 mt-2">{{ type1 }}</label>
  620.                           <div class="col-8 mt-2">
  621.                             <div class="form-group clearfix">
  622.                               {% for rp_id, rp_name in related_product1 %}
  623.                               <div class="icheck-danger d-inline">
  624.                                 <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>
  625.                               </div>
  626.                               {% endfor %}
  627.                             </div>
  628.                           </div>
  629.                         </div>
  630.                         {% endif %}
  632.                         {% set type2 = getProduct_field(Product.id,"related_name2") %}
  633.                         {% if type2 and related_product2 and related_product2|length %}
  634.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  635.                           <label class="col-4 col-form-label mt-2">{{ type2 }}</label>
  636.                           <div class="col-8 mt-2">
  637.                             <div class="form-group clearfix">
  638.                               {% for rp_id, rp_name in related_product2 %}
  639.                               <div class="icheck-danger d-inline">
  640.                                 <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>
  641.                               </div>
  642.                               {% endfor %}
  643.                             </div>
  644.                           </div>
  645.                         </div>
  646.                         {% endif %}
  648.                         {% set type3 = getProduct_field(Product.id,"related_name3") %}
  649.                         {% if type3 and related_product3 and related_product3|length %}
  650.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  651.                           <label class="col-4 col-form-label mt-2">{{ type3 }}</label>
  652.                           <div class="col-8 mt-2">
  653.                             <div class="form-group clearfix">
  654.                               {% for rp_id, rp_name in related_product3 %}
  655.                               <div class="icheck-danger d-inline">
  656.                                 <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>
  657.                               </div>
  658.                               {% endfor %}
  659.                             </div>
  660.                           </div>
  661.                         </div>
  662.                         {% endif %}
  665.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">この商品のオプションを選択してください。</label></div>
  668.                         {% if color and color|length %}
  669.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  670.                           <label class="col-4 col-form-label mt-2">カラー</label>
  671.                           <div class="col-8 mt-2">
  672.                             <div class="form-group clearfix">
  673.                             {% set idx = 0 %}
  674.                             {% for cc in color %}
  675.                               {% if cc and cc['name'] %}
  676.                               {% set idx = idx + 1 %}
  677.                               <div class="icheck-danger d-inline">
  678.                                 <input type="radio" name="color" id="cc_{{ idx }}" value="{{ cc['name'] }}" {% if mitsumori_json and mitsumori_json.pc == cc['name'] or color|length == 1 %}checked{% endif %} onclick="mitsumori_simulation('pc','cc_{{ idx }}');"><label for="cc_{{ idx }}">{{ cc['name'] }}</label>
  679.                               </div>
  680.                               {% endif %}
  681.                             {% endfor %}
  682.                             </div>
  683.                           </div>
  684.                         </div>
  685.                         {% endif %}
  686.                         {% if p_w and p_w|length and p_w|join != "" %}
  687.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  688.                           <label class="col-4 col-form-label">幅</label>
  689.                           <div class="col-8">
  690.                             <div class="form-group clearfix">
  691.                             {% set idx = 0 %}
  692.                             {% for pw in p_w %}
  693.                               {% if pw %}
  694.                               {% set idx = idx + 1 %}
  695.                               <div class="icheck-danger d-inline">
  696.                                 <input type="radio" name="pw" id="pw_{{ idx }}" value="{{ pw }}" {% if mitsumori_json and mitsumori_json.pw == pw or p_w|length == 1 %}checked{% endif %} onclick="mitsumori_simulation('pw','pw_{{ idx }}');"><label for="pw_{{ idx }}">{{ pw }}</label>
  697.                               </div>
  698.                               {% endif %}
  699.                             {% endfor %}
  700.                             </div>
  701.                           </div>
  702.                         </div>
  703.                         {% endif %}
  704.                         {% if p_d and p_d|length and p_d|join != "" %}
  705.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  706.                           <label class="col-4 col-form-label">奥行き</label>
  707.                           <div class="col-8">
  708.                             <div class="form-group clearfix">
  709.                             {% set idx = 0 %}
  710.                             {% for pd in p_d %}
  711.                               {% if pd %}
  712.                               {% set idx = idx + 1 %}
  713.                               <div class="icheck-danger d-inline">
  714.                                 <input type="radio" name="pd" id="pd_{{ idx }}" value="{{ pd }}" {% if (mitsumori_json and mitsumori_json.pd == pd) or p_d|length == 1 %}checked{% endif %} onclick="mitsumori_simulation('pd','pd_{{ idx }}');"><label for="pd_{{ idx }}">{{ pd }}</label>
  715.                               </div>
  716.                               {% endif %}
  717.                             {% endfor %}
  718.                             </div>
  719.                           </div>
  720.                         </div>
  721.                         {% endif %}
  722.                         {% if p_h and p_h|length and p_h|join != "" %}
  723.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  724.                           <label class="col-4 col-form-label">高さ</label>
  725.                           <div class="col-8">
  726.                             <div class="form-group clearfix">
  727.                             {% set idx = 0 %}
  728.                             {% for ph in p_h %}
  729.                               {% if ph %}
  730.                               {% set idx = idx + 1 %}
  731.                               <div class="icheck-danger d-inline">
  732.                                 <input type="radio" name="ph" id="ph_{{ idx }}" value="{{ ph }}" {% if (mitsumori_json and mitsumori_json.ph == ph) or p_h|length == 1%}checked{% endif %} onclick="mitsumori_simulation('ph','ph_{{ idx }}');"><label for="ph_{{ idx }}">{{ ph }}</label>
  733.                               </div>
  734.                               {% endif %}
  735.                             {% endfor %}
  736.                             </div>
  737.                           </div>
  738.                         </div>
  739.                         {% endif %}
  740.                         {% if p_m and p_m|length and p_m|join != "" %}
  741.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  742.                           <label class="col-4 col-form-label">素材</label>
  743.                           <div class="col-8">
  744.                             <div class="form-group clearfix">
  745.                             {% set idx = 0 %}
  746.                             {% for pm in p_m %}
  747.                               {% if pm %}
  748.                               {% set idx = idx + 1 %}
  749.                               <div class="icheck-danger d-inline">
  750.                                 <input type="radio" name="pm" id="pm_{{ idx }}" value="{{ pm }}" {% if mitsumori_json and mitsumori_json.pm == pm or p_m|length == 1 %}checked{% endif %} onclick="mitsumori_simulation('pm','pm_{{ idx }}');"><label for="pm_{{ idx }}">{{ pm }}</label>
  751.                               </div>
  752.                               {% endif %}
  753.                             {% endfor %}
  754.                             </div>
  755.                           </div>
  756.                         </div>
  757.                         {% endif %}
  759.                         <!-- 1: 施工見積（通常）-->
  760.                         {% if ProductClass.SaleType.id == 1 %}
  763.                         {% endif %}
  765.                         <!-- 2: 施工見積（補助金・窓)-->
  766.                         {% if ProductClass.SaleType.id == 2 %}
  767.                             <!-- 幅・高さの数値指定 -->
  769.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  770.                               <label class="col-4 col-form-label">窓枠</label>
  771.                               <div class="col-4">
  772.                                 <div class="input-group">
  773.                                    <span class="input-group-text">高さ</span><input type="text" name="takasa" id="takasa" class="form-control" value="1" onchange="mitsumori_simulation('takasa','takasa');" /><span class="input-group-text">cm</span>
  774.                                 </div>
  775.                               </div>
  776.                               <div class="col-4">
  777.                                 <div class="input-group mb-3">
  778.                                    <span class="input-group-text">横幅</span><input type="text" name="yokohaba" id="yokohaba" class="form-control" value="1" onchange="mitsumori_simulation('yokohaba','yokohaba');" /><span class="input-group-text">cm</span>
  779.                                 </div>
  780.                               </div>
  781.                             </div>
  783.                             <!-- 枚数（入力）の指定 -->
  784.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  785.                               <label class="col-4 col-form-label">セット数</label>
  786.                               <div class="col-4 mb-3">
  787.                                 <div class="input-group">
  788.                                    <input type="text" name="set" id="set" class="form-control" value="1" onchange="mitsumori_simulation('set','set');" /><span class="input-group-text">セット</span>
  789.                                 </div>
  790.                               </div>
  791.                               <div class="col-4">
  792.                                 <button type="button" id="op_btn_1" class="btn btn-info" onclick="madoset(+1);">＋</button>
  793.                                 <button type="button" id="op_btn_2" class="btn btn-danger" onclick="madoset(-1);">ー</button>
  794.                               </div>
  795.                             
  796.                         {% endif %}
  798.                         <!-- 3: 施工見積（物置・ゴミステーション）-->
  799.                         {% if ProductClass.SaleType.id == 3 %}
  800.                             <!-- 幅・奥行き・高さ -->
  801.                             <!-- 台数の指定 -->
  803.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  804.                               <label class="col-4 col-form-label">台数</label>
  805.                               <div class="col-4">
  806.                                 <div class="input-group mb-3">
  807.                                    <input type="text" name="daisu" id="daisu" class="form-control" value="1" onchange="mitsumori_simulation('daisu','daisu');" /><span class="input-group-text">台</span>
  808.                                 </div>
  809.                               </div>
  810.                               <div class="col-4">
  811.                                 <button type="button" id="op_btn_1" class="btn btn-info" onclick="daisu(+1);">＋</button>
  812.                                 <button type="button" id="op_btn_2" class="btn btn-danger" onclick="daisu(-1);">ー</button>
  813.                               </div>
  814.                             </div>
  816.                         {% endif %}
  818.                         <!-- 4: 施工見積（フェンス・組み立て式）-->
  819.                         {% if ProductClass.SaleType.id == 4 %}
  820.                             <!-- 枚数（入力）の指定 -->
  821.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  822.                               <label class="col-4 col-form-label">枚数</label>
  823.                               <div class="col-4 mb-3">
  824.                                 <div class="input-group">
  825.                                    <input type="text" name="maisu" id="maisu" class="form-control" value="3" onchange="mitsumori_simulation('daisu','daisu');" /><span class="input-group-text">枚</span>
  826.                                 </div>
  827.                               </div>
  828.                               <div class="col-4">
  829.                                 <button type="button" id="op_btn_1" class="btn btn-info" onclick="maisu(+1);">＋</button>
  830.                                 <button type="button" id="op_btn_2" class="btn btn-danger" onclick="maisu(-1);">ー</button>
  831.                               </div>
  832.                             </div>
  834.                         {% endif %}
  836.                         <!-- 5: 施工見積（ウッドデッキ・タイルデッキ）-->
  837.                         {% if ProductClass.SaleType.id == 5 %}
  840.                         {% endif %}
  841.                         <!-- 6: 施工見積（芝生・枚数・数量買い）-->
  842.                         {% if ProductClass.SaleType.id == 6 %}
  843.                             <!-- 平米（入力）の指定 -->
  844.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  845.                               <label class="col-4 col-form-label">枚数</label>
  846.                               <div class="col-4">
  847.                                 <div class="input-group">
  848.                                    <input type="text" name="heibei" id="heibei" class="form-control" value="1" onchange="mitsumori_simulation('heibei','heibei');" /><span class="input-group-text">平米</span>
  849.                                 </div>
  850.                               </div>
  851.                               <div class="col-4">
  852.                                 <button type="button" id="op_btn_1" class="btn btn-info" onclick="heibei(+1);">＋</button>
  853.                                 <button type="button" id="op_btn_2" class="btn btn-danger" onclick="heibei(-1);">ー</button>
  854.                               </div>
  855.                             </div>
  858.                         {% endif %}
  860.                         <!-- 9: 商品のみ購入 -->
  865.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">取り付け工事のご希望に関してお答えください。</label></div>
  866.                         {% for i in 0..10 %}
  867.                             {% if op and op|length >= i+1 %}
  868.                             {% if op[i]['name'] %}
  869.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  870.                               <label class="col-4 col-form-label">{{ op[i]['name'] }}</label>
  871.                               <div class="col-8">
  872.                                 {{ op[i]['comment'] }}
  873.                                 <div class="form-group clearfix">
  874.                                   <div class="icheck-danger d-inline">
  875.                                     <input type="radio" name="op{{ i }}" id="op{{ i }}_1" value="{{ op[i]['on'] }}" {% if mitsumori_json and mitsumori_json.op[i] == op[i]['on'] %}checked{% endif %} onclick="mitsumori_simulation('op{{ i }}','op{{ i }}_1');cartbutton('{{ op[i]['on'] }}');"><label for="op{{ i }}_1">{{ op[i]['on'] }}</label>
  876.                                   </div>
  877.                                 </div>
  878.                                 <div class="form-group clearfix">
  879.                                   <div class="icheck-danger d-inline">
  880.                                     <input type="radio" name="op{{ i }}" id="op{{ i }}_2" value="{{ op[i]['off'] }}" {% if mitsumori_json and mitsumori_json.op[i] == op[i]['off'] %}checked{% endif %} onclick="mitsumori_simulation('op{{ i }}','op{{ i }}_2');cartbutton('{{ op[i]['off'] }}');"><label for="op{{ i }}_2">{{ op[i]['off'] }}</label>
  881.                                   </div>
  882.                                 </div>
  883.                               </div>
  884.                             </div>
  885.                             {% endif %}
  886.                             {% endif %}
  887.                         {% endfor %}
  889.                       </div>
  890.                       <!-- /.card-body -->
  891.                     </div>
  894.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  895.                         {% if Product.stock_find %}
  896.                             <div class="ec-productRole__actions">
  897.                                 {% if form.classcategory_id1 is defined %}
  898.                                     <div class="ec-select">
  899.                                         {{ form_row(form.classcategory_id1) }}
  900.                                         {{ form_errors(form.classcategory_id1) }}
  901.                                     </div>
  902.                                     {% if form.classcategory_id2 is defined %}
  903.                                         <div class="ec-select">
  904.                                             {{ form_row(form.classcategory_id2) }}
  905.                                             {{ form_errors(form.classcategory_id2) }}
  906.                                         </div>
  907.                                     {% endif %}
  908.                                 {% endif %}
  909.                                 <div class="ec-numberInput">
  910.                                     {{ form_widget(form.quantity, { type: 'hidden' }) }}
  911.                                     {{ form_errors(form.quantity) }}
  912.                                 </div>
  913.                             </div>
  915.                             {% if ProductClass.SaleType.id != 9 %}
  916.                             <div class="ec-productRole__btn mt-3">
  917.                                 <button type="submit" id="cart_btn" class="ec-blockBtn--action add-cart" style="display:none;">カートに入れる</button>
  918.                             </div>
  919.                             {% else %}
  920.                             <div class="ec-productRole__btn mt-3">
  921.                                 <button type="submit" id="cart_btn" class="ec-blockBtn--action add-cart">
  922.                                     {{ 'カートに入れる'|trans }}
  923.                                 </button>
  924.                             </div>
  925.                             {% endif %}
  926.                         {% else %}
  927.                             <div class="ec-productRole__btn">
  928.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  929.                                     {{ 'ただいま品切れ中です。'|trans }}
  930.                                 </button>
  931.                             </div>
  932.                         {% endif %}
  933.                         <div class="ec-productRole__btn">
  934.                             <button type="button" class="ec-blockBtn--cancel" onclick="contact_form({{ Product.id }});">無料現地調査へ進む</button>
  935.                         </div>
  936.                         {{ form_rest(form) }}
  937.                     </form>
  938.                     <div class="ec-modal">
  939.                         <div class="ec-modal-overlay">
  940.                             <div class="ec-modal-wrap">
  941.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  942.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  943.                                 <div class="ec-modal-box">
  944.                                     <div class="ec-role">
  945.                                         <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  946.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  947.                                     </div>
  948.                                 </div>
  949.                             </div>
  950.                         </div>
  951.                     </div>
  952.                     <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  953.                     </div>
  954.                 </div>
  955.                 <div class="card col-12 collapsed-card sticky-top float-right">
  956.                     <div class="card-header">
  957.                       <h3 class="card-title">現在のお見積り額</h3>
  958.                       <div class="card-tools">
  959.                         <span class="float-left" id="mitsumori_message">395000円</span>
  960.                         <button type="button" class="btn btn-tool" data-card-widget="collapse">
  961.                           <i class="fas fa-plus"></i>
  962.                         </button>
  963.                       </div>
  964.                     </div>
  965.                     <div class="card-body p-0">
  966.                       <ul class="nav nav-pills flex-column">
  967.                         <li class="nav-item active">
  968.                           <a class="nav-link">
  969.                             <i class="far fa-file-alt"></i> 合計(工事費・税込)
  970.                             <span class="float-right" id="mitsumori_goukei">395,000円</span>
  971.                           </a>
  972.                         </li>
  973.                         <li class="nav-item active">
  974.                           <a class="nav-link">
  975.                             <i class="far fa-file-alt"></i> 商品価格
  976.                             <span class="float-right" id="mitsumori_price">307,008円</span>
  977.                           </a>
  978.                         </li>
  979.                         <li class="nav-item">
  980.                           <a class="nav-link">
  981.                             &nbsp;&nbsp;<i class="far fa-file-alt"></i> カタログ価格
  982.                             <span class="float-right" id="maker_price">479,700円</span>
  983.                           </a>
  984.                         </li>
  985.                         <li class="nav-item">
  986.                           <a class="nav-link">
  987.                             &nbsp;&nbsp;<i class="far fa-file-alt"></i> お値引き
  988.                             <span class="float-right" id="mitsumori_off">-172,692円</span>
  989.                           </a>
  990.                         </li>
  991.                         <li class="nav-item">
  992.                           <a class="nav-link">
  993.                             <i class="far fa-file-alt"></i> 基本工事費
  994.                             <span class="float-right" id="mitsumori_ct">53,250円</span>
  995.                           </a>
  996.                         </li>
  997.                         <li class="nav-item">
  998.                           <a class="nav-link">
  999.                             <i class="far fa-file-alt"></i> 施工オプション
  1000.                             <span class="float-right"id="mitsumori_option">6,297円</span>
  1001.                           </a>
  1002.                         </li>
  1003.                       </ul>
  1004.                     </div>
  1005.                     <div class="card-footer">
  1006.                         <button type="button" id="mitsumori_btn" class="btn btn-info" data-toggle="modal" data-target="#modal-mitsumori">
  1007.                           見積書表示
  1008.                         </button>
  1009.                         <button id="contact" class="btn btn-info" onclick="contact_form({{ Product.id }});">無料現地調査へ進む</button>
  1011.                     </div>
  1012.                 </div>
  1013.             </div>
  1015.         </div>
  1017.     </div>
  1019.   <div class="modal" id="modal-mitsumori">
  1020.     <div class="modal-dialog modal-mitsumori" style="max-width:1000px">
  1021.       <div class="modal-content">
  1022.         <div class="modal-header">
  1023.           <h4 class="modal-title">お見積書</h4>
  1024.           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1025.             <span aria-hidden="true">&times;</span>
  1026.           </button>
  1027.         </div>
  1028.         <div class="modal-body">
  1029.             <div class="invoice p-3 mb-5" style="max-width:1000px; margin:auto;">
  1030.               <!-- title row -->
  1031.               <div class="row">
  1032.                 <div class="col-12">
  1033.                   <h2>概算お見積書 
  1034.                     <small class="float-right" style="font-size:14px;">発行日: 2025/03/14</small>
  1035.                   </h2>
  1036.                 </div>
  1037.                 <!-- /.col -->
  1038.               </div>
  1039.               <!-- info row -->
  1040.               <div class="row invoice-info">
  1041.                 <div class="col-sm-8 invoice-col">
  1042.                   <h3>お客様</h3>
  1043.                   <span>下記の通り、お見積もり申し上げます。</span>
  1044.                   <br />
  1045.                   <br / >
  1046.                   <br />
  1047.                   <h2>お見積金額：　<span id="mitsumori_kei">399,080円</span></h2>
  1048.                   <span>
  1049.                     <br/>
  1050.                     <br/>
  1051.                     <br/>
  1052.                     <br/>
  1053.                   </span>
  1054.                 </div>
  1055.                 <div class="col-sm-4 invoice-col">
  1056.                   <p>
  1057.                     <img alt="" src="/html/user_data/js/images/logo.png" style="width: 260px; max-width: 100%; max-height: 10mm;">
  1058.                   </p>
  1059.                   <p>有限会社プラス</p>
  1060.                   <p>〒400-0334</p>
  1061.                   <p>山梨県南アルプス市藤田1450番地2</p>
  1062.                   <p>TEL: 055-284-6480</p>
  1063.                   <img alt="" src="/html/user_data/js/images/seal.svg" style="z-index: 2; position: absolute; width: 21mm; left: 58mm; top: 36mm;">
  1064.                 </div>
  1065.                 <!-- /.col -->
  1066.                 <!-- /.col -->
  1067.               </div>
  1068.               <!-- /.row -->
  1069.               <!-- Table row -->
  1070.               <div class="row">
  1071.                 <div class="col-12 table-responsive">
  1072.                   <table class="table table-striped">
  1073.                     <thead>
  1074.                       <tr>
  1075.                         <th>項目</th>
  1076.                         <th>数量</th>
  1077.                         <th>単位</th>
  1078.                         <th>単価</th>
  1079.                         <th>小計</th>
  1080.                       </tr>
  1081.                     </thead>
  1082.                     <tbody>
  1083.                       <tr>
  1084.                         <td>プレーンルーフ 600タイプ 1台用 単体セット</td>
  1085.                         <td>1</td>
  1086.                         <td>式</td>
  1087.                         <td id="mitsumori_price_01">352,800</td>
  1088.                         <td id="mitsumori_price_02">352,800</td>
  1089.                       </tr>
  1090.                       <tr>
  1091.                         <td>基本工事費</td>
  1092.                         <td>1</td>
  1093.                         <td>式</td>
  1094.                         <td id="mitsumori_ct_01">10,000</td>
  1095.                         <td id="mitsumori_ct_02">10,000</td>
  1096.                       </tr>
  1097.                       <tr>
  1098.                         <td>残土・ガラ処理</td>
  1099.                         <td>1</td>
  1100.                         <td>式</td>
  1101.                         <td>0円</td>
  1102.                         <td></td>
  1103.                       </tr>
  1104.                       <tr>
  1105.                         <td>　</td>
  1106.                         <td></td>
  1107.                         <td></td>
  1108.                         <td></td>
  1109.                         <td></td>
  1110.                       </tr>
  1111.                     </tbody>
  1112.                   </table>
  1113.                 </div>
  1114.                 <!-- /.col -->
  1115.               </div>
  1116.               <!-- /.row -->
  1117.               <div class="row">
  1118.                 <!-- accepted payments column -->
  1119.                 <div class="col-6">
  1120.                   <p class="lead">お支払い方法</p>
  1121.                   <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">銀行振込、クレジットカード決済、PAYPAY決済
  1122.                     <br>銀行振込：山梨中央銀行　白根支店　普通口座　391402
  1123.                     <br>※商品代金と工事代金の総額が金100万円（税込）を超える場合、着手金として代金の半額をご契約後お支払いいただきます。 
  1124.                   </p>
  1125.                 </div>
  1126.                 <!-- /.col -->
  1127.                 <div class="col-6">
  1128.                   <div class="table-responsive">
  1129.                     <table class="table">
  1130.                       <tbody>
  1131.                         <tr>
  1132.                           <th style="width:50%">小計:</th>
  1133.                           <td id="mitsumori_shoukei">362,800</td>
  1134.                         </tr>
  1135.                         <tr>
  1136.                           <th>消費税 (10%)</th>
  1137.                           <td id="mitsumori_tax">36,280</td>
  1138.                         </tr>
  1139.                         <tr>
  1140.                           <th>合計:</th>
  1141.                           <td id="mitsumori_goukei_02">399,080</td>
  1142.                         </tr>
  1143.                       </tbody>
  1144.                     </table>
  1145.                   </div>
  1146.                 </div>
  1147.                 <!-- /.col -->
  1148.               </div>
  1149.               <!-- /.row -->
  1150.             </div>
  1151.         </div>
  1152.         <div class="modal-footer justify-content-between">
  1153.                   <button type="button" class="btn btn-primary float-right" style="margin-right: 5px;">
  1154.                     <i class="fas fa-download"></i>PDF出力
  1155.                   </button>
  1156.           <button type="button" class="btn btn-info" onclick="contact_form({{ Product.id }});">無料現地調査へ進む</button>
  1157.         </div>
  1158.       </div>
  1159.       <!-- /.modal-content -->
  1160.     </div>
  1161.     <!-- /.modal-dialog -->
  1162.   </div>
  1163.   <!-- /.modal -->
  1167. {% endblock %}