app/Plugin/CustomPrice/Resource/template/Product/detail.twig line 1

Open in your IDE?
  4. <script>
  5.     $(function () {
  7.         if ($("#custom_chamfer").length) {
  8.            
  9.             if ($("#custom_chamfer option:nth-child(2)").length) {
  10.                 $("#custom_chamfer option:nth-child(2)").prop('selected', true).trigger('change');
  11.             }      
  12.         }
  13.         
  14.     $('#custom_width, #custom_height').on('input', function () {
  15.         let frameWidth = $('.frame_block_wrap').width(); // 親要素の幅
  16.         let inputWidth = parseInt($('#custom_width').val()) || 0;
  17.         let inputHeight = parseInt($('#custom_height').val()) || 0;
  18.         let borderWidth = {{Product.minlength}};
  19.         let maxHeight = 350; // 最大高さを500pxとする
  21.         if (inputWidth > 0 && inputHeight > 0 && borderWidth >= 0) {
  22.             let gcd = function (a, b) {
  23.                 return b == 0 ? a : gcd(b, a % b);
  24.             };
  26.             let greatestCommonDivisor = gcd(inputWidth, inputHeight);
  27.             let aspectWidth = inputWidth / greatestCommonDivisor;
  28.             let aspectHeight = inputHeight / greatestCommonDivisor;
  30.             let heightBasedOnWidth = frameWidth * (aspectHeight / aspectWidth);
  33.              // 高さが最大高さを超える場合は縮小する
  34.              if (heightBasedOnWidth > maxHeight) {
  35.                 heightBasedOnWidth = maxHeight; // 高さを最大高さに設定
  36.                 frameWidth = maxHeight * (aspectWidth / aspectHeight); // 幅もアスペクト比に基づいて再計算
  37.             }
  39.             let borderRatioWidth = borderWidth / greatestCommonDivisor;
  40.             let borderBasedOnWidth = frameWidth * (borderRatioWidth / aspectWidth);
  42.             $('#frame_block').css({
  43.                 width: frameWidth + 'px', // 幅を100%に設定
  44.                 height: heightBasedOnWidth + 'px', // 高さをアスペクト比に基づいて設定
  45.                 "border-width": borderBasedOnWidth
  46.             });
  47.         } 
  48.     });
  49. });
  50. </script>
  53. <script>
  54.     $(function () {
  56.         const PRODUCT_PRICE = $("#add_price");
  57.         function numberFormat(num = 0) {
  58.             return num.toString().replace(/(\d+?)(?=(?:\d{3})+$)/g, x => {
  59.                 return x + ','
  60.             })
  61.         }
  62.         $('#form1').on('change keyup', 'input, select', function () {
  63.             // ここでフォームのデータを取得
  65.             var formData = $('#form1').serialize(); // フォームのデータをURLエンコードされた文字列で取得
  67.             // AJAXリクエストを送信
  68.             $.ajax({
  69.                 url: '/api/custom_price/product/{{Product.id}}', // サーバーエンドポイントURL
  70.                 type: 'GET', // メソッドタイプ
  71.                 dataType: 'json', // 期待するレスポンスの形式
  72.                 data: formData, // フォームデータ
  73.                 success: function (response) {
  74.                     //let formattedPrice = numberFormat(response.price);
  75.                     
  76.                     // PRODUCT_PRICE.html(`ご購入価格：<span class="txt_pink">${formattedPrice}円<span class="unit">(税込)</span></span>`);
  78.                     PRODUCT_PRICE.html(`
  79.                     <div class="price_s">
  80.                     本体価格：<span class="txt_pink txt_pink_s">${response.price}円<span class="unit unit_s">(税込)</span></span><br>
  81.                     面取り加工価格：<span class="txt_pink txt_pink_s">${response.chamfer_price}円<span class="unit unit_s">(税込)</span></span><br>
  82.                     取付金具価格：<span class="txt_pink txt_pink_s">${response.mounting_price}円<span class="unit unit_s">(税込)</span></span>
  83.                     </div>
  84.                     合計価格：<span class="txt_pink">${response.main_price}円<span class="unit">(税込)</span></span>
  85.                     `);
  87.                     $("#error-message").remove();
  88.                 },
  89.                 error: function (xhr, status, error) {
  90.                     // エラー処理
  91.                     let response = JSON.parse(xhr.responseText);
  92.                     $("#error-message").remove();
  93.                     if (response?.error) {
  94.                         // エラーメッセージを挿入
  95.                         PRODUCT_PRICE.html("");
  96.                         PRODUCT_PRICE.after(`<div id="error-message" style="color: red; font-size:13px;">${response.error}</div>`);
  97.                     }
  99.                 }
  100.             });
  101.         });
  103.     });
  104. </script>
  107. <style>
  108.     *{
  109.         box-sizing: border-box;
  110.     }
  111.     .frame_block_ttl{
  112.         color: #804040;
  113.         text-align: center;
  114.         margin-top: 40px;
  115.     }
  116.     .frame_block_wrap {
  117.         width: 90%;
  118.         margin: 0 auto;
  119.         margin-top: 20px;
  120.         overflow: hidden;
  121.         margin-bottom: 15px;
  122.         text-align: center;
  123.     }
  125.     #frame_block {
  126.         height: 200px;
  127.         border: 5px solid #804040;
  128.         margin: 0 auto;
  129.     }
  130.     .price_s{
  131.         font-size: 14px;
  132.     }
  133.     .item_detail .item_detail_info .goods_info span.txt_pink_s{
  134.         font-size: 17px;
  135.     }
  136.     .item_detail .item_detail_info .goods_info .unit.unit_s{
  137.         font-size: 14px;
  138.     }
  139. </style>