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

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  4. http://www.ec-cube.co.jp/
  5. For the full copyright and license information, please view the LICENSE
  6. file that was distributed with this source code.
  7. #}
  8. {% extends 'default_frame.twig' %}
  9. {% set body_class = 'product_page' %}
  10. {% block stylesheet %}
  11.     <style>
  12.         .slick-slider {
  13.             margin-bottom: 30px;
  14.         }
  15.         .slick-dots {
  16.             position: absolute;
  17.             bottom: -45px;
  18.             display: block;
  19.             width: 100%;
  20.             padding: 0;
  21.             list-style: none;
  22.             text-align: center;
  23.         }
  24.         .slick-dots li {
  25.             position: relative;
  26.             display: inline-block;
  27.             width: 20px;
  28.             height: 20px;
  29.             margin: 0 5px;
  30.             padding: 0;
  31.             cursor: pointer;
  32.         }
  33.         .slick-dots li button {
  34.             font-size: 0;
  35.             line-height: 0;
  36.             display: block;
  37.             width: 20px;
  38.             height: 20px;
  39.             padding: 5px;
  40.             cursor: pointer;
  41.             color: transparent;
  42.             border: 0;
  43.             outline: none;
  44.             background: transparent;
  45.         }
  46.         .slick-dots li button:hover,
  47.         .slick-dots li button:focus {
  48.             outline: none;
  49.         }
  50.         .slick-dots li button:hover:before,
  51.         .slick-dots li button:focus:before {
  52.             opacity: 1;
  53.         }
  54.         .slick-dots li button:before {
  55.             content: " ";
  56.             line-height: 20px;
  57.             position: absolute;
  58.             top: 0;
  59.             left: 0;
  60.             width: 12px;
  61.             height: 12px;
  62.             text-align: center;
  63.             opacity: .25;
  64.             background-color: black;
  65.             border-radius: 50%;
  66.         }
  67.         .slick-dots li.slick-active button:before {
  68.             opacity: .75;
  69.             background-color: black;
  70.         }
  71.         .slick-dots li button.thumbnail img {
  72.             width: 0;
  73.             height: 0;
  74.         }
  75.         /* 日曜日:赤 */
  76.         .flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7n + 1),
  77.         .flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n + 1) {
  78.             color: red;
  79.         }
  80.         /* 土曜日:青 */
  81.         .flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7),
  82.         .flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
  83.             color: blue;
  84.         }
  85.     </style>
  86. {% endblock %}
  87. {% block javascript %}
  88.     <script>
  89.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  90.         // 規格2に選択肢を割り当てる。
  91.         function fnSetClassCategories(form, classcat_id2_selected) {
  92.             var $form = $(form);
  93.             var product_id = $form.find('input[name=product_id]').val();
  94.             var $sele1 = $form.find('select[name=classcategory_id1]');
  95.             var $sele2 = $form.find('select[name=classcategory_id2]');
  96.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  97.         }
  98.         {% if form.classcategory_id2 is defined %}
  99.         fnSetClassCategories(
  100.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  101.         );
  102.         {% elseif form.classcategory_id1 is defined %}
  103.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  104.         {% endif %}
  105.     </script>
  106.     <script>
  107.         $(function() {
  108.             // bfcache無効化
  109.             $(window).bind('pageshow', function(event) {
  110.                 if (event.originalEvent.persisted) {
  111.                     location.reload(true);
  112.                 }
  113.             });
  114.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  115.             // img タグに width, height が付与されている.
  116.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  117.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  118.             $('.ec-grid2__cell').hide();
  119.             var removeSize = function () {
  120.                 $('.slide-item').height('');
  121.                 $('.slide-item img')
  122.                     .removeAttr('width')
  123.                     .removeAttr('height')
  124.                     .removeAttr('style');
  125.             };
  126.             var slickInitial = function(slick) {
  127.                 $('.ec-grid2__cell').fadeIn(1500);
  128.                 var baseHeight = $(slick.target).height();
  129.                 var baseWidth = $(slick.target).width();
  130.                 var rate = baseWidth / baseHeight;
  131.                 $('.slide-item').height(baseHeight * rate); // 余白を削除する
  132.                 // transform を使用することでCLSの影響を受けないようにする
  133.                 $('.slide-item img')
  134.                     .css(
  135.                         {
  136.                             'transform-origin': 'top left',
  137.                             'transform': 'scaleY(' + rate + ')',
  138.                             'transition': 'transform .1s'
  139.                         }
  140.                     );
  141.                 // 正しいサイズに近くなったら属性を解除する
  142.                 setTimeout(removeSize, 500);
  143.             };
  144.             $('.item_visual').on('init', slickInitial);
  145.             // リサイズ時は CLS の影響を受けないため属性を解除する
  146.             $(window).resize(removeSize);
  147.             $('.item_visual').slick({
  148.                 dots: false,
  149.                 arrows: false,
  150.                 responsive: [{
  151.                     breakpoint: 768,
  152.                     settings: {
  153.                         dots: true
  154.                     }
  155.                 }]
  156.             });
  157.             $('.slideThumb').on('click', function() {
  158.                 var index = $(this).attr('data-index');
  159.                 $('.item_visual').slick('slickGoTo', index, false);
  160.             })
  161.         });
  162.     </script>
  163.     <script>
  164.         $(function() {
  165.             $('.add-cart').on('click', function(event) {
  166.                 {% if form.classcategory_id1 is defined %}
  167.                 // 規格1フォームの必須チェック
  168.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  169.                     $('#classcategory_id1')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  170.                     return true;
  171.                 } else {
  172.                     $('#classcategory_id1')[0].setCustomValidity('');
  173.                 }
  174.                 {% endif %}
  175.                 {% if form.classcategory_id2 is defined %}
  176.                 // 規格2フォームの必須チェック
  177.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  178.                     $('#classcategory_id2')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  179.                     return true;
  180.                 } else {
  181.                     $('#classcategory_id2')[0].setCustomValidity('');
  182.                 }
  183.                 {% endif %}
  184.                 // 個数フォームのチェック
  185.                 if ($('#quantity').val() < 1) {
  186.                     $('#quantity')[0].setCustomValidity('{{ 'front.product.invalid_quantity'|trans }}');
  187.                     return true;
  188.                 } else {
  189.                     $('#quantity')[0].setCustomValidity('');
  190.                 }
  191.                 event.preventDefault();
  192.                 $form = $('#form1');
  193.                 $formdata = $form.serialize();
  194.                 //試着ボタンかどうか判断する
  195.                 if($(this).hasClass('preview')){
  196.                     $formdata += '&rentalType=preview';
  197.                     $formdata += '&label=test';
  198.                 }
  199.                 $.ajax({
  200.                     url: $form.attr('action'),
  201.                     type: $form.attr('method'),
  202.                     data: $formdata,
  203.                     dataType: 'json',
  204.                     beforeSend: function(xhr, settings) {
  205.                         // Buttonを無効にする
  206.                         $('.add-cart').prop('disabled', true);
  207.                     }
  208.                 }).done(function(data) {
  209.                     // レスポンス内のメッセージをalertで表示
  210.                     $.each(data.messages, function() {
  211.                         $('#ec-modal-header').text(this);
  212.                     });
  213.                     $('.ec-modal').show()
  214.                     // カートブロックを更新する
  215.                     $.ajax({
  216.                         url: "{{ url('block_cart') }}",
  217.                         type: 'GET',
  218.                         dataType: 'html'
  219.                     }).done(function(html) {
  220.                         $('.ec-headerRole__cart').html(html);
  221.                     });
  222.                 }).fail(function(data) {
  223.                     alert('{{ 'front.product.add_cart_error'|trans }}');
  224.                 }).always(function(data) {
  225.                     // Buttonを有効にする
  226.                     $('.add-cart').prop('disabled', false);
  227.                 });
  228.             });
  229.         });
  230.         $('.ec-modal-wrap').on('click', function(e) {
  231.             // モーダル内の処理は外側にバブリングさせない
  232.             e.stopPropagation();
  233.         });
  234.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  235.             $('.ec-modal').hide()
  236.         });
  237.     </script>
  238.     <script type="application/ld+json">
  239.     {
  240.         "@context": "https://schema.org/",
  241.         "@type": "Product",
  242.         "name": "{{ Product.name }}",
  243.         "image": [
  244.             {% for img in Product.ProductImage %}
  245.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  246.             {% else %}
  247.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  248.             {% endfor %}
  249.         ],
  250.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  251.         {% if Product.code_min %}
  252.         "sku": "{{ Product.code_min }}",
  253.         {% endif %}
  254.         "offers": {
  255.             "@type": "Offer",
  256.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  257.             "priceCurrency": "{{ eccube_config.currency }}",
  258.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  259.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  260.         }
  261.     }
  262.     </script>
  263.     <script>
  264.         $("#optionReserveDate").flatpickr({
  265.             locale : 'ja', // 日本語用モジュールを適用
  266.             minDate: new Date('2024-12-15'),
  267.             maxDate: new Date('2025-4-30'),
  268.             disableMobile: true
  269.         });
  270.         $("#optionPreReserveDate").flatpickr({
  271.             locale : 'ja', // 日本語用モジュールを適用
  272.             minDate: new Date().fp_incr(10), // 10日後から
  273.             maxDate: new Date('2024-12-15'),
  274.             disableMobile: true,
  275.         });
  276.         $("#graduate3").flatpickr({
  277.             locale : 'ja', // 日本語用モジュールを適用
  278.             minDate: new Date().fp_incr(10), // 10日後から
  279.             maxDate: new Date().fp_incr(20), // 20日後まで
  280.             disableMobile: true,
  281.         });
  282.     </script>
  283. {% endblock %}
  284. {% block main %}
  285.     <div class="ec-productRole" style="max-width:100%; padding:0;">
  286.         <div id="out-border">
  287.             <div class="out-bg-con">
  288.                 <div id="main-top55"></div>
  289.                 <div id="fix-navi-top-line-box-shop" style="height:18px"></div>
  290.                 <!--上部ヘッダースライドナビ -->
  291.                 <div id="main-head">
  292.                     <!-- #BeginLibraryItem "/Library/head-navi.lbi" --><!-- #EndLibraryItem --></div>
  293.                 <!--上部ヘッダースライドナビ -->
  294.                 <!--ヘッダ画像部 位置調整開始 -->
  295.                 <div id="main">
  296.                     {# 商品ページヘッダの調整 #}
  297.                     {% if app.request.get('resv') == "no1"  %}
  298.                     <div class="pan-box"><a href="top.html" class="link-deco02">HOME</a> > item > 注文済商品</div>
  299.                     <div class="pttl04">
  300.                         <div class="out-lr02"><strong>ご試着済商品への本予約の申込み</strong><br>
  301.                             <div class="fon-nomal">以下商品の本予約の申込みが出来ます。<br>
  302.                                 <br>
  303.                                 ※ご試着の利用希望日の翌日には他の方へ振袖の在庫が開放されます。<br>
  304.                                 試着後、本予約を希望される方は試着日当日に、こちらから本予約のお申込みをお勧めします。</div></div></div>
  305.                     {% elseif app.request.get('resv') == "no2" %}
  306.                     <div class="pan-box"><a href="top.html" class="link-deco02">HOME</a> > item > 注文済商品</div>
  307.                     <div class="pttl04">
  308.                         <div class="out-lr02"><strong>本予約済商品への追加申込み</strong><br>
  309.                             <div class="fon-nomal">以下商品への各種追加申込みが出来ます。</div></div></div>
  310.                     {% else %}
  311.                     <div class="pan-box"><a href="top.html" class="link-deco02">HOME</a> > item</div>
  312.                     {% endif %}
  313.                     <!--ヘッド画像開始 -->
  314.                     <div class="out-max-swipe">
  315.                         <!--写真スライダー【1-2】-->
  316.                         <div class="swiper-container swiper999">
  317.                             <div class="swiper-wrapper">
  318.                                 {% for ProductImage in Product.ProductImage %}
  319.                                     <div class="swiper-slide"><img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" {% if loop.index > 1 %} loading="lazy"{% endif %}></div>
  320.                                 {% else %}
  321.                                     <div class="swiper-slide"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}"></div>
  322.                                 {% endfor %}
  323.                             </div>
  324.                         </div>
  325.                         <!--写真スライダー-->
  326.                         <div align="right">
  327.                             <!--スライダーBTN--><div class="btn-boxx"><div class="swiper-button-prev prev999" onfocus="this.blur();"></div><div class="swiper-button-next next999" onfocus="this.blur();"></div></div><!--スライダーBTN-->
  328.                         </div>
  329.                     </div>
  330.                     <!--ヘッド画像おわり -->
  331.                 </div>
  332.                 <!--ヘッダ画像部 位置調整終り -->
  333.                 <!--内容はじめ -->
  334.                 <!--コンテンツ -->
  335.                 <div class="out-max">
  336.                     <div class="con-w-box02-shop">
  337.                         <div class="box-float-txt">
  338.                             <div class="out-max-shop-item">
  339.                                 {% if Product.ProductCategories is not empty %}
  340.                                     {% for ProductCategory in Product.ProductCategories %}
  341.                                         {% for Category in ProductCategory.Category.path %}
  342.                                             {% if Category.id == 2 or Category.id == 7 or Category.id == 8 or Category.id == 9 %}
  343.                                                 <a href="{{ url('product_list') }}?category_id={{ Category.id }}" class="link-deco02">
  344.                                                 {{ Category.name }}
  345.                                                 </a>{%- if loop.last == false %}<span> │ </span>{% endif -%}
  346.                                             {% endif -%}
  347.                                         {% endfor %}
  348.                                     {% endfor %}
  349.                                 {% endif %}
  350.                                 <div class="sp20"></div>
  351.                                 <span class="pttl03">{{ Product.getPrice02IncTaxMin|price }}</span> 税込
  352.                                 <div class="sp10"></div>
  353.                                 {% if Product.name %}
  354.                                 <strong>{{ Product.name | nl2br }}</strong><br>
  355.                                 {% endif %}
  356.                                 {% if Product.descriptionDetail %}
  357.                                 {{ Product.descriptionDetail | nl2br }}<br>
  358.                                 <div class="sp10"></div>
  359.                                 {% endif %}
  360.                                 {% if Product.accessories %}
  361.                                 {{ Product.accessories | nl2br }}<br>
  362.                                 {% else %}
  363.                                 【セット内容】 振り袖・袋帯・長襦袢・帯揚げ・帯〆・刺繍衿・重衿・衿芯・腰紐(5)・伊達締(2)・コーリンベルト・帯板(2)・帯枕・三重紐・草履・バック<br>
  364.                                 {% endif %}
  365.                                 <a href="#" target="_blank">&gt;セット内容の写真はコチラ </a><br>
  366.                                 ※草履・バックの色や柄はアンジェリカお任せとなります。<br>
  367.                                 <div class="sp10"></div><div class="line01"></div><div class="sp10"></div>
  368.                                 <strong>■アイテムについて</strong><br>
  369.                                 <div class="out-lr">
  370.                                     <div class="sp10"></div>
  371.                                     <!--テーブル-->
  372.                                     <div align="center"><div class="re-tb01"><table>
  373.                                                 <tr>
  374.                                                     <th>対応身長</th>
  375.                                                     <td>
  376.                                                         {% if Product.ProductCategories is not empty %}
  377.                                                             {% for ProductCategory in Product.ProductCategories %}
  378.                                                                 {% for Category in ProductCategory.Category.path %}
  379.                                                                     {% if Category.id >= 20 and Category.id <= 25 %}
  380.                                                                         {{ Category.name }}
  381.                                                                     {% endif -%}
  382.                                                                 {% endfor %}
  383.                                                             {% endfor %}
  384.                                                         {% endif %}
  385.                                                     </td>
  386.                                                 </tr>
  387.                                                 <tr>
  388.                                                     <th>対応サイズ</th>
  389.                                                     <td>
  390.                                                         {{ Product.sizeInfo | nl2br }}
  391.                                                     </td>
  392.                                                 </tr>
  393.                                             </table>
  394.                                     </div></div>
  395.                                     <!--テーブル-->
  396.                                     <div class="sp5"></div>
  397.                                     <!--テーブル-->
  398.                                     <div align="center"><div class="re-tb01"><table>
  399.                                                 <tr>
  400.                                                     <th>素材</th>
  401.                                                     <td>
  402.                                                         {% if Product.ProductCategories is not empty %}
  403.                                                             {% for ProductCategory in Product.ProductCategories %}
  404.                                                                 {% for Category in ProductCategory.Category.path %}
  405.                                                                     {% if Category.id == 26 or Category.id == 27 or Category.id == 28 %}
  406.                                                                         {{ Category.name }}
  407.                                                                     {% endif -%}
  408.                                                                 {% endfor %}
  409.                                                             {% endfor %}
  410.                                                         {% endif %}
  411.                                                     </td>
  412.                                                 </tr>
  413.                                             </table>
  414.                                     </div></div>
  415.                                     <!--テーブル-->
  416.                                 </div>
  417.                                 <div class="sp10"></div>
  418.                                 <div class="sp10"></div><div class="line01"></div><div class="sp10"></div>
  419.                                 <strong>■セット内容について</strong><br>
  420.                                 {% if Product.remark1 %}
  421.                                 {{ Product.remark1 }}<br>
  422.                                 {% else %}
  423.                                 ※袋帯・帯揚げ・帯〆・半衿・重ね衿は画像の通りでお届けします。<br>
  424.                                 ※髪飾り・ショール・肌着・足袋・補正タオルは含まれません<br>
  425.                                 ※掲載写真はご利用のスマホ・モニター環境によって、実際の商品と色味が異なる場合が御座います。実物をご覧頂けるご試着レンタルをご活用ください。 <br>
  426.                                 ※レンタルするには会員登録が必要です。
  427.                                 {% endif %}
  428.                                 {% if app.request.get('resv') != "no1" and app.request.get('resv') != "no2"  %}
  429.                                 <div class="sp20"></div>
  430.                                 <a href="#pagelink01" class="navi-btn01">本予約の申込みへ進む ▼</a>
  431.                                 <div class="sp5"></div>
  432.                                 <a href="#pagelink02" class="navi-btn10">ご試着の申込みへ進む ▼</a>
  433.                                 {% endif %}
  434.                                 <div class="sp20"></div>
  435.                             </div>
  436.                         </div>
  437.                     </div>
  438.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  439.                     {% if app.request.get('resv') == "no1"  %}
  440.                         <div align="center"><div id="pagelink01"></div>
  441.                             <div class="pttl04"><strong></strong>ご試着ご利用者様専用<br>
  442.                                 本予約 お申込み</div></div>
  443.                     {% elseif app.request.get('resv') == "no2"  %}
  444.                         <div align="center"><div id="pagelink01"></div>
  445.                             <div class="pttl04"><strong></strong>本予約済のお客様専用<br>
  446.                                 追加申込み</div></div>
  447.                         {% else %}
  448.                             <div align="center"><div id="pagelink01"></div>
  449.                                 <div class="pttl04"><strong></strong>本予約 お申込み</div></div>
  450.                     {% endif %}
  451.                         <div class="con-w-box02-shop"><div class="box-float-txt">
  452.                                 <div id="plink-form"></div>
  453.                                 <!--★フォーム開始-->
  454.                                 <!--本予約ここから-->
  455.                                 <div class="conform-base">
  456.                                     {% if app.request.get('resv') == "no1"  %}
  457.                                     この振袖の「本予約」がお済みの方専用の追加申込み欄です。<br>
  458.                                     本予約をされていないお客様からの申込みは無効となります。<div class="sp20"></div>
  459.                                     {% elseif app.request.get('resv') == "no2"  %}
  460.                                     ご試着された振袖の本予約はこちらからお申込み下さい。<br>
  461.                                     {% endif %}
  462.                                     <!--行 -->
  463.                                     <div class="conform-box">
  464.                                         <div class="conform-box-con-p">■ご利用日を選択</div>
  465.                                         <div class="conform-box-con-t">
  466.                                             {{ form_widget(form.optionReserveDate) }}
  467.                                             {{ form_errors(form.optionReserveDate) }}
  468.                                             <div class="mini-txt-con">【本予約について】<br>
  469.                                                 本予約の方は前の年の12月15日に発送させて頂きます。
  470.                                                 <br>
  471.                                                 ご利用日翌日に返送をお願いします。<br>
  472.                                             </div>
  473.                                         </div>
  474.                                         <div class="clear-all"></div>
  475.                                     </div>
  476.                                     <!--行 -->
  477.                                     <!--行 -->
  478.                                     <div class="conform-box">
  479.                                         <div class="conform-box-con-p">■追加オプション アイテム<!-- <span class="red-txt">必須</span>--></div>
  480.                                         <div class="conform-box-con-t">
  481.                                             <!--<input name="01" type="checkbox" value="#"class="btn-res">-->
  482.                                             <strong>[レンタル] 選べる 草履・バッグ セット +8,800円(税込)</strong><br>
  483.                                             <div class="mini-txt-con"> ※草履・バックは追加費用でお好みのセットをお選び頂けます。<br>
  484.                                                  希望されない方はアンジェリカお任せとなります。<br>
  485.                                                  <a href="#" target="_blank">>セット内容の写真はコチラ</a></div>
  486.                                             {{ form_widget(form.optionZoriBag) }}
  487.                                             {{ form_errors(form.optionZoriBag) }}
  488.                                             <br><br>
  489.                                             {{ form_widget(form.optionShawl) }}
  490.                                             {{ form_errors(form.optionShawl) }}
  491.                                             <div class="mini-txt-con">
  492.                                                  <a href="#" target="_blank">>写真はコチラ</a><br>
  493.                                                  ※アンジェリカおまかせとなります</div>
  494.                                             <br><br>
  495.                                             <!--<input name="02" type="checkbox" value="#"class="btn-res">-->
  496.                                             <strong>[購入] 肌着 +8,800円(税込)</strong><br>
  497.                                             <div class="mini-txt-con"><a href="https://angelicaferice-ec.jp/html/user_data/assets/img/details/IMG_2350.JPG" data-lightbox="image-1" target="_blank">>写真はコチラ</a><br>※ワンピースタイプの為、裾除け不要<br>
  498.                                                  ※Mサイズは~165cm程度Lサイズは160cm~175cm程度を目安にお考え下さい</div>
  499.                                             {{ form_widget(form.optionUnderwear) }}
  500.                                             {{ form_errors(form.optionUnderwear) }}
  501.                                             <!--<select name="select2">
  502.                                                 <option value=" " selected="selected">サイズをお選びください</option>
  503.                                                 <option value="Mサイズ">Mサイズ</option>
  504.                                                 <option value="Lサイズ">Lサイズ</option>
  505.                                             </select>-->
  506.                                             <br><br>
  507.                                             <!--<input name="02" type="checkbox" value="#"class="btn-res">-->
  508.                                             <strong>[購入] 足袋 +2,200円(税込)</strong>
  509.                                             <div class="mini-txt-con"><a href="https://angelicaferice-ec.jp/html/user_data/assets/img/details/IMG_2351.JPG" data-lightbox="image-2" target="_blank">>写真はコチラ</a></div>
  510.                                             {{ form_widget(form.optionTabi) }}
  511.                                             {{ form_errors(form.optionTabi) }}
  512.                                             <!--<select name="select">
  513.                                                 <option value=" " selected="selected">サイズをお選びください</option>
  514.                                                 <option value="21.0cm">21.0cm</option>
  515.                                                 <option value="21.5cm">21.5cm</option>
  516.                                                 <option value="22.0cm">22.0cm</option>
  517.                                                 <option value="22.5cm">22.5cm</option>
  518.                                                 <option value="23.0cm">23.0cm</option>
  519.                                                 <option value="23.5cm">23.5cm</option>
  520.                                                 <option value="24.0cm">24.0cm</option>
  521.                                                 <option value="24.5cm">24.5cm</option>
  522.                                                 <option value="25.0cm">25.0cm</option>
  523.                                                 <option value="25.5cm">25.5cm</option>
  524.                                                 <option value="26.0cm">26.0cm</option>
  525.                                                 <option value="26.5cm">26.5cm</option>
  526.                                                 <option value="27.0cm">27.0cm</option>
  527.                                                 <option value="27.5cm">27.5cm</option>
  528.                                                 <option value="28.0cm">28.0cm</option>
  529.                                             </select>-->
  530.                                             <div class="sp10"></div><div class="line01"></div><div class="sp10"></div>
  531.                                             <!--<input name="02" type="checkbox" value="#"class="btn-res">-->
  532.                                             {{ form_widget(form.optionSafetyPlan) }}
  533.                                             {{ form_errors(form.optionSafetyPlan) }}
  534.                                             <!--<strong>安心プラン +3,300円</strong>-->
  535.                                             <div class="mini-txt-con"> レンタル中のもしもの時の安心。通常のクリーニングで落とせない汚れに。</div><br>
  536.                                         </div>
  537.                                         <div class="clear-all"></div>
  538.                                     </div>
  539.                                     <div class="conform-box">
  540.                                         <div class="conform-box-con-p">■前撮り希望</div>
  541.                                         <div class="conform-box-con-t">
  542.                                             {{ form_widget(form.optionPreReserve) }}
  543.                                             {{ form_errors(form.optionPreReserve) }}
  544.                                             <!--<input name="02" type="checkbox" value="#"class="btn-res">
  545.                                             前撮りを希望する-->
  546.                                             <div class="mini-txt-con">
  547.                                                  本予約の方は前撮りにも一回無料で振袖がご利用頂けます。<br>
  548.                                                  ご希望の日程をお選びください。<br>
  549.                                                  ※振袖一式は式と同じ内容となります。<br>
  550.                                                  日程が未定の方は後日、追加でお申込み下さい
  551.                                             </div>
  552.                                             {{ form_widget(form.optionPreReserveDate) }}
  553.                                             {{ form_errors(form.optionPreReserveDate) }}
  554.                                             <div class="mini-txt-con">※前撮り日の前々日着でお届けさせて頂きます、前撮り日翌日に返送をお願いします。</div>
  555.                                             <br>
  556.                                             <strong>[レンタル] 前撮り時用<br>
  557.                                                 選べる 草履・バッグ セット +3,300円(税込)</strong><br>
  558.                                             <div class="mini-txt-con">
  559.                                                  ※草履・バックは追加費用でお好みのセットをお選び頂けます。<br>
  560.                                                  希望されない方はアンジェリカお任せとなります。<br>
  561.                                                  <a href="#" target="_blank">>セット内容の写真はコチラ</a>
  562.                                             </div>
  563.                                             {{ form_widget(form.optionPreReserveZoriBag) }}
  564.                                             {{ form_errors(form.optionPreReserveZoriBag) }}
  565.                                             <div class="sp10"></div><div class="line01"></div><div class="sp10"></div>
  566.                                         </div>
  567.                                         <div class="clear-all"></div>
  568.                                     </div>
  569.                                     <!--行 -->
  570.                                     <div class="sp20"></div>
  571.                                             <div class="">
  572.                                             </div>
  573. <!--
  574.                                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  575. -->
  576.                                     <div class="sp5"></div>
  577.                                     {% if Product.stock_find %}
  578.                                     <div class="ec-numberInput" style="display:none"><span>{{ 'common.quantity'|trans }}</span>
  579.                                         {{ form_widget(form.quantity) }}
  580.                                         {{ form_errors(form.quantity) }}
  581.                                     </div>
  582.                                     <a class="navi-btn01 add-cart">上記内容で <br>
  583.                                         本予約を申込む ></a><br>
  584.                                     {% else %}
  585.                                         <div class="ec-productRole__btn">
  586.                                             <button type="button" class="ec-blockBtn--action" disabled="disabled">
  587.                                                 {{ 'front.product.out_of_stock'|trans }}
  588.                                             </button>
  589.                                         </div>
  590.                                     {% endif %}
  591.                                     <div class="sp20"></div>
  592.                                     <div class="conform-box2">
  593.                                         <div class="conform-txt02"><!--下部 注意書き --></div>
  594.                                     </div>
  595.                                 </div>
  596.                                 <!--本予約ここまで-->
  597.                                 <!--試着ここから-->
  598.                             </div></div>
  599.                     {% if app.request.get('resv') != "no1" and app.request.get('resv') != "no2" %}
  600.                         <div align="center"><div id="pagelink02"></div>
  601.                             <div class="pttl04"><strong></strong>ご試着レンタル(5,500円)<br>
  602.                                 お申込み</div></div>
  603.                         <div class="con-w-box02-shop"><div class="box-float-txt">
  604.                                 <div class="conform-base">
  605.                                     <!--行 -->
  606.                                     <div class="conform-box">
  607.                                         <div class="conform-box-con-p">■ご利用日を選択</div>
  608.                                         <div class="conform-box-con-t">
  609.                                             <input type="text" name="graduate3" id="graduate3" value="" class="navi-btn05-none" placeholder="カレンダーよりお選びください >">
  610.                                             <div class="mini-txt-con">              【ご試着について】<br>
  611.                                                 実際に着てみないと不安、という方は5,500円(税込)で自宅でご試着頂けます。<br>
  612.                                                 ご利用日の前々日にお届けします。ご利用日翌日に返送してください
  613.                                                 <br>
  614.                                                 ※注意 発送準備が御座いますので、利用日は本日より14日以降でご指定下さい。お届け先は自宅のみとなります。<br>
  615.                                                 ご試着のお届けは振袖・長襦袢・刺繍衿・重衿・帯・帯揚げ・帯締めとなります。着付け小物(腰紐・伊達締め・帯板・帯枕・衿芯・コーリンベルト)や草履バックは含まれません。
  616.                                                 <br>
  617.                                                 ※ご試着後、本予約は別途お申込みが必要です。</div>
  618.                                             <div class="sp10"></div><div class="line01"></div><div class="sp10"></div>
  619.                                             <strong>[レンタル] ご試着時用<br>
  620.                                                 選べる 草履・バッグ セット +3,300円(税込)</strong><br>
  621.                                             <div class="mini-txt-con"> ※草履・バックは追加費用でお好みのセットをお選び頂けます。<br>
  622.                                                  希望されない方はアンジェリカお任せとなります。<br>
  623.                                                  <a href="#" target="_blank">>セット内容の写真はコチラ</a></div>
  624.                                             <br>
  625.                                             <select name="select">
  626.                                                 <option value=" " selected="selected">ご希望の選べるセットを選択</option>
  627.                                                 <option value="Aセット(草履サイズM:22.5~23.5cm)">Aセット(草履サイズM:22.5~23.5cm)</option>
  628.                                                 <option value="Bセット(草履サイズM:22.5~23.5cm)">Bセット(草履サイズM:22.5~23.5cm)</option>
  629.                                                 <option value="Cセット(草履サイズM:22.5~23.5cm)">Cセット(草履サイズM:22.5~23.5cm)</option>
  630.                                                 <option value="Dセット(草履サイズM:22.5~23.5cm)">Dセット(草履サイズM:22.5~23.5cm)</option>
  631.                                                 <option value="Eセット(草履サイズM:22.5~23.5cm)">Eセット(草履サイズM:22.5~23.5cm)</option>
  632.                                                 <option value="Fセット(草履サイズL:24~25cm)">Fセット(草履サイズL:24~25cm)</option>
  633.                                                 <option value="Gセット(草履サイズL:24~25cm)">Gセット(草履サイズL:24~25cm)</option>
  634.                                                 <option value="Hセット(草履サイズL:24~25cm)">Hセット(草履サイズL:24~25cm)</option>
  635.                                                 <option value="Iセット(草履サイズL:24~25cm)">Iセット(草履サイズL:24~25cm)</option>
  636.                                                 <option value="Jセット(草履サイズL:24~25cm)">Jセット(草履サイズL:24~25cm)</option>
  637.                                             </select>
  638.                                         </div>
  639.                                         <div class="clear-all"></div>
  640.                                     </div>
  641.                                     <!--行 -->
  642.                                     <div class="sp20"></div>
  643.                                     {% if Product.stock_find %}
  644.                                     <button type="submit" name="label" value="test" class="navi-btn01 add-cart preview">ご試着を申込む ></button><br>
  645.                                     {% else %}
  646.                                         <div class="ec-productRole__btn">
  647.                                             <button type="button" class="ec-blockBtn--action" disabled="disabled">
  648.                                                 {{ 'front.product.out_of_stock'|trans }}
  649.                                             </button>
  650.                                         </div>
  651.                                     {% endif %}
  652.                                     <div class="sp20"></div>
  653.                                     <div class="conform-box2">
  654.                                         <div class="conform-txt02"><!--下部 注意書き --></div>
  655.                                     </div>
  656.                                 </div>
  657.                                 <!--試着ここまで-->
  658.                             </div>
  659.                         </div>
  660.                     {% endif %}
  661.                 <!--コンテンツ -->
  662.                 {{ form_rest(form) }}
  663.                 </form>
  664.                     <div class="ec-modal">
  665.                         <div class="ec-modal-overlay">
  666.                             <div class="ec-modal-wrap">
  667.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  668.                                 <div id="ec-modal-header" class="text-center">{{ 'front.product.add_cart_complete'|trans }}</div>
  669.                                 <div class="ec-modal-box">
  670.                                     <div class="ec-role">
  671.                                         <span class="ec-inlineBtn--cancel">{{ 'front.product.continue'|trans }}</span>
  672.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'common.go_to_cart'|trans }}</a>
  673.                                     </div>
  674.                                 </div>
  675.                             </div>
  676.                         </div>
  677.                     </div>
  678.                 </div>
  679.                 {{ include('Block/footer_navi.twig') }}
  680.                 {{ include('Block/footer.twig') }}
  681.             </div>
  682.         </div>
  683.     </div>
  684. {% endblock %}