{% extends 'default_frame.twig' %}{% form_theme form 'Form/form_div_layout.twig' %}{% block stylesheet %} <style> .form-check.flex{ display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } .construction-input-text__item{ display: flex; align-items: center; justify-content: flex-start; gap: 1rem; margin: 5px 0; } .construction-input-text__item span:first-child{ width: 7rem; } .construction-input-text__item input[type="text"]{ width: 5rem; text-align: center; } </style>{% endblock %}{% block javascript %} <script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script> <script> var CountTatami = { countType1: 0, //6-14 countType2: 0, //16-20 countType3: 0, //23- }; $(function() { SetRequiredContent1(); SetRequiredContent2("construction_type_07", "交換", ".construction_type_07_02_v1"); SetRequiredContent2("construction_type_07", "新設工事に加えて移設工事も希望", ".construction_type_07_02_v2"); SetRequiredContent2("construction_type_07_02_v2", "分解洗浄を希望する", ".construction_type_07_03_v1"); SetRequiredContent2("construction_type_07_02_v2", "分解洗浄を希望しない", ".construction_type_07_03_v2"); SetRequiredContent2("construction_type_07_03_v1", "移設6~14畳(取外し含む)", ".construction_type_07_04_v1"); SetRequiredContent2("construction_type_07_03_v1", "移設16~20畳(取外し含む)", ".construction_type_07_04_v2"); SetRequiredContent2("construction_type_07_03_v1", "移設23畳~(取外し含む)", ".construction_type_07_04_v3"); SetRequiredContent2("electrical_outlet_07", "あり", ".electrical_outlet_07_02"); SetRequiredContent2("room_size_07", "なし", ".room_size_07_02"); SetRequiredContent2("room_size_07_02", "建物が2009年6月以降に着工した証明書あり", ".room_size_07_03_v1"); SetRequiredContent2("room_size_07_02", "建物が2009年6月以降に着工した証明書なし", ".room_size_07_03_v2"); SetRequiredContent2("piping_status_07", "隠蔽配管", ".piping_status_07_02"); SetRequiredContent2("outdoor_cover", "必要", ".outdoor_cover_02"); SetRequiredContent2("setting_install_method", "新規取付", ".construction_method_07_v1"); SetRequiredContent2("setting_install_method", "交換", ".construction_method_07_v2"); $("input[name='construction_type_07']").change(function() { SetRequiredContent2("construction_type_07", "交換", ".construction_type_07_02_v1"); SetRequiredContent2("construction_type_07", "新設工事に加えて移設工事も希望", ".construction_type_07_02_v2"); SetRequiredContent2("construction_type_07_02_v2", "分解洗浄を希望する", ".construction_type_07_03_v1"); SetRequiredContent2("construction_type_07_02_v2", "分解洗浄を希望しない", ".construction_type_07_03_v2"); SetRequiredContent2("construction_type_07_03_v1", "移設6~14畳(取外し含む)", ".construction_type_07_04_v1"); SetRequiredContent2("construction_type_07_03_v1", "移設16~20畳(取外し含む)", ".construction_type_07_04_v2"); SetRequiredContent2("construction_type_07_03_v1", "移設23畳~(取外し含む)", ".construction_type_07_04_v3"); }); $("input[name='construction_type_07_02_v2']").change(function() { SetRequiredContent2("construction_type_07_02_v2", "分解洗浄を希望する", ".construction_type_07_03_v1"); SetRequiredContent2("construction_type_07_02_v2", "分解洗浄を希望しない", ".construction_type_07_03_v2"); SetRequiredContent2("construction_type_07_03_v1", "移設6~14畳(取外し含む)", ".construction_type_07_04_v1"); SetRequiredContent2("construction_type_07_03_v1", "移設16~20畳(取外し含む)", ".construction_type_07_04_v2"); SetRequiredContent2("construction_type_07_03_v1", "移設23畳~(取外し含む)", ".construction_type_07_04_v3"); }); $("input[name='construction_type_07_03_v1']").change(function() { SetRequiredContent2("construction_type_07_03_v1", "移設6~14畳(取外し含む)", ".construction_type_07_04_v1"); SetRequiredContent2("construction_type_07_03_v1", "移設16~20畳(取外し含む)", ".construction_type_07_04_v2"); SetRequiredContent2("construction_type_07_03_v1", "移設23畳~(取外し含む)", ".construction_type_07_04_v3"); }); $("input[name='electrical_outlet_07']").change(function() { SetRequiredContent2("electrical_outlet_07", "あり", ".electrical_outlet_07_02"); }); $("input[name='room_size_07']").change(function() { SetRequiredContent2("room_size_07", "なし", ".room_size_07_02"); SetRequiredContent2("room_size_07_02", "建物が2009年6月以降に着工した証明書あり", ".room_size_07_03_v1"); SetRequiredContent2("room_size_07_02", "建物が2009年6月以降に着工した証明書なし", ".room_size_07_03_v2"); }); $("input[name='room_size_07_02']").change(function() { SetRequiredContent2("room_size_07_02", "建物が2009年6月以降に着工した証明書あり", ".room_size_07_03_v1"); SetRequiredContent2("room_size_07_02", "建物が2009年6月以降に着工した証明書なし", ".room_size_07_03_v2"); }); $("input[name='piping_status_07']").change(function() { SetRequiredContent2("piping_status_07", "隠蔽配管", ".piping_status_07_02"); }); $("input[name='outdoor_cover']").change(function() { SetRequiredContent2("outdoor_cover", "必要", ".outdoor_cover_02"); }); $("input[name='setting_install_method']").change(function() { SetRequiredContent2("setting_install_method", "新規取付", ".construction_method_07_v1"); SetRequiredContent2("setting_install_method", "交換", ".construction_method_07_v2"); }); CalcConstructionNumber(); $('.construction-input-text__item input').on('change', function() { CalcConstructionNumber(); CalcPrice(); }); CalcPrice(); $('input[type="radio"]').on('change', function() { CalcPrice(); }); }); function SetRequiredContent1() { $("#tableSecond .content-1 input").each(function(index, el) { if ($(this).attr('name') != 'construction_date_2' && $(this).attr('name') != 'construction_date_3' && $(this).attr('name') != 'construction_6' && $(this).attr('name') != 'construction_16' && $(this).attr('name') != 'construction_23' && $(this).attr('type') != 'hidden') { $(this).attr('required', 'required'); } }); $('#construction_16').removeAttr('required'); $('#construction_23').removeAttr('required'); if ($('#construction_6').val() == "" && $('#construction_16').val() == "" && $('#construction_23').val() == "") { $('#construction_6').attr('required', 'required'); } else{ $('#construction_6').removeAttr('required'); } SetUnrequired(); } function SetRequiredContent2(nameInput, condition , classCheck) { var selectedValue = $("input[name='"+ nameInput +"']:checked").val(); if (selectedValue === condition) { $(classCheck).css("display", "flex"); $("#tableSecond " + classCheck + " input").each(function(index, el) { if ($(this).attr('type') != 'hidden') { $(this).attr('required', 'required'); } }); } else { $(classCheck).css("display", "none"); $("#tableSecond " + classCheck + " input").each(function(index, el) { $(this).prop('checked', false).removeAttr('required'); }); } SetUnrequired(); } function SetUnrequired() { $('input[name="outlet_earth"]').removeAttr('required'); $('input[name="electrical_outlet_07_02"]').removeAttr('required'); $('input[name="image_1"]').removeAttr('required'); $('input[name="image_2"]').removeAttr('required'); $('input[name="image_3"]').removeAttr('required'); } function CalcPrice() { const basePriceType1 = 15980; const basePriceType2 = 19980; const basePriceType3 = 23980; var product_total_price = 0; var BasePrice = { type1: CountTatami.countType1 * basePriceType1, type2: CountTatami.countType2 * basePriceType2, type3: CountTatami.countType3 * basePriceType3, }; var totalBasePrice = BasePrice.type1 + BasePrice.type2 + BasePrice.type3; $('input[type="radio"]').each(function() { let hidden_price = $(this).closest('div').find('input[type="hidden"]'); if (hidden_price.length > 0) { hidden_price.val(''); } }); var construction_price = 0; $('input[type="radio"]:checked').each(function() { let selectedPrice = $(this).data('price'); construction_price += selectedPrice; let hidden_price = $(this).closest('div').find('input[type="hidden"]'); if (hidden_price.length > 0) { hidden_price.val(selectedPrice); } }); var number_install = Number($('#number_install').val()); var construction_total_price = totalBasePrice + construction_price * number_install; var discountQuantity = 0; switch (number_install) { case 1: discountQuantity = 0; break; case 2: discountQuantity = 0.05; break; case 3: discountQuantity = 0.1; break; default: discountQuantity = 0.15; break; } var total_price = product_total_price + construction_total_price; var discount_price = Math.round(total_price * discountQuantity); total_price = total_price - discount_price; $('#construction_base_price_1').val(BasePrice.type1); $('#construction_base_price_2').val(BasePrice.type2); $('#construction_base_price_3').val(BasePrice.type3); $('#construction_total_price').val(construction_total_price); $('#construction_discount').val(discount_price); $('#total-price').text(numeral(total_price).format('0,0') + "円"); // $('.product_price').text(numeral(product_total_price).format('0,0')); // $('.base_price').text(numeral(totalBasePrice).format('0,0')); $('.product_base_price').text(numeral(product_total_price + totalBasePrice).format('0,0')); $('.add_price').text(numeral(construction_total_price - totalBasePrice).format('0,0')); // console.log("----------------") // console.log(" base_price: " + $('.base_price').eq(0).text()); // console.log(" add_price: " + $('.add_price').eq(0).text()); // console.log("total-price: " + $('#total-price').text()); } function CalcConstructionNumber() { CountTatami.countType1 = 0; CountTatami.countType2 = 0; CountTatami.countType3 = 0; if ($.isNumeric($('#construction_6').val())) { CountTatami.countType1 = Number($('#construction_6').val()); } if ($.isNumeric($('#construction_16').val())) { CountTatami.countType2 = Number($('#construction_16').val()); } if ($.isNumeric($('#construction_23').val())) { CountTatami.countType3 = Number($('#construction_23').val()); } $('#number_install').val(CountTatami.countType1 + CountTatami.countType2 + CountTatami.countType3); } </script> <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> <script> $(document).ready(function() { // $('.contact_type').change(function() { // location.href = "{{ url('contact') }}?type=" + $(this).val(); // }); $("#btn-confirm").click(function(event) { var has_error = false; $("span.error-empty").remove(); $("input[required], textarea[required]").each(function() { var input = $(this); var input_empty = $("<span>").addClass("error-empty").text("※この項目は必須項目です"); if (input.attr('type') == 'radio' || input.attr('type') == 'checkbox') { var radio_name = input.attr('name'); if ($('input[name="' + radio_name + '"]:checked').length == 0) { input.before(input_empty); has_error = true; } } else if (input.val() == ""){ input.before(input_empty); has_error = true; } else { input_empty.remove(); } input.on("change", function() { if (input.attr('type') == 'radio' || input.attr('type') == 'checkbox' || input.attr('type') == 'text') { input.closest('td').find('.error-empty').remove(); } else { input_empty.remove(); } }); }); if (has_error) { var speed = 300; var position = $(".error-empty").eq(0).offset().top - 250; $('body,html').animate({ scrollTop: position }, speed, 'swing'); return false; } else { // Vì không upload được file nên phải sử dụng submit thông thường // $form = $('#form1'); // $.ajax({ // url: $form.attr('action'), // type: $form.attr('method'), // data: $form.serialize(), // dataType: 'json', // beforeSend: function(xhr, settings) { // // Buttonを無効にする // $('.add-cart').prop('disabled', true); // } // }).done(function(data) { // if ($('.add-cart').hasClass('cart-express')) { // location.href = "{{ url('shopping') }}"; // } // }).fail(function(data) { // alert('{{ 'カートへの追加に失敗しました。'|trans }}'); // }); } }); }); $(document).ready(function(){ $(".custom-file input[type='file']").change(function(){ var filePath = $(this).val(); var fileName = filePath.split('\\').pop(); var label = $(this).parent().find("label"); label.text(fileName); var hiddenInputId = $(this).attr("id") + "-filename"; $("#" + hiddenInputId).val(fileName); $(this).parent().find("label").css("color", "rgba(0, 0, 0, 1)"); }); }); </script>{% endblock %}{% block main %} <input type="hidden" name="array_product" value="[14, 10, 18, 19, 20, 24, 26]"> <div class="ec-inquiry-page"> <div class="ec-banner"> <div class="ec-banner__inner"> <div class="inner"> <h2> 工事金額の確認 </h2> </div> </div> <div class="ec-breadcrumb"> <ul class="ec-breadcrumb__menu"> <li class="ec-breadcrumb__item"><a href="{{ url('homepage') }}">TOP</a></li> <li class="ec-breadcrumb__item"><span>></span></li> <li class="ec-breadcrumb__item"><p>工事金額の確認</p></li> </ul> </div> </div> <div class="ec-form-inquiry-main"> <div class="ec-form-inquiry__inner"> <div class="inner"> <div class="ec-form-inquiry__group"> <div class="text"> <p>下記フォームの各項目にご記入いただき、決済にお進みください。なお、不明の項目がある場合には、工事当日に追加費用が発生する可能性があります。</p> <div class="ec-setting__group"> <div class="title-main"> <p>依頼(購入)にすすむ</p> </div> <div class="list-steps v2 vip"> <div class="step"> <div class="step__contact"> <p class="step__contact__num">STEP1</p> <p class="step__contact__ttl">お客様</p> <img class="step__contact__img" src="{{ asset('assets/img/setting-0y/s0-contact-1.png') }}" alt=""> <p class="step__contact__desc">工事金額の確認</p> </div> </div> <div class="dbar"> <span></span> </div> <div class="step"> <div class="step__contact"> <p class="step__contact__num">STEP2</p> <p class="step__contact__ttl">お客様</p> <img class="step__contact__img" src="{{ asset('assets/img/setting-0y/s0-contact-3.png') }}" alt=""> <p class="step__contact__desc">工事の依頼(購入)にすすむ</p> </div> </div> <div class="dbar"> <span></span> </div> <div class="step"> <div class="step__contact"> <p class="step__contact__num">STEP3</p> <p class="step__contact__ttl">お客様</p> <img class="step__contact__img" src="{{ asset('assets/img/setting-0y/s0-contact-4.png') }}" alt=""> <p class="step__contact__desc">決済</p> </div> </div> </div> </div> <div class="ec-product__group"> <div class="list-btn"> <a href="https://lin.ee/5FbNJH7s" target="_blank" class="btn"><span>LINE</span></a> <a href="{{ url('contact') }}" class="btn"><span>通常お問合せ</span></a> <span class="btn pc" style="opacity: 1!important; cursor: default;"><span>TEL: 080-0222-4466</span></span> <a href="tel:080-0222-4466" class="btn sp"><span>TEL: 080-0222-4466</span></a> </div> </div> </div> <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1" enctype="multipart/form-data"> {{ form_widget(form._token) }} <div class="table"> <div class="list-item"> <div class="item active"> <table id="tableSecond" style="padding: 0;"> <tr class="content-1"> <td><p>工事内訳</p></td> <td> <div class="fill v4"> {% for key,val in form.construction_type_07.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_type_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_type_07.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "新設工事に加えて移設工事も希望" %} <p style="padding-left: 2rem;font-size: 0.8em;margin-bottom: 0.5rem;line-height: 1.2;">※エアコン本体の移動はお客様ご自身でお願いいたします。</p> {% endif %} </label> {% endfor %} </div> {{ form_errors(form.construction_type_07) }} </td> </tr> <tr class="construction_type_07_02_v1"> <td> <p>工事内訳</p> <small>2段階目</small> </td> <td> <div class="fill v4"> {% for key,val in form.construction_type_07_02_v1.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_type_07_02_v1.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_type_07_02_v1.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.construction_type_07_02_v1) }} {{ form_widget(form.construction_type_07_02_v1_price) }} </td> </tr> <tr class="construction_type_07_02_v2"> <td><p>工事内訳</p><small>2段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.construction_type_07_02_v2.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_type_07_02_v2.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_type_07_02_v2.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.construction_type_07_02_v2) }} </td> </tr> <tr class="construction_type_07_03_v1"> <td><p>工事内訳</p><small>3段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.construction_type_07_03_v1.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_type_07_03_v1.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_type_07_03_v1.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.construction_type_07_03_v1) }} </td> </tr> <tr class="construction_type_07_03_v2"> <td><p>工事内訳</p><small>3段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.construction_type_07_03_v2.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_type_07_03_v2.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_type_07_03_v2.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.construction_type_07_03_v2) }} {{ form_widget(form.construction_type_07_03_v2_price) }} </td> </tr> <tr class="construction_type_07_04_v1"> <td><p>工事内訳</p><small>4段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.construction_type_07_04_v1.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_type_07_04_v1.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_type_07_04_v1.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.construction_type_07_04_v1) }} {{ form_widget(form.construction_type_07_04_v1_price) }} </td> </tr> <tr class="construction_type_07_04_v2"> <td><p>工事内訳</p><small>4段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.construction_type_07_04_v2.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_type_07_04_v2.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_type_07_04_v2.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.construction_type_07_04_v2) }} {{ form_widget(form.construction_type_07_04_v2_price) }} </td> </tr> <tr class="construction_type_07_04_v3"> <td><p>工事内訳</p><small>4段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.construction_type_07_04_v3.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_type_07_04_v3.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_type_07_04_v3.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.construction_type_07_04_v3) }} {{ form_widget(form.construction_type_07_04_v3_price) }} </td> </tr> <tr class="content-1"> <td><p>設置台数</p></td> <td> <div class="fill v4 construction-input-text"> <div class="construction-input-text__item"> <span>6-14畳</span>{{ form_widget(form.construction_6) }}<span>台</span> </div> <div class="construction-input-text__item"> <span>16-20畳</span>{{ form_widget(form.construction_16) }}<span>台</span> </div> <div class="construction-input-text__item"> <span>23畳-</span>{{ form_widget(form.construction_23) }}<span>台</span> </div> </div> {{ form_widget(form.number_install) }} {{ form_widget(form.number_install_price) }} </td> </tr> <tr class="content-1"> <td><p>特急券の購入</p></td> <td> <div class="fill v4"> {% for key,val in form.express_tickets.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.express_tickets.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.express_tickets.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.express_tickets) }} {{ form_widget(form.express_tickets_price) }} </td> </tr> <tr class="content-1"> <td><p>お住まい</p></td> <td> <div class="fill v4"> {% for key,val in form.osumai.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.osumai.vars.full_name }}" data-percent="{{ val.attr['percent'] | default(0) }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.osumai.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.osumai) }} </td> </tr> <tr class="content-1"> <td><p>建物の所有</p></td> <td> <div class="fill v4"> {% for key,val in form.building_ownership.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.building_ownership.vars.full_name }}" data-percent="{{ val.attr['percent'] | default(0) }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.building_ownership.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "賃貸" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事内容によっては受付出来ない可能性もございます。</p> {% endif %} </label> {% endfor %} </div> {{ form_errors(form.building_ownership) }} </td> </tr> <tr class="content-1"> <td><p>構造</p></td> <td> <div class="fill v4"> {% for key,val in form.structure.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.structure.vars.full_name }}" data-percent="{{ val.attr['percent'] | default(0) }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.structure.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.structure) }} </td> </tr> <tr class="content-1"> <td><p>設置工事希望日</p></td> <td> <div class="fill v3"> <label class="label v3 date vip"> 第一希望日 {{ form_widget(form.construction_date_1) }} {{ form_errors(form.construction_date_1) }} <span class="pc"> </span>希望時間帯 <select name="time_slot_1" id="time_slot_1"> {% for key,val in form.time_slot_1.vars.choices %} <option value="{{ val.value }}">{{ val.label | trans }} </option> {% endfor %} </select> </label> <label class="label v3 date"> 第二希望日 {{ form_widget(form.construction_date_2) }} {{ form_errors(form.construction_date_2) }} <span class="pc"> </span>希望時間帯 <select name="time_slot_2" id="time_slot_2"> {% for key,val in form.time_slot_2.vars.choices %} <option value="{{ val.value }}">{{ val.label | trans }} </option> {% endfor %} </select> </label> <label class="label v3 date"> 第三希望日 {{ form_widget(form.construction_date_3) }} {{ form_errors(form.construction_date_3) }} <span class="pc"> </span>希望時間帯 <select name="time_slot_3" id="time_slot_3"> {% for key,val in form.time_slot_3.vars.choices %} <option value="{{ val.value }}">{{ val.label | trans }} </option> {% endfor %} </select> </label> {{ form_widget(form.contents, {'attr': { 'placeholder': 'その他希望等あればご記入ください。' }}) }} {{ form_errors(form.contents) }} </div> </td> </tr> <tr class="content-1"> <td><p>エアコン設置場所</p></td> <td> <div class="fill v4"> {% for key,val in form.construction_floor_07.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.construction_floor_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_floor_07.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.construction_floor_07) }} </td> </tr> <tr class="content-1"> <td><p>エレベーターの有無</p><small>※3階以上の場合</small></td> <td> <div class="fill v4"> {% for key,val in form.elevator_07.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.elevator_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.elevator_07.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} {{ form_errors(form.elevator_07) }} {{ form_widget(form.elevator_07_price) }} </div> </td> </tr> <tr class="content-1"> <td><p>コンセントの有無</p></td> <td> <div class="fill v4"> {% for key,val in form.electrical_outlet_07.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.electrical_outlet_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.electrical_outlet_07.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "なし(別途工事が必要になります)" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.2;">※10m以上の方は別途お見積りさせていただきます。</p> {% endif %} {% if val.value == "不明" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.2;">※工事当日に追加費用が発生する場合があります。</p> {% endif %} </label> {% endfor %} {{ form_errors(form.electrical_outlet_07) }} {{ form_widget(form.electrical_outlet_07_price) }} </div> </td> </tr> <tr class="electrical_outlet_07_02"> <td> <p>コンセントの有無</p> {# <small>2段階目</small> #} </td> <td> <div class="fill v4"> {% for key,val in form.electrical_outlet_07_02.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.electrical_outlet_07_02.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.electrical_outlet_07_02.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} {{ form_errors(form.electrical_outlet_07_02) }} {{ form_widget(form.electrical_outlet_07_02_price) }} </div> </td> </tr> <tr class="content-1"> <td><p>建物の契約アンペア</p></td> <td> <div class="fill v4"> {% for key,val in form.contract_amp.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.contract_amp.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.contract_amp.vars.data == val.value %}checked{% endif %}/> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.contract_amp) }} </td> </tr> <tr class="content-1"> <td><p>コンセントアース端子</p></td> <td> <div class="fill v4"> {% for key,val in form.outlet_earth.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.outlet_earth.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.outlet_earth.vars.data == val.value %}checked{% endif %}/> {{ val.label | trans }} {% if val.value == "なし" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">*工事当日に追加費用がかかる場合があります。</p> {% endif %} {% if val.value == "不明" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">*工事当日に追加費用がかかる場合があります。</p> {% endif %} </label> {% endfor %} </div> {{ form_errors(form.outlet_earth) }} </td> </tr> <tr class="content-1"> <td><p>配管穴の有無</p></td> <td> <div class="fill v4 vip"> {% for key,val in form.room_size_07.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.room_size_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.room_size_07.vars.data == val.value %}checked{% endif %}/> {{ val.label | trans }} {% if val.value == "不明" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に追加費用が発生する場合があります。別途エアココからご連絡させていただきます。</p> {% endif %} </label> {% endfor %} </div> {{ form_errors(form.room_size_07) }} <img style="margin-left: auto;" src="{{ asset('assets/img/contact/') }}hole-sample.jpg" alt="配管穴の有無"> </td> </tr> <tr class="room_size_07_02"> <td><p>配管穴の有無</p><small>2段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.room_size_07_02.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.room_size_07_02.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.room_size_07_02.vars.data == val.value %}checked{% endif %}/> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.room_size_07_02) }} </td> </tr> <tr class="room_size_07_03_v1"> <td><p>建物の材質</p><small>(穴あけ&貫通スリーブ費)</small></td> <td> <div class="fill v4"> {% for key,val in form.room_size_07_03_v1.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.room_size_07_03_v1.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.room_size_07_03_v1.vars.data == val.value %}checked{% endif %}/> {{ val.label | trans }} {% if val.value == "その他" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に追加費用が発生する場合があります。</p> {% endif %} {% if val.value == "不明" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に追加費用が発生する場合があります。</p> {% endif %} </label> {% endfor %} </div> {{ form_errors(form.room_size_07_03_v1) }} {{ form_widget(form.room_size_07_03_v1_price) }} </td> </tr> <tr class="room_size_07_03_v2"> <td><p>建物の材質</p><small>(穴あけ&貫通スリーブ&アスベストみなし工事、対策費と調査報告書作成費)</small></td> <td> <div class="fill v4"> {% for key,val in form.room_size_07_03_v2.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.room_size_07_03_v2.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.room_size_07_03_v2.vars.data == val.value %}checked{% endif %}/> {{ val.label | trans }} {% if val.value == "その他" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に追加費用が発生する場合があります。</p> {% endif %} {% if val.value == "不明" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に追加費用が発生する場合があります。</p> {% endif %} </label> {% endfor %} </div> {{ form_errors(form.room_size_07_03_v2) }} {{ form_widget(form.room_size_07_03_v2_price) }} </td> </tr> <tr class="content-1"> <td><p>設置予定場所の<br class="pc" />配管の状態</p></td> <td style="flex-direction: column;"> <div class="fill v5 up"> {% set idx = 0 %} {% for key,val in form.piping_status_07.vars.choices %} {% set idx = idx + 1 %} {% if idx <= 2 %} <div class="group"> <label class="form-check v2"> <input type="radio" name="{{ form.piping_status_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.piping_status_07.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> <img src="{{ asset('assets/img/form-0y/') }}line-option-0{{ idx }}.jpg" alt=""> </div> {% endif %} {% endfor %} </div> <div class="fill v5"> {% set idx = 0 %} {% for key,val in form.piping_status_07.vars.choices %} {% set idx = idx + 1 %} {% if idx > 2 %} <label class="form-check"> <input type="radio" name="{{ form.piping_status_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.piping_status_07.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endif %} {% endfor %} </div> {{ form_errors(form.piping_status_07) }} </td> </tr> <tr class="piping_status_07_02"> <td><p>設置予定場所の<br class="pc" />配管の状態</p><small>2段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.piping_status_07_02.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.piping_status_07_02.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.piping_status_07_02.vars.data == val.value %}checked{% endif %}/> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.piping_status_07_02) }} {{ form_widget(form.piping_status_07_02_price) }} </td> </tr> <tr class="content-1"> <td><p>室内化粧カバーの<br class="pc" />希望の有無</p></td> <td> <div class="fill v4" style="order: 2;"> {% for key,val in form.indoor_cover_07.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.indoor_cover_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.indoor_cover_07.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "必要(2m以内)" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※2mを超える場合は追加費用がかかります。</p> {% endif %} {% if val.value == "未定" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※化粧カバーが必要になった場合は追加費用がかかります。</p> {% endif %} </label> {% endfor %} </div> {{ form_errors(form.indoor_cover_07) }} {{ form_widget(form.indoor_cover_07_price) }} <img style="margin-left: auto; order: 3;" src="{{ asset('assets/img/contact/') }}item-1.jpg" alt="室内化粧カバー"> </td> </tr> <tr class="content-1"> <td><p>室外化粧カバーの<br class="pc" />希望の有無</p></td> <td> <div class="fill v4"> {% for key,val in form.outdoor_cover.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.outdoor_cover.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.outdoor_cover.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "その他" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に必要になった場合、追加費用が発生する場合があります。</p> {% endif %} </label> {% endfor %} </div> {{ form_errors(form.outdoor_cover) }} <img style="margin-left: auto;" src="{{ asset('assets/img/contact/') }}item-2.jpg" alt="室外化粧カバー"> </td> </tr> <tr class="outdoor_cover_02"> <td><p>室外化粧カバーの<br class="pc" />希望の有無</p><small>2段階目</small></td> <td> <div class="fill v4"> {% for key,val in form.outdoor_cover_02.vars.choices %} <label class="form-check" > <input type="radio" name="{{ form.outdoor_cover_02.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.outdoor_cover_02.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "再使用(交換)同階" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※交換にはすでにスリムダクトが付いている方も含みます。</p> {% endif %} {% if val.value == "再使用(交換)異階" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※交換にはすでにスリムダクトが付いている方も含みます。</p> {% endif %} </label> {% endfor %} </div> {{ form_errors(form.outdoor_cover_02) }} {{ form_widget(form.outdoor_cover_02_price) }} </td> </tr> <tr class="content-1"> <td><p>室外機の設置場所(既設場所・希望設置場所)</p></td> <td> <div class="fill v4"> {% for key,val in form.construction_outdoor_07.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.construction_outdoor_07.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_outdoor_07.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "その他" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に必要になった場合、追加費用が発生する場合があります。</p> {% endif %} </label> {% endfor %} </div> {{ form_errors(form.construction_outdoor_07) }} {{ form_widget(form.construction_outdoor_07_price) }} </td> </tr> <tr class="content-1"> <td><p>室外機の設置方法(既設方法・希望設置方法)</p></td> <td> <div class="fill v4"> {% for key,val in form.setting_install_method.vars.choices %} <label class="form-check"> <input type="radio" name="{{ form.setting_install_method.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.setting_install_method.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} </label> {% endfor %} </div> {{ form_errors(form.setting_install_method) }} <div class="fill v4 construction_method_07_v1" style="margin-left: 2rem; flex-direction: column;"> {% for key,val in form.construction_method_07_v1.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.construction_method_07_v1.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_method_07_v1.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "⑧不明(記載)" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に必要になった場合、追加費用が発生する場合があります。</p> {% endif %} </label> {% endfor %} <img style="margin-top: 3rem;" src="{{ asset('assets/img/form-0y/install-option.jpg') }}" alt=""> </div> {{ form_errors(form.construction_method_07_v1) }} {{ form_widget(form.construction_method_07_v1_price) }} <div class="fill v4 construction_method_07_v2" style="margin-left: 2rem; flex-direction: column;"> {% for key,val in form.construction_method_07_v2.vars.choices %} <label class="form-check flex"> <input type="radio" name="{{ form.construction_method_07_v2.vars.full_name }}" data-price="{{ val.attr['price'] | default(0) }}" value="{{ val.value }}" {% if form.construction_method_07_v2.vars.data == val.value %}checked{% endif %} /> {{ val.label | trans }} {% if val.value == "⑧不明(記載)" %} <p style="padding-left: 2rem;font-size: 0.8em;line-height: 1.3; flex: 1;">※工事当日に必要になった場合、追加費用が発生する場合があります。</p> {% endif %} </label> {% endfor %} <img style="margin-top: 3rem;" src="{{ asset('assets/img/form-0y/install-option.jpg') }}" alt=""> </div> {{ form_errors(form.construction_method_07_v2) }} {{ form_widget(form.construction_method_07_v2_price) }} </td> </tr> <tr class="content-1"> <td><p>ファイル添付</p></td> <td> <div class="fill v6"> <div class="group"> <p>詳細お見積りに際し、下記の写真を撮影し添付してください。<br>※夜間に撮影する際はフラッシュを使用してください。</p> </div> <div class="group add"> <div class="group-content"> <label for=""><p>①室内機設置場所(屋内)</p></label> <div class="custom-file"> {% if form.filename_image_1.vars.data != '' %} {{ form_widget(form.image_1) }} <label for="contact_image_1">選択してください</label> <img src="{{ asset(form.filename_image_1.vars.data, 'save_image') }}" style="width: 150px !important;" /> {% else %} {{ form_widget(form.image_1, {'attr': { 'required': 'required' }}) }} <label for="contact_image_1">選択してください</label> <img src="" style="width: 150px !important;" /> {% endif %} {{ form_errors(form.image_1) }} {{ form_widget(form.filename_image_1) }} </div> </div> <div class="image"> <div class="gr"> <img src="{{ asset('assets/img/construction/') }}item-3.jpg" alt=""> <span>撮影例</span> </div> </div> </div> <div class="group add"> <div class="group-content"> <label for=""><p>②室外機・配管・配管穴が分かる全体写真</p></label> <div class="custom-file"> {% if form.filename_image_2.vars.data != '' %} {{ form_widget(form.image_2) }} <label for="contact_image_2">選択してください</label> <img src="{{ asset(form.filename_image_2.vars.data, 'save_image') }}" style="width: 150px !important;" /> {% else %} {{ form_widget(form.image_2, {'attr': { 'required': 'required' }}) }} <label for="contact_image_2">選択してください</label> <img src="" style="width: 150px !important;" /> {% endif %} {{ form_errors(form.image_2) }} {{ form_widget(form.filename_image_2) }} </div> </div> <div class="image"> <div class="gr"> <img src="{{ asset('assets/img/construction/') }}contact-00-attach-02.jpg" alt=""> <span>撮影例</span> </div> </div> </div> <div class="group add"> <div class="group-content"> <label for=""><p>③室外機設置場所<br>(②の写真で室外機設置場所が分かる方は不要)</p></label> <div class="custom-file"> {% if form.filename_image_3.vars.data != '' %} {{ form_widget(form.image_3) }} <label for="contact_image_3">選択してください</label> <img src="{{ asset(form.filename_image_3.vars.data, 'save_image') }}" style="width: 150px !important;" /> {% else %} {{ form_widget(form.image_3) }} <label for="contact_image_3">選択してください</label> <img src="" style="width: 150px !important;" /> {% endif %} {{ form_errors(form.image_3) }} {{ form_widget(form.filename_image_3) }} </div> </div> <div class="image"> <div class="gr"> <img src="{{ asset('assets/img/construction/') }}item-5-1.jpg" alt=""> <span>1階撮影例</span> </div> <div class="gr"> <img src="{{ asset('assets/img/construction/') }}item-5-2.jpg" alt=""> <span>2階撮影例</span> </div> </div> </div> </div> </td> </tr> </table> <div class="result"> <p>概算合計金額</p> <p id="total-price">00,000円</p> {{ form_widget(form.construction_base_price_1) }} {{ form_widget(form.construction_base_price_2) }} {{ form_widget(form.construction_base_price_3) }} {{ form_widget(form.construction_total_price) }} {{ form_widget(form.construction_discount) }} </div> <div style="text-align: right;" class="pc"> 「 {# 本体価格 <span class="product_price"></span>円、 #} {# 標準工事 <span class="base_price"></span>円、 #} 本体価格+標準工事費 <span class="product_base_price"></span>円、 追加工事 <span class="add_price"></span>円 」 </div> <div style="text-align: right;" class="sp"> {# 本体価格 <span class="product_price" style="display: inline-block; width: 100px; text-align: right;"></span>円<br> #} {# 標準工事 <span class="base_price" style="display: inline-block; width: 100px; text-align: right;"></span>円<br> #} 本体価格+標準工事費 <span class="product_base_price" style="display: inline-block; width: 100px; text-align: right;"></span>円<br> 追加工事 <span class="add_price" style="display: inline-block; width: 100px; text-align: right;"></span>円 </div> </div> </div> </div> <div class="ec-productRole__actions" style="display: none;"> {% if form.classcategory_id1 is defined %} <div class="ec-select"> {{ form_row(form.classcategory_id1) }} {{ form_errors(form.classcategory_id1) }} </div> {% if form.classcategory_id2 is defined %} <div class="ec-select"> {{ form_row(form.classcategory_id2) }} {{ form_errors(form.classcategory_id2) }} </div> {% endif %} {% endif %} <div class="ec-numberInput"> {{ form_widget(form.product_id) }} {{ form_widget(form.ProductClass) }} {{ form_widget(form.quantity) }} {{ form_errors(form.quantity) }} </div> </div> <div class="ec-product-detail__group"> <div class="list-btn"> <a href="{{ url('cart') }}" class="btn btn-sd btn-back" style="display: block;" onclick="history.back(); return false;"> <span>戻る</span> </a> <button type="submit" class="btn btn-sd add-cart cart-express" id="btn-confirm"> <span>{{ '依頼(購入)にすすむ'|trans }}</span> </button> </div> </div> </form> </div> </div> </div> </div> </div>{% endblock %}