Use cards for shop

diff --git a/docs/_data/links.json b/docs/_data/links.json
index 16180833a38cd7cc3b3a4bd27f3cd92be3732929..fa7cc2762ed3ebe793d17e1d600a97ae46623a00 100644 (file)
--- a/docs/_data/links.json
+++ b/docs/_data/links.json
@@ -64,6 +64,13 @@
       "icon": "fa-brands fa-patreon",
       "path": "/become-a-bulma-sponsor/"
     },
+    "shop": {
+      "name": "Shop",
+      "subtitle": "The Official Bulma Shop",
+      "color": "success",
+      "icon": "fa-solid fa-store",
+      "path": "/shop/"
+    },
     "brand": {
       "name": "Bulma Brand",
       "subtitle": "The official Bulma logos",
@@ -750,7 +757,7 @@
       "path": "/documentation/helpers/other-helpers/"
     }
   },
-  "navbar": ["docs", "expo", "love", "sponsor"],
+  "navbar": ["docs", "expo", "love", "sponsor", "shop"],
   "navbar_icons": ["github", "twitter"],
   "navbar_more": ["made-with-bulma", "backers", "brand", "extensions"],
   "category_ids": [

diff --git a/docs/_includes/global/nav-item.html b/docs/_includes/global/nav-item.html
index eceff97c8869537ca77d6012475c3b7fa6ac35a0..3c708a8737d356814b6b570e1dd063d04227b128 100644 (file)
--- a/docs/_includes/global/nav-item.html
+++ b/docs/_includes/global/nav-item.html
@@ -36,6 +36,9 @@
       {% else %}
         {{ link.name }}
       {% endif %}
+      {% if include.link_id == "shop" %}
+        <span class="tag is-success">New!</span>
+      {% endif %}
     </span>
   {% endunless %}
 </a>

diff --git a/docs/_sass/global/nav.scss b/docs/_sass/global/nav.scss
index d6932fbeb2098114bbee51187e33eb0988f6ba9c..2f3f946eae3738a8c2ec0baaae2185cc97022c32 100644 (file)
--- a/docs/_sass/global/nav.scss
+++ b/docs/_sass/global/nav.scss
@@ -54,7 +54,8 @@
   }
 
   &.is-system,
-  &.is-docs {
+  &.is-docs,
+  &.is-shop {
     --h: #{cv.getVar("success-h")};
     --s: #{cv.getVar("success-s")};
     --l: #{cv.getVar("success-l")};

diff --git a/docs/assets/css/website.css b/docs/assets/css/website.css
index 26e1515b7ba9ed6276a845ce790912a204d1dc91..116d03924dff86d8cc044c1c8dc61cafbc3fa834 100644 (file)
--- a/docs/assets/css/website.css
+++ b/docs/assets/css/website.css
@@ -34259,7 +34259,7 @@ has-background-moon.is-hoverable:active {
   --s: var(--bulma-info-s);
   --l: var(--bulma-info-l);
 }
-.bd-nav-item.is-system, .bd-nav-item.is-docs {
+.bd-nav-item.is-system, .bd-nav-item.is-docs, .bd-nav-item.is-shop {
   --h: var(--bulma-success-h);
   --s: var(--bulma-success-s);
   --l: var(--bulma-success-l);
@@ -38852,6 +38852,13 @@ has-background-moon.is-hoverable:active {
   --theme-color: hsl(var(--theme-h), var(--theme-s), var(--theme-l));
 }
 
+.bd-theme-shop {
+  --theme-h: var(--bulma-success-h);
+  --theme-s: var(--bulma-success-s);
+  --theme-l: var(--bulma-success-l);
+  --theme-color: hsl(var(--theme-h), var(--theme-s), var(--theme-l));
+}
+
 .bd-theme-features {
   --theme-h: var(--bulma-danger-h);
   --theme-s: var(--bulma-danger-s);

diff --git a/docs/assets/javascript/shop.js b/docs/assets/javascript/shop.js
index 91aa6a85c563d45c9bec828f5ae50f68aef14b4c..4ffce379123b4753d63518e188722f45dbe4451c 100644 (file)
--- a/docs/assets/javascript/shop.js
+++ b/docs/assets/javascript/shop.js
@@ -58,6 +58,7 @@ document.addEventListener("DOMContentLoaded", () => {
     };
   };
 
+  const THEME_COLOR = "success";
   const STORAGE_CART_ID = "bulma-shop-cart-id";
 
   const CURRENCIES = {
@@ -264,7 +265,7 @@ document.addEventListener("DOMContentLoaded", () => {
         currencyCode
       }
     }
-    lines(first: 20) {
+    lines(first: 24) {
       edges {
         node {
           id
@@ -326,6 +327,7 @@ document.addEventListener("DOMContentLoaded", () => {
   const $cart = document.getElementById("cart");
   const $cartClose = document.querySelectorAll(".shop-cart-close");
   const $openCart = document.getElementById("open-cart");
+  const $cartCount = document.getElementById("cart-count");
   const $emptyCart = document.getElementById("empty-cart");
   const $fullCart = document.getElementById("full-cart");
   const $cartItems = document.getElementById("cart-items");
@@ -450,7 +452,9 @@ document.addEventListener("DOMContentLoaded", () => {
   const buildOptions = (el, product) => {
     const { variants } = product;
 
-    const $options = El("buttons has-addons are-small variants");
+    const $options = El(
+      "shop-product-variants buttons has-addons are-small variants",
+    );
     $options.className += variants.length > 1 ? " multiple" : " single";
 
     if (variants.length > 1) {
@@ -475,7 +479,7 @@ document.addEventListener("DOMContentLoaded", () => {
   };
 
   const buildAddButton = (el, product) => {
-    const $buy = El("button is-primary is-medium", "button");
+    const $buy = El(`button is-${THEME_COLOR}`, "button");
     $buy.innerText = "Add to cart";
 
     $buy.addEventListener("click", async (event) => {
@@ -493,7 +497,7 @@ document.addEventListener("DOMContentLoaded", () => {
       $products.classList.add("has-loaded");
     }
 
-    if ($products.childElementCount > 4) {
+    if ($products.childElementCount > Number($products.dataset.count)) {
       return;
     }
 
@@ -504,14 +508,16 @@ document.addEventListener("DOMContentLoaded", () => {
         return;
       }
 
-      const el = El(`shop-product shop-product-${getId(product.id)}`);
-      el.dataset.id = id;
+      const $card = El(`card shop-product shop-product-${getId(product.id)}`);
+      $card.dataset.id = id;
+
+      const el = El("card-content");
 
       const $figure = El("shop-product-image image is-square", "figure");
       const $img = document.createElement("img");
       $img.src = featuredImage.url;
       $figure.appendChild($img);
-      el.appendChild($figure);
+      $card.appendChild($figure);
 
       $figure.addEventListener("click", async (event) => {
         event.preventDefault();
@@ -536,8 +542,8 @@ document.addEventListener("DOMContentLoaded", () => {
       });
 
       el.appendChild($buttons);
-
-      $products.appendChild(el);
+      $card.appendChild(el);
+      $products.appendChild($card);
     });
   };
 
@@ -549,11 +555,14 @@ document.addEventListener("DOMContentLoaded", () => {
     const { checkoutUrl, cost, lines } = state.cart;
 
     if (lines.length > 0) {
-      $openCart.classList.add("is-primary");
+      $openCart.classList.add(`is-${THEME_COLOR}`);
       $cartItems.replaceChildren();
 
       $emptyCart.style.display = "none";
       $fullCart.style.display = "block";
+      $cartCount.style.display = "inline-flex";
+
+      let totalCount = 0;
 
       lines.forEach((line) => {
         const variantId = line.merchandise.id;
@@ -585,7 +594,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
         if (variant.title !== "Default Title") {
           const $tag = El(
-            "shop-item-variant button is-primary is-small is-outlined",
+            `shop-item-variant button is-${THEME_COLOR} is-small is-outlined`,
             "span",
           );
           $tag.innerText = `${variant.title}`;
@@ -595,6 +604,7 @@ document.addEventListener("DOMContentLoaded", () => {
         const $quantity = El("shop-item-quantity button is-static", "span");
         $quantity.innerText = `${line.quantity}`;
         $right.appendChild($quantity);
+        totalCount += line.quantity;
 
         const $buttons = El("shop-item-actions");
 
@@ -671,14 +681,17 @@ document.addEventListener("DOMContentLoaded", () => {
       $total.appendChild($totalRight);
       $cartItems.appendChild($total);
 
-      const $checkout = El("button is-primary is-fullwidth", "a");
+      const $checkout = El(`button is-${THEME_COLOR} is-fullwidth`, "a");
       $checkout.innerText = "Checkout";
       $checkout.href = checkoutUrl;
       $cartItems.appendChild($checkout);
+
+      $cartCount.innerText = totalCount;
     } else {
-      $openCart.classList.remove("is-primary");
+      $openCart.classList.remove(`is-${THEME_COLOR}`);
       $emptyCart.style.display = "block";
       $fullCart.style.display = "none";
+      $cartCount.style.display = "none";
     }
   };
 
@@ -707,9 +720,9 @@ document.addEventListener("DOMContentLoaded", () => {
 
         $variants.forEach(($el) => {
           if ($el.dataset.id === product.selectedVariant) {
-            $el.classList.add("is-primary");
+            $el.classList.add(`is-${THEME_COLOR}`);
           } else {
-            $el.classList.remove("is-primary");
+            $el.classList.remove(`is-${THEME_COLOR}`);
           }
         });
       });
@@ -771,7 +784,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     const query = `
       query allProducts ${context} {
-        products(first: 10) {
+        products(first: 12) {
           edges {
             node {
               id
@@ -784,7 +797,7 @@ document.addEventListener("DOMContentLoaded", () => {
                 width
               }
               handle
-              images(first: 10) {
+              images(first: 6) {
                 edges {
                   node {
                     height
@@ -804,7 +817,7 @@ document.addEventListener("DOMContentLoaded", () => {
                 }
               }
               title
-              variants(first: 10) {
+              variants(first: 12) {
                 edges {
                   node {
                     availableForSale

diff --git a/docs/shop.html b/docs/shop.html
index fedce3d02d601a7d1a2c4e582250884cd5f79192..c44dfaef2f8fbcff4dace77ee1b54acd8223f3d6 100644 (file)
--- a/docs/shop.html
+++ b/docs/shop.html
@@ -1,7 +1,7 @@
 ---
-title: "The Bulma Shop"
+title: "The Official Bulma Shop"
 layout: default
-theme: primary
+theme: shop
 route: shop
 hide_footer: true
 breadcrumb:
@@ -14,36 +14,47 @@ breadcrumb:
     --shop-duration: 500ms;
   }
 
+  .shop-hero {
+    min-height: calc(100vh - 6.5rem);
+  }
+
+  .shop-hero .bd-hero {
+    position: relative;
+  }
+
+  .shop-hero .bd-hero-body {
+    position: relative;
+    margin: 0 auto;
+    max-width: 110rem;
+    width: 100%;
+  }
+
   .shop-open-cart {
     margin-top: 1.5rem;
+    min-width: 10em;
   }
 
-  @media screen and (min-width: 800px) {
+  .shop-open-cart .tag {
+    margin: 0 -0.625em 0 0.625em;
+    padding: 0 0.5em;
+    min-width: 2em;
+    background-color: transparent;
+    color: currentColor;
+    border: 1px solid currentColor;
+  }
+
+  @media screen and (min-width: 1000px) {
     .shop-open-cart {
       margin-top: 0;
-      position: absolute;
-      right: 3rem;
-      top: calc(50% - 1rem);
+      position: fixed;
+      bottom: 1.5rem;
+      right: 1.5rem;
+      z-index: 30;
     }
   }
 
-  .shop-product-heading {
-    align-items: center;
-    gap: 1em;
-    justify-content: space-between;
-    display: flex;
-    font-size: 1.25em;
-    margin-bottom: 0.25em;
-  }
-
-  .shop-product-title {
-    color: var(--bulma-text-strong);
-    font-weight: 700;
-  }
-
-  .shop-product-price {
-    color: var(--bulma-text-strong);
-    font-size: 0.875em;
+  .shop-cart-count {
+    background-color: var(--bulma-primary-50);
   }
 
   .shop-cart,
@@ -59,7 +70,7 @@ breadcrumb:
   .shop-cart {
     opacity: 0;
     position: fixed;
-    z-index: 10;
+    z-index: 40;
     pointer-events: none;
   }
 
@@ -77,7 +88,7 @@ breadcrumb:
     max-width: 22rem;
     padding: 2rem;
     position: absolute;
-    z-index: 20;
+    z-index: 50;
     transform: translateX(100%);
     transition-duration: var(--shop-duration);
     transition-property: transform;
@@ -167,6 +178,8 @@ breadcrumb:
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
     gap: 3rem;
+    max-width: 110rem;
+    margin: 0 auto;
   }
 
   .shop-products.has-loaded .shop-product.is-placeholder {
@@ -176,9 +189,39 @@ breadcrumb:
   .shop-product {
     display: flex;
     flex-direction: column;
+    margin-bottom: 0 !important;
+    overflow: hidden;
   }
 
-  .shop-product .variants {
+  .shop-product .card-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .shop-product-heading {
+    align-items: center;
+    gap: 1em;
+    justify-content: space-between;
+    display: flex;
+    font-size: 1.25em;
+    margin-top: 0.25em;
+    margin-bottom: 0.5em;
+  }
+
+  .shop-product-title {
+    color: var(--bulma-text-strong);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  .shop-product-price {
+    color: var(--bulma-text-strong);
+    font-size: 0.875em;
+  }
+
+  .shop-product-variants {
+    margin-bottom: 0 !important;
     margin-top: 1em;
   }
 
@@ -189,9 +232,7 @@ breadcrumb:
   }
 
   .shop-product-image {
-    border-radius: 0.5rem;
     cursor: pointer;
-    margin-bottom: 0.5em;
     overflow: hidden;
   }
 
@@ -240,6 +281,7 @@ breadcrumb:
 
   .shop-product-buttons {
     justify-content: space-between;
+    margin-top: 1em;
   }
 
   .shop-modal {
@@ -262,6 +304,7 @@ breadcrumb:
 
   .shop-modal-content .shop-product-tagline {
     color: var(--bulma-text-strong);
+    margin-bottom: 1em;
   }
 
   .shop-modal-content .shop-product-rest {
@@ -270,6 +313,7 @@ breadcrumb:
 
   .shop-modal-buttons {
     justify-content: space-between;
+    margin-top: 1em;
   }
 
   .shop-modal-close {
@@ -322,11 +366,11 @@ breadcrumb:
 </div>
 {% endcapture %}
 
-<div style="min-height: calc(100vh - 6.5rem);">
-  <section class="bd-hero" style="position: relative;">
+<div class="shop-hero">
+  <section class="bd-hero">
     <div class="bd-hero-body">
       <h1 class="bd-hero-title algolia-lvl0">
-        The Bulma Shop
+        The Official Bulma Shop
       </h1>
 
       <hr class="bd-hr">
@@ -337,9 +381,10 @@ breadcrumb:
 
       <button id="open-cart" class="shop-open-cart button">
         <span class="icon">
-          <i class="fa-solid fa-basket-shopping"></i>
+          <i class="fa-solid fa-bag-shopping"></i>
         </span>
         <span>Open Cart</span>
+        <span id="cart-count" class="shop-cart-count tag" style="display: none;">8</span>
       </button>
     </div>
   </section>
@@ -366,11 +411,10 @@ breadcrumb:
       </div>
     </div>
 
-    <div id="products" class="shop-products">
-      {{ shop_placeholder }}
-      {{ shop_placeholder }}
-      {{ shop_placeholder }}
-      {{ shop_placeholder }}
+    <div id="products" data-count="8" class="shop-products">
+      {% for i in (1..8) %}
+        {{ shop_placeholder }}
+      {% endfor %}
     </div>
   </div>
 </div>

diff --git a/docs/website.scss b/docs/website.scss
index be8f04188faec1241341214833d1b70b02f5ba11..e14fe31440a84bf6ca35e160fcebdcf079126798 100644 (file)
--- a/docs/website.scss
+++ b/docs/website.scss
@@ -231,6 +231,7 @@ $themes: (
   "customize": "info",
   "docs": "success",
   "expo": "warning",
+  "shop": "success",
   "features": "danger",
   "helpers": "link",
   "html": "html",