Merge pull request #56 from drzzle-app/productPriceSlashes

new logic to show before and after pricing on product droplets

src/droplets/text-blob/index.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+
+const template = require('./template.html');
+
+export default Vue.component('text-blob-droplet', {
+  template,
+  name: 'text-blob-droplet',
+});

src/droplets/text-blob/template.html

@@ -0,0 +1,3 @@
+<div>
+ <span class="drzBlobText-strike">Strike</span> Text.
+</div>

src/droplets/text-blob/themes/default/styles.less

@@ -0,0 +1,5 @@
+.drzBlobText-strike {
+  margin-right: 5px;
+  opacity: .6;
+  text-decoration: line-through;
+}

src/layout/side-bar/links.json

@@ -313,6 +313,11 @@
           "route": "/text",
           "children": []
         },
+        {
+          "text": "Text Blob",
+          "route": "/text-blob",
+          "children": []
+        },
         {
           "text": "Text Swapper",
           "route": "/text-swapper",

src/less/themes/default/droplets.less

@@ -61,3 +61,4 @@
 @import '../../../droplets/group-list/themes/default/styles';
 @import '../../../droplets/progress-bar/themes/default/styles';
 @import '../../../droplets/text-swapper/themes/default/styles';
+@import '../../../droplets/text-blob/themes/default/styles';

src/pages/all-droplets/all-droplets.js

@@ -64,4 +64,5 @@ export default {
   'group-list': require('@/droplets/group-list'),
   'progress-bar': require('@/droplets/progress-bar'),
   'text-swapper': require('@/droplets/text-swapper'),
+  'text-blob': require('@/droplets/text-blob'),
 };

src/pages/droplets/text-blob/index.js

@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import TextBlob from '@/droplets/text-blob';
+import TextBlobTpl from '@/droplets/text-blob/template.html';
+import { cleanDropletTpl } from '@/mixins/cleanDropletTpl';
+
+const template = require('./template.html');
+
+export default Vue.component('text-blob-page', {
+  template,
+  name: 'text-blob-page',
+  mixins: [cleanDropletTpl],
+  components: {
+    TextBlob,
+  },
+  data() {
+    return {
+      dropletHtml: this.cleanDropletTpl(TextBlobTpl),
+    };
+  },
+});

src/pages/droplets/text-blob/template.html

@@ -0,0 +1,17 @@
+<div>
+  <header class="picazzo-page-header">Text Blob</header>
+
+  <header class="picazzo-sectionHeader">Demo</header>
+
+  <div class="row">
+    <text-blob-droplet></text-blob-droplet>
+  </div>
+
+  <header class="picazzo-sectionHeader">HTML</header>
+
+  <div class="row">
+    <pre v-highlightjs><code class="html">{{ dropletHtml }}</code></pre>
+  </div>
+
+  <div class="picazzo-docFooter"></div>
+</div>

src/router/routes.json

@@ -401,6 +401,11 @@
                     "path": "/text-swapper",
                     "name": "text-swapper",
                     "component": "require('@/pages/droplets/text-swapper/').default"
+                },
+                {
+                    "path": "/text-blob",
+                    "name": "text-blob",
+                    "component": "require('@/pages/droplets/text-blob/').default"
                 }
             ]
         },

src/tools/slide-checkout/plugin.js

@@ -187,7 +187,9 @@
                     $select = $billState;
                   }
                   $select.empty().append($('<option selected value="">State</option>'));
-                  $.each(methods.countries[val].regions, (i, country) => {
+                  const { regions = [] } = methods.countries[val];
+                  const sortedRegions = regions.sort((a, b) => a.name.localeCompare(b.name));
+                  $.each(sortedRegions, (i, country) => {
                     $select.append($(
                       `<option value"${country.iso}" data-state-iso="${country.iso}" data-state-name=${country.name}>${country.name}</option>`,
                     ));
@@ -684,6 +686,7 @@
               <div class="drzSlideCheckout-item-detailsGrid">
                 <div>
                   <span class="drzSlideCheckout-cart-itemPrice">
+                    ${data.product.originalPrice ? `<span class="drzSlideCheckout-cart-itemPriceOriginal">${options.currency.symbol}${data.product.originalPrice}</span>` : ''}
                     ${options.currency.symbol}${data.product.price} ${options.currency.type}
                   </span>
                   <div class="drzSlideCheckout-cart-mainBtns">
@@ -828,6 +831,10 @@
                 });
                 cartItems.splice(0, cartItems.length);
                 methods.saveCart(cartItems);
+                methods.totalItems = 0;
+                $cartCount.each(function setIconCounts() {
+                  $(this).hide().html('');
+                });
                 $backBtn.html('Back to Store');
                 if (window.matchMedia(drzzle.viewports.mobile).matches) {
                   $('html, body').animate({ scrollTop: 0 }, 'fast');

src/tools/slide-checkout/themes/default/styles.less

@@ -314,6 +314,13 @@
   margin-bottom: @itemMargin;
 }
 
+.drzSlideCheckout-cart-itemPriceOriginal {
+  margin-right: 3px;
+  opacity: .6;
+  text-decoration: line-through;
+}
+
+
 .drzSlideCheckout-cart-itemLast {
   .drzSlideCheckout-cart-item;
   background-color: @white;