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

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% set body_class = 'product_page' %}
  5. {% block stylesheet %}
  6.   <link rel="stylesheet" href="/css/sm.css?v=26" media="screen and (max-width:640px)"/>
  7.   <link rel="stylesheet" href="/css/pc.css?v=50" media="screen and (min-width:641px)"/>
  8.   <link rel="stylesheet" href="/css/product_detail.css"/>
  9.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" />
  10.   <style>/* Fancybox全体を最前面に */
  11.     .fancybox__container   { z-index: 2147483640 !important; }
  12.     #syousai_img .none{
  13.       display: none;
  14.     }
  15.     /* 再入荷通知ボタン */
  16.     .btns.restock a {
  17.       background-color: #ff6b6b !important;
  18.       border-color: #ff6b6b !important;
  19.       color: #fff !important;
  20.     }
  21.     .btns.restock a:hover {
  22.       background-color: #ee5a5a !important;
  23.       border-color: #ee5a5a !important;
  24.     }
  25.     .btns.restock-registered a {
  26.       background-color: #6c757d !important;
  27.       border-color: #6c757d !important;
  28.       color: #fff !important;
  29.     }
  30.     .btns.restock-registered a:hover {
  31.       background-color: #5a6268 !important;
  32.       border-color: #545b62 !important;
  33.     }
  34.   </style>
  35. {% endblock %}
  37. {% block javascript %}
  38. <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
  39. <script>
  40.   eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  42.       // 規格2に選択肢を割り当てる。
  43.       function fnSetClassCategories(form, classcat_id2_selected) {
  44.           var $form = $(form);
  45.           var product_id = $form.find('input[name=product_id]').val();
  46.           var $sele1 = $form.find('select[name=classcategory_id1]');
  47.           var $sele2 = $form.find('select[name=classcategory_id2]');
  48.           eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  49.       }
  51.       {% if form.classcategory_id2 is defined %}
  52.       fnSetClassCategories(
  53.           $('#form1'),{{ form.classcategory_id2.vars.value|json_encode|raw }}
  54.       );
  55.       {% elseif form.classcategory_id1 is defined %}
  56.       eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  57.       {% endif %}
  58.   </script>
  59.   <script>
  60.       $(function () {
  61.           // bfcache無効化
  62.           $(window).bind('pageshow', function (event) {
  63.               if (event.originalEvent.persisted) {
  64.                   location.reload(true);
  65.               }
  66.           });
  68.           // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  69.           // img タグに width, height が付与されている.
  70.           // 630px 未満の画面サイズでは縦横比が壊れるための対策
  71.           // see https://github.com/EC-CUBE/ec-cube/pull/5023
  72.           $('.ec-grid2__cell').hide();
  73.           var removeSize = function () {
  74.               $('.slide-item').height('');
  75.               $('.slide-item img')
  76.                   .removeAttr('width')
  77.                   .removeAttr('height')
  78.                   .removeAttr('style');
  79.           };
  80.           var slickInitial = function (slick) {
  81.               $('.ec-grid2__cell').fadeIn(1500);
  82.               var baseHeight = $(slick.target).height();
  83.               var baseWidth = $(slick.target).width();
  84.               var rate = baseWidth / baseHeight;
  86.               $('.slide-item').height(baseHeight * rate); // 余白を削除する
  87.               // transform を使用することでCLSの影響を受けないようにする
  88.               $('.slide-item img')
  89.                   .css(
  90.                       {
  91.                           'transform-origin': 'top left',
  92.                           'transform': 'scaleY(' + rate + ')',
  93.                           'transition': 'transform .1s'
  94.                       }
  95.                   );
  96.               // 正しいサイズに近くなったら属性を解除する
  97.               setTimeout(removeSize, 500);
  98.           };
  99.           $('.item_visual').on('init', slickInitial);
  100.           // リサイズ時は CLS の影響を受けないため属性を解除する
  101.           $(window).resize(removeSize);
  102.           $('.item_visual').slick({
  103.               dots: false,
  104.               arrows: false,
  105.               responsive: [{
  106.                   breakpoint: 768,
  107.                   settings: {
  108.                       dots: true
  109.                   }
  110.               }]
  111.           });
  113.           $('.slideThumb').on('click', function () {
  114.               var index = $(this).attr('data-index');
  115.               $('.item_visual').slick('slickGoTo', index, false);
  116.           })
  117.       });
  118.   </script>
  119.   <script>
  120.       $(function () {
  121.           $('.add-cart').on('click', function (event) {
  122.             {% if form.classcategory_id1 is defined %}
  123.               // 規格1フォームの必須チェック
  124.               if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  125.                   $('#classcategory_id1')[0].setCustomValidity('{{ '項目を選択してください'|trans }}');
  126.                   return true;
  127.               } else {
  128.                   $('#classcategory_id1')[0].setCustomValidity('');
  129.               }
  130.             {% endif %}
  132.             {% if form.classcategory_id2 is defined %}
  133.               // 規格2フォームの必須チェック
  134.               if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  135.                   $('#classcategory_id2')[0].setCustomValidity('{{ '項目を選択してください'|trans }}');
  136.                   return true;
  137.               } else {
  138.                   $('#classcategory_id2')[0].setCustomValidity('');
  139.               }
  140.             {% endif %}
  142.               // 個数フォームのチェック
  143.               if ($('#quantity').val() < 1) {
  144.                   $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  145.                   return true;
  146.               } else {
  147.                   $('#quantity')[0].setCustomValidity('');
  148.               }
  150.               event.preventDefault();
  151.               $form = $('#form1');
  152.               $.ajax({
  153.                   url: $form.attr('action'),
  154.                   type: $form.attr('method'),
  155.                   data: $form.serialize(),
  156.                   dataType: 'json',
  157.                   beforeSend: function (xhr, settings) {
  158.                       // Buttonを無効にする
  159.                       $('.add-cart').prop('disabled', true);
  160.                   }
  161.               }).done(function (data) {
  162.                   // レスポンス内のメッセージをalertで表示
  163.                   $.each(data.messages, function () {
  164.                       $('#ec-modal-header').text(this);
  165.                   });
  167.                   $('.ec-modal').show()
  169.                   // カートブロックを更新する
  170.                   $.ajax({
  171.                       url: "{{ url('block_cart') }}",
  172.                       type: 'GET',
  173.                       dataType: 'html'
  174.                   }).done(function (html) {
  175.                       $('.ec-headerRole__cart').html(html);
  176.                   });
  177.               }).fail(function (data) {
  178.                   alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  179.               }).always(function (data) {
  180.                   // Buttonを有効にする
  181.                   $('.add-cart').prop('disabled', false);
  182.               });
  183.           });
  184.       });
  186.       $('.ec-modal-wrap').on('click', function (e) {
  187.           // モーダル内の処理は外側にバブリングさせない
  188.           e.stopPropagation();
  189.       });
  190.       $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function () {
  191.           $('.ec-modal').hide()
  192.       });
  193.   </script>
  194.   <script type="application/ld+json">
  195.     {
  196.     "@context": "https://schema.org/",
  197.     "@type": "Product",
  198.     "name": "{{ Product.name }}",
  199.     "image": [
  200.     {% for img in Product.ProductImage %}
  201.       "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  203.     {% else %}
  204.       "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  205.     {% endfor %}
  206.     ],
  207.     "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}
  208.     ",
  209.     {% if Product.code_min %}
  210.       "sku": "{{ Product.code_min }}",
  211.     {% endif %}
  212.     "offers": {
  213.     "@type": "Offer",
  214.     "url": "{{ url('product_detail', {'id': Product.id}) }}",
  215.     "priceCurrency": "{{ eccube_config.currency }}",
  216.     "price": "{{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0 }}",
  217.     "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  218.     }
  219.     }
  223.   </script>
  225.   <script>
  226.       $(function () {
  227.           $("#syosuai_wrap dl dt#syousai_img p img").on("click", function () {
  228.               let src = $(this).attr("src");
  229.               $("#main_img").attr("src", src);
  230.           });
  231.       });
  233.       function doSubmit() {
  234.           $("#form1").submit();
  235.       }
  237.       function doFavorite() {
  238.           $("#form2").submit();
  239.       }
  241.       $(function () {
  242.         $('.ec-layoutRole__mainBottom').insertAfter('.syousai_txt');
  243.       });
  245.       function do_contact_product(){
  246.         $("#contact_product").submit();
  247.       }
  249.       function changeImage(src){
  250.         $("#main_img").attr("src", src);
  251.       }
  253.       // 再入荷通知の登録・解除
  254.       function handleRestockAction(productId, type) {
  255.         var action = type === 1 ? "登録" : "解除";
  256.         if (confirm("再入荷通知を" + action + "しますか？")) {
  257.           location.href = "{{ url('product_restock', {'id': 0}) }}".replace('/0', '/' + productId) + "?type=" + type;
  258.         }
  259.       }
  261.       // 数量変更時にリクエスト予約フォームに反映
  262.       $(function(){
  263.         $("#quantity").on("change", function(){
  264.           var val = $(this).val();
  265.           $("#reserve_num").val(val);
  266.         });
  267.       });
  269.   </script>
  271.     <script>
  272.     //カート固定
  273.     (function () {
  274.       const cart = document.getElementById('cartfix');
  275.       const cartbox = document.getElementById('cartbox');
  276.       const wrap = document.querySelector('.ec-layoutRole__contents');
  278.       function syncCartboxHeight() {
  279.         cartbox.style.height = 'auto'; // 焼き付いた高さを解除してから実寸を測る (縦白紙バグ対策)
  280.         cartbox.style.height = wrap.offsetHeight + 'px';
  281.       }
  283.       function onScroll() {
  284.         const screenWidth = window.innerWidth;
  285.         const distanceFromBottom =
  286.           wrap.offsetHeight - window.scrollY - cart.offsetHeight;
  288.         syncCartboxHeight();
  290.         if (screenWidth > 640) {
  291.           if (window.scrollY < 60) {
  292.             cart.style.position = 'sticky';
  293.             cart.style.top = '214px';
  294.             cart.style.bottom = 'auto';
  295.             cart.style.padding = '20px';
  296.           }
  297.           else if (distanceFromBottom <= 60) {
  298.             cart.style.position = 'absolute';
  299.             cart.style.top = 'auto';
  300.             cart.style.bottom = '68px';
  301.             cart.style.padding = '20px';
  302.           }
  303.           else {
  304.             cart.style.position = 'sticky';
  305.             cart.style.top = '214px';
  306.             cart.style.bottom = 'auto';
  307.             cart.style.padding = '20px';
  308.           }
  309.         }
  310.         else {
  311.           cart.style.position = 'relative';
  312.           cart.style.top = 'auto';
  313.           cart.style.bottom = 'auto';
  314.           cartbox.style.height = 'auto';
  315.         }
  316.       }
  318.       syncCartboxHeight();
  319.       window.addEventListener('scroll', onScroll);
  320.       window.addEventListener('resize', syncCartboxHeight);
  321.       window.addEventListener('load', syncCartboxHeight); // 画像/スライダー確定後に再同期
  322.     })();
  323.     </script>
  326. <link rel="stylesheet" href="/css/slider-pro/slider-pro.min.css" media="screen"/>
  327. <script src="/js/jquery.sliderPro.js"></script>
  328. <script type="text/javascript">
  329.   $(function(){
  330.     doSlider();
  331.   });
  332.   function doSlider(){
  333.     $('#palace_img_area').sliderPro({
  334.       width:850,
  335.       height: 850,
  336.       thumbnailWidth :80,
  337.       thumbnailHeight:80,
  338.       thumbnailPointer :true,
  339.       fade: true,
  340.       arrows: true,
  341.       fadeArrows:false,
  342.       thumbnailArrows:true,
  343.       fadeThumbnailArrows:false,
  344.       buttons: false,
  345.       fullScreen: false,
  346.       thumbnailArrows: true,
  347.       autoHeight: true,
  348.       autoplay: false
  349.     });
  350.   }
  351.   </script>
  352. {% endblock %}
  354. {% block main %}
  355.   {% set id = Product.id %}
  356.     <div id="syosuai_wrap">
  357.       <dl>
  358.         <dt id="syousai_img">
  359.           <!--//商品画像-->
  360.           <div id="palace_img_area" class="slider-pro">
  361.             <div class="sp-slides">
  362.               {% for ProductImage in Product.ProductImage %}
  363.                 <div class="sp-slide">
  364.                   <a href="{{ asset(ProductImage, 'save_image') }}" data-fancybox="gallery">
  365.                     <img src="{{ asset(ProductImage, 'save_image') }}" loading="lazy" alt="#"></a>
  366.                 </div>
  367.               {% endfor %}
  368.             </div>
  369.             <div class="sp-thumbnails">
  370.               {% for ProductImage in Product.ProductImage %}
  371.                 <img class="sp-thumbnail" src="{{ asset(ProductImage, 'save_image') }}" alt="#"/>
  372.               {% endfor %}
  373.             </div>
  374.           </div>
  375.           <!--//商品画像-->
  376.         </dt>
  377.         <dd id="syousai_txt">
  378.           <h1>{{ Product.name }}</h1>
  379.           {% if (htEx[1] is defined and htEx[1]) or
  380.             (htEx[50] is defined and htEx[50]) or
  381.             (htEx[3] is defined and htEx[3]) or
  382.             (htEx[28] is defined and htEx[28])
  383.           %}
  384.             <h2>
  385.               {% if htEx[1] is defined and htEx[1] %}
  386.                 {% if htEx[1] == "未鑑定" %}
  387.                   <span>未鑑定</span>
  388.                 {% else %}
  389.                   <span>{{ htEx[1] }}</span>
  390.                 {% endif %}
  391.               {% endif %}
  392.               {% if htEx[50] is defined and htEx[50] %}<span>{{ htEx[50] }}</span>{% endif %}
  393.               {% if htEx[3] is defined and htEx[3] and htEx[3] != "---" %}<span>グレード：{{ htEx[3] }}</span>{% endif %}
  394.               {% if htEx[28] is defined and htEx[28] == "有り" %}<span>専用BOX付き</span>{% endif %}
  395.             </h2>
  396.           {% endif %}
  397.           <p class="clear"></p>
  398.           <table border="0" cellspacing="0" cellpadding="0" class="item_spec_table">
  399.             <tbody>
  400.             <tr>
  401.               <th>品番</th>
  402.               <td>{{ Product.id }}</td>
  403.             </tr>
  404.             {% if htEx[1] is defined and htEx[1] and htEx[2] is defined and htEx[2] %}
  405.               <tr>
  406.                 <th>鑑定番号</th>
  407.                 <td>
  408.                   {% if htEx[1] == "PCGS" %}
  409.                     <img src="/img/pcgslogo.png" class="type_logo" alt="PCGS">
  410.                     <a href="https://www.pcgsasia.com/cert/{{ htEx[2] }}?l=ja"
  411.                        target="_blank">{{ htEx[2] }}</a>
  412.                   {% elseif htEx[1] == "NGC" and htEx[3] is defined %}
  413.                     <img src="/img/ngc.jpg" class="type_logo" alt="NGC">
  414.                     <a href="https://www.ngccoin.com/certlookup/{{ htEx[2] }}/{{ htEx[3]|replace({' ': ''}) }}/"
  415.                        target="_blank">{{ htEx[2] }}</a>
  416.                   {% endif %}
  417.                 </td>
  418.               </tr>
  419.             {% endif %}
  420.             {% if htEx[3] is defined and htEx[3] and htEx[3] != "---" %}
  421.               <tr>
  422.                 <th>グレード数</th>
  423.                 <td>{{ htEx[3] }}</td>
  424.               </tr>
  425.             {% endif %}
  426.             {% if htEx[20] is defined and htEx[20] %}
  427.               <tr>
  428.                 <th>タイプ</th>
  429.                 <td>{{ htEx[20] }}</td>
  430.               </tr>
  431.             {% endif %}
  432.             {% if htEx[34] is defined and htEx[34] %}
  433.               <tr>
  434.                 <th>発行限定数</th>
  435.                 <td>{{ htEx[34] }}</td>
  436.               </tr>
  437.             {% endif %}
  438.             {% if htEx[51] is defined and htEx[51] %}
  439.               <tr>
  440.                 <th>最大発行数</th>
  441.                 <td>{{ htEx[51] }}</td>
  442.               </tr>
  443.             {% endif %}
  444.             {% if htEx[45] is defined and htEx[45] %}
  445.               <tr>
  446.                 <th>世界現存数</th>
  447.                 <td>{{ htEx[45] }}</td>
  448.               </tr>
  449.             {% endif %}
  450.             {% if htEx[35] is defined and htEx[35] %}
  451.               <tr>
  452.                 <th>重量</th>
  453.                 <td>{{ htEx[35] }}</td>
  454.               </tr>
  455.             {% endif %}
  456.             {% if htEx[36] is defined and htEx[36] %}
  457.               <tr>
  458.                 <th>直径</th>
  459.                 <td>{{ htEx[36] }}</td>
  460.               </tr>
  461.             {% endif %}
  462.             {% if htEx[50] is defined and htEx[50] %}
  463.               <tr>
  464.                 <th>品位</th>
  465.                 <td>{{ htEx[50] }}</td>
  466.               </tr>
  467.             {% endif %}
  468.             {% if htEx[37] is defined and htEx[37] %}
  469.               <tr>
  470.                 <th>表面</th>
  471.                 <td>{{ htEx[37] }}</td>
  472.               </tr>
  473.             {% endif %}
  474.             {% if htEx[38] is defined and htEx[38] %}
  475.               <tr>
  476.                 <th>表面</th>
  477.                 <td>{{ htEx[38] }}</td>
  478.               </tr>
  479.             {% endif %}
  480.             {% if htEx[39] is defined and htEx[39] %}
  481.               <tr>
  482.                 <th>エッジの刻銘</th>
  483.                 <td>{{ htEx[39] }}</td>
  484.               </tr>
  485.             {% endif %}
  486.             {% if htEx[46] is defined and htEx[46] %}
  487.               <tr>
  488.                 <th>発送元</th>
  489.                 <td>{{ htEx[46] }}</td>
  490.               </tr>
  491.             {% endif %}
  493.             <tr>
  494.               <th>納期</th>
  495.               <td>
  496.                 {% if htEx[47] is defined and htEx[47] %}
  497.                   {{ htEx[47] }}
  498.                 {% else %}
  499.                   <a href="javascript:do_contact_product()">お問い合わせ</a>ください
  500.                 {% endif %}
  501.               </td>
  502.             </tr>
  503.             </tbody>
  504.           </table>
  505.           {% if htEx[60] is defined and htEx[60] %}
  506.             <div id="shop_voice">
  507.               <div class="voice_area">{{ htEx[60] }}</div>
  508.             </div>
  509.           {% endif %}
  510.         </dd>
  511.         <dt id="cartbox">
  512.           <div id="cartfix">
  513.               {% set s_name = Product.Status.name %}
  514.               {% if Product.stock_find %}
  515.                 {% if s_name == "非公開" %}
  516.                   <ul id="zaiko">
  517.                     <li>在庫有り</li>
  518.                     <li></li>
  519.                   </ul>
  520.                 {% elseif s_name == "予約品(公開)" %}
  521.                 <p class="yoyaku"><span>予約品</span></p>
  522.                 {% if htEx[55] is defined and htEx[55] %}
  523.                   <p class="meyasu_price">目安価格：</p>
  524.                   <p class="yen note-sans meyasu_price"><span>￥</span>{{ htEx[55]|number_format }}<em>（税込）</em></p>
  525.                 {% endif %}
  527.                   {% elseif s_name == "取り置き(公開)" %}
  528.                   <p class="meyasu">一般価格：<s>¥ {{ Product.getPrice02IncTaxMin|number_format }}</s><em>(税込)</em></p>
  529.                   {% if member_price %}
  530.                   <p class="meyasu red">会員価格：</p>
  531.                   <p class="yen noto-sans red"><span>￥</span>{{ member_price|number_format }} <em>(税込)</em></p>
  532.                   {% endif %}
  533.                   <p id="item_tag"><span id="torioki">取り置き中</span>
  534.                     {% if product_disp_date is defined %}
  535.                     <b>{{ product_disp_date }}</b>
  536.                     {% endif %}
  537.                   </p>
  538.                   <p id="yoyaku_txt">取り置き中です<br>お問い合わせ下さい</p>
  539.                   {% elseif Product.getPrice02IncTaxMin == 0 %}
  540.                   <p id="item_tag"><b>誠にお手数ですが、お問合せお願い申し上げます。<br>こちらの商品は現在価格が確定しておりませんので、確定次第ご案内申し上げます。</b>
  541.                   </p>
  542.                   <p id="yoyaku_txt"></p>
  543.                 {% else %}
  544.                   <p class="meyasu">一般価格：<s>¥ {{ Product.getPrice02IncTaxMin|number_format }}</s><em>(税込)</em></p>
  545.                   {% if member_price %}
  546.                   <p class="meyasu red">会員価格：</p>
  547.                   <p class="yen noto-sans red"><span>￥</span>{{ member_price|number_format }} <em>(税込)</em></p>
  548.                   {% endif %}
  549.                   {% if jigane_flg %}
  550.                   <ul id="zaiko"><li>在庫有り</li>
  551.                     <li>{% if Product.getStockFind == true %}残り {{ Product.getStockMax }}点{% endif %}
  552.                       {% if htEx[64] is defined and htEx[64] == "117" %}
  553.                         <small>（入荷予定あり）</small>
  554.                       {% endif %}
  555.                     </li>
  556.                   </ul>
  557.                   {% endif %}
  558.                 {% endif %}
  559.               {% else %}
  560.                 {% if s_name == "取り置き(公開)" %}
  561.                   <p class="meyasu">一般価格：<s>¥ {{ Product.getPrice02IncTaxMin|number_format }}</s><em>(税込)</em></p>
  562.                   {% if member_price %}
  563.                     <p class="meyasu red">会員価格：</p>
  564.                     <p class="yen noto-sans red"><span>￥</span>{{ member_price|number_format }} <em>(税込)</em></p>
  565.                   {% endif %}
  566.                 {% endif %}
  567.               {% endif %}
  569.             <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  570.               {% if form.quantity is defined %}
  571.                 {% if s_name == "非売品" %}
  572.                 {% elseif s_name == "取り置き(公開)"  %}
  573.                 {% elseif s_name == "予約品(公開)" %}
  574.                   <div id="quantity_area">
  575.                     <table border="0" cellspacing="0" cellpadding="0">
  576.                       <tbody>
  577.                       <tr>
  578.                         <th>数量：</th>
  579.                         <td>
  580.                           {{ form_widget(form.quantity) }}
  581.                           {{ form_errors(form.quantity) }}
  582.                         </td>
  583.                       </tr>
  584.                       </tbody>
  585.                     </table>
  586.                   </div>
  587.                 {% elseif Product.getPrice02IncTaxMin == 0 %}
  588.                 {% else %}
  589.                   <div id="quantity_area">
  590.                     <table border="0" cellspacing="0" cellpadding="0">
  591.                       <tbody>
  592.                       <tr>
  593.                         <th>数量：</th>
  594.                         <td>
  595.                           {{ form_widget(form.quantity) }}
  596.                           {{ form_errors(form.quantity) }}
  597.                         </td>
  598.                       </tr>
  599.                       </tbody>
  600.                     </table>
  601.                   </div>
  602.                 {% endif %}
  603.               {% endif %}
  605.               {% if jigane_flg and product_type_id == "3" %}
  606.                 <div class="no_credit">
  607.                   <b>こちらの商品はクレジットカード決済に対応しておりません。</b>
  608.                 </div>
  609.               {% endif %}
  611.               {% if s_name == "公開" %}
  612.                 <div class="tojitsu">
  613.                   <b>当日出荷対応品</b><br>
  614.                   <span>平日13時迄入金確認分</span>
  615.                 </div>
  616.                 <style>
  617.                   .tojitsu {
  618.                     background-color: red;
  619.                     padding: 10px 0 6px 0;
  620.                     margin: 10px auto;
  621.                     text-align: center;
  622.                     color: white;
  623.                     width: 90%;
  624.                     line-height: 140%;
  625.                     border-radius: 5px;
  626.                     -moz-border-radius: 5px;
  627.                     -webkit-border-radius: 5px;
  628.                   }
  629.                   .tojitsu b {
  630.                     font-size: 20px;
  631.                   }
  632.                   .tojitsu span {
  633.                     font-size: 13px;
  634.                   }
  635.                 </style>
  637.                 <div class="soryomuryo">
  638.                   <dl>
  639.                     <dt><img src="/img/truck-solid-full.svg" alt="送料無料"></dt>
  640.                     <dd><b>送料無料</b><br><span>最短翌日届け</span></dd>
  641.                   </dl>
  642.                 </div>
  643.                 <style>
  644.                   .soryomuryo {
  645.                     display: table;
  646.                     background-color: white;
  647.                     border: 1px solid red;
  648.                     width: 90%;
  649.                     border-radius: 5px;
  650.                     -moz-border-radius: 5px;
  651.                     -webkit-border-radius: 5px;
  652.                     margin: 10px auto;
  653.                   }
  654.                   .soryomuryo dl {
  655.                     display: table-row;
  656.                   }
  657.                   .soryomuryo dl dt,
  658.                   .soryomuryo dl dd {
  659.                     display: table-cell;
  660.                     vertical-align: top;
  661.                     text-align: left;
  662.                   }
  663.                   .soryomuryo dl dt {
  664.                     width: 90px;
  665.                   }
  666.                   .soryomuryo dl dt img {
  667.                     width: 50px;
  668.                     height: auto;
  669.                     margin: 5px 0 -5px 35px;
  670.                   }
  671.                   .soryomuryo dl dd {
  672.                     padding: 9px 0px 0px 0px;
  673.                   }
  674.                   .soryomuryo dl dd b {
  675.                     color: red;
  676.                     font-size: 22px;
  677.                   }
  678.                   .soryomuryo dl dd span {
  679.                     font-size: 12px;
  680.                     display: block;
  681.                     margin-top: -8px;
  682.                   }
  683.                   @media screen and (max-width:640px) {
  684.                     .soryomuryo dl dt img {
  685.                       margin-left: 85px !important;
  686.                     }
  687.                     .soryomuryo dl dt {
  688.                       width: 140px;
  689.                     }
  690.                   }
  691.                 </style>
  692.               {% endif %}
  694.               {% if Product.stock_find %}
  695.                 <div class="ec-productRole__actions">
  696.                   {% if form.classcategory_id1 is defined %}
  697.                     <div class="ec-select">
  698.                       {{ form_row(form.classcategory_id1) }}
  699.                       {{ form_errors(form.classcategory_id1) }}
  700.                     </div>
  701.                     {% if form.classcategory_id2 is defined %}
  702.                       <div class="ec-select">
  703.                         {{ form_row(form.classcategory_id2) }}
  704.                         {{ form_errors(form.classcategory_id2) }}
  705.                       </div>
  706.                     {% endif %}
  707.                   {% endif %}
  708.                 </div>
  709.                 {% if s_name == "非売品" %}
  710.                 {% elseif s_name == "取り置き(公開)" %}
  711.                 {% elseif s_name == "予約品(公開)" %}
  712.                   {# リクエスト予約ボタン（カートボタンの代わり） #}
  713.                 {% elseif Product.getPrice02IncTaxMin == 0 %}
  714.                 {% else %}
  715.                   <p class="btns ye"><a href="javascript:void(0)" onclick="doSubmit()">
  716.                       <i class="fa-solid fa-cart-shopping"></i> カートに入れる</a></p>
  717.                 {% endif %}
  718.               {% else %}
  719.                 <p class="btns ye"><a href="javascript:void(0)" disabled="disabled"><i
  720.                       class="fa-solid fa-cart-shopping"></i> ただいま品切れ中です。</a></p>
  721.                 {# 再入荷通知ボタン #}
  722.                 {% if restock_disp_flg is defined and restock_disp_flg == 1 %}
  723.                   {% if restock_regist_flg is defined and restock_regist_flg == 1 %}
  724.                     <p class="btns restock-registered"><a href="javascript:void(0)" onclick="handleRestockAction({{ Product.id }}, 2)"><i class="fa-solid fa-bell-slash"></i> 再入荷通知を解除</a></p>
  725.                   {% else %}
  726.                     <p class="btns restock"><a href="javascript:void(0)" onclick="handleRestockAction({{ Product.id }}, 1)"><i class="fa-solid fa-bell"></i> 再入荷通知を登録</a></p>
  727.                   {% endif %}
  728.                 {% endif %}
  729.               {% endif %}
  730.               {{ form_rest(form) }}
  731.             </form>
  732.             {% if s_name == "予約品(公開)" %}
  733.               {# リクエスト予約フォーム #}
  734.               <form name="product_reserve" id="product_reserve" action="{{ url('plugin_pia_product_reserve') }}" method="post">
  735.                 <input type="hidden" name="id" value="{{ Product.id }}">
  736.                 <input type="hidden" id="reserve_num" name="num" value="1">
  737.                 <p class="btns ye"><button type="submit"><i class="fa-solid fa-calendar-check"></i> 予約する</button></p>
  738.               </form>
  739.             {% endif %}
  740.             {# お気に入り: form1外に移動(2026-08-20)。予約品では予約ボタンの下に表示 #}
  741.               {% if BaseInfo.option_favorite_product %}
  742.                 {% if is_favorite == false %}
  743.                   <p class="btns or"><a href="javascript:void(0)" onclick="doFavorite()"><i
  744.                         class="fa-solid fa-star"></i> お気に入りに追加</a></p>
  745.                 {% else %}
  746.                   <p class="btns or"><a href="javascript:void(0)" disabled="disabled"><i
  747.                         class="fa-solid fa-star"></i>
  748.                       お気に入りに追加済みです。</a></p>
  749.                 {% endif %}
  750.               {% endif %}
  751.             <form name="contact_product" id="contact_product" action="/product_contact" method="post">
  752.               <input type="hidden" name="id" value="{{ Product.id }}">
  753.               <div class="btn_area">
  754.                 <ul class="row">
  755.                   <li><button type="submit" id="item-mail">商品についてのお問い合わせ</button></li>
  756.                 </ul>
  757.               </div>
  758.             </form>
  759.               <p class="btm_txt"><a href="/user_data/delivery">配送・送料・返品について</a></p>
  761.             {% if s_name == "予約品(公開)" %}
  762.               <div class="can kaigai">
  763.                 <p>海外受注生産の為、ご注文後のキャンセルができません。<br>
  764.                   また、ご注文確定後でも入手が確約できない場合がございますので、何卒ご了承の程お願い申し上げます。
  765.                 </p></div>
  766.               <div class="yoyaku_txt2">
  767.                 ご予約後、価格や納期についてご連絡申し上げます。
  768.                 数に限りがございますので、ご連絡時点で予約が終了している可能性があることを予めご了承ください。
  769.               </div>
  770.             {% endif %}
  772.             <div class="ec-modal">
  773.               <div class="ec-modal-overlay">
  774.                 <div class="ec-modal-wrap">
  775.                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}"
  776.                                                                         alt=""/></span></span>
  777.                   <div id="ec-modal-header"
  778.                        class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  779.                   <div class="ec-modal-box">
  780.                     <div class="ec-role">
  781.                       <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  782.                       <a href="{{ url('cart') }}"
  783.                          class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  784.                     </div>
  785.                   </div>
  786.                 </div>
  787.               </div>
  788.             </div>
  789.             {% if BaseInfo.option_favorite_product %}
  790.               <form action="{{ url('product_add_favorite', {id:Product.id}) }}" id="form2"
  791.                     method="post"></form>
  792.             {% endif %}
  794.           </div><!-- cartfix -->
  795.         </dt>
  796.       </dl>
  797.     </div><!-- syosuai_wrap -->
  798.     <div id="syousai_btm">
  799.       <dl>
  800.         <dt id="left">
  801.           <div class="syousai_txt">
  802.             <dl>
  803.               <dt><h3>商品詳細</h3></dt>
  804.               <dd>
  805.                 {{ Product.description_detail|raw }}
  806.               </dd>
  807.             </dl>
  808.           </div><!-- syousai_txt -->
  809.         </dt><!-- left -->
  810.         <dd></dd>
  811.       </dl>
  812.     </div><!-- syousai_btm -->
  813. {% endblock %}