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: 30px;
  20.         }
  22.         .slick-dots {
  23.             position: absolute;
  24.             bottom: -45px;
  25.             display: block;
  26.             width: 100%;
  27.             padding: 0;
  28.             list-style: none;
  29.             text-align: center;
  30.         }
  32.         .slick-dots li {
  33.             position: relative;
  34.             display: inline-block;
  35.             width: 20px;
  36.             height: 20px;
  37.             margin: 0 5px;
  38.             padding: 0;
  40.             cursor: pointer;
  41.         }
  43.         .slick-dots li button {
  44.             font-size: 0;
  45.             line-height: 0;
  46.             display: block;
  47.             width: 20px;
  48.             height: 20px;
  49.             padding: 5px;
  50.             cursor: pointer;
  51.             color: transparent;
  52.             border: 0;
  53.             outline: none;
  54.             background: transparent;
  55.         }
  57.         .slick-dots li button:hover,
  58.         .slick-dots li button:focus {
  59.             outline: none;
  60.         }
  62.         .slick-dots li button:hover:before,
  63.         .slick-dots li button:focus:before {
  64.             opacity: 1;
  65.         }
  67.         .slick-dots li button:before {
  68.             content: " ";
  69.             line-height: 20px;
  70.             position: absolute;
  71.             top: 0;
  72.             left: 0;
  73.             width: 12px;
  74.             height: 12px;
  75.             text-align: center;
  76.             opacity: .25;
  77.             background-color: black;
  78.             border-radius: 50%;
  80.         }
  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.         #form1 > .mb-3 {
  94.             visibility: hidden;
  95.             height:0;
  96.         }
  98.         form#form1 > div.mb-3:nth-child(4) {
  99.             visibility: visible;
  100.             height: auto;
  101.         }
  103.         /*#form1 > div:nth-child(14) {*/
  104.         /*    visibility: hidden;*/
  105.         /*}*/
  108.         #downloadSpinners {
  109.             display: block;
  110.             position: absolute;
  111.             left: 256px;
  112.             top: 256px;
  113.         }
  115.         #uchiwaCanvas {
  116.             background-color: #cccccc;
  117.             width: 90vW;
  118.             max-width: 512px;
  119.             margin-left: -20px;
  120.         }
  122.         .text-announce {
  123.             color: #ff0000;
  124.             font-weight: bold;
  125.         }
  127.         button#add-cart-button {
  128.             /*background-color:#ffffff;*/
  129.             color:#ffffff;
  130.         }
  132.         button#favorite {
  133.             background-color:#ffff00;
  134.             color:#666666;
  135.             border: 1px solid #aaaaaa;
  136.         }
  137.         button#favorite:hover {
  138.             background-color:#e6e600;
  139.             /*color:#000000;*/
  140.         }
  142.         @media (min-width: 768px) and (max-width: 1070px) {
  143.             #uchiwaCanvas {
  144.                 width: 45vW;
  145.             }
  146.         }
  147.     </style>
  148. {#    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">#}
  149. {#    <link href="https://cdn.jsdelivr.net/npm/vuetify@3.0/dist/vuetify.min.css" rel="stylesheet">#}
  150.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.7.16/dist/vuetify.min.css" />
  151.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" />
  152.     <link rel="stylesheet" href="https://fonts.bunny.net/css?family=roboto:400,500,700" />
  153. {% endblock %}
  155. {% block javascript %}
  156. <script>
  157.     eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  159.         // 規格2に選択肢を割り当てる。
  160.         function fnSetClassCategories(form, classcat_id2_selected) {
  161.             var $form = $(form);
  162.             var product_id = $form.find('input[name=product_id]').val();
  163.             var $sele1 = $form.find('select[name=classcategory_id1]');
  164.             var $sele2 = $form.find('select[name=classcategory_id2]');
  165.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  166.         }
  168.         {% if form.classcategory_id2 is defined %}
  169.         fnSetClassCategories(
  170.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  171.         );
  172.         {% elseif form.classcategory_id1 is defined %}
  173.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  174.         {% endif %}
  175.     </script>
  176.     <script>
  177.         $(function() {
  178.             // bfcache無効化
  179.             $(window).bind('pageshow', function(event) {
  180.                 if (event.originalEvent.persisted) {
  181.                     location.reload(true);
  182.                 }
  183.             });
  185.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  186.             // img タグに width, height が付与されている.
  187.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  188.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  189.             // $('.ec-grid2__cell').hide();
  190.             var removeSize = function () {
  191.                 $('.slide-item').height('');
  192.                 $('.slide-item img')
  193.                     .removeAttr('width')
  194.                     .removeAttr('height')
  195.                     .removeAttr('style');
  196.             };
  197.             var slickInitial = function(slick) {
  198.                 $('.ec-grid2__cell').fadeIn(1500);
  199.                 var baseHeight = $(slick.target).height();
  200.                 var baseWidth = $(slick.target).width();
  201.                 var rate = baseWidth / baseHeight;
  203.                 $('.slide-item').height(baseHeight * rate); // 余白を削除する
  204.                 // transform を使用することでCLSの影響を受けないようにする
  205.                 $('.slide-item img')
  206.                     .css(
  207.                         {
  208.                             'transform-origin': 'top left',
  209.                             'transform': 'scaleY(' + rate + ')',
  210.                             'transition': 'transform .1s'
  211.                         }
  212.                     );
  213.                 // 正しいサイズに近くなったら属性を解除する
  214.                 setTimeout(removeSize, 500);
  215.             };
  216.             $('.item_visual').on('init', slickInitial);
  217.             // リサイズ時は CLS の影響を受けないため属性を解除する
  218.             $(window).resize(removeSize);
  219.             $('.item_visual').slick({
  220.                 dots: false,
  221.                 arrows: false,
  222.                 responsive: [{
  223.                     breakpoint: 768,
  224.                     settings: {
  225.                         dots: true
  226.                     }
  227.                 }]
  228.             });
  230.             $('.slideThumb').on('click', function() {
  231.                 var index = $(this).attr('data-index');
  232.                 $('.item_visual').slick('slickGoTo', index, false);
  233.             })
  234.         });
  235.     </script>
  236.     <script>
  237.         $(function() {
  238.             $('.add-cart').on('click', function(event) {
  239.                     // console.log('set canvas image');
  240. //
  241. //     const c = document.getElementById('uchiwaCanvas');
  242. //
  243. //     c.toBlob(function(blob) {
  244. //     const imgFile = new File([blob], 'trimedfileupload.png', {type: "image/png"});
  245. //     const dt = new DataTransfer();
  246. //     dt.items.add(imgFile);
  247. //     const fileInput = document.getElementById("file");
  248. //     fileInput.files = dt.files;
  249. // });
  251.     // console.log('data is : ', c);
  252.     // const imgUrl = c.toDataURL();
  253.     // console.log('image is : ', imgUrl);
  254.     //
  255.     // let fd = new FormData($('#form1').get(0))
  256.     // fd.delete("file")
  257.     // fd.append("file", imgUrl )
  258.     // document.getElementById('file').value = imgUrl;
  260.                 {% if form.classcategory_id1 is defined %}
  261.                 // 規格1フォームの必須チェック
  262.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  263.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  264.                     return true;
  265.                 } else {
  266.                     $('#classcategory_id1')[0].setCustomValidity('');
  267.                 }
  268.                 {% endif %}
  270.                 {% if form.classcategory_id2 is defined %}
  271.                 // 規格2フォームの必須チェック
  272.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  273.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  274.                     return true;
  275.                 } else {
  276.                     $('#classcategory_id2')[0].setCustomValidity('');
  277.                 }
  278.                 {% endif %}
  280.                 // 個数フォームのチェック
  281.                 if ($('#quantity').val() < 1) {
  282.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  283.                     return true;
  284.                 } else {
  285.                     $('#quantity')[0].setCustomValidity('');
  286.                 }
  288.                 event.preventDefault();
  289.                 const $form = $('#form1');
  290.     const formData = new FormData($form.get(0));
  291.                 $.ajax({
  292.                     url: $form.attr('action'),
  293.                     type: $form.attr('method'),
  294.                     // data: $form.serialize(),
  295.                     data: formData,
  296.                     processData: false,
  297.                     // contentType: 'multipart/form-data',
  298.                     contentType: false,
  299.                     dataType: 'json',
  300.                     // async: false,
  301.                     beforeSend: function(xhr, settings) {
  302.                         // Buttonを無効にする
  303.                         $('.add-cart').prop('disabled', true);
  304.                     }
  305.                 }).done(function(data) {
  306.                     // レスポンス内のメッセージをalertで表示
  307.                     $.each(data.messages, function() {
  308.                         $('#ec-modal-header').text(this);
  309.                     });
  311.                     $('.ec-modal').show()
  313.                     // カートブロックを更新する
  314.                     $.ajax({
  315.                         url: "{{ url('block_cart') }}",
  316.                         type: 'GET',
  317.                         dataType: 'html'
  318.                     }).done(function(html) {
  319.                         $('.ec-headerRole__cart').html(html);
  320.                     });
  321.                 }).fail(function(data) {
  322.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  323.                 }).always(function(data) {
  324.                     // Buttonを有効にする
  325.                     $('.add-cart').prop('disabled', false);
  326.                 });
  327.             });
  328.         });
  330.         $('.ec-modal-wrap').on('click', function(e) {
  331.             // モーダル内の処理は外側にバブリングさせない
  332.             e.stopPropagation();
  333.         });
  334.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  335.             $('.ec-modal').hide()
  336.         });
  337.         const sheet_size = '{{ Product.sheet_size }}';
  338.         const decoration_type = '{{ Product.product_decoration_type }}'
  339.     </script>
  343.     <script type="application/ld+json">
  344.     {
  345.         "@context": "https://schema.org/",
  346.         "@type": "Product",
  347.         "name": "{{ Product.name }}",
  348.         "image": [
  349.             {% for img in Product.ProductImage %}
  350.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  352.             {% else %}
  353.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  354.             {% endfor %}
  355.         ],
  356.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  357.         {% if Product.code_min %}
  358.         "sku": "{{ Product.code_min }}",
  359.         {% endif %}
  360.         "offers": {
  361.             "@type": "Offer",
  362.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  363.             "priceCurrency": "{{ eccube_config.currency }}",
  364.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  365.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  366.         }
  367.     }
  368.     </script>
  369.     <script async src="https://ga.jspm.io/npm:es-module-shims@1.6.2/dist/es-module-shims.js"></script>
  371. {#<script type="importmap">#}
  372. {#  {#}
  373. {#    "imports": {#}
  374. {#      "vue": "https://cdn.jsdelivr.net/npm/vue@3.5.13/dist/vue.esm-browser.js",#}
  375. {#      "vuetify": "https://cdn.jsdelivr.net/npm/vuetify@3.7.12/dist/vuetify.esm.js"#}
  376. {#    }#}
  377. {#  }#}
  378. {#</script>#}
  379. {#<script src="https://unpkg.com/http-vue-loader"></script>#}
  380. {#<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.9.5/dist/vue3-sfc-loader.min.js"></script>#}
  382.     <script src="https://cdn.jsdelivr.net/npm/vue@3.5.13/dist/vue.global.min.js"></script>
  383.     <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
  384. <script src="https://cdn.jsdelivr.net/npm/vuetify@3.7.16/dist/vuetify.min.js"></script>
  386. {% endblock %}
  388. {% block main %}
  389.     {% set hasCategory = false %}
  390.     {% set hasFile = false %}
  391.     {% for ProductCategory in Product.ProductCategories %}
  392.         {% if ProductCategory.Category.id == 8 or ProductCategory.Category.id == 20 %}
  393.             {% if Product.product_input_type == 'on' %}
  394.                 {% set hasCategory = true %}
  395.             {% endif %}
  396.         {% endif %}
  397.         {%  if ProductCategory.Category.id == 23 %}
  398.         {% set hasFile = true %}
  399.         {% endif %}
  400.     {% endfor %}
  401.     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300..400,0..1,0&display=swap" media="print" onload="this.media='all'">
  402.     <div class="ec-productRole">
  403.         <div class="ec-grid2">
  404.             <div class="ec-grid2__cell">
  405.                 <div class="product-image">
  406.                     {% if hasCategory == true %}
  407.                         <div id="app"></div>
  408.                         <div class="uchiwa_img_wrapper" style="width:50%;margin: 20px">
  409.                             <canvas id="uchiwaCanvas" class="img_canvas" height="512" width="512"></canvas>
  410.                         </div>
  411.                         <div id="downloadSpinners">
  412.                             <svg class="q-spinner text-primary" width="4em" height="4em" viewBox="0 0 38 38"
  413.                                  xmlns="http://www.w3.org/2000/svg">
  414.                                 <defs>
  415.                                     <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
  416.                                         <stop stop-color="currentColor" stop-opacity="0" offset="0%"></stop>
  417.                                         <stop stop-color="currentColor" stop-opacity=".631" offset="63.146%"></stop>
  418.                                         <stop stop-color="currentColor" offset="100%"></stop>
  419.                                     </linearGradient>
  420.                                 </defs>
  421.                                 <g transform="translate(1 1)" fill="none" fill-rule="evenodd">
  422.                                     <path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2">
  423.                                         <animateTransform attributeName="transform" type="rotate" from="0 18 18"
  424.                                                           to="360 18 18" dur="0.9s"
  425.                                                           repeatCount="indefinite"></animateTransform>
  426.                                     </path>
  427.                                     <circle fill="currentColor" cx="36" cy="18" r="1">
  428.                                         <animateTransform attributeName="transform" type="rotate" from="0 18 18"
  429.                                                           to="360 18 18" dur="0.9s"
  430.                                                           repeatCount="indefinite"></animateTransform>
  431.                                     </circle>
  432.                                 </g>
  433.                             </svg><!----></div>
  434.                     {% endif %}
  435.                     {#                    {{ dump(Product) }} #}
  436.                     {#                    {{ dump(form) }} #}
  437.                     {#                    {% for choice in form.order_color1.choices %} #}
  438.                     {#                    {{ dump(choice) }} #}
  439.                     {#                    {% endfor %} #}
  441.                 </div>
  443.                 <div class="ec-sliderItemRole">
  445.                     {% if hasCategory == false %}
  446.                         <div class="item_visual">
  447.                             {% for ProductImage in Product.ProductImage %}
  448.                                 <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}"
  449.                                                              alt="{{ loop.first ? Product.name : '' }}" width="550"
  450.                                                              height="550"{% if loop.index > 1 %} loading="lazy"{% endif %}>
  451.                                 </div>
  452.                             {% else %}
  453.                                 <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"
  454.                                                              alt="{{ loop.first ? Product.name : '' }}" width="550"
  455.                                                              height="550"></div>
  456.                             {% endfor %}
  457.                         </div>
  458.                         <div class="item_nav">
  459.                             {% for ProductImage in Product.ProductImage %}
  460.                                 <div class="slideThumb" data-index="{{ loop.index0 }}"><img
  461.                                             src="{{ asset(ProductImage, 'save_image') }}" alt="" width="133"
  462.                                             height="133"
  463.                                             loading="lazy"></div>
  464.                             {% endfor %}
  465.                         </div>
  466.                     {% endif %}
  467.                 </div>
  469.                 {% if hasCategory == true or hasFile == true %}
  470.                     <div style="margin-top: 120px;">
  471. {#                        <p class="text-announce">右側の項目でうちわのシミュレーションが確認できます。</p>#}
  472.                         {#                        <p>上の文字と下の文字は空白で左右の位置を調整できます<br>（スペースで左右の位置を調整できます）</p> #}
  473.                         <h4>ご注意</h4>
  474.                         <p class="text-announce">実際の商品は、仕上がりイメージと若干異なる場合があります</p>
  475.                     {% if hasCategory == true  %}
  476.                         <p class="text-announce">ひらがななどで全体が一枚でつながらない場合には、背景でつながるげることがあります</p>
  477.                     {% endif %}
  478.                     </div>
  479.                     <div>
  480.                         <img class="material__img" src="/ecshop/html/user_data/assets/img/material/color_basic1.jpg"
  481.                              alt="カラー一覧"><br>
  482.                         <img class="material__img" src="/ecshop/html/user_data/assets/img/material/color_basic2.jpg"
  483.                              alt="カラー一覧"><br>
  484.                         <img class="material__img" src="/ecshop/html/user_data/assets/img/material/color_basic3.jpg"
  485.                              alt="カラー一覧">
  486.                         <img class="material__img" src="/ecshop/html/user_data/assets/img/material/color_glitter1.jpg"
  487.                              alt="グリッターカラー一覧"><br>
  488.                         <img class="material__img" src="/ecshop/html/user_data/assets/img/material/use_font.jpg"
  489.                              alt="書体見本">
  490.                     </div>
  491.                 {% endif %}
  492.             </div>
  493.             <div class="ec-grid2__cell">
  494.                 <div class="ec-productRole__profile">
  495.                     {# 商品名 #}
  496.                     <div class="ec-productRole__title">
  497.                         <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  498.                     </div>
  500.                     {#                    <div style="width: 50%;margin: 20px;display:none;"> #}
  501.                     {#                        <input type="text" id="uchiwa_up_text" name="uchiwa_up_text" value="未来"/><br/> #}
  502.                     {#                        <input type="text" id="uchiwa_main_text" name="uchiwa_main_text" value="看" #}
  503.                     {#                               style="width:100%;"/><br> #}
  504.                     {#                        <input type="text" id="uchiwa_low_text" name="uchiwa_lo_text" value="板"/><br/> #}
  505.                     {#                        <button id="uchiwa_set" type="button">再作画</button> #}
  506.                     {#                        <br/> #}
  507.                     {#                        一番外側の色： #}
  508.                     {#                        <select id="uchiwa_back_color1" name="back_color1"> #}
  509.                     {#                        </select> #}
  510.                     {#                        <br/> #}
  511.                     {#                        フチの外枠： #}
  512.                     {#                        <select id="uchiwa_back_color2" name="back_color2"> #}
  513.                     {#                        </select> #}
  514.                     {#                        <br/> #}
  515.                     {#                        フチの中： #}
  516.                     {#                        <select id="uchiwa_back_color3" name="back_color3"> #}
  517.                     {#                        </select> #}
  518.                     {#                        <br/> #}
  519.                     {#                        文字の色： #}
  520.                     {#                        <select id="uchiwa_back_color4" name="back_color4"> #}
  521.                     {#                        </select> #}
  522.                     {#                        <br/> #}
  523.                     {#                    </div> #}
  525.                     {# タグ #}
  526.                     <ul class="ec-productRole__tags">
  527.                         {% for Tag in Product.Tags %}
  528.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  529.                         {% endfor %}
  530.                     </ul>
  531.                     {# 通常価格 #}
  532.                     {% if Product.hasProductClass -%}
  533.                         <div class="ec-productRole__priceRegular">
  534.                             {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  535.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span
  536.                                             class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  537.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  538.                             {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  539.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span
  540.                                             class="price01-default">{{ Product.getPrice01IncTaxMin|price }}～ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  541.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  542.                             {% endif %}
  543.                         </div>
  544.                     {% else %}
  545.                         {% if Product.getPrice01Max is not null %}
  546.                             <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：{{ Product.getPrice01IncTaxMin|price }}</span>
  547.                             <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  548.                         {% endif %}
  549.                     {% endif %}
  550.                     {# 販売価格 #}
  551.                     <div class="ec-productRole__price">
  552.                         {% if Product.hasProductClass -%}
  553.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  554.                                 <div class="ec-price">
  555.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  556.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  557.                                 </div>
  558.                             {% else %}
  559.                                 <div class="ec-price">
  560.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  561.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  562.                                 </div>
  563.                             {% endif %}
  564.                         {% else %}
  565.                             <div class="ec-price">
  566.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  567.                                 <span class="ec-price__tax">{{ '税込'|trans }}</span>
  568.                             </div>
  569.                         {% endif %}
  570.                     </div>
  571.                     {# 商品コード #}
  572.                     {% if Product.code_min is not empty %}
  573.                         <div class="ec-productRole__code">
  574.                             {{ '商品コード'|trans }}： <span
  575.                                     class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  576.                         </div>
  577.                     {% endif %}
  578.                     {# 関連カテゴリ #}
  579.                     {% if Product.ProductCategories is not empty %}
  580.                         <div class="ec-productRole__category">
  581.                             <div>{{ '関連カテゴリ'|trans }}</div>
  582.                             {% for ProductCategory in Product.ProductCategories %}
  583.                                 <ul>
  584.                                     <li>
  585.                                         {% for Category in ProductCategory.Category.path %}
  586.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  587.                                             <span>＞</span>{% endif -%}
  588.                                         {% endfor %}
  589.                                     </li>
  590.                                 </ul>
  591.                             {% endfor %}
  592.                         </div>
  593.                     {% endif %}
  594.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1"
  595.                           enctype="multipart/form-data">
  596.                         {% if Product.stock_find %}
  597.                             <div class="ec-productRole__actions">
  598.                                 {% if form.classcategory_id1 is defined %}
  599.                                     <div class="ec-select">
  600.                                         {{ form_row(form.classcategory_id1) }}
  601.                                         {{ form_errors(form.classcategory_id1) }}
  602.                                     </div>
  603.                                     {% if form.classcategory_id2 is defined %}
  604.                                         <div class="ec-select">
  605.                                             {{ form_row(form.classcategory_id2) }}
  606.                                             {{ form_errors(form.classcategory_id2) }}
  607.                                         </div>
  608.                                     {% endif %}
  609.                                 {% endif %}
  612.                             </div>
  614. {#                            {% if hasFile %}#}
  615. {#                                <input type="file" id="file" name="file" class="form-control">#}
  616. {#                                {% endif %}#}
  618.                             {{ form_rest(form) }}
  620.                             <div class="ec-productRole__btn">
  621.                                 <button id="add-cart-button" type="submit" class="ec-blockBtn--action add-cart"
  622.                                         disabled>
  623.                                     {{ 'カートに入れる'|trans }}
  624.                                 </button>
  625.                             </div>
  626.                         {% else %}
  627.                             <div class="ec-productRole__btn">
  628.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  629.                                     {{ 'ただいま品切れ中です。'|trans }}
  630.                                 </button>
  631.                             </div>
  632.                         {% endif %}
  633.                         {#                        <div style="display: none"><input type="text" name="file" id="image_file"></div> #}
  634.                     </form>
  635.                     <div class="ec-modal">
  636.                         <div class="ec-modal-overlay">
  637.                             <div class="ec-modal-wrap">
  638.                                 <span class="ec-modal-close"><span class="ec-icon"><img
  639.                                                 src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  640.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  641.                                 <div class="ec-modal-box">
  642.                                     <div class="ec-role">
  643.                                         <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  644.                                         <a href="{{ url('cart') }}"
  645.                                            class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  646.                                     </div>
  647.                                 </div>
  648.                             </div>
  649.                         </div>
  650.                     </div>
  651.                     {% if BaseInfo.option_favorite_product %}
  652.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  653.                             <div class="ec-productRole__btn">
  654.                                 {% if is_favorite == false %}
  655.                                     <button type="submit" id="favorite" class="ec-blockBtn--action">
  656.                                         {{ 'お気に入りに追加'|trans }}
  657.                                     </button>
  658.                                 {% else %}
  659.                                     <button type="submit" id="favorite" class="ec-blockBtn--action"
  660.                                             disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
  661.                                     </button>
  662.                                 {% endif %}
  663.                             </div>
  664.                         </form>
  665.                     {% endif %}
  666.                     <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  667.                     </div>
  668.                 </div>
  669.             </div>
  670.         </div>
  671.         {% if Product.freearea %}
  672.             <div class="ec-productRole__description">
  673.                 {{ include(template_from_string(Product.freearea)) }}
  674.             </div>
  675.         {% endif %}
  676.     </div>
  679.     {% if hasCategory == true %}
  680.         <script>
  681.                 const sheetSize = "{{ Product.sheet_size }}";
  682.             {#console.log('product test', "{{ Product.sheet_size }}" )#}
  683.             // https://mirai-kanban.com/ecshop/html/user_data/assets/js/test2.html
  684.             const product_color_type1 = '{{ Product.product_color_type1 }}'
  685.             const product_color_type2 = '{{ Product.product_color_type2 }}'
  686.             if ($('select#classcategory_id2').length > 0) {
  687.                 console.log('cat 2', $('select#classcategory_id2'))
  688.                 $('select#classcategory_id1 option:nth-child(2)').prop('selected', true);
  689.             }
  692.             // $('select#classcategory_id1').trigger('change');
  693.             // subChange();
  695.             // function subChange() {
  696.             //     const myData = $('select#classcategory_id1');
  697.             //     const $form = $('form#form1');
  698.             //     // var $form = myData.parents('form');
  699.             //     var product_id = $form.find('input[name=product_id]').val();
  700.             //     var $sele1 = myData;
  701.             //     var $sele2 = $form.find('select[name=classcategory_id2]');
  702.             //
  703.             //     // 規格1のみの場合
  704.             //     if (!$sele2.length) {
  705.             //         eccube.checkStock($form, product_id, $sele1.val(), null);
  706.             //         // 規格2ありの場合
  707.             //     } else {
  708.             //         eccube.setClassCategories($form, product_id, $sele1, $sele2);
  709.             //     }
  710.             // }
  713.         </script>
  715.         <script src="{{ asset('assets/js/mirai.js') }}"></script>
  717.         <script type="module">
  718.             // import { createApp, defineAsyncComponent } from 'vue';
  719.             // import { createVuetify } from 'vuetify';
  720.             // import {loadModule} from 'vue3-sfc-loader';
  721.             // const { loadModule } = window['vue3-sfc-loader'];
  722. // console.log('load modules');
  724.             // import {createVuetify} from 'vuetify'
  725.             // import { md2 } from 'vuetify/blueprints'
  726.             const vue3_sfc_loader_options = {
  727.                 moduleCache: { vue: Vue, vuetify: Vuetify.vuetify },
  728.                 getFile(url) {
  729.                     url = /.*?.js|.mjs|.css|.less|.vue$/.test(url)
  730.                         ? url
  731.                         : `${url}.vue`;
  732.                     const type = /.*?.js|.mjs$/.test(url)
  733.                         ? ".mjs"
  734.                         : /.*?.vue$/.test(url)
  735.                             ? ".vue"
  736.                             : /.*?.css$/.test(url)
  737.                                 ? ".css"
  738.                                 : ".vue";
  739.                     const getContentData = (asBinary) =>
  740.                         fetch(url).then((res) =>
  741.                             !res.ok
  742.                                 ? Promise.reject(url)
  743.                                 : asBinary
  744.                                     ? res.arrayBuffer()
  745.                                     : res.text()
  746.                         );
  747.                     return { getContentData: getContentData, type: type };
  748.                 },
  749.                 addStyle(textContent) {
  750.                     let styleElement = document.createElement("style");
  751.                     document.head.insertBefore(
  752.                         Object.assign(styleElement, { textContent }),
  753.                         document.head.getElementsByTagName("style")[0] || null
  754.                     );
  755.                 },
  756.                 handleModule(type, getContentData, path, options) {
  757.                     switch (type) {
  758.                         case ".css":
  759.                             return options.addStyle(getContentData(false));
  760.                         case ".less":
  761.                             console.error(".......");
  762.                     }
  763.                 },
  764.                 log(type, ...args) {
  765.                     console.log(type, ...args);
  766.                 },
  767.             };
  768.             const { loadModule } = window["vue3-sfc-loader"];
  770.             const app = Vue.createApp(
  771.                 Vue.defineAsyncComponent(
  772.                     () => loadModule("{{ asset('assets/vue/main.vue') }}", vue3_sfc_loader_options)
  773.                 ),
  774.             )
  775. // {{ asset('assets/vue/main.vue') }}
  776.             console.log('start vue');
  777.             // const vuetify = createVuetify();
  778.             // const app = createApp({
  779.             //     components: {
  780.             //         'my-component': defineAsyncComponent(() =>
  781.             //             loadModule(
  782.             //                 "assets/vue/main.vue",
  783.             //                 vue3_sfc_loader_options
  784.             //             )
  785.             //         ),
  786.             //     },
  787.             //     template: `<my-component />`,
  788.             // });
  790.             const { createVuetify } = Vuetify;
  791.             const vuetify = createVuetify({
  792.                 theme: {
  793.                     defaultTheme: 'light'
  794.                 },
  795.                 // blueprint: md2,
  796.             });
  797.             app.use(vuetify);
  798.             app.mount('#app');
  799.         </script>
  800.         <script type="module">
  801.             {#import { createApp, ref } from 'vue';#}
  802.             {#import { createVuetify } from 'vuetify';#}
  803.             {#import App from "{{ asset('assets/vue/app.js') }}";#}
  805.             {#const vuetify = createVuetify();#}
  806.             {#const app = createApp({App});#}
  807.             {#app.use(vuetify);#}
  808.             {#app.mount('#app');#}
  810.             // var vue = new Vue({
  811.             //     el: '#app',
  812.             //     components: {
  813.             //         'vc-main-1': httpVueLoader('assets/vue/main.vue')
  814.             //     }
  815.             // });
  816.         </script>
  817.     {% else %}
  818.         <script>
  819.             $('#add-cart-button').prop('disabled', false)
  820.         </script>
  821.     {% endif %}
  823.     <script>
  824.         $('label[for=quantity]').text('数量')
  825.     </script>
  826. {% endblock %}