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

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'product_page' %}
  15. {% block stylesheet %}
  16.     <style>
  18.         .slick-slider {
  19.             margin-bottom: 10px;
  20.             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 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 || pw == "指定なし") && (pd == el.d || pd == "指定なし") && (ph == el.h || ph == "指定なし") && (pm == el.m || pm == "指定なし") && (pc == el.c || pc == "指定なし")){
  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)) + "円");
  385.                     }
  386.                   }
  387.                 });    
  390.                 var mitsumori_json = { "mitsumori_goukei": $('#mitsumori_goukei').text(),
  391.                                         "mitsumori_goukei_02": $('#mitsumori_goukei_02').text(),
  392.                                         "mitsumori_price": $('#mitsumori_price').text(),
  393.                                         "maker_price": $('#maker_price').text(),
  394.                                         "mitsumori_off": $('#mitsumori_off').text(),
  395.                                         "mitsumori_ct": $('#mitsumori_ct').text(),
  396.                                         "mitsumori_option": $('#mitsumori_option').text(),
  397.                                         "product_id": {{ Product.id }},
  398.                                         "pw": pw,
  399.                                         "pd": pd,
  400.                                         "ph": ph,
  401.                                         "pm": pm,
  402.                                         "pc": pc,
  403.                                         "op": [op0,op1,op2,op3,op4,op5,op6,op7,op8,op9,op10] };
  405.                 $('#mitsumori_json').val(JSON.stringify(mitsumori_json));
  406.                 
  407.             }
  408.             
  410.         }
  412.         {% if color and color|length == 1 %}
  413.             pc = "指定なし";
  414.             {% for cc in color %}{% if cc and cc['name'] %} pc = "{{ cc['name'] }}"; {% endif %}{% endfor %}
  415.         {% endif %}
  417.         {% if p_w and (p_w|length == 1 or p_w|join == "") %}
  418.             pw = "指定なし";
  419.             {% for pw in p_w %}{% if pw %} pw = "{{ pw }}"; {% endif %}{% endfor %}
  420.         {% endif %}
  422.         {% if p_d and (p_d|length == 1 or p_d|join == "") %}
  423.             pd = "指定なし";
  424.             {% for pd in p_d %}{% if pd %} pd = "{{ pd }}"; {% endif %}{% endfor %}
  425.         {% endif %}
  427.         {% if p_h and (p_h|length == 1 or p_h|join == "") %}
  428.             ph = "指定なし";
  429.             {% for ph in p_h %}{% if ph %} ph = "{{ ph }}"; {% endif %}{% endfor %}
  430.         {% endif %}
  432.         {% if p_m and (p_m|length == 1 or p_m|join == "") %}
  433.             pm = "指定なし";
  434.             {% for pm in p_m %}{% if pm %} pm = "{{ pm }}"; {% endif %}{% endfor %}
  435.         {% endif %}
  437.         mitsumori_simulation("","");
  438.         function contact_form(product_id){
  439.             $('#form1').attr('action', '{{ url('contact', {product:Product.id}) }}');
  440.             $('#form1').submit();
  441.         }
  443.         function maisu(mai){
  444.             $('#maisu').val(parseInt($('#maisu').val()) + mai);
  445.             if(parseInt($('#maisu').val()) < 3){ $('#maisu').val(3); }
  446.             if(parseInt($('#maisu').val()) > 20){ $('#maisu').val(20); }
  447.             $('#quantity').val($('#maisu').val());
  448.         }
  450.         function madoset(mai){
  451.             $('#set').val(parseInt($('#set').val()) + mai);
  452.             if(parseInt($('#set').val()) < 1){ $('#set').val(1); }
  453.             if(parseInt($('#set').val()) > 20){ $('#set').val(20); }
  454.             $('#quantity').val($('#set').val());
  455.         }
  458.         function heibei(bei){
  459.             $('#heibei').val(parseInt($('#heibei').val()) + dai);
  460.             if(parseInt($('#heibei').val()) < 1){ $('#heibei').val(1); }
  461.             if(parseInt($('#heibei').val()) > 100){ $('#heibei').val(100); }
  462.             $('#quantity').val($('#heibei').val());
  463.         }
  464.         function daisu(dai){
  465.             $('#daisu').val(parseInt($('#daisu').val()) + dai);
  466.             if(parseInt($('#daisu').val()) < 1){ $('#daisu').val(1); }
  467.             if(parseInt($('#daisu').val()) > 10){ $('#daisu').val(10); }
  468.             $('#quantity').val($('#daisu').val());
  469.         }
  471.     </script>
  472.     <script type="application/ld+json">
  473.     {
  474.         "@context": "https://schema.org/",
  475.         "@type": "Product",
  476.         "name": "{{ Product.name }}",
  477.         "image": [
  478.             {% for img in Product.ProductImage %}
  479.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  481.             {% else %}
  482.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  483.             {% endfor %}
  484.         ],
  485.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  486.         {% if Product.code_min %}
  487.         "sku": "{{ Product.code_min }}",
  488.         {% endif %}
  489.         "offers": {
  490.             "@type": "Offer",
  491.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  492.             "priceCurrency": "{{ eccube_config.currency }}",
  493.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  494.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  495.         }
  496.     }
  497.     </script>
  499. {% endblock %}
  501. {% block main %}
  502.     <div class="ec-productRole" style="margin-top:20px;">
  503.         <div class="ec-grid2">
  504.             <div class="ec-grid2__cell">
  505.                 <div class="ec-sliderItemRole">
  506.                     {# 商品名 #}
  507.                     <div class="ec-productRole__title">
  508.                         <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  509.                     </div>
  510.                     {% if BaseInfo.option_favorite_product %}
  511.                      <div style="position:relative;top: 20px;left: 10px;z-index:100;">
  512.                         {% if is_favorite == false %}
  513.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  514.                            <button type="submit" id="favorite" class="favorite">&#9825;</button>
  515.                         </form>
  516.                         {% else %}
  517.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  518.                            <button type="submit" id="favorite" class="favorite" style="color:red;">&#9829;</button>
  519.                         </form>
  520.                         {% endif %}
  521.                      </div>
  522.                     {% endif %}
  523.                     <div class="item_visual">
  524.                         {% for ProductImage in Product.ProductImage %}
  525.                             <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>
  526.                         {% else %}
  527.                             <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>
  528.                         {% endfor %}
  529.                     </div>
  530.                     <div class="item_nav">
  531.                         {% for ProductImage in Product.ProductImage %}
  532.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="80" height="80" loading="lazy"></div>
  533.                         {% endfor %}
  534.                     </div>
  536.                 </div>
  538.             </div>
  540.             <div class="ec-grid2__cell2">
  541.                 <div class="ec-productRole__profile" >
  542.                     {# 関連カテゴリ #}
  543.                     {% if Product.ProductCategories is not empty %}
  544.                         <div class="ec-productRole__category" style="padding:10px 0;">
  545.                             {% for ProductCategory in Product.ProductCategories %}
  546.                                 <ul>
  547.                                     <li>
  548.                                         {% for Category in ProductCategory.Category.path %}
  549.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  550.                                             <span>＞</span>{% endif -%}
  551.                                         {% endfor %}
  552.                                     </li>
  553.                                 </ul>
  554.                             {% endfor %}
  555.                         </div>
  556.                     {% endif %}
  557.                     {# 販売価格 #}
  558.                     <div class="ec-productRole__price">
  559.                         <span style="color:black;font-size:15px;">工事費込み価格</span>
  560.                         {% if Product.hasProductClass -%}
  561.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  562.                                 <div class="ec-price">
  563.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  564.                                     <span class="ec-price__tax">({{ '税込'|trans }})～</span>
  565.                                 </div>
  566.                             {% else %}
  567.                                 <div class="ec-price">
  568.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  569.                                     <span class="ec-price__tax">({{ '税込'|trans }})</span>
  570.                                 </div>
  571.                             {% endif %}
  572.                         {% else %}
  573.                             <div class="ec-price">
  574.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  575.                                     <span class="ec-price__tax">({{ '税込'|trans }})～</span>
  576.                             </div>
  577.                         {% endif %}
  578.                     </div>
  579.                     {# タグ #}
  580.                     <ul class="ec-productRole__tags">
  581.                         {% for Tag in Product.Tags %}
  582.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  583.                         {% endfor %}
  584.                     </ul>
  585.                     {# 商品コード #}
  586.                     {% if Product.code_min is not empty %}
  587.                         <div class="ec-productRole__code">
  588.                             {{ '商品コード'|trans }}： <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  589.                         </div>
  590.                     {% endif %}
  592.                     <div class="ec-productRole__description">
  593.                         <div class="ec-rectHeading">
  594.                             <h4>製品情報</h4>
  595.                         </div>
  596.                         {{ Product.sales_infomation|raw|nl2br }}
  597.                     </div>
  600.                     <div class="card card-danger" style="clear:both;margin:1px;">
  601.                       <div class="card-header">
  602.                         <h3 class="card-title">見積シミュレーション</h3>
  603.                       </div>
  604.                       <div class="card-body p-2">
  606.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">この商品のタイプを選択してください。</label></div>
  607.                         {% set type1 = getProduct_field(Product.id,"related_name1") %}
  608.                         {% if type1 and related_product1 and related_product1|length %}
  609.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  610.                           <label class="col-4 col-form-label mt-2">{{ type1 }}</label>
  611.                           <div class="col-8 mt-2">
  612.                             <div class="form-group clearfix">
  613.                               {% for rp_id, rp_name in related_product1 %}
  614.                               <div class="icheck-danger d-inline">
  615.                                 <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>
  616.                               </div>
  617.                               {% endfor %}
  618.                             </div>
  619.                           </div>
  620.                         </div>
  621.                         {% endif %}
  623.                         {% set type2 = getProduct_field(Product.id,"related_name2") %}
  624.                         {% if type2 and related_product2 and related_product2|length %}
  625.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  626.                           <label class="col-4 col-form-label mt-2">{{ type2 }}</label>
  627.                           <div class="col-8 mt-2">
  628.                             <div class="form-group clearfix">
  629.                               {% for rp_id, rp_name in related_product2 %}
  630.                               <div class="icheck-danger d-inline">
  631.                                 <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>
  632.                               </div>
  633.                               {% endfor %}
  634.                             </div>
  635.                           </div>
  636.                         </div>
  637.                         {% endif %}
  639.                         {% set type3 = getProduct_field(Product.id,"related_name3") %}
  640.                         {% if type3 and related_product3 and related_product3|length %}
  641.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  642.                           <label class="col-4 col-form-label mt-2">{{ type3 }}</label>
  643.                           <div class="col-8 mt-2">
  644.                             <div class="form-group clearfix">
  645.                               {% for rp_id, rp_name in related_product3 %}
  646.                               <div class="icheck-danger d-inline">
  647.                                 <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>
  648.                               </div>
  649.                               {% endfor %}
  650.                             </div>
  651.                           </div>
  652.                         </div>
  653.                         {% endif %}
  656.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">この商品のオプションを選択してください。</label></div>
  659.                         {% if color and color|length %}
  660.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  661.                           <label class="col-4 col-form-label mt-2">カラー</label>
  662.                           <div class="col-8 mt-2">
  663.                             <div class="form-group clearfix">
  664.                             {% set idx = 0 %}
  665.                             {% for cc in color %}
  666.                               {% if cc and cc['name'] %}
  667.                               {% set idx = idx + 1 %}
  668.                               <div class="icheck-danger d-inline">
  669.                                 <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>
  670.                               </div>
  671.                               {% endif %}
  672.                             {% endfor %}
  673.                             </div>
  674.                           </div>
  675.                         </div>
  676.                         {% endif %}
  677.                         {% if p_w and p_w|length and p_w|join != "" %}
  678.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  679.                           <label class="col-4 col-form-label">幅</label>
  680.                           <div class="col-8">
  681.                             <div class="form-group clearfix">
  682.                             {% set idx = 0 %}
  683.                             {% for pw in p_w %}
  684.                               {% if pw %}
  685.                               {% set idx = idx + 1 %}
  686.                               <div class="icheck-danger d-inline">
  687.                                 <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>
  688.                               </div>
  689.                               {% endif %}
  690.                             {% endfor %}
  691.                             </div>
  692.                           </div>
  693.                         </div>
  694.                         {% endif %}
  695.                         {% if p_d and p_d|length and p_d|join != "" %}
  696.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  697.                           <label class="col-4 col-form-label">奥行き</label>
  698.                           <div class="col-8">
  699.                             <div class="form-group clearfix">
  700.                             {% set idx = 0 %}
  701.                             {% for pd in p_d %}
  702.                               {% if pd %}
  703.                               {% set idx = idx + 1 %}
  704.                               <div class="icheck-danger d-inline">
  705.                                 <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>
  706.                               </div>
  707.                               {% endif %}
  708.                             {% endfor %}
  709.                             </div>
  710.                           </div>
  711.                         </div>
  712.                         {% endif %}
  713.                         {% if p_h and p_h|length and p_h|join != "" %}
  714.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  715.                           <label class="col-4 col-form-label">高さ</label>
  716.                           <div class="col-8">
  717.                             <div class="form-group clearfix">
  718.                             {% set idx = 0 %}
  719.                             {% for ph in p_h %}
  720.                               {% if ph %}
  721.                               {% set idx = idx + 1 %}
  722.                               <div class="icheck-danger d-inline">
  723.                                 <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>
  724.                               </div>
  725.                               {% endif %}
  726.                             {% endfor %}
  727.                             </div>
  728.                           </div>
  729.                         </div>
  730.                         {% endif %}
  731.                         {% if p_m and p_m|length and p_m|join != "" %}
  732.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  733.                           <label class="col-4 col-form-label">素材</label>
  734.                           <div class="col-8">
  735.                             <div class="form-group clearfix">
  736.                             {% set idx = 0 %}
  737.                             {% for pm in p_m %}
  738.                               {% if pm %}
  739.                               {% set idx = idx + 1 %}
  740.                               <div class="icheck-danger d-inline">
  741.                                 <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>
  742.                               </div>
  743.                               {% endif %}
  744.                             {% endfor %}
  745.                             </div>
  746.                           </div>
  747.                         </div>
  748.                         {% endif %}
  750.                         <!-- 1: 施工見積（通常）-->
  751.                         {% if ProductClass.SaleType.id == 1 %}
  754.                         {% endif %}
  756.                         <!-- 2: 施工見積（補助金・窓)-->
  757.                         {% if ProductClass.SaleType.id == 2 %}
  758.                             <!-- 幅・高さの数値指定 -->
  760.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  761.                               <label class="col-4 col-form-label">窓枠</label>
  762.                               <div class="col-4">
  763.                                 <div class="input-group">
  764.                                    <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>
  765.                                 </div>
  766.                               </div>
  767.                               <div class="col-4">
  768.                                 <div class="input-group mb-3">
  769.                                    <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>
  770.                                 </div>
  771.                               </div>
  772.                             </div>
  774.                             <!-- 枚数（入力）の指定 -->
  775.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  776.                               <label class="col-4 col-form-label">セット数</label>
  777.                               <div class="col-4 mb-3">
  778.                                 <div class="input-group">
  779.                                    <input type="text" name="set" id="set" class="form-control" value="1" onchange="mitsumori_simulation('set','set');" /><span class="input-group-text">セット</span>
  780.                                 </div>
  781.                               </div>
  782.                               <div class="col-4">
  783.                                 <button type="button" id="op_btn_1" class="btn btn-info" onclick="madoset(+1);">＋</button>
  784.                                 <button type="button" id="op_btn_2" class="btn btn-danger" onclick="madoset(-1);">ー</button>
  785.                               </div>
  786.                             
  787.                         {% endif %}
  789.                         <!-- 3: 施工見積（物置・ゴミステーション）-->
  790.                         {% if ProductClass.SaleType.id == 3 %}
  791.                             <!-- 幅・奥行き・高さ -->
  792.                             <!-- 台数の指定 -->
  794.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  795.                               <label class="col-4 col-form-label">台数</label>
  796.                               <div class="col-4">
  797.                                 <div class="input-group mb-3">
  798.                                    <input type="text" name="daisu" id="daisu" class="form-control" value="1" onchange="mitsumori_simulation('daisu','daisu');" /><span class="input-group-text">台</span>
  799.                                 </div>
  800.                               </div>
  801.                               <div class="col-4">
  802.                                 <button type="button" id="op_btn_1" class="btn btn-info" onclick="daisu(+1);">＋</button>
  803.                                 <button type="button" id="op_btn_2" class="btn btn-danger" onclick="daisu(-1);">ー</button>
  804.                               </div>
  805.                             </div>
  807.                         {% endif %}
  809.                         <!-- 4: 施工見積（フェンス・組み立て式）-->
  810.                         {% if ProductClass.SaleType.id == 4 %}
  811.                             <!-- 枚数（入力）の指定 -->
  812.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  813.                               <label class="col-4 col-form-label">枚数</label>
  814.                               <div class="col-4 mb-3">
  815.                                 <div class="input-group">
  816.                                    <input type="text" name="maisu" id="maisu" class="form-control" value="3" onchange="mitsumori_simulation('daisu','daisu');" /><span class="input-group-text">枚</span>
  817.                                 </div>
  818.                               </div>
  819.                               <div class="col-4">
  820.                                 <button type="button" id="op_btn_1" class="btn btn-info" onclick="maisu(+1);">＋</button>
  821.                                 <button type="button" id="op_btn_2" class="btn btn-danger" onclick="maisu(-1);">ー</button>
  822.                               </div>
  823.                             </div>
  825.                         {% endif %}
  827.                         <!-- 5: 施工見積（ウッドデッキ・タイルデッキ）-->
  828.                         {% if ProductClass.SaleType.id == 5 %}
  831.                         {% endif %}
  832.                         <!-- 6: 施工見積（芝生・枚数・数量買い）-->
  833.                         {% if ProductClass.SaleType.id == 6 %}
  834.                             <!-- 平米（入力）の指定 -->
  835.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  836.                               <label class="col-4 col-form-label">枚数</label>
  837.                               <div class="col-4">
  838.                                 <div class="input-group">
  839.                                    <input type="text" name="heibei" id="heibei" class="form-control" value="1" onchange="mitsumori_simulation('heibei','heibei');" /><span class="input-group-text">平米</span>
  840.                                 </div>
  841.                               </div>
  842.                               <div class="col-4">
  843.                                 <button type="button" id="op_btn_1" class="btn btn-info" onclick="heibei(+1);">＋</button>
  844.                                 <button type="button" id="op_btn_2" class="btn btn-danger" onclick="heibei(-1);">ー</button>
  845.                               </div>
  846.                             </div>
  849.                         {% endif %}
  851.                         <!-- 9: 商品のみ購入 -->
  856.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">取り付け工事のご希望に関してお答えください。</label></div>
  857.                         {% for i in 0..10 %}
  858.                             {% if op and op|length >= i+1 %}
  859.                             {% if op[i]['name'] %}
  860.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  861.                               <label class="col-4 col-form-label">{{ op[i]['name'] }}</label>
  862.                               <div class="col-8">
  863.                                 {{ op[i]['comment'] }}
  864.                                 <div class="form-group clearfix">
  865.                                   <div class="icheck-danger d-inline">
  866.                                     <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');"><label for="op{{ i }}_1">{{ op[i]['on'] }}</label>
  867.                                   </div>
  868.                                 </div>
  869.                                 <div class="form-group clearfix">
  870.                                   <div class="icheck-danger d-inline">
  871.                                     <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');"><label for="op{{ i }}_2">{{ op[i]['off'] }}</label>
  872.                                   </div>
  873.                                 </div>
  874.                               </div>
  875.                             </div>
  876.                             {% endif %}
  877.                             {% endif %}
  878.                         {% endfor %}
  880.                       </div>
  881.                       <!-- /.card-body -->
  882.                     </div>
  885.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  886.                         {% if Product.stock_find %}
  887.                             <div class="ec-productRole__actions">
  888.                                 {% if form.classcategory_id1 is defined %}
  889.                                     <div class="ec-select">
  890.                                         {{ form_row(form.classcategory_id1) }}
  891.                                         {{ form_errors(form.classcategory_id1) }}
  892.                                     </div>
  893.                                     {% if form.classcategory_id2 is defined %}
  894.                                         <div class="ec-select">
  895.                                             {{ form_row(form.classcategory_id2) }}
  896.                                             {{ form_errors(form.classcategory_id2) }}
  897.                                         </div>
  898.                                     {% endif %}
  899.                                 {% endif %}
  900.                                 <div class="ec-numberInput">
  901.                                     {{ form_widget(form.quantity, { type: 'hidden' }) }}
  902.                                     {{ form_errors(form.quantity) }}
  903.                                 </div>
  904.                             </div>
  906.                         {% else %}
  907.                             <div class="ec-productRole__btn">
  908.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  909.                                     {{ 'ただいま品切れ中です。'|trans }}
  910.                                 </button>
  911.                             </div>
  912.                         {% endif %}
  913.                         <div class="ec-productRole__btn mt-3">
  914.                            <button type="submit" id="cart_btn" class="ec-blockBtn--action add-cart">施工検討リストに入れる</button>
  915.                         </div>
  916.                         {{ form_rest(form) }}
  917.                     </form>
  918.                     <div class="ec-modal">
  919.                         <div class="ec-modal-overlay">
  920.                             <div class="ec-modal-wrap">
  921.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  922.                                 <div id="ec-modal-header" class="text-center">{{ '施工検討リストに追加しました。'|trans }}</div>
  923.                                 <div class="ec-modal-box">
  924.                                     <div class="ec-role">
  925.                                         <span class="ec-inlineBtn--cancel">{{ '商品検索を続ける'|trans }}</span>
  926.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ '施工検討リストへ進む'|trans }}</a>
  927.                                     </div>
  928.                                 </div>
  929.                             </div>
  930.                         </div>
  931.                     </div>
  932.                     <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  933.                     </div>
  934.                 </div>
  935.                 <div class="card col-12 collapsed-card sticky-top float-right">
  936.                     <div class="card-header">
  937.                       <h3 class="card-title">現在のお見積り額</h3>
  938.                       <div class="card-tools">
  939.                         <span class="float-left" id="mitsumori_message">395000円</span>
  940.                         <button type="button" class="btn btn-tool" data-card-widget="collapse">
  941.                           <i class="fas fa-plus"></i>
  942.                         </button>
  943.                       </div>
  944.                     </div>
  945.                     <div class="card-body p-0">
  946.                       <ul class="nav nav-pills flex-column">
  947.                         <li class="nav-item active">
  948.                           <a class="nav-link">
  949.                             <i class="far fa-file-alt"></i> 合計(工事費・税込)
  950.                             <span class="float-right" id="mitsumori_goukei">395,000円</span>
  951.                           </a>
  952.                         </li>
  953.                         <li class="nav-item active">
  954.                           <a class="nav-link">
  955.                             <i class="far fa-file-alt"></i> 商品価格
  956.                             <span class="float-right" id="mitsumori_price">307,008円</span>
  957.                           </a>
  958.                         </li>
  959.                         <li class="nav-item">
  960.                           <a class="nav-link">
  961.                             &nbsp;&nbsp;<i class="far fa-file-alt"></i> カタログ価格
  962.                             <span class="float-right" id="maker_price">479,700円</span>
  963.                           </a>
  964.                         </li>
  965.                         <li class="nav-item">
  966.                           <a class="nav-link">
  967.                             &nbsp;&nbsp;<i class="far fa-file-alt"></i> お値引き
  968.                             <span class="float-right" id="mitsumori_off">-172,692円</span>
  969.                           </a>
  970.                         </li>
  971.                         <li class="nav-item">
  972.                           <a class="nav-link">
  973.                             <i class="far fa-file-alt"></i> 基本工事費
  974.                             <span class="float-right" id="mitsumori_ct">53,250円</span>
  975.                           </a>
  976.                         </li>
  977.                         <li class="nav-item">
  978.                           <a class="nav-link">
  979.                             <i class="far fa-file-alt"></i> 施工オプション
  980.                             <span class="float-right"id="mitsumori_option">6,297円</span>
  981.                           </a>
  982.                         </li>
  983.                       </ul>
  984.                     </div>
  985.                     <div class="card-footer">
  986.                         <button type="button" id="mitsumori_btn" class="btn btn-info" data-toggle="modal" data-target="#modal-mitsumori">
  987.                           見積書表示
  988.                         </button>
  989.                         <button id="contact" class="btn btn-info" onclick="contact_form({{ Product.id }});">無料現地調査へ進む</button>
  991.                     </div>
  992.                 </div>
  993.             </div>
  995.         </div>
  997.     </div>
  999.   <div class="modal" id="modal-mitsumori">
  1000.     <div class="modal-dialog modal-mitsumori" style="max-width:1000px">
  1001.       <div class="modal-content">
  1002.         <div class="modal-header">
  1003.           <h4 class="modal-title">お見積書</h4>
  1004.           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1005.             <span aria-hidden="true">&times;</span>
  1006.           </button>
  1007.         </div>
  1008.         <div class="modal-body">
  1009.             <div class="invoice p-3 mb-5" style="max-width:1000px; margin:auto;">
  1010.               <!-- title row -->
  1011.               <div class="row">
  1012.                 <div class="col-12">
  1013.                   <h2>概算お見積書 
  1014.                     <small class="float-right" style="font-size:14px;">発行日: 2025/03/14</small>
  1015.                   </h2>
  1016.                 </div>
  1017.                 <!-- /.col -->
  1018.               </div>
  1019.               <!-- info row -->
  1020.               <div class="row invoice-info">
  1021.                 <div class="col-sm-8 invoice-col">
  1022.                   <h3>お客様</h3>
  1023.                   <span>下記の通り、お見積もり申し上げます。</span>
  1024.                   <br />
  1025.                   <br / >
  1026.                   <br />
  1027.                   <h2>お見積金額：　<span id="mitsumori_kei">399,080円</span></h2>
  1028.                   <span>
  1029.                     <br/>
  1030.                     <br/>
  1031.                     <br/>
  1032.                     <br/>
  1033.                   </span>
  1034.                 </div>
  1035.                 <div class="col-sm-4 invoice-col">
  1036.                   <p>
  1037.                     <img alt="" src="/html/user_data/js/images/logo.png" style="width: 260px; max-width: 100%; max-height: 10mm;">
  1038.                   </p>
  1039.                   <p>有限会社プラス</p>
  1040.                   <p>〒400-0334</p>
  1041.                   <p>山梨県南アルプス市藤田1450番地2</p>
  1042.                   <p>TEL: 055-284-6480</p>
  1043.                   <img alt="" src="/html/user_data/js/images/seal.svg" style="z-index: 2; position: absolute; width: 21mm; left: 58mm; top: 36mm;">
  1044.                 </div>
  1045.                 <!-- /.col -->
  1046.                 <!-- /.col -->
  1047.               </div>
  1048.               <!-- /.row -->
  1049.               <!-- Table row -->
  1050.               <div class="row">
  1051.                 <div class="col-12 table-responsive">
  1052.                   <table class="table table-striped">
  1053.                     <thead>
  1054.                       <tr>
  1055.                         <th>項目</th>
  1056.                         <th>数量</th>
  1057.                         <th>単位</th>
  1058.                         <th>単価</th>
  1059.                         <th>小計</th>
  1060.                       </tr>
  1061.                     </thead>
  1062.                     <tbody>
  1063.                       <tr>
  1064.                         <td>プレーンルーフ 600タイプ 1台用 単体セット</td>
  1065.                         <td>1</td>
  1066.                         <td>式</td>
  1067.                         <td id="mitsumori_price_01">352,800</td>
  1068.                         <td id="mitsumori_price_02">352,800</td>
  1069.                       </tr>
  1070.                       <tr>
  1071.                         <td>基本工事費</td>
  1072.                         <td>1</td>
  1073.                         <td>式</td>
  1074.                         <td id="mitsumori_ct_01">10,000</td>
  1075.                         <td id="mitsumori_ct_02">10,000</td>
  1076.                       </tr>
  1077.                       <tr>
  1078.                         <td>残土・ガラ処理</td>
  1079.                         <td>1</td>
  1080.                         <td>式</td>
  1081.                         <td>0円</td>
  1082.                         <td></td>
  1083.                       </tr>
  1084.                       <tr>
  1085.                         <td>　</td>
  1086.                         <td></td>
  1087.                         <td></td>
  1088.                         <td></td>
  1089.                         <td></td>
  1090.                       </tr>
  1091.                     </tbody>
  1092.                   </table>
  1093.                 </div>
  1094.                 <!-- /.col -->
  1095.               </div>
  1096.               <!-- /.row -->
  1097.               <div class="row">
  1098.                 <!-- accepted payments column -->
  1099.                 <div class="col-6">
  1100.                   <p class="lead">お支払い方法</p>
  1101.                   <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">銀行振込、クレジットカード決済、PAYPAY決済
  1102.                     <br>銀行振込：山梨中央銀行　白根支店　普通口座　391402
  1103.                     <br>※商品代金と工事代金の総額が金100万円（税込）を超える場合、着手金として代金の半額をご契約後お支払いいただきます。 
  1104.                   </p>
  1105.                 </div>
  1106.                 <!-- /.col -->
  1107.                 <div class="col-6">
  1108.                   <div class="table-responsive">
  1109.                     <table class="table">
  1110.                       <tbody>
  1111.                         <tr>
  1112.                           <th style="width:50%">小計:</th>
  1113.                           <td id="mitsumori_shoukei">362,800</td>
  1114.                         </tr>
  1115.                         <tr>
  1116.                           <th>消費税 (10%)</th>
  1117.                           <td id="mitsumori_tax">36,280</td>
  1118.                         </tr>
  1119.                         <tr>
  1120.                           <th>合計:</th>
  1121.                           <td id="mitsumori_goukei_02">399,080</td>
  1122.                         </tr>
  1123.                       </tbody>
  1124.                     </table>
  1125.                   </div>
  1126.                 </div>
  1127.                 <!-- /.col -->
  1128.               </div>
  1129.               <!-- /.row -->
  1130.             </div>
  1131.         </div>
  1132.         <div class="modal-footer justify-content-between">
  1133.                   <button type="button" class="btn btn-primary float-right" style="margin-right: 5px;">
  1134.                     <i class="fas fa-download"></i>PDF出力
  1135.                   </button>
  1136.           <button type="button" class="btn btn-info" onclick="contact_form({{ Product.id }});">無料現地調査へ進む</button>
  1137.         </div>
  1138.       </div>
  1139.       <!-- /.modal-content -->
  1140.     </div>
  1141.     <!-- /.modal-dialog -->
  1142.   </div>
  1143.   <!-- /.modal -->
  1147. {% endblock %}