Cart - latest alpha package

blocks/header/header.js

@@ -151,9 +151,9 @@ export default async function decorate(block) {
   });
 
   // Cart Item Counter
-  events.on('cart/data', ({ totalQuantity }) => {
-    navTools.querySelector('.nav-cart-button').textContent = totalQuantity || '';
-  });
+  events.on('cart/data', (data) => {
+    navTools.querySelector('.nav-cart-button').textContent = data?.totalQuantity || '0';
+  }, { eager: true });
 
   // Search
   const searchInput = document.createRange().createContextualFragment('<div class="nav-search-input hidden"><form action="/search" method="GET"><input type="search" name="q" placeholder="Search" /></form></div>');

blocks/product-details/product-details.js

@@ -47,7 +47,12 @@ export default async function decorate(block) {
           icon: 'Cart',
           variant: 'primary',
           onClick: async () => {
-            addProductsToCart([{ ...ctx.values }]);
+            try {
+              await addProductsToCart([{ ...ctx.values }]);
+              window.location.href = '/cart';
+            } catch (error) {
+              console.warn('Error adding product to cart', error);
+            }
           },
         });
 

package.json

@@ -36,9 +36,9 @@
   },
   "dependencies": {
     "@dropins/elsie": "latest",
-    "@dropins/storefront-cart": "~0.1.0-alpha2",
+    "@dropins/storefront-cart": "~0.1.0-alpha6",
     "@dropins/storefront-checkout": "~0.1.0-alpha12",
     "@dropins/storefront-order-confirmation": "~0.1.0-alpha8",
     "@dropins/storefront-pdp": "latest"
   }
-}
+}

styles/styles.css

@@ -90,43 +90,61 @@
   --spacing-xhuge: 144px;
   --spacing-xxhuge: 192px;
   --type-base-font-family: roboto, roboto-fallback;
-  --type-display-1-font: normal normal 300 6.0rem/7.2rem var(--type-base-font-family);
+  --type-display-1-font: normal normal 300 6rem/7.2rem
+    var(--type-base-font-family);
   --type-display-1-letter-spacing: 0.04em;
-  --type-display-2-font: normal normal 300 4.8rem/5.6rem var(--type-base-font-family);
+  --type-display-2-font: normal normal 300 4.8rem/5.6rem
+    var(--type-base-font-family);
   --type-display-2-letter-spacing: 0.04em;
-  --type-display-3-font: normal normal 300 3.4rem/4.0rem var(--type-base-font-family);
+  --type-display-3-font: normal normal 300 3.4rem/4rem
+    var(--type-base-font-family);
   --type-display-3-letter-spacing: 0.04em;
-  --type-headline-1-font: normal normal 400 2.4rem/3.2rem var(--type-base-font-family);
+  --type-headline-1-font: normal normal 400 2.4rem/3.2rem
+    var(--type-base-font-family);
   --type-headline-1-letter-spacing: 0.04em;
-  --type-headline-2-default-font: normal normal 300 2.0rem/2.4rem var(--type-base-font-family);
+  --type-headline-2-default-font: normal normal 300 2rem/2.4rem
+    var(--type-base-font-family);
   --type-headline-2-default-letter-spacing: 0.04em;
-  --type-headline-2-strong-font: normal normal 400 2.0rem/2.4rem var(--type-base-font-family);
+  --type-headline-2-strong-font: normal normal 400 2rem/2.4rem
+    var(--type-base-font-family);
   --type-headline-2-strong-letter-spacing: 0.04em;
-  --type-body-1-default-font: normal normal 300 1.6rem/2.4rem var(--type-base-font-family);
+  --type-body-1-default-font: normal normal 300 1.6rem/2.4rem
+    var(--type-base-font-family);
   --type-body-1-default-letter-spacing: 0.04em;
-  --type-body-1-strong-font: normal normal 400 1.6rem/2.4rem var(--type-base-font-family);
+  --type-body-1-strong-font: normal normal 400 1.6rem/2.4rem
+    var(--type-base-font-family);
   --type-body-1-strong-letter-spacing: 0.04em;
-  --type-body-1-emphasized-font: normal normal 700 1.6rem/2.4rem var(--type-base-font-family);
+  --type-body-1-emphasized-font: normal normal 700 1.6rem/2.4rem
+    var(--type-base-font-family);
   --type-body-1-emphasized-letter-spacing: 0.04em;
-  --type-body-2-default-font: normal normal 300 1.4rem/2.0rem var(--type-base-font-family);
+  --type-body-2-default-font: normal normal 300 1.4rem/2rem
+    var(--type-base-font-family);
   --type-body-2-default-letter-spacing: 0.04em;
-  --type-body-2-strong-font: normal normal 400 1.4rem/2.0rem var(--type-base-font-family);
+  --type-body-2-strong-font: normal normal 400 1.4rem/2rem
+    var(--type-base-font-family);
   --type-body-2-strong-letter-spacing: 0.04em;
-  --type-body-2-emphasized-font: normal normal 700 1.4rem/2.0rem var(--type-base-font-family);
+  --type-body-2-emphasized-font: normal normal 700 1.4rem/2rem
+    var(--type-base-font-family);
   --type-body-2-emphasized-letter-spacing: 0.04em;
-  --type-button-1-font: normal normal 400 2.0rem/2.6rem var(--type-base-font-family);
+  --type-button-1-font: normal normal 400 2rem/2.6rem
+    var(--type-base-font-family);
   --type-button-1-letter-spacing: 0.08em;
-  --type-button-2-font: normal normal 400 1.6rem/2.4rem var(--type-base-font-family);
+  --type-button-2-font: normal normal 400 1.6rem/2.4rem
+    var(--type-base-font-family);
   --type-button-2-letter-spacing: 0.08em;
-  --type-details-caption-1-font: normal normal 400 1.2rem/1.6rem var(--type-base-font-family);
+  --type-details-caption-1-font: normal normal 400 1.2rem/1.6rem
+    var(--type-base-font-family);
   --type-details-caption-1-letter-spacing: 0.08em;
-  --type-details-caption-2-font: normal normal 300 1.2rem/1.6rem var(--type-base-font-family);
+  --type-details-caption-2-font: normal normal 300 1.2rem/1.6rem
+    var(--type-base-font-family);
   --type-details-caption-2-letter-spacing: 0.08em;
-  --type-details-overline-font: normal normal 400 1.2rem/2.0rem var(--type-base-font-family);
+  --type-details-overline-font: normal normal 400 1.2rem/2rem
+    var(--type-base-font-family);
   --type-details-overline-letter-spacing: 0.16em;
 
   /* Additional tokens */
-  --type-fixed-font-family: 'Roboto Mono', menlo, consolas, 'Liberation Mono', monospace;
+  --type-fixed-font-family: 'Roboto Mono', menlo, consolas, 'Liberation Mono',
+    monospace;
   --background-color: var(--color-neutral-50);
   --nav-height: 6.4rem;
 }
@@ -216,7 +234,7 @@ samp {
 
 code,
 samp {
-  padding: .125em;
+  padding: 0.125em;
 }
 
 pre {
@@ -226,7 +244,7 @@ pre {
 main pre {
   background-color: var(--color-neutral-300);
   padding: 1em;
-  border-radius: .25em;
+  border-radius: 0.25em;
   overflow-x: auto;
   white-space: pre;
 }
@@ -255,13 +273,14 @@ u {
   text-underline-offset: 6px;
 }
 
-a > u, button > u {
+a > u,
+button > u {
   text-decoration: none;
 }
 
 /* buttons */
 a.button:any-link,
-button {
+button:not([class^='elsie-']) {
   font: var(--type-button-2-font);
   letter-spacing: var(--type-button-2-letter-spacing);
   display: inline-block;
@@ -279,27 +298,27 @@ button {
 
 a.button:hover,
 a.button:focus,
-button:hover,
-button:focus {
+button:not([class^='elsie-']):hover,
+button:not([class^='elsie-']):focus {
   cursor: pointer;
 }
 
 a.button.disabled,
-button:disabled,
-button:disabled:hover {
+button:not([class^='elsie-']):disabled,
+button:not([class^='elsie-']):disabled:hover {
   cursor: unset;
 }
 
 a.button.secondary,
-button.secondary {
+button:not([class^='elsie-']).secondary {
   background-color: unset;
   border: var(--shape-border-width-3) solid currentcolor;
-  color: var(--color-brand-500)
+  color: var(--color-brand-500);
 }
 
 a.button.secondary:hover,
-button.secondary:hover {
-  color: var(--color-brand-600)
+button:not([class^='elsie-']).secondary:hover {
+  color: var(--color-brand-600);
 }
 
 main input:hover {
@@ -314,12 +333,12 @@ main blockquote {
 }
 
 main blockquote p::before {
-  content: "“";
+  content: '“';
   line-height: 0;
 }
 
 main blockquote p::after {
-  content: "”";
+  content: '”';
   line-height: 0;
 }
 
@@ -352,7 +371,7 @@ main .section {
 }
 
 @media (width >=900px) {
-  .section>div {
+  .section > div {
     max-width: 1200px;
     margin: auto;
   }