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

Open in your IDE?
  1. {#
  2. * Plugin Name : ProductOption
  3. *
  4. * Copyright (C) BraTech Co., Ltd. All Rights Reserved.
  5. * http://www.bratech.co.jp/
  6. *
  7. * For the full copyright and license information, please view the LICENSE
  8. * file that was distributed with this source code.
  9. #}
  11. {% block css %}
  12.     <style type="text/css">
  13.         .datepicker-days th.dow:first-child,
  14.         .datepicker-days td:first-child {
  15.             color: #f00;
  16.         }
  18.         .datepicker-days th.dow:last-child,
  19.         .datepicker-days td:last-child {
  20.             color: #00f;
  21.         }
  22.     </style>
  23. {% endblock %}
  24. {% block javascript %}
  25. <script src="{{ asset('../../plugin/ProductOption42/assets/js/jquery.plainmodal.min.js') }}"></script>
  26. <script>
  27. $(function() {
  28.     //デフォルトのデイトタイムピッカーが存在しない場合
  29.     if ($('[type="date"]').prop('type') !== 'date') {
  30.         $.getScript("{{ asset('assets/js/vendor/moment.min.js', 'admin') }}").done(function() {
  31.             $.getScript("{{ asset('assets/js/vendor/moment-with-locales.min.js', 'admin') }}").done(function() {
  32.                 $.getScript("{{ asset('assets/js/vendor/tempusdominus-bootstrap-4.min.js', 'admin') }}").done(function() {
  33.                     $('input[type=date]').datetimepicker({
  34.                         locale: '{{ eccube_config.locale }}',
  35.                         format: 'YYYY-MM-DD',
  36.                         useCurrent: false,
  37.                         buttons: {
  38.                             showToday: true,
  39.                             showClose: true
  40.                         }
  41.                     });
  42.                 });
  43.             });
  44.         });
  45.     }
  46. });
  48. var product_id;
  49. $(function() {
  51.     {% set prev_condition = '' %}
  52.     {% set count = 0 %}
  53.     {% set index = 0 %}
  56.     {% for ProductOption in Product.ProductOptions %}
  57.         {% set current_condition = '' %}
  58.         {% set Option = ProductOption.Option %}
  59.         {% set Product = ProductOption.Product %}
  62.         {% if '張地' in ProductOption.Option.backend_name %}
  63.             {% set current_condition = '張地' %}
  64.         {% elseif 'サイズ選択' in ProductOption.Option.backend_name %}
  65.             {% set current_condition = 'サイズ' %}
  66.         {% else %}
  67.             {# 他の条件を追加する場合は、ここに追加してください。 #}
  68.         {% endif %}
  70.         {% if prev_condition != current_condition %}
  72.             {# 最後のカウントの処理 ============================= #}
  73.             {% if prev_condition != '' %}
  74.                 {# 最後の処理 #}
  75.             {% endif %}
  77.             {# 最初のカウントの処理 ============================= #}
  78.             {% set count = 0 %}
  80.             {% if (count == 0 and current_condition == '張地') or (count == 0 and current_condition == 'サイズ') %}
  82.                 {# 最初はオプション全体のモーダルを出力する #}
  83.                 modal{{ current_condition }} = $('#option_description_{{ current_condition }}').plainModal();
  84.                 $('#option_description_link_{{ current_condition }}').click(function() {
  85.                     modal{{ current_condition }}.plainModal('open');
  86.                     product_id = $(this).attr('data');
  87.                     return false;
  88.                 });
  90.             {% endif %}
  91.         {% endif %}
  94.         {# 最初と最後以外の通常処理 ============================= #}
  96.         {% if current_condition == '張地' or current_condition == 'サイズ' %}
  97.             {# 張地/サイズの場合 #}
  98.             {% if Option.description_flg == constant('Plugin\\ProductOption42\\Entity\\OptionCategory::ON') %}
  99.                 modal{{ Product.id }}_{{ Option.id }} = $('#option_description_{{ Product.id }}_{{ Option.id }}').plainModal();
  100.                 $(document).on('click', '#option_description_link_{{ Product.id }}_{{ Option.id }}', function(e) {
  101.                     e.preventDefault();
  103.                     $('#option_description_{{ current_condition }}').plainModal('close');
  105.                     // plainModalの 'close' イベントが発生した後に新しいモーダルを開く
  106.                     $('#option_description_{{ current_condition }}').one('plainmodalclose', function() {
  107.                         modal{{ Product.id }}_{{ Option.id }}.plainModal('open');
  108.                         product_id = $('#option_description_link_{{ Product.id }}_{{ Option.id }}').attr('data');
  109.                     });
  110.                 });
  111.             {% endif %}
  112.             {# 戻るボタンで戻る #}
  113.             modal{{ current_condition }} = $('#option_description_{{ current_condition }}').plainModal();
  114.             $(document).on('click', '#option_back_link_{{ current_condition }}', function(e) {
  115.                 e.preventDefault();
  116.                 $('#option_description_{{ Product.id }}_{{ Option.id }}').plainModal('close');
  117.                 $('#option_description_{{ Product.id }}_{{ Option.id }}').one('plainmodalclose', function() {
  118.                     modal{{ current_condition }}.plainModal('open');
  119.                     return false;
  120.                 });
  121.             });
  123.         {% else %}
  125.             {# 張地/以外の画像オプション #}
  126.             {% if Option.description_flg == constant('Plugin\\ProductOption42\\Entity\\OptionCategory::ON') %}
  127.                 modal{{ Product.id }}_{{ Option.id }} = $('#option_description_{{ Product.id }}_{{ Option.id }}').plainModal();
  128.                 $(document).on('click', '#option_description_link_{{ Product.id }}_{{ Option.id }}', function(e) {
  129.                     e.preventDefault();
  130.                     modal{{ Product.id }}_{{ Option.id }}.plainModal('open');
  131.                     product_id = $('#option_description_link_{{ Product.id }}_{{ Option.id }}').attr('data');
  132.                 });
  133.             {% endif %}
  134.         {% endif %}
  136.         {% set prev_condition = current_condition %}
  137.         {% set count = count + 1 %}
  138.         {% set index = index + 1 %}
  141.     {% endfor %}
  142. });
  145. //初期値で全てのセレクトボックスを必須
  146. $(document).ready(function() {
  147.    $("select.form-select").attr("required", true);
  148. });
  151. //オプション選択ボタンクリックイベント
  152. $(function() {
  153.     $("[id^=desc_btn_]").click(function(){
  155.         /*optionが選択されたら選択項目を表示する 後で関数にする*/
  156.         //データを取得
  157.         var select_data = $(this).data('type');
  158.         var select_title = $(this).siblings('h3').text();
  159.         var select_img_src = $(this).siblings('img').attr('src');
  160.         var select_img_txt = $(this).siblings('p').text();
  162.         //表示する前に一度オプションを全て解除する
  163.         var targetElementSelect = $('[data-select-type="' + select_data + '"]');
  164.         targetElementSelect.children('select').prop("selectedIndex", 0);
  166.         //表示するエリアに選択した情報を表示
  167.         var targetElement = $('[data-type="' + select_data + '"]');
  168.         targetElement.fadeIn();
  169.         if(select_img_src){
  170.             targetElement.find('img').attr('src', select_img_src);
  171.         }else{
  172.             targetElement.find('img').hide();
  173.         }
  174.         targetElement.find('h3').text(select_title);
  175.         targetElement.find('p').text(select_img_txt);
  177.         //表示エリアの選択状態をtrueにする
  178.         $('.choice_display_area[data-type="' + select_data + '"]').attr('data-select-result', true);
  180.         //「リストから選択」ボタンを非表示
  181.         targetElement.siblings('.choice_display_area__top').children('a.option_description_link_brn').addClass('display_disable');
  183.         var form_id;
  184.         var id = $(this).attr('id').replace(/^desc_btn_/ig, '');
  185.         var ids = id.split('_');
  186.         if (eccube.hasOwnProperty('productsClassCategories')) {
  187.             form_id = product_id;
  188.         }else{
  189.             form_id = 1;
  190.         }
  191.         var $form = $("form[name=form"+form_id+"]");
  192.         func_submit($form,ids[0],ids[1]);
  193.         onOptionChange($form)
  194.     });
  196.     $("[name^=productoption]").change(function(){
  197.         $form = $(this).parents('form');
  198.         onOptionChange($form);
  199.     });
  200. });
  203. //選択クリアボタンイベント
  204. $(function() {
  205.     $("a.option_delete_link_btn").click(function(){
  206.         var data_type = $(this).data('type');
  207.         //非表示にする前に一度オプションを全てリセット
  208.         var targetElementSelect = $('[data-select-type="' + data_type + '"]');
  209.         targetElementSelect.children('select').prop("selectedIndex", 0);
  210.         //表示エリアを非表示
  211.         if($(this).parent('.choice_display_area').data('type') == data_type){
  212.             $(this).parent('.choice_display_area').hide();
  213.         }
  215.         //選択状態をfalseにする
  216.          $('.choice_display_area[data-type="' + data_type + '"]').attr('data-select-result', false);
  218.         //モーダルボタンを表示
  219.         $('[data-btn-type="' + data_type + '"]').removeClass('display_disable');
  221.         //表示金額をリセット
  222.         $form = $(this).parents('form');
  223.         onOptionChange($form);
  224.     });
  225. });
  228. function func_submit($form,optionId, setValue) {
  229.     var $sele_option = $form.find("[name=productoption" + optionId + "]");
  230.     if($sele_option && $sele_option.length){
  231.         var kind = $sele_option.attr("type");
  232.         if(kind == 'radio'){
  233.             $sele_option.val([setValue]);
  234.         }else{
  235.             $sele_option.val(setValue);
  236.         }
  237.     }else{
  238.         var $sele_option = $form.find('[name="productoption' + optionId + '[]"]');
  239.         if($sele_option && $sele_option.length){
  240.             $sele_option.each(function(){
  241.                 if($(this).val() == setValue){
  242.                     $(this).prop('checked',true);
  243.                 }
  244.             });
  245.         }
  246.     }
  248.     $('#option_description_' + product_id + '_' + optionId).plainModal('close');
  249. }
  252. var optionPrice = {{ optionPrices|json_encode|raw }};
  253. var optionPoint = {{ optionPoints|json_encode|raw }};
  254. var optionMultiple = {{ optionMultiples|json_encode|raw }};
  255. var taxRules = {{ taxRules|json_encode|raw }};
  256. var default_class_id = {{ default_class_id|json_encode|raw }};
  259. function onOptionChange($form){
  261.     if(!$form.length){
  262.         return;
  263.     }
  264.     var optionPriceTotal = 0;
  265.     var optionPointTotal = 0;
  266.     var tax_rate = null;
  267.     var tax_rule = null;
  268.     var product_id = $form.find('input[name="product_id"]').val();
  269.     var $sele1 = $form.find('select[name=classcategory_id1]');
  270.     var $sele2 = $form.find('select[name=classcategory_id2]');
  272.     var classcat_id1 = $sele1.val() ? $sele1.val() : '__unselected';
  273.     var classcat_id2 = $sele2.val() ? $sele2.val() : '';
  274.     if (eccube.hasOwnProperty('productsClassCategories')) {
  275.         // 商品一覧時
  276.         classcat2 = eccube.productsClassCategories[product_id][classcat_id1]['#' + classcat_id2];
  277.     } else {
  278.         // 詳細表示時
  279.         classcat2 = eccube.classCategories[classcat_id1]['#' + classcat_id2];
  280.     }
  281.     $form.find("[id^=productoption]").each(function(){
  282.         var id = $(this).prop("id");
  283.         var name = $(this).attr("name");
  284.         var option_id = null;
  285.         if(name === undefined){
  286.             name = $(this).find("input").prop("id");
  287.         }
  288.         if(name === undefined)return;
  289.         option_id = name.replace(/productoption/ig,'');
  290.         option_id = option_id.replace(/_\d+/ig,'');
  291.         option_id = option_id.replace(/\[\]/ig,'');
  292.         if(id.match(/^productoption\d+$/)){
  293.             var kind = $(this).prop('tagName');
  294.             var type = $(this).attr('type');
  295.             var value = null;
  296.             var multi = 1;
  297.             switch(kind){
  298.                 case 'SELECT':
  299.                     value = $(this).val();
  300.                     break;
  301.                 case 'TEXTAREA':
  302.                 case 'INPUT':
  303.                     var text = $(this).val();
  304.                     if(text.length > 0){
  305.                         value = 0;
  306.                     }
  307.                     if(type == 'number'){
  308.                         if(optionMultiple[product_id][option_id]){
  309.                             multi = $(this).val();
  310.                             if(multi.length == 0)multi = 0;
  311.                         }
  312.                     }
  313.                     break;
  314.                 default:
  315.                     if($(this).find('input[type="checkbox"]').length > 0){
  316.                         value = [];
  317.                         $(this).find('input[type="checkbox"]:checked').each(function(){
  318.                             value.push($(this).val());
  319.                         });
  320.                     }else{
  321.                         value = $form.find("input[name='productoption" + option_id + "']:checked").val();
  322.                     }
  323.                     break;
  324.             }
  325.             if(value != null){
  326.                 if(Array.isArray(value)){
  327.                     for(var key in value){
  328.                         optionPriceTotal += parseFloat(optionPrice[product_id][option_id][value[key]]);
  329.                         optionPointTotal += parseFloat(optionPoint[product_id][option_id][value[key]]);
  330.                     }
  331.                 }else{
  332.                     optionPriceTotal += parseFloat(optionPrice[product_id][option_id][value]*multi);
  333.                     optionPointTotal += parseFloat(optionPoint[product_id][option_id][value]*multi);
  334.                 }
  335.             }
  336.         }
  337.     });
  339.     if(classcat2){
  340.         var product_class_id = classcat2.product_class_id;
  341.     }else{
  342.         var product_class_id = default_class_id[product_id];
  343.     }
  345.     var tax_rate = taxRules[product_class_id]['tax_rate'];
  346.     var tax_rule = taxRules[product_class_id]['tax_rule'];
  348.     var $option_price = $form.parent().find('#option_price_default').first();
  349.     $option_price.text(number_format(optionPriceTotal));
  350.     var $option_point = $form.parent().find('#option_price_inctax_default').first();
  351.     $option_point.text(number_format(optionPriceTotal + sfTax(optionPriceTotal, tax_rate, tax_rule)));
  353.     //オプション金額を加算した表示金額を表示
  354.     var result_price =  default_price() + (optionPriceTotal + sfTax(optionPriceTotal, tax_rate, tax_rule));
  355.     $('.ec-price__price').text('¥' + result_price.toLocaleString());
  356. }
  358. //商品のデフォルト金額を取得
  359. function default_price() {
  360.     var jsonData = JSON.parse(document.querySelector('script[type="application/ld+json"]').innerHTML);
  361.     var productPrice = jsonData.offers.price;
  362.     return productPrice;
  363. }
  365. function number_format(num) {
  366.     return num.toString().replace(/([0-9]+?)(?=(?:[0-9]{3})+$)/g , '$1,');
  367. }
  369. function sfTax(price, tax_rate, tax_rule) {
  370.     real_tax = tax_rate / 100;
  371.     ret = price * real_tax;
  372.     tax_rule = parseInt(tax_rule);
  373.     switch (tax_rule) {
  374.         // 四捨五入
  375.         case {{ constant('Eccube\\Entity\\Master\\RoundingType::ROUND') }}:
  376.             $ret = Math.round(ret);
  377.             break;
  378.         // 切り捨て
  379.         case {{ constant('Eccube\\Entity\\Master\\RoundingType::FLOOR') }}:
  380.             $ret = Math.floor(ret);
  381.             break;
  382.         // 切り上げ
  383.         case {{ constant('Eccube\\Entity\\Master\\RoundingType::CEIL') }}:
  384.             $ret = Math.ceil(ret);
  385.             break;
  386.         // デフォルト:切り上げ
  387.         default:
  388.             $ret = Math.round(ret);
  389.             break;
  390.     }
  391.     return $ret;
  392. }
  394. </script>
  395. {% endblock %}