app/Plugin/ProductOption42/Resource/template/default/Product/option_js.twig line 1

Open in your IDE?
  1. {#
  2. * Plugin Name : ProductOption
  3. * Modified for Price Difference Display
  4. *
  5. * Copyright (C) BraTech Co., Ltd. All Rights Reserved.
  6. * http://www.bratech.co.jp/
  7. *
  8. * For the full copyright and license information, please view the LICENSE
  9. * file that was distributed with this source code.
  10. #}
  12. {% block css %}
  13. <style type="text/css">
  14.     .datepicker-days th.dow:first-child,
  15.     .datepicker-days td:first-child {
  16.         color: #f00;
  17.     }
  19.     .datepicker-days th.dow:last-child,
  20.     .datepicker-days td:last-child {
  21.         color: #00f;
  22.     }
  23.     
  24.     /* 差額表示用のスタイル */
  25.     .option-price-diff {
  26.         font-weight: normal;
  27.         font-size: 0.9em;
  28.         margin-left: 0.5em;
  29.     }
  30.     .option-price-diff.positive {
  31.         color: #d9534f;
  32.     }
  33.     .option-price-diff.negative {
  34.         color: #5cb85c;
  35.     }
  36.     .option-price-diff.zero {
  37.         color: #999;
  38.     }
  39. </style>
  40. {% endblock %}
  41. {% block javascript %}
  42. <script src="{{ asset('../../plugin/ProductOption42/assets/js/jquery.plainmodal.min.js') }}"></script>
  43. <script>
  44. $(function() {
  45.     //デフォルトのデイトタイムピッカーが存在しない場合
  46.     if ($('[type="date"]').prop('type') !== 'date') {
  47.         $.getScript("{{ asset('assets/js/vendor/moment.min.js', 'admin') }}").done(function() {
  48.             $.getScript("{{ asset('assets/js/vendor/moment-with-locales.min.js', 'admin') }}").done(function() {
  49.                 $.getScript("{{ asset('assets/js/vendor/tempusdominus-bootstrap-4.min.js', 'admin') }}").done(function() {
  50.                     $('input[type=date]').datetimepicker({
  51.                         locale: '{{ eccube_config.locale }}',
  52.                         format: 'YYYY-MM-DD',
  53.                         useCurrent: false,
  54.                         buttons: {
  55.                             showToday: true,
  56.                             showClose: true
  57.                         }
  58.                     });
  59.                 });
  60.             });
  61.         });
  62.     }
  63. });
  65. var product_id;
  66. $(function() {
  67.     {% for ProductOption in ProductOptions %}
  68.     {% set Option = ProductOption.Option %}
  69.     {% set Product = ProductOption.Product %}
  70.         {% if Option.description_flg == constant('Plugin\\ProductOption42\\Entity\\OptionCategory::ON') %}
  71.             modal{{ Product.id }}_{{ Option.id }} = $('#option_description_{{ Product.id }}_{{ Option.id }}').plainModal();
  72.             $('#option_description_link_{{ Product.id }}_{{ Option.id }}').click(function() {
  73.                 modal{{ Product.id }}_{{ Option.id }}.plainModal('open');
  74.                 product_id = $(this).attr('data');
  75.                 return false;
  76.             });
  77.         {% endif %}
  78.     {% endfor %}
  79. });
  81. $(function() {
  82.     $("[id^=desc_btn_]").click(function(){
  83.         var form_id;
  84.         var id = $(this).attr('id').replace(/^desc_btn_/ig, '');
  85.         var ids = id.split('_');
  86.         if (eccube.hasOwnProperty('productsClassCategories')) {
  87.             form_id = product_id;
  88.         }else{
  89.             form_id = 1;
  90.         }
  91.         var $form = $("form[name=form"+form_id+"]");
  92.         func_submit($form,ids[0],ids[1]);
  93.         onOptionChange($form)
  94.     });
  95.     $("[name^=productoption]").change(function(){
  96.         $form = $(this).parents('form');
  97.         onOptionChange($form);
  98.     });
  99.     
  100.     // 初回ロード時に差額表示を追加
  101.     updatePriceDifferenceDisplay();
  102. });
  104. function func_submit($form,optionId, setValue) {
  105.     var $sele_option = $form.find("[name=productoption" + optionId + "]");
  106.     if($sele_option && $sele_option.length){
  107.         var kind = $sele_option.attr("type");
  108.         if(kind == 'radio'){
  109.             $sele_option.val([setValue]);
  110.         }else{
  111.             $sele_option.val(setValue);
  112.         }
  113.     }else{
  114.         var $sele_option = $form.find('[name="productoption' + optionId + '[]"]');
  115.         if($sele_option && $sele_option.length){
  116.             $sele_option.each(function(){
  117.                 if($(this).val() == setValue){
  118.                     $(this).prop('checked',true);
  119.                 }
  120.             });
  121.         }
  122.     }
  124.     $('#option_description_' + product_id + '_' + optionId).plainModal('close');
  125. }
  128. var optionPrice = {{ optionPrices|json_encode|raw }};
  129. var optionPoint = {{ optionPoints|json_encode|raw }};
  130. var optionMultiple = {{ optionMultiples|json_encode|raw }};
  131. var optionBasePrice = {{ optionBasePrices|json_encode|raw }};  // 追加: 基準価格
  132. var optionBaseCategoryId = {{ optionBaseCategoryIds|json_encode|raw }};  // 追加: 基準カテゴリID
  133. var taxRules = {{ taxRules|json_encode|raw }};
  134. var default_class_id = {{ default_class_id|json_encode|raw }};
  136. /**
  137.  * 差額表示を更新する関数
  138.  */
  139. function updatePriceDifferenceDisplay() {
  140.     $('form').each(function(){
  141.         var $form = $(this);
  142.         var product_id = $form.find('input[name="product_id"]').val();
  143.         if(!product_id) return;
  144.         
  145.         $form.find("[id^=productoption]").each(function(){
  146.             var id = $(this).prop("id");
  147.             var name = $(this).attr("name");
  148.             if(!name){
  149.                 name = $(this).find("input").prop("id");
  150.             }
  151.             if(!name) return;
  152.             
  153.             var option_id = name.replace(/productoption/ig,'');
  154.             option_id = option_id.replace(/_\d+/ig,'');
  155.             option_id = option_id.replace(/\[\]/ig,'');
  156.             
  157.             // 基準価格がない場合はスキップ
  158.             if(!optionBasePrice[product_id] || !optionBasePrice[product_id][option_id]){
  159.                 return;
  160.             }
  161.             
  162.             var basePrice = optionBasePrice[product_id][option_id];
  163.             var kind = $(this).prop('tagName');
  164.             
  165.             if(kind === 'SELECT'){
  166.                 // プルダウンの場合
  167.                 $(this).find('option').each(function(){
  168.                     var categoryId = $(this).val();
  169.                     if(categoryId && optionPrice[product_id][option_id][categoryId] !== undefined){
  170.                         var price = optionPrice[product_id][option_id][categoryId];
  171.                         var diff = price - basePrice;
  172.                         
  173.                         // 基準カテゴリかどうかを判定
  174.                         var isBasePrice = false;
  175.                         if (optionBaseCategoryId[product_id] && optionBaseCategoryId[product_id][option_id]) {
  176.                             isBasePrice = (categoryId == optionBaseCategoryId[product_id][option_id]);
  177.                         } else {
  178.                             // 基準カテゴリIDがない場合は差額0で判定
  179.                             isBasePrice = (diff === 0 && price === basePrice);
  180.                         }
  181.                         
  182.                         var diffText = formatPriceDifference(diff, isBasePrice);
  183.                         
  184.                         // 元のテキストから価格表示部分を削除（¥や￥を含む括弧を削除）
  185.                         var originalText = $(this).text()
  186.                             .replace(/[（(]\s*[¥￥]\s*[\d,]+\s*[）)]/g, '')  // (¥ 1,000) を削除
  187.                             .replace(/\s*[+\-±][\d,]+円\s*$/g, '')  // 既存の差額表示を削除
  188.                             .trim();
  189.                         
  190.                         // 差額表示がある場合のみ追加
  191.                         if(diffText) {
  192.                             $(this).text(originalText + ' ' + diffText);
  193.                         } else {
  194.                             $(this).text(originalText);
  195.                         }
  196.                     }
  197.                 });
  198.             } else if($(this).find('input[type="radio"]').length > 0){
  199.                 // ラジオボタンの場合
  200.                 $(this).find('input[type="radio"]').each(function(){
  201.                     var categoryId = $(this).val();
  202.                     if(categoryId && optionPrice[product_id][option_id][categoryId] !== undefined){
  203.                         var price = optionPrice[product_id][option_id][categoryId];
  204.                         var diff = price - basePrice;
  205.                         
  206.                         // 基準カテゴリかどうかを判定
  207.                         var isBasePrice = false;
  208.                         if (optionBaseCategoryId[product_id] && optionBaseCategoryId[product_id][option_id]) {
  209.                             isBasePrice = (categoryId == optionBaseCategoryId[product_id][option_id]);
  210.                         } else {
  211.                             isBasePrice = (diff === 0 && price === basePrice);
  212.                         }
  213.                         
  214.                         var diffText = formatPriceDifference(diff, isBasePrice);
  215.                         var $label = $(this).next('label');
  216.                         if($label.length){
  217.                             // 元のテキストから価格表示部分を削除
  218.                             var originalText = $label.text()
  219.                                 .replace(/[（(]\s*[¥￥]\s*[\d,]+\s*[）)]/g, '')
  220.                                 .replace(/\s*[+\-±][\d,]+円\s*$/g, '')
  221.                                 .trim();
  222.                             
  223.                             // 差額表示がある場合のみ追加
  224.                             if(diffText) {
  225.                                 $label.html(originalText + ' <span class="option-price-diff ' + getPriceClass(diff) + '">' + diffText + '</span>');
  226.                             } else {
  227.                                 $label.html(originalText);
  228.                             }
  229.                         }
  230.                     }
  231.                 });
  232.             } else if($(this).find('input[type="checkbox"]').length > 0){
  233.                 // チェックボックスの場合
  234.                 $(this).find('input[type="checkbox"]').each(function(){
  235.                     var categoryId = $(this).val();
  236.                     if(categoryId && optionPrice[product_id][option_id][categoryId] !== undefined){
  237.                         var price = optionPrice[product_id][option_id][categoryId];
  238.                         var diff = price - basePrice;
  239.                         
  240.                         // 基準カテゴリかどうかを判定
  241.                         var isBasePrice = false;
  242.                         if (optionBaseCategoryId[product_id] && optionBaseCategoryId[product_id][option_id]) {
  243.                             isBasePrice = (categoryId == optionBaseCategoryId[product_id][option_id]);
  244.                         } else {
  245.                             isBasePrice = (diff === 0 && price === basePrice);
  246.                         }
  247.                         
  248.                         var diffText = formatPriceDifference(diff, isBasePrice);
  249.                         var $label = $(this).next('label');
  250.                         if($label.length){
  251.                             // 元のテキストから価格表示部分を削除
  252.                             var originalText = $label.text()
  253.                                 .replace(/[（(]\s*[¥￥]\s*[\d,]+\s*[）)]/g, '')
  254.                                 .replace(/\s*[+\-±][\d,]+円\s*$/g, '')
  255.                                 .trim();
  256.                             
  257.                             // 差額表示がある場合のみ追加
  258.                             if(diffText) {
  259.                                 $label.html(originalText + ' <span class="option-price-diff ' + getPriceClass(diff) + '">' + diffText + '</span>');
  260.                             } else {
  261.                                 $label.html(originalText);
  262.                             }
  263.                         }
  264.                     }
  265.                 });
  266.             }
  267.         });
  268.     });
  269. }
  271. /**
  272.  * 差額を表示用にフォーマット
  273.  * @param {number} diff - 価格差額
  274.  * @param {boolean} isBasePrice - 基準価格かどうか
  275.  */
  276. function formatPriceDifference(diff, isBasePrice) {
  277.     // 基準価格（init_flg=1）の場合は空文字（表示なし）
  278.     if(isBasePrice) {
  279.         return '';
  280.     }
  281.     
  282.     // 差額が0円の場合
  283.     if(diff === 0) {
  284.         return '±0円';
  285.     } else if(diff > 0) {
  286.         return '+' + Number(diff).toLocaleString() + '円';
  287.     } else {
  288.         return Number(diff).toLocaleString() + '円';
  289.     }
  290. }
  292. /**
  293.  * 差額に応じたCSSクラスを返す
  294.  */
  295. function getPriceClass(diff) {
  296.     if(diff === 0) return 'zero';
  297.     if(diff > 0) return 'positive';
  298.     return 'negative';
  299. }
  301. function onOptionChange($form){
  302.     if(!$form.length){
  303.         return;
  304.     }
  305.     var optionPriceTotal = 0;
  306.     var optionPointTotal = 0;
  307.     var tax_rate = null;
  308.     var tax_rule = null;
  309.     var product_id = $form.find('input[name="product_id"]').val();
  310.     var $sele1 = $form.find('select[name=classcategory_id1]');
  311.     var $sele2 = $form.find('select[name=classcategory_id2]');
  313.     var classcat_id1 = $sele1.val() ? $sele1.val() : '__unselected';
  314.     var classcat_id2 = $sele2.val() ? $sele2.val() : '';
  315.     if (eccube.hasOwnProperty('productsClassCategories')) {
  316.         // 商品一覧時
  317.         classcat2 = eccube.productsClassCategories[product_id][classcat_id1]['#' + classcat_id2];
  318.     } else {
  319.         // 詳細表示時
  320.         classcat2 = eccube.classCategories[classcat_id1]['#' + classcat_id2];
  321.     }
  322.     $form.find("[id^=productoption]").each(function(){
  323.         var id = $(this).prop("id");
  324.         var name = $(this).attr("name");
  325.         var option_id = null;
  326.         if(name === undefined){
  327.             name = $(this).find("input").prop("id");
  328.         }
  329.         if(name === undefined)return;
  330.         option_id = name.replace(/productoption/ig,'');
  331.         option_id = option_id.replace(/_\d+/ig,'');
  332.         option_id = option_id.replace(/\[\]/ig,'');
  333.         if(id.match(/^productoption\d+$/)){
  334.             var kind = $(this).prop('tagName');
  335.             var type = $(this).attr('type');
  336.             var value = null;
  337.             var multi = 1;
  338.             switch(kind){
  339.                 case 'SELECT':
  340.                     value = $(this).val();
  341.                     break;
  342.                 case 'TEXTAREA':
  343.                 case 'INPUT':
  344.                     var text = $(this).val();
  345.                     if(text.length > 0){
  346.                         value = 0;
  347.                     }
  348.                     if(type == 'number'){
  349.                         if(optionMultiple[product_id][option_id]){
  350.                             multi = $(this).val();
  351.                             if(multi.length == 0)multi = 0;
  352.                         }
  353.                     }
  354.                     break;
  355.                 default:
  356.                     if($(this).find('input[type="checkbox"]').length > 0){
  357.                         value = [];
  358.                         $(this).find('input[type="checkbox"]:checked').each(function(){
  359.                             value.push($(this).val());
  360.                         });
  361.                     }else{
  362.                         value = $form.find("input[name='productoption" + option_id + "']:checked").val();
  363.                     }
  364.                     break;
  365.             }
  366.             if($.isNumeric(value) || Array.isArray(value)){
  367.                 // ========== 基準価格を使った差額計算 ==========
  368.                 var basePrice = 0;
  369.                 if(optionBasePrice[product_id] && optionBasePrice[product_id][option_id]){
  370.                     basePrice = parseFloat(optionBasePrice[product_id][option_id]);
  371.                 }
  372.                 
  373.                 if(Array.isArray(value)){
  374.                     for(var key in value){
  375.                         var categoryPrice = parseFloat(optionPrice[product_id][option_id][value[key]]);
  376.                         
  377.                         // 基準カテゴリかどうかを判定
  378.                         var isBaseCategory = false;
  379.                         if(optionBaseCategoryId[product_id] && optionBaseCategoryId[product_id][option_id]){
  380.                             isBaseCategory = (value[key] == optionBaseCategoryId[product_id][option_id]);
  381.                         }
  382.                         
  383.                         // 基準カテゴリの場合は加算しない、それ以外は差額を加算
  384.                         if(!isBaseCategory){
  385.                             optionPriceTotal += (categoryPrice - basePrice);
  386.                             // ポイントは差額分のみ
  387.                             var pointDiff = parseFloat(optionPoint[product_id][option_id][value[key]]) - Math.round(basePrice * (parseFloat(optionPoint[product_id][option_id][value[key]]) / categoryPrice));
  388.                             optionPointTotal += pointDiff;
  389.                         }
  390.                     }
  391.                 }else{
  392.                     var categoryPrice = parseFloat(optionPrice[product_id][option_id][value]*multi);
  393.                     
  394.                     // 基準カテゴリかどうかを判定
  395.                     var isBaseCategory = false;
  396.                     if(optionBaseCategoryId[product_id] && optionBaseCategoryId[product_id][option_id]){
  397.                         isBaseCategory = (value == optionBaseCategoryId[product_id][option_id]);
  398.                     }
  399.                     
  400.                     // 基準カテゴリの場合は加算しない、それ以外は差額を加算
  401.                     if(!isBaseCategory){
  402.                         optionPriceTotal += (categoryPrice - basePrice * multi);
  403.                         // ポイントは差額分のみ
  404.                         var pointDiff = parseFloat(optionPoint[product_id][option_id][value]*multi) - Math.round(basePrice * multi * (parseFloat(optionPoint[product_id][option_id][value]) / parseFloat(optionPrice[product_id][option_id][value])));
  405.                         optionPointTotal += pointDiff;
  406.                     }
  407.                 }
  408.                 // ========== 差額計算ここまで ==========
  409.             }
  410.         }
  411.     });
  413.     if(classcat2){
  414.         var product_class_id = classcat2.product_class_id;
  415.     }else{
  416.         var product_class_id = default_class_id[product_id];
  417.     }
  419.     var tax_rate = taxRules[product_class_id]['tax_rate'];
  420.     var tax_rule = taxRules[product_class_id]['tax_rule'];
  421.     
  422.     var $option_price = $form.parent().find('#option_price_default').first();
  423.     $option_price.text(number_format(optionPriceTotal));
  424.     var $option_point = $form.parent().find('#option_price_inctax_default').first();
  425.     $option_point.text(number_format(optionPriceTotal + sfTax(optionPriceTotal, tax_rate, tax_rule)));
  426. }
  428. function number_format(num) {
  429.     return num.toString().replace(/([0-9]+?)(?=(?:[0-9]{3})+$)/g , '$1,');
  430. }
  432. function sfTax(price, tax_rate, tax_rule) {
  433.     real_tax = tax_rate / 100;
  434.     ret = price * real_tax;
  435.     tax_rule = parseInt(tax_rule);
  436.     switch (tax_rule) {
  437.         // 四捨五入
  438.         case {{ constant('Eccube\\Entity\\Master\\RoundingType::ROUND') }}:
  439.             $ret = Math.round(ret);
  440.             break;
  441.         // 切り捨て
  442.         case {{ constant('Eccube\\Entity\\Master\\RoundingType::FLOOR') }}:
  443.             $ret = Math.floor(ret);
  444.             break;
  445.         // 切り上げ
  446.         case {{ constant('Eccube\\Entity\\Master\\RoundingType::CEIL') }}:
  447.             $ret = Math.ceil(ret);
  448.             break;
  449.     }
  450.     return $ret;
  451. }
  452. </script>
  453. {% endblock %}