app/template/BlackCherry/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' %}
  14. {% block title %}
  15.   {{ Product.name }}｜{{ Product.ProductCategories|first.Category.name ?? '' }}｜BlackCherry
  16. {% endblock %}
  17. {% set keywords_sentence = '無修正DVD通販のBlackCherry。人気女優出演作を匿名配送・即日発送！' %}
  18. {% set desc = keywords_sentence ~ ' ' ~
  19.   Product.name ~
  20.   (Product.Maker.name ? '（' ~ Product.Maker.name ~ '）' : '') 
  21. %}
  22. {% block description %}
  23.     <meta name="description" content="{{ desc|striptags|slice(0, 120) }}" >
  24. {% endblock %}
  25. {#
  26. {% set page_description_raw = desc %}
  27. {% block description %}
  28.     <meta name="description" content="{{ Product.description_list|striptags|slice(0, 120) }}{% if Product.search_word %} {{ Product.search_word }}{% endif %}">
  29.     {% if Product.search_word %}
  30.     <meta name="keywords" content="{{ Product.search_word }}">
  31.     {% endif %}
  32. {% endblock %}
  33. #}
  34. {% block meta %}
  35.     <link rel="canonical" href="{{ url('product_detail', { id : Product.id }) }}">
  36. {% endblock %}
  37. {% block stylesheet %}
  38.     <style>
  40.         .slick-slider {
  41.             margin-bottom: 30px;
  42.         }
  44.         .slick-dots {
  45.             position: absolute;
  46.             bottom: -45px;
  47.             display: block;
  48.             width: 100%;
  49.             padding: 0;
  50.             list-style: none;
  51.             text-align: center;
  52.         }
  54.         .slick-dots li {
  55.             position: relative;
  56.             display: inline-block;
  57.             width: 20px;
  58.             height: 20px;
  59.             margin: 0 5px;
  60.             padding: 0;
  62.             cursor: pointer;
  63.         }
  65.         .slick-dots li button {
  66.             font-size: 0;
  67.             line-height: 0;
  68.             display: block;
  69.             width: 20px;
  70.             height: 20px;
  71.             padding: 5px;
  72.             cursor: pointer;
  73.             color: transparent;
  74.             border: 0;
  75.             outline: none;
  76.             background: transparent;
  77.         }
  79.         .slick-dots li button:hover,
  80.         .slick-dots li button:focus {
  81.             outline: none;
  82.         }
  84.         .slick-dots li button:hover:before,
  85.         .slick-dots li button:focus:before {
  86.             opacity: 1;
  87.         }
  89.         .slick-dots li button:before {
  90.             content: " ";
  91.             line-height: 20px;
  92.             position: absolute;
  93.             top: 0;
  94.             left: 0;
  95.             width: 12px;
  96.             height: 12px;
  97.             text-align: center;
  98.             opacity: .25;
  99.             background-color: black;
  100.             border-radius: 50%;
  102.         }
  104.         .slick-dots li.slick-active button:before {
  105.             opacity: .75;
  106.             background-color: black;
  107.         }
  109.         .slick-dots li button.thumbnail img {
  110.             width: 0;
  111.             height: 0;
  112.         }
  114.     </style>
  115. {% endblock %}
  117. {% block javascript %}
  118.     <script>
  119.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  121.         // 規格2に選択肢を割り当てる。
  122.         function fnSetClassCategories(form, classcat_id2_selected) {
  123.             var $form = $(form);
  124.             var product_id = $form.find('input[name=product_id]').val();
  125.             var $sele1 = $form.find('select[name=classcategory_id1]');
  126.             var $sele2 = $form.find('select[name=classcategory_id2]');
  127.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  128.         }
  130.         {% if form.classcategory_id2 is defined %}
  131.         fnSetClassCategories(
  132.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  133.         );
  134.         {% elseif form.classcategory_id1 is defined %}
  135.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  136.         {% endif %}
  137.     </script>
  138.     <script>
  139.         $(function() {
  140.             // bfcache無効化
  141.             $(window).bind('pageshow', function(event) {
  142.                 if (event.originalEvent.persisted) {
  143.                     location.reload(true);
  144.                 }
  145.             });
  147.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  148.             // img タグに width, height が付与されている.
  149.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  150.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  151.             $('.ec-grid2__cell').hide();
  152.             var removeSize = function () {
  153.                 $('.slide-item').height('');
  154.                 $('.slide-item img')
  155.                     .removeAttr('width')
  156.                     .removeAttr('height')
  157.                     .removeAttr('style');
  158.             };
  159.             var slickInitial = function(slick) {
  160.                 $('.ec-grid2__cell').fadeIn(1500);
  161.                 var baseHeight = $(slick.target).height();
  162.                 var baseWidth = $(slick.target).width();
  163.                 var rate = baseWidth / baseHeight;
  165.                 $('.slide-item').height(baseHeight * rate); // 余白を削除する
  166.                 // transform を使用することでCLSの影響を受けないようにする
  167.                 $('.slide-item img')
  168.                     .css(
  169.                         {
  170.                             'transform-origin': 'top left',
  171.                             'transform': 'scaleY(' + rate + ')',
  172.                             'transition': 'transform .1s'
  173.                         }
  174.                     );
  175.                 // 正しいサイズに近くなったら属性を解除する
  176.                 setTimeout(removeSize, 500);
  177.             };
  178.             $('.item_visual').on('init', slickInitial);
  179.             // リサイズ時は CLS の影響を受けないため属性を解除する
  180.             $(window).resize(removeSize);
  181.             $('.item_visual').slick({
  182.                 dots: false,
  183.                 arrows: false,
  184.                 responsive: [{
  185.                     breakpoint: 768,
  186.                     settings: {
  187.                         dots: true
  188.                     }
  189.                 }]
  190.             });
  192.             $('.slideThumb').on('click', function() {
  193.                 var index = $(this).attr('data-index');
  194.                 $('.item_visual').slick('slickGoTo', index, false);
  195.             })
  196.         });
  197.     </script>
  198.     <script>
  199.         $(function() {
  200.             // お気に入り追加
  201.             $('.add_favorite').on('click', function(e) {
  202.                 var data = $(this).data();
  203.                 if (confirm(data.product_name + '\r\n\r\n' + 'こちらの商品をお気に入りに登録しますか？') ) {
  204.                 } else {
  205.                     return false;
  206.                 }
  207.             });
  209.             // カート追加
  210.             $('.add-cart').on('click', function(event) {
  211.                 
  212.                 {% if form.classcategory_id1 is defined %}
  213.                 // 規格1フォームの必須チェック
  214.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  215.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  216.                     return true;
  217.                 } else {
  218.                     $('#classcategory_id1')[0].setCustomValidity('');
  219.                 }
  220.                 {% endif %}
  222.                 {% if form.classcategory_id2 is defined %}
  223.                 // 規格2フォームの必須チェック
  224.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  225.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  226.                     return true;
  227.                 } else {
  228.                     $('#classcategory_id2')[0].setCustomValidity('');
  229.                 }
  230.                 {% endif %}
  232.                 // 個数フォームのチェック
  233.                 if ($('#quantity').val() < 1) {
  234.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  235.                     return true;
  236.                 } else {
  237.                     $('#quantity')[0].setCustomValidity('');
  238.                 }
  241.                 event.preventDefault();
  242.                 $form = $('#form1');
  243.                 $.ajax({
  244.                     url: $form.attr('action'),
  245.                     type: $form.attr('method'),
  246.                     data: $form.serialize(),
  247.                     dataType: 'json',
  248.                     beforeSend: function(xhr, settings) {
  249.                         // Buttonを無効にする
  250.                         $('.add-cart').prop('disabled', true);
  251.                     }
  252.                 }).done(function(data) {
  253.                     // レスポンス内のメッセージをalertで表示
  254.                     $.each(data.messages, function() {
  255.                         $('#ec-modal-header').text(this);
  256.                     });
  257.                     $('.ec-modal').show()
  259.                     // カートブロックを更新する
  260.                     $.ajax({
  261.                         url: "{{ url('block_cart') }}",
  262.                         type: 'GET',
  263.                         dataType: 'html'
  264.                     }).done(function(html) {
  265.                         const $html = $('<div>').html(html);
  267.                         // ① ヘッダー用のカート部分を更新
  268.                         const $headerCart = $html.find('.ec-headerRole__cart');
  269.                         if ($headerCart.length) {
  270.                             $('.ec-headerRole__cart').replaceWith($headerCart);
  271.                         }
  273.                         // ② サイドカート（ec-cartNaviWrap）も更新
  274.                         const $sideCart = $html.find('.ec-cartNaviWrap');
  275.                         if ($sideCart.length) {
  276.                             $('.ec-cartNaviWrap').replaceWith($sideCart);
  277.                         }
  278.                     });
  279.                     
  280.                 }).fail(function(data) {
  281.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  282.                 }).always(function(data) {
  283.                     // Buttonを有効にする
  284.                     $('.add-cart').prop('disabled', false);
  285.                 });
  286.             });
  287.         });
  289.         $('.ec-modal-wrap').on('click', function(e) {
  290.             // モーダル内の処理は外側にバブリングさせない
  291.             e.stopPropagation();
  292.         });
  293.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  294.             $('.ec-modal').hide()
  295.         });
  296.     </script>
  297.     <script type="application/ld+json">
  298.     {
  299.         "@context": "https://schema.org/",
  300.         "@type": "Product",
  301.         "name": "{{ Product.name }}",
  302.         "image": [
  303.             {% for img in Product.ProductImage %}
  304.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  306.             {% else %}
  307.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  308.             {% endfor %}
  309.         ],
  310.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  311.         {% if Product.code_min %}
  312.         "sku": "{{ Product.code_min }}",
  313.         {% endif %}
  314.         "offers": {
  315.             "@type": "Offer",
  316.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  317.             "priceCurrency": "{{ eccube_config.currency }}",
  318.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  319.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  320.         }
  321.     }
  322.     </script>
  324. <script>
  325. $(function () {
  326.   var $modal = $('.bc-zoom-modal');
  327.   var $stage = $modal.find('.bc-zoom-stage');
  328.   var $img   = $modal.find('.bc-zoom-img');
  329.   var $close = $modal.find('.bc-zoom-close');
  330.   
  331.   // 要素の存在確認
  332.   if (!$modal.length || !$stage.length || !$img.length) {
  333.     console.error('Zoom modal elements not found');
  334.     return;
  335.   }
  337.   // サムネ（スライダー内を含む）クリックで開く
  338.   $(document).on('click', '.item_visual img.bc-zoom-thumb', function () {
  339.     var src = $(this).attr('data-zoom-src') || $(this).attr('src');
  340.     $img.attr('src', src);
  341.     
  342.     // 画像読み込み後に初期拡大率を設定
  343.     $img.on('load', function() {
  344.       setInitialScale();
  345.       $img.off('load'); // 一度だけ実行
  346.     });
  347.     
  348.     // 既に読み込み済みの場合
  349.     if ($img[0].complete && $img[0].naturalWidth > 0) {
  350.       setInitialScale();
  351.     }
  352.     
  353.     resetTransform();
  354.     $('body').addClass('bc-no-scroll');
  355.     $modal.addClass('is-open').attr('aria-hidden', 'false');
  356.   });
  358.   // 閉じる（×／ESC／背景タップ）
  359.   function closeModal() {
  360.     $modal.removeClass('is-open').attr('aria-hidden', 'true');
  361.     $('body').removeClass('bc-no-scroll');
  362.   }
  363.   $close.on('click', closeModal);
  364.   $modal.on('click', function (e) { if (e.target === this) closeModal(); });
  365.   $(document).on('keydown', function (e) { if (e.key === 'Escape') closeModal(); });
  367.   // 変換状態
  368.   var scale = 1, minScale = 0.1, maxScale = 5; // minScaleを0.1に設定（SP版で0.5倍以下も可能に）
  369.   var tx = 0, ty = 0; // タップ拡大時の位置調整用
  370.   var isPC = window.innerWidth >= 768;
  371.   var initialScale = 1;
  372.   var pinch = { active:false, d0:0, cx:0, cy:0 };
  373.   
  374.   // 2点間の距離を計算する関数
  375.   function dist2(touches) {
  376.     if (!touches || touches.length < 2) return 0;
  377.     try {
  378.       var dx = touches[0].clientX - touches[1].clientX;
  379.       var dy = touches[0].clientY - touches[1].clientY;
  380.       return Math.hypot(dx, dy);
  381.     } catch (e) {
  382.       return 0;
  383.     }
  384.   }
  386.   function applyTransform() {
  387.     $img.css('transform', 'translate(calc(-50% + ' + tx + 'px), calc(-50% + ' + ty + 'px)) scale(' + scale + ')');
  388.   }
  389.   
  390.   function resetTransform() {
  391.     scale = initialScale;
  392.     tx = 0;
  393.     ty = 0;
  394.     applyTransform();
  395.   }
  396.   
  397.   // 初期拡大率を設定（PC: 画面内に収まるように、SP: 0.5倍）
  398.   function setInitialScale() {
  399.     if (!$img[0] || $img[0].naturalWidth === 0) {
  400.       initialScale = 1;
  401.       scale = 1;
  402.       return;
  403.     }
  404.     
  405.     var stageRect = $stage[0].getBoundingClientRect();
  406.     var stageWidth = stageRect.width;
  407.     var stageHeight = stageRect.height;
  408.     var imgNaturalWidth = $img[0].naturalWidth;
  409.     var imgNaturalHeight = $img[0].naturalHeight;
  410.     
  411.     // デバイス判定を再計算
  412.     isPC = window.innerWidth >= 768;
  413.     
  414.     if (isPC) {
  415.       // PC版: 画面内に完全に収まるようにする（幅・高さの両方を考慮）
  416.       var scaleByWidth = (stageWidth * 0.9) / imgNaturalWidth; // 90%で余裕を持たせる
  417.       var scaleByHeight = (stageHeight * 0.9) / imgNaturalHeight;
  418.       initialScale = Math.min(scaleByWidth, scaleByHeight);
  419.       // 最小・最大拡大率の制限
  420.       initialScale = Math.min(maxScale, Math.max(0.1, initialScale)); // PC版もminScaleを0.1に
  421.     } else {
  422.       // SP版: 0.5倍
  423.       initialScale = 0.5;
  424.     }
  425.     
  426.     scale = initialScale;
  427.     tx = 0;
  428.     ty = 0;
  429.     applyTransform();
  430.   }
  431.   
  432.   // SP版: ドラッグ移動用の変数
  433.   var dragging = false;
  434.   var dragStartX = 0;
  435.   var dragStartY = 0;
  436.   var dragStartTx = 0;
  437.   var dragStartTy = 0;
  438.   var rafId = null;
  440.   // タップで拡大（SP/タッチデバイス用）
  441.   var lastTapTime = 0;
  442.   var lastTapX = 0;
  443.   var lastTapY = 0;
  444.   var tapThreshold = 300; // ダブルタップ判定の時間（ms）
  445.   var tapDistanceThreshold = 50; // ダブルタップ判定の距離（px）
  446.   var isTap = true; // タップ判定用フラグ
  447.   var dragDistance = 0; // ドラッグ距離
  448.   
  449.   // SP版: タッチ開始（ドラッグ/タップ/ピンチズーム）
  450.   // ネイティブイベントを使用（jQueryのイベントオブジェクトの問題を回避）
  451.   function handleTouchStart(e) {
  452.     try {
  453.       // 要素の存在確認
  454.       if (!$modal.length || !$stage.length || !$stage[0]) return;
  455.       
  456.       // モーダルが開いていない場合は無視
  457.       if (!$modal.hasClass('is-open')) return;
  458.       
  459.       // デバイス判定を再計算
  460.       isPC = window.innerWidth >= 768;
  461.       
  462.       // タッチイベントを取得
  463.       var touches = e.touches || [];
  464.       
  465.       if (!touches || touches.length === 0) return;
  466.     
  467.     // PC版の場合は無効（ピンチズームはSP版のみ）
  468.     if (isPC && touches.length === 2) return;
  469.     
  470.     // 2点タッチ時はピンチズーム
  471.     if (touches.length === 2) {
  472.       dragging = false; // ドラッグを無効化
  473.       isTap = false;
  474.       
  475.       var d = dist2(touches);
  476.       if (d === 0 || d === undefined || !isFinite(d)) return; // 無効な値はスキップ
  477.       
  478.       // ピンチ開始（常に初期化・リセット）
  479.       pinch.active = true;
  480.       pinch.d0 = d; // 基準距離を設定
  481.       var rect = $stage[0].getBoundingClientRect();
  482.       pinch.cx = (touches[0].clientX + touches[1].clientX)/2 - rect.left;
  483.       pinch.cy = (touches[0].clientY + touches[1].clientY)/2 - rect.top;
  484.       
  485.       e.preventDefault();
  486.       e.stopPropagation();
  487.       return;
  488.     }
  489.     
  490.     // PC版の場合は無効
  491.     if (isPC) return;
  492.     
  493.     // シングルタッチのみ処理
  494.     if (touches.length !== 1) return;
  495.     
  496.     var touch = touches[0];
  497.     var rect = $stage[0].getBoundingClientRect();
  498.     
  499.     // 座標を統一（相対座標）
  500.     var touchX = touch.clientX - rect.left;
  501.     var touchY = touch.clientY - rect.top;
  502.     
  503.     // 拡大時（initialScaleより大きい場合）は常にドラッグ可能
  504.     if (scale > initialScale) {
  505.       dragging = true;
  506.       isTap = true; // ドラッグ開始時は一旦trueに（距離判定でfalseになる）
  507.       dragDistance = 0;
  508.       dragStartX = touch.clientX;
  509.       dragStartY = touch.clientY;
  510.       dragStartTx = tx;
  511.       dragStartTy = ty;
  512.       // タップ開始位置を記録（相対座標、ダブルタップ判定用）
  513.       lastTapX = touchX;
  514.       lastTapY = touchY;
  515.       e.preventDefault();
  516.       e.stopPropagation();
  517.     } else {
  518.       // 縮小時はタップのみ
  519.       isTap = true;
  520.       dragging = false;
  521.       // タップ開始位置を記録（相対座標）
  522.       lastTapX = touchX;
  523.       lastTapY = touchY;
  524.     }
  525.     } catch (err) {
  526.       console.error('Error in handleTouchStart:', err);
  527.     }
  528.   }
  529.   
  530.   // SP版: タッチ終了（ドラッグ/タップ/ピンチズーム）
  531.   function handleTouchEnd(e) {
  532.     try {
  533.       // 要素の存在確認
  534.       if (!$modal.length || !$stage.length || !$stage[0]) return;
  535.       
  536.       // モーダルが開いていない場合は無視
  537.       if (!$modal.hasClass('is-open')) return;
  538.       
  539.       // デバイス判定を再計算
  540.       isPC = window.innerWidth >= 768;
  541.       
  542.       // タッチイベントを取得
  543.       var touches = e.touches || [];
  544.       var changedTouches = e.changedTouches || [];
  545.     
  546.     // ピンチズーム終了（2点タッチが1点以下になった場合）
  547.     if (!touches || touches.length < 2) {
  548.       pinch.active = false;
  549.       pinch.d0 = 0; // リセット
  550.       dragging = false; // ドラッグもリセット
  551.     }
  552.     
  553.     // requestAnimationFrameのクリーンアップ
  554.     if (rafId) {
  555.       cancelAnimationFrame(rafId);
  556.       rafId = null;
  557.     }
  558.     
  559.     // PC版の場合は無効
  560.     if (isPC) return;
  561.     
  562.     // シングルタッチのみ処理
  563.     if (!changedTouches || changedTouches.length !== 1) {
  564.       dragging = false;
  565.       return;
  566.     }
  567.     
  568.     var touch = changedTouches[0];
  569.     var now = Date.now();
  570.     var rect = $stage[0].getBoundingClientRect();
  571.     var tapX = touch.clientX - rect.left;
  572.     var tapY = touch.clientY - rect.top;
  573.     
  574.     // ドラッグ終了処理
  575.     var wasDragging = dragging;
  576.     if (dragging) {
  577.       dragging = false;
  578.       
  579.       // ドラッグ距離が小さかった場合（10px以下）はタップとして扱う
  580.       if (dragDistance <= 10) {
  581.         // 拡大時はダブルタップでリセット
  582.         if (scale > initialScale) {
  583.           var isDoubleTap = (now - lastTapTime < tapThreshold) &&
  584.                             (Math.abs(tapX - lastTapX) < tapDistanceThreshold) &&
  585.                             (Math.abs(tapY - lastTapY) < tapDistanceThreshold);
  586.           
  587.           if (isDoubleTap) {
  588.             // ダブルタップでリセット
  589.             e.preventDefault();
  590.             resetTransform();
  591.             lastTapTime = 0;
  592.             dragDistance = 0;
  593.             return;
  594.           }
  595.         }
  596.         
  597.         // タップとして処理
  598.         isTap = true;
  599.       } else {
  600.         // ドラッグした場合はタップ処理をスキップ
  601.         isTap = false;
  602.         dragDistance = 0;
  603.         return;
  604.       }
  605.     }
  606.     
  607.     // ピンチズーム中はタップ処理を無効化
  608.     if (pinch.active) {
  609.       return;
  610.     }
  611.     
  612.     // ドラッグしていない場合のタップ処理（ダブルタップリセットのみ）
  613.     if (!wasDragging) {
  614.       // ダブルタップ判定（拡大時のみリセット）
  615.       if (scale > initialScale) {
  616.         var isDoubleTap = (now - lastTapTime < tapThreshold) &&
  617.                           (Math.abs(tapX - lastTapX) < tapDistanceThreshold) &&
  618.                           (Math.abs(tapY - lastTapY) < tapDistanceThreshold);
  619.         
  620.         if (isDoubleTap) {
  621.           // ダブルタップでリセット
  622.           e.preventDefault();
  623.           resetTransform();
  624.           lastTapTime = 0;
  625.           return;
  626.         }
  627.       }
  628.       // シングルタップでの拡大機能は削除
  629.     }
  630.     
  631.     // タップ情報を記録（次のタップとの比較用）
  632.     lastTapTime = now;
  633.     lastTapX = tapX;
  634.     lastTapY = tapY;
  635.     dragDistance = 0;
  636.     } catch (err) {
  637.       console.error('Error in handleTouchEnd:', err);
  638.     }
  639.   }
  640.   
  641.   // タッチ移動処理（ピンチズーム/ドラッグ）
  642.   function handleTouchMove(e) {
  643.     try {
  644.       // 要素の存在確認
  645.       if (!$modal.length || !$stage.length || !$stage[0]) return;
  646.       
  647.       // モーダルが開いていない場合は無視
  648.       if (!$modal.hasClass('is-open')) return;
  649.       
  650.       // デバイス判定を再計算
  651.       isPC = window.innerWidth >= 768;
  652.       
  653.       // PC版の場合は無効
  654.       if (isPC) return;
  655.       
  656.       // タッチイベントを取得
  657.       var touches = e.touches || [];
  658.       
  659.       if (!touches || touches.length === 0) return;
  660.     
  661.     // ピンチズーム処理（2点タッチ時）
  662.     if (touches.length === 2) {
  663.       e.preventDefault();
  664.       e.stopPropagation();
  665.       
  666.       dragging = false; // ドラッグを無効化
  667.       
  668.       var d1 = dist2(touches);
  669.       if (d1 === 0 || d1 === undefined || !isFinite(d1)) return; // 無効な値はスキップ
  670.       
  671.       // ピンチが開始されていない、または基準距離が未設定の場合は初期化
  672.       if (!pinch.active || !pinch.d0 || pinch.d0 === 0) {
  673.         pinch.active = true;
  674.         pinch.d0 = d1; // 基準距離を設定
  675.         var rect = $stage[0].getBoundingClientRect();
  676.         pinch.cx = (touches[0].clientX + touches[1].clientX)/2 - rect.left;
  677.         pinch.cy = (touches[0].clientY + touches[1].clientY)/2 - rect.top;
  678.         // 初回は基準を設定するだけで、計算は次回のtouchmoveで実行
  679.         return;
  680.       }
  681.       
  682.       // ピンチ距離の変化から拡大率を計算（基準距離pinch.d0に対する現在の距離d1の比率）
  683.       var scaleChange = d1 / pinch.d0;
  684.       if (!isFinite(scaleChange) || scaleChange <= 0) {
  685.         // 無効な値の場合はスキップ
  686.         return;
  687.       }
  688.       
  689.       // 現在の拡大率を基準に新しい拡大率を計算
  690.       var oldScale = scale;
  691.       var newScale = oldScale * scaleChange;
  692.       
  693.       // 拡大率の制限
  694.       newScale = Math.min(maxScale, Math.max(minScale, newScale));
  695.       
  696.       // ピンチ中心を基準に拡大（ピンチ中心がズームの中心になるように）
  697.       var rect = $stage[0].getBoundingClientRect();
  698.       var stageCenterX = rect.width / 2;
  699.       var stageCenterY = rect.height / 2;
  700.       
  701.       // ピンチ中心から画像中心への相対位置を計算
  702.       var offsetX = pinch.cx - stageCenterX - tx;
  703.       var offsetY = pinch.cy - stageCenterY - ty;
  704.       
  705.       // 拡大率の変化比
  706.       var scaleRatio = newScale / oldScale;
  707.       if (scaleRatio > 0 && isFinite(scaleRatio)) {
  708.         // ピンチ中心を基準に位置を調整
  709.         tx -= offsetX * (scaleRatio - 1);
  710.         ty -= offsetY * (scaleRatio - 1);
  711.       }
  712.       
  713.       scale = newScale;
  714.       applyTransform();
  715.       
  716.       // 基準距離を更新（次回の計算用に現在の距離を基準にする - 累積方式）
  717.       pinch.d0 = d1;
  718.       return;
  719.     }
  720.     
  721.     // ドラッグ処理（1点タッチ時、拡大時のみ）
  722.     if (dragging && touches.length === 1 && !pinch.active) {
  723.       // 拡大時のみドラッグ可能（initialScaleより大きい場合）
  724.       if (scale > initialScale) {
  725.         e.preventDefault();
  726.         e.stopPropagation();
  727.         
  728.         var touch = touches[0];
  729.         var dx = touch.clientX - dragStartX;
  730.         var dy = touch.clientY - dragStartY;
  731.         
  732.         // ドラッグ距離を計算
  733.         dragDistance = Math.sqrt(dx * dx + dy * dy);
  734.         // ドラッグ距離が大きい場合はタップ扱いしない
  735.         if (dragDistance > 10) {
  736.           isTap = false;
  737.         }
  738.         
  739.         // 移動量を適用
  740.         tx = dragStartTx + dx;
  741.         ty = dragStartTy + dy;
  742.         
  743.         // requestAnimationFrameでスムーズに更新（カクつきを防止）
  744.         if (rafId) cancelAnimationFrame(rafId);
  745.         rafId = requestAnimationFrame(function() {
  746.           applyTransform();
  747.         });
  748.       }
  749.       return;
  750.     }
  751.     } catch (err) {
  752.       console.error('Error in handleTouchMove:', err);
  753.     }
  754.   }
  755.   
  756.   // ネイティブイベントリスナーを登録
  757.   if ($stage.length && $stage[0]) {
  758.     $stage[0].addEventListener('touchstart', handleTouchStart, { passive: false });
  759.     $stage[0].addEventListener('touchmove', handleTouchMove, { passive: false });
  760.     $stage[0].addEventListener('touchend', handleTouchEnd, { passive: false });
  761.     $stage[0].addEventListener('touchcancel', handleTouchEnd, { passive: false });
  762.   }
  764.   // ホイールでズーム（PC用、マウス位置を中心に拡大）
  765.   if ($stage.length && $stage[0]) {
  766.     $stage[0].addEventListener('wheel', function (e) {
  767.       try {
  768.         // 要素の存在確認
  769.         if (!$stage.length || !$stage[0]) return;
  770.         
  771.         e.preventDefault();
  772.         var delta = e.deltaY;
  773.         var factor = (delta > 0) ? -0.1 : 0.1;
  774.         var oldScale = scale;
  775.         var newScale = Math.min(maxScale, Math.max(minScale, scale + factor));
  776.         
  777.         // マウス位置を中心に拡大
  778.         var rect = $stage[0].getBoundingClientRect();
  779.         var mouseX = e.clientX - rect.left;
  780.         var mouseY = e.clientY - rect.top;
  781.         var stageCenterX = rect.width / 2;
  782.         var stageCenterY = rect.height / 2;
  783.         var offsetX = mouseX - stageCenterX - tx;
  784.         var offsetY = mouseY - stageCenterY - ty;
  785.         
  786.         var scaleRatio = newScale / oldScale;
  787.         tx -= offsetX * (scaleRatio - 1);
  788.         ty -= offsetY * (scaleRatio - 1);
  789.         
  790.         scale = newScale;
  791.         applyTransform();
  792.       } catch (err) {
  793.         console.error('Error in wheel handler:', err);
  794.       }
  795.     }, { passive: false });
  796.   }
  797.   
  798.   // リサイズ時に初期拡大率を再計算
  799.   $(window).on('resize', function() {
  800.     isPC = window.innerWidth >= 768;
  801.     if ($modal.hasClass('is-open')) {
  802.       setInitialScale();
  803.     }
  804.   });
  805. });
  806. </script>
  807. {% endblock %}
  810. {% block main %}
  811.     {# 商品拡大 #}
  812.     <div class="bc-zoom-modal" aria-hidden="true">
  813.         <button type="button" class="bc-zoom-close" aria-label="閉じる">&times;</button>
  814.         <div class="bc-zoom-stage">
  815.             <img class="bc-zoom-img" src="" alt="{{ Product.name }}">
  816.         </div>
  817.     </div>
  818.     <div class="ec-productRole">
  819.         <div class="ec-grid2">
  820.             <div class="ec-grid2__cell">
  821.                 <div class="ec-sliderItemRole">
  822.                     {#
  823.                     <!--▼商品画像▼-->
  824.                     <div class="item_visual">
  825.                         {% for ProductImage in Product.ProductImage %}
  826.                             <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}" 
  827.                                                          alt="{{ loop.first ? Product.name : '' }}" 
  828.                                                          width="550" 
  829.                                                          height="550"
  830.                                                          {% if loop.index == 1 %}loading="eager" fetchpriority="high"{% else %}loading="lazy"{% endif %}
  831.                                                          sizes="(max-width: 768px) 100vw, 50vw" /></div>
  832.                         {% else %}
  833.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"></div>
  834.                         {% endfor %}
  835.                     </div>
  836.                     <!--▲商品画像▲-->
  837.                     #}
  838.                     <!--▼商品画像▼-->
  839.                     <div class="item_visual">
  840.                         {% for ProductImage in Product.ProductImage %}
  841.                             <div class="slide-item">
  842.                                 <img
  843.                                     src="{{ asset(ProductImage, 'save_image') }}"
  844.                                     data-zoom-src="{{ asset(ProductImage, 'save_image') }}"
  845.                                     class="bc-zoom-thumb"
  846.                                     alt="{{ loop.first ? Product.name : '' }}"
  847.                                     width="550"
  848.                                     height="550"
  849.                                     {% if loop.index == 1 %}loading="eager" fetchpriority="high"{% else %}loading="lazy"{% endif %}
  850.                                     sizes="(max-width: 768px) 100vw, 50vw" />
  851.                             </div>
  852.                         {% else %}
  853.                             <div class="slide-item">
  854.                                 <img
  855.                                     src="{{ asset(''|no_image_product, 'save_image') }}"
  856.                                     data-zoom-src="{{ asset(''|no_image_product, 'save_image') }}"
  857.                                     class="bc-zoom-thumb"
  858.                                     alt="{{ loop.first ? Product.name : '' }}"
  859.                                     width="550" height="550" />
  860.                             </div>
  861.                         {% endfor %}
  862.                     </div>
  863.                     <!--▲商品画像▲-->
  864.                 </div>
  865.             </div>
  866.             <!--▼商品紹介テーブル▼-->
  867.             <div class="ec-grid2__cell">
  868.               <table class="detail-table">
  869.                 <!--★商品名★-->
  870.                 <tr class="detail-table__title">
  871.                   <th>商品名</th>
  872.                   <td>
  873.                     <p>{{ Product.name }}</p>
  874.                   </td>
  875.                 </tr>
  876.                 <!--★キャスト★-->
  877.                 <tr class="detail-table__item">
  878.                   <th>出演女優</th>
  879.                     {% if Product.actress is not empty %}
  880.                         <td>
  881.                             {% set actresses = Product.actress|split(',') %}
  882.                             {% for actress in actresses %}
  883.                                 {% set actress = actress|trim %}
  884.                                 <a href="{{ url('product_list') }}?date=&maker_id=&keyword={{ actress|url_encode }}">{{ actress }}</a>{% if not loop.last %}, {% endif %}
  885.                             {% endfor %}
  886.                         </td>
  887.                     {% endif %}
  888.                   
  889.                 </tr>
  890.                 <!--★発売日★-->
  891.                 <tr class="detail-table__item">
  892.                   <th>入荷日</th>
  893.                   <td>
  894.                     {% for productCategory in Product.ProductCategories %}
  895.                         {% set parent_category = productCategory.Category %}
  896.                         {% if parent_category is not empty %}
  897.                             {% set category_name = parent_category.name %}
  898.                             {# 8桁なら YY年MM月DD日 に変換 #}
  899.                             <a href="{{ url('product_list') }}?date={{ category_name[:4] ~ '-' ~ category_name[4:2] ~ '-' ~ category_name[6:2] }}&maker_id=&keyword=">
  900.                                 {{ category_name[:4] ~ '年' ~ category_name[4:2] ~ '月' ~ category_name[6:2] ~ '日' }}
  901.                             </a>
  902.                         {% endif %}
  903.                     {% endfor %}
  904.                   </td>
  905.                 </tr>
  906.                 <!--★収録時間★-->
  907.                 <tr class="detail-table__item">
  908.                   <th>収録時間</th>
  909.                   <td>{{ Product.recording_time }}</td>
  910.                 </tr>
  911.                 <!--★メーカー★-->
  912.                 {% if Product.Maker is not empty %}
  913.                 <tr class="detail-table__item">
  914.                     <th>メーカー</th>
  915.                     <td>
  916.                         <a href="{{ url('product_list') }}?date=&maker_id={{ Product.Maker.id }}&keyword=">{{ Product.Maker.name }}</a>
  917.                     </td>
  918.                 </tr>
  919.                 {% endif %}
  920.                 <!--★詳細メインコメント★-->
  921.                 <tr class="detail-table__desc">
  922.                   <th>商品コメント</th>
  923.                   <td>
  924.                     <p>{{ Product.description_detail|raw|nl2br }}</p>
  925.                     <br>
  926.                     <p>※当作品の出演者は全て18歳以上です。</p>
  927.                   </td>
  928.                 </tr>
  929.               </table>
  930.               <!--▲商品紹介テーブル▲-->
  931.               <br>
  932.               <!--▼買い物かごエリア▼-->
  933.               <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  934.                 <table class="detail-class">
  935.                   <tr class="detail-class_plan">
  936.                     {% if form.classcategory_id1 is defined %}
  937.                       <th>{{ form_label(form.classcategory_id1) }}</th>
  938.                       <td>
  939.                         <div class="ec-select">
  940.                           {{ form_widget(form.classcategory_id1 ) }}
  941.                           {{ form_errors(form.classcategory_id1) }}
  942.                         </div>
  943.                       </td>
  944.                       {% if form.classcategory_id2 is defined %}
  945.                         <th>{{ form_label(form.classcategory_id2) }}</th>
  946.                         <td>
  947.                           <div class="ec-select">
  948.                             {{ form_row(form.classcategory_id2) }}
  949.                             {{ form_errors(form.classcategory_id2) }}
  950.                           </div>
  951.                         </td>
  952.                       {% endif %}
  953.                     {% endif %}
  954.                   </tr>
  955.                   <tr class="detail-class_price">
  956.                     <th>価格(税込)</th>
  957.                     <td>
  958.                       <div class="ec-productRole__price">
  959.                                 <div class="ec-price">
  960.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  961.                                     <span class="ec-price__tax">{{ '円'|trans }}</span>
  962.                                 </div>
  963.                       </div>
  964.                     </td>
  965.                   </tr>
  966.                 </table>
  967.                 <div class="ec-numberInput">
  968.                   {{ form_widget(form.quantity, { data: '1', type: 'hidden'} ) }}
  969.                 </div>
  970.                 {{ form_rest(form) }}
  971.                 </form>
  972.                 
  973.                 
  974.                <!-- Button -->
  975.                <div class="cart-btn">
  976.                  {% if BaseInfo.option_favorite_product %}
  977.                    <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  978.                      <div class="ec-productRole__btn">
  979.                       {% if favorite == false %}
  980.                         <input type="image" id="favorite" class="ec-blockBtn--cancel add_favorite" src="{{ asset('assets/img/new/img_favorite-add.png') }}" alt="お気に入りに追加" data-product_name="{{ Product.name}}" />
  981.                       {% else %}
  982.                         <input type="image" class="ec-blockBtn--cancel" disabled="disabled" src="{{ asset('assets/img/new/img_favorite-added.png') }}" alt="お気に入りに追加済" />
  983.                       {% endif %}
  984.                      </div>
  985.                    </form>
  986.                  {% endif %}
  987.                 <div class="ec-productRole__btn">
  988.                   <input type="image" src="{{ asset('assets/img/new/img_cart-add.png') }}" alt="カートに入れる" class="ec-blockBtn--action add-cart" data-cartid="{{ Product.id }}" form="productForm{{ Product.id }}" />
  989.                 </div>
  990.              </div>
  991.              
  992.              <!-- モーダルウィンドウ -->
  993.              <div class="ec-modal">
  994.                 <div class="ec-modal-overlay">
  995.                   <div class="ec-modal-wrap">
  996.                     <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  997.                     <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  998.                       <div class="ec-modal-box">
  999.                         <div class="ec-role">
  1000.                           <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  1001.                           <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  1002.                         </div>
  1003.                       </div>
  1004.                     </div>
  1005.                   </div>
  1006.                 </div>
  1007.              </div>
  1009.         </div>
  1010.     </div>
  1011.     
  1012.     {# 関連商品（同じメーカー） #}
  1013.     {% if RelatedProducts is defined and RelatedProducts|length > 0 %}
  1014.         <style>
  1015.             .related-products-section {
  1016.                 margin-top: 60px;
  1017.                 padding: 40px 20px;
  1018.                 background-color: #f8f8f8;
  1019.             }
  1020.             .related-products-section h2 {
  1021.                 text-align: center;
  1022.                 margin-bottom: 30px;
  1023.                 font-size: 1.5rem;
  1024.                 font-weight: bold;
  1025.                 background-color: #c60d69;
  1026.                 color: white;
  1027.                 padding: 15px 20px;
  1028.                 border-radius: 10px;
  1029.                 width: 100%;
  1030.                 box-sizing: border-box;
  1031.             }
  1032.             @media only screen and (max-width: 768px) {
  1033.                 .related-products-section h2 {
  1034.                     font-size: 1.2rem;
  1035.                     padding: 12px 15px;
  1036.                 }
  1037.             }
  1038.             .related-products-grid {
  1039.                 display: grid;
  1040.                 gap: 16px;
  1041.                 grid-template-columns: repeat(2, 1fr);
  1042.             }
  1043.             @media only screen and (min-width: 1200px) {
  1044.                 .related-products-grid {
  1045.                     grid-template-columns: repeat(4, 1fr);
  1046.                     gap: 20px;
  1047.                 }
  1048.             }
  1049.             .related-product-item {
  1050.                 background: #fc7cb3;
  1051.                 border-radius: 8px;
  1052.                 overflow: hidden;
  1053.                 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  1054.                 transition: transform 0.2s;
  1055.             }
  1056.             .related-product-item:hover {
  1057.                 transform: translateY(-4px);
  1058.                 box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  1059.             }
  1060.             .related-product-image {
  1061.                 width: 100%;
  1062.                 overflow: hidden;
  1063.                 background: #f0f0f0;
  1064.             }
  1065.             .related-product-image img {
  1066.                 width: 100%;
  1067.                 height: 100%;
  1068.                 object-fit: cover;
  1069.             }
  1070.             .related-product-info {
  1071.                 padding: 12px;
  1072.             }
  1073.             .related-product-date {
  1074.                 font-size: 0.75rem;
  1075.                 color: #666;
  1076.                 margin-bottom: 8px;
  1077.             }
  1078.             .related-product-title {
  1079.                 font-size: 0.75rem;
  1080.                 line-height: 1.3;
  1081.                 margin-bottom: 8px;
  1082.                 display: -webkit-box;
  1083.                 -webkit-line-clamp: 2;
  1084.                 -webkit-box-orient: vertical;
  1085.                 overflow: hidden;
  1086.                 min-height: calc(1.3em * 2);
  1087.             }
  1088.             .related-product-desc {
  1089.                 font-size: 0.7rem;
  1090.                 color: white;
  1091.                 line-height: 1.3;
  1092.                 margin-bottom: 8px;
  1093.                 display: -webkit-box;
  1094.                 -webkit-line-clamp: 3;
  1095.                 -webkit-box-orient: vertical;
  1096.                 overflow: hidden;
  1097.             }
  1098.             .related-product-link {
  1099.                 display: block;
  1100.                 text-align: center;
  1101.                 padding: 8px;
  1102.                 background-color: #28a745;
  1103.                 color: white;
  1104.                 text-decoration: none;
  1105.                 font-size: 0.8rem;
  1106.                 border-radius: 4px;
  1107.                 transition: background-color 0.2s;
  1108.                 white-space: nowrap;
  1109.             }
  1110.             .related-product-link:hover {
  1111.                 background-color: #218838;
  1112.                 color: white;
  1113.             }
  1114.             @media only screen and (max-width: 768px) {
  1115.                 .related-product-link {
  1116.                     font-size: 0.7rem;
  1117.                     padding: 6px;
  1118.                 }
  1119.             }
  1120.         </style>
  1121.     
  1122.     <div class="related-products-section">
  1123.         <h2>関連商品（{{ Product.Maker is not empty ? Product.Maker.name : '同じメーカー' }}）</h2>
  1124.         <div class="related-products-grid">
  1125.             {% for P in RelatedProducts %}
  1126.                 <div class="related-product-item">
  1127.                     <a href="{{ url('product_detail', {'id': P.id}) }}">
  1128.                         <div class="related-product-image">
  1129.                             <img src="{{ asset(P.list_image|no_image_product, 'save_image') }}" 
  1130.                                  alt="{{ P.name }}" 
  1131.                                  width="300" 
  1132.                                  height="300"
  1133.                                  loading="lazy"
  1134.                                  sizes="(max-width: 768px) 33vw, (max-width: 1200px) 20vw, 15vw" />
  1135.                         </div>
  1136.                     </a>
  1137.                     <div class="related-product-info">
  1138.                         <div class="related-product-desc">
  1139.                             {{ P.description_detail ? (P.description_detail | striptags | slice(0, 50) ~ '…') : '' }}
  1140.                         </div>
  1141.                         <a class="related-product-link" href="{{ url('product_detail', {'id': P.id}) }}">商品詳細へ</a>
  1142.                     </div>
  1143.                 </div>
  1144.             {% endfor %}
  1145.         </div>
  1146.     </div>
  1147.     {% endif %}
  1148.     
  1149.     {# よく見られる商品 #}
  1150.     {% if PopularProducts is defined and PopularProducts|length > 0 %}
  1151.     <div class="related-products-section">
  1152.         <h2>関連商品（よく見られる商品）</h2>
  1153.         <div class="related-products-grid">
  1154.             {% for P in PopularProducts %}
  1155.                 <div class="related-product-item">
  1156.                     <a href="{{ url('product_detail', {'id': P.id}) }}">
  1157.                         <div class="related-product-image">
  1158.                             <img src="{{ asset(P.list_image|no_image_product, 'save_image') }}" 
  1159.                                  alt="{{ P.name }}" 
  1160.                                  width="300" 
  1161.                                  height="300"
  1162.                                  loading="lazy"
  1163.                                  sizes="(max-width: 768px) 33vw, (max-width: 1200px) 20vw, 15vw" />
  1164.                         </div>
  1165.                     </a>
  1166.                     <div class="related-product-info">
  1167.                         <div class="related-product-desc">
  1168.                             {{ P.description_detail ? (P.description_detail | striptags | slice(0, 50) ~ '…') : '' }}
  1169.                         </div>
  1170.                         <a class="related-product-link" href="{{ url('product_detail', {'id': P.id}) }}">商品詳細へ</a>
  1171.                     </div>
  1172.                 </div>
  1173.             {% endfor %}
  1174.         </div>
  1175.     </div>
  1176.     {% endif %}
  1178.     
  1179. {% endblock %}