Snippets

Keetrax Kee Subscriptions Theme Tweak (Bootstrap 3)

Updated by Mike Martel
View revision

File keesubscriptions.template.html Modified

  • Ignore whitespace
  • Hide word diff 
         var price = parseFloat(dataEl.getAttribute('data-productprice'));
 
         if($('#productextra0').val() != 0) {
-          var discount = parseInt(adSelect.options[adSelect.selectedIndex].getAttribute('data-price').replace('-', ''));
+          var discount = parseFloat(adSelect.options[adSelect.selectedIndex].getAttribute('data-price').replace('-', ''));
           var dPrice = price - discount;
           // Set the prices in the box
           var adPriceEl = document.querySelector(".ad-price");
Updated by Adrian
View revision

File keesubscriptions.template.html Modified

  • Ignore whitespace
  • Hide word diff 
       <div class="row">
         <div class="col-sm-4 col-xs-9">
           <h3><i class="fa fa-undo fa-flip-vertical" style="padding-right:5px;"></i><strong> Auto Delivery</strong></h3>
-          <span class="hidden-lg hidden-md hidden-sm ad-save label label-success">Save $<span class="ad-discount"></span> every time</span>
+          <span class="hidden-lg hidden-md hidden-sm ad-save label label-success">Save <span class="ad-save-pre">up to </span>$<span class="ad-discount"></span> every time</span>
         </div>
         <div class="col-xs-5 hidden-xs">
-          <span class="ad-save label label-success">Save $<span class="ad-discount"></span> every time</span>
+          <span class="ad-save label label-success">Save <span class="ad-save-pre">up to </span>$<span class="ad-discount"></span> every time</span>
         </div>
         <div class="col-xs-3 text-right as-low-wrapper" style="display:none;">
           <span class="as-low">As low as:<br /></span>
           var adPriceEl = document.querySelector(".ad-price");
           adPriceEl.innerHTML = '$'+dPrice.toFixed(2);
           $('.as-low-wrapper').show(500);
+          $('.ad-save-pre').hide();
         } else {
           $('.as-low-wrapper').hide();
+          $('.ad-save-pre').show();
           adDiscount.forEach((el) => {
               el.innerHTML = maxDiscount;
           })
Updated by Adrian
View revision

File keesubscriptions.template.html Modified

  • Ignore whitespace
  • Hide word diff 
           $('.as-low-wrapper').show(500);
         } else {
           $('.as-low-wrapper').hide();
+          adDiscount.forEach((el) => {
+              el.innerHTML = maxDiscount;
+          })
         }
       });
     });
Updated by Adrian
View revision

File keesubscriptions.template.html Modified

  • Ignore whitespace
  • Hide word diff 
         <div class="col-xs-5 hidden-xs">
           <span class="ad-save label label-success">Save $<span class="ad-discount"></span> every time</span>
         </div>
-        <div class="col-xs-3 text-right">
-          <span class="as-low" style="display:none;">As low as:<br /></span>
-          <span class="ad-price h1" id="sub-box-price" style="display:none;"></span>
+        <div class="col-xs-3 text-right as-low-wrapper" style="display:none;">
+          <span class="as-low">As low as:<br /></span>
+          <span class="ad-price h1" id="sub-box-price"></span>
         </div>
       </div>
       <p class="ad-select-sect">
     // Set the prices in the box
     var adPriceEl = document.querySelector(".ad-price");
     if ( adPriceEl ) {
-      adPriceEl.innerHTML = '$'+adPrice.toFixed(2);
+      adPriceEl.innerHTML = '$'+adPrice;
     }
 
     // Set the discounts in the select dropdown
           // Set the prices in the box
           var adPriceEl = document.querySelector(".ad-price");
           adPriceEl.innerHTML = '$'+dPrice.toFixed(2);
-          $('#sub-box-price').show(500);
-          $('.as-low').show(500);
+          $('.as-low-wrapper').show(500);
         } else {
-          $('#sub-box-price').hide();
-          $('.as-low').hide();
+          $('.as-low-wrapper').hide();
         }
       });
     });
Updated by Adrian
View revision

File keesubscriptions.template.html Modified

  • Ignore whitespace
  • Hide word diff 
           <span class="ad-save label label-success">Save $<span class="ad-discount"></span> every time</span>
         </div>
         <div class="col-xs-3 text-right">
-          <span class="as-low">As low as:<br /></span>
-          <span class="ad-price h1"></span>
+          <span class="as-low" style="display:none;">As low as:<br /></span>
+          <span class="ad-price h1" id="sub-box-price" style="display:none;"></span>
         </div>
       </div>
       <p class="ad-select-sect">
     // Set the prices in the box
     var adPriceEl = document.querySelector(".ad-price");
     if ( adPriceEl ) {
-      adPriceEl.innerHTML = '$'+adPrice;
+      adPriceEl.innerHTML = '$'+adPrice.toFixed(2);
     }
 
     // Set the discounts in the select dropdown
       adDiscount[i].innerHTML = maxDiscount;
     }
 
+    // Updates the price in the subscription box
+    document.addEventListener("DOMContentLoaded", function(event) {
+      $('#productextra0').on('change', function(){
+        var dataEl = document.getElementById('keesubscriptions-data');
+        var adSelect = document.querySelector('.ad-select');
+        var price = parseFloat(dataEl.getAttribute('data-productprice'));
+
+        if($('#productextra0').val() != 0) {
+          var discount = parseInt(adSelect.options[adSelect.selectedIndex].getAttribute('data-price').replace('-', ''));
+          var dPrice = price - discount;
+          // Set the prices in the box
+          var adPriceEl = document.querySelector(".ad-price");
+          adPriceEl.innerHTML = '$'+dPrice.toFixed(2);
+          $('#sub-box-price').show(500);
+          $('.as-low').show(500);
+        } else {
+          $('#sub-box-price').hide();
+          $('.as-low').hide();
+        }
+      });
+    });
+
     // Init listeners
 
     // Update the discount with the currently selected option
  2. 1
  3. 2
  4. 3
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.