app/Plugin/HsdDiscountRate42/Resource/template/default/Product/discount_rate42_show.twig line 1

Open in your IDE?
  1. <script>
  2.     //____________________________
  3.     {
  4.         /*#####################################################
  5.            input[type="hidden"]の要素の value値に変更があった場合
  6.            change イベントを発火させる
  7.         #####################################################*/
  8.         const
  9.             option = {
  10.                 attributes      : true,
  11.                 attributeFilter : ['value']
  12.             },
  14.             handler =
  15.                 function ([mutation]) {
  16.                     let
  17.                         target = mutation.target,
  18.                         doc    = target.ownerDocument,
  19.                         event  = doc.createEvent ('HTMLEvents');
  21.                     event.initEvent ('change', true, true);
  22.                     target.dispatchEvent (event);
  23.                 };
  24.         //_____________________________
  25.         class AddChangeEvent {
  26.             constructor (element = null) {
  27.                 if (null === element)
  28.                     throw new Error ('要素がありません');
  30.                 let observer = new MutationObserver (handler);
  31.                 observer.observe (element, option);
  33.                 this.observer = observer;
  34.             }
  35.         }
  36.         //_____________________________
  37.         this.AddChangeEvent = AddChangeEvent;
  38.     }
  40.     let
  41.         fm = document.querySelector('#form1'),
  42.         hide = fm.elements['ProductClass'];
  44.     //changeイベントの監視
  45.     fm.addEventListener ('change', function (event) {
  46.         let e = event.target;
  47.         if( e.name == 'ProductClass' && e.value != '' ){
  48.             var pcc_ritu = { {{ product_class_id_ritu }} };
  49.             var ritu = pcc_ritu[e.value];
  50.             if( ritu > 0 && ritu <= 100 ){
  51.                 $('.hsd-badge').html('{{ bef_txt }}' + ritu + '%{{ aft_txt }}');
  52.                 $('.hsd-badge').show();
  53.             }else {
  54.                 $('.hsd-badge').hide(); // 割引率が範囲外の場合は非表示
  55.             }
  56.         }else if( e.name == 'ProductClass' && e.value == '' ) {
  57.             $('.hsd-badge').hide(); // 規格が決まっていない場合は非表示
  58.         }
  59.         //console.log([e.name, e.value]);
  60.     }, false);
  62.     new AddChangeEvent (hide);
  63. </script>
  65. <script>
  66.     $(function () {
  67.         {% if is_show == 1 %}
  68.             {% if show_addr == 0 %}
  69.                 $('#hsd_discount_rate_detail').insertAfter($('.ec-productRole__priceRegularTax'));
  70.             {% elseif show_addr == 1 %}
  71.                 $('#hsd_discount_rate_detail').insertAfter($('.ec-productRole__priceRegularTax'));
  72.                 $('<br>').prependTo('#hsd_discount_rate_detail');
  73.             {% elseif show_addr == 2 %}
  74.                 $('#hsd_discount_rate_detail').insertBefore($('.ec-price__price'));
  75.                 $('#hsd_discount_rate_detail').after('<br>');
  76.             {% elseif show_addr == 3 %}
  77.                 $('#hsd_discount_rate_detail').insertAfter($('.ec-price__tax'));
  78.             {% elseif show_addr == 4 %}
  79.                 $('#hsd_discount_rate_detail').insertAfter($('.ec-price__tax'));
  80.                 $('<br>').prependTo('#hsd_discount_rate_detail');
  81.                 $('.ec-price__price').css('padding-left', '0px'); // 販売価格の左側を揃えるため
  82.             {% elseif show_addr == 5 %}
  83.                 $('#hsd_discount_rate_detail').insertBefore($('.ec-price__price'));
  84.             {% endif %}
  85.         {% endif %}
  86.     });
  87. </script>
  89. <span id="hsd_discount_rate_detail" class="hsd-sp-margin">
  90.     <style>
  91.         #hsd_discount_rate_detail{
  92.             position: relative;
  93.         }
  94.         .hsd-badge {
  95.             display: inline-block;
  96.             min-width: 10px;
  97.             padding: 3px 7px;
  98.             font-size: {{ font_rate }}%;
  99.             font-weight: 700;
  100.             line-height: 1;
  101.             color: {{ font_color }};
  102.             text-align: center;
  103.             white-space: nowrap;
  104.             vertical-align: middle;
  105.             background-color: {{ back_color }};
  106.             border-radius: 10px;
  107.             position: relative;
  108.             vertical-align: text-bottom;
  109.         }
  110.         {% if show_addr == 2 %}
  111.             @media (max-width: 767px) {
  112.                 .hsd-sp-margin{
  113.                     position: relative;
  114.                     top: 15px;
  115.                 }
  116.             }
  117.         {% endif %}
  118.     </style>
  119.     {% if has_product_class == 1 %}
  120.         <span class="hsd-badge" style="display: none;"></span>
  121.     {% else %}
  122.         {% if discount_rate_1 > 0 and discount_rate_2 > 0 and discount_rate_1 != discount_rate_2 %}
  123.             <span class="hsd-badge">{{ bef_txt }}{{ discount_rate_1 }}%{{ aft_txt }}</span> 〜 <span class="hsd-badge">{{ discount_rate_2 }}%{{ aft_txt }}</span>
  124.         {% elseif discount_rate_1 > 0 and discount_rate_1 <= 100 %}
  125.             <span class="hsd-badge">{{ bef_txt }}{{ discount_rate_1 }}%{{ aft_txt }}</span>
  126.         {% endif %}
  127.     {% endif %}
  128. </span>