Merge pull request #12 from kevanhannah/store-updates

Store updates
kevanhannah · May 9, 2023 · fe2a662 · fe2a662
2 parents f13187b + b9216de
commit fe2a662
Show file tree

Hide file tree

Showing 26 changed files with 450 additions and 145 deletions.
diff --git a/sveltekit/package.json b/sveltekit/package.json
@@ -1,6 +1,6 @@
 {
  "name": "jaketobin.sveltekit",
- "version": "1.1.0",
+ "version": "1.2.0",
  "scripts": {
  "dev": "vite dev",
  "build": "vite build",

diff --git a/sveltekit/src/components/Cart/CartItem.svelte b/sveltekit/src/components/Cart/CartItem.svelte
@@ -4,7 +4,6 @@
  import QuantityWidget from '$components/Cart/QuantityWidget.svelte';
 
  export let item;
- $: console.log(item);
  $: ({ estimatedCost, id, merchandise, quantity } = item);
 </script>
 
@@ -19,14 +18,20 @@
  {#if merchandise.title !== 'Default Title'}
  <span class="variantTitle">{merchandise.title}</span>
  {/if}
- <span class="itemPrice">
- {`${estimatedCost.totalAmount.currencyCode} ${new Intl.NumberFormat(
- 'en-CA',
- {
+ <div class="price">
+ {#if merchandise.compareAtPriceV2}
+ <span class="itemPrice comparePrice">
+ {new Intl.NumberFormat('en-CA', {
+ style: 'currency',
+ currency: merchandise.compareAtPriceV2.currencyCode,
+ }).format(merchandise.compareAtPriceV2.amount)}</span>
+ {/if}
+ <span class="itemPrice" class:sale={merchandise.compareAtPriceV2}>
+ {new Intl.NumberFormat('en-CA', {
  style: 'currency',
  currency: estimatedCost.totalAmount.currencyCode,
- }
-  ).format(estimatedCost.totalAmount.amount)}`}</span>
+ }).format(estimatedCost.totalAmount.amount)}</span>
+ </div>
  </div>
  <div class="quantityRow">
  <QuantityWidget lineId={id} {quantity} variantId={merchandise.id} />
@@ -69,14 +74,27 @@
  }
 
  .itemImage {
- opacity: 1;
- transition-property: opacity;
- transition-duration: 500ms;
- transition-timing-function: ease;
+ position: relative;
+
+ &:before {
+ content: '';
+ display: block;
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: rgba(255, 255, 255, 0);
+ transition-property: background-color;
+ transition-duration: 250ms;
+ transition-timing-function: ease-in-out;
+ }
 
  @media (hover: hover) {
  &:hover {
- opacity: 0.8;
+ &:before {
+ background-color: rgba(255, 255, 255, 0.15);
+ }
  }
  }
  }
@@ -97,9 +115,25 @@
  text-decoration: none;
  }
 
+ .comparePrice {
+ color: var(--mediumGray);
+ text-decoration: line-through;
+ }
+
  .itemPrice,
  .variantTitle {
  font-size: 0.75em;
+ }
+
+ .itemPrice {
+ font-weight: 600;
+
+ &.sale {
+ color: var(--darkRed);
+ }
+ }
+
+ .variantTitle {
  font-weight: 400;
  }
 

diff --git a/sveltekit/src/components/Commission/CommissionForm.svelte b/sveltekit/src/components/Commission/CommissionForm.svelte
@@ -231,12 +231,12 @@
  }
 
  .alert {
- border: 1px solid #f56b52;
- background: #fde2dd;
+ border: 1px solid var(--mediumRed);
+ background: var(--lightRed);
  }
 
  .success {
- border: 1px solid #50dca9;
- background: #e0f8ee;
+ border: 1px solid var(--mediumGreen);
+ background: var(--lightGreen);
  }
 </style>
diff --git a/sveltekit/src/components/SEO.svelte b/sveltekit/src/components/SEO.svelte
@@ -1,6 +1,5 @@
 <script>
  import { page } from '$app/stores';
- import { PUBLIC_SVELTEKIT_SITE_URL } from '$env/static/public';
  import getImageProps from '$lib/utils/getImageProps';
 
  export let defaultMetadata;
@@ -20,7 +19,7 @@
 
 <svelte:head>
  <title>{title}</title>
- <base href={PUBLIC_SVELTEKIT_SITE_URL} />
+ <base href={$page.url.origin} />
  <link rel="canonical" href={`${origin}${pathname}`} />
  <meta name="description" content={description} />
  <meta name="image" content={image.src} />

diff --git a/sveltekit/src/components/Shop/CollectionGridLayout.svelte b/sveltekit/src/components/Shop/CollectionGridLayout.svelte
@@ -2,6 +2,10 @@
  import getShopifyImageProps from '$lib/utils/getShopifyImageProps';
  import ProductGridLayout from '$components/Shop/ProductGridLayout.svelte';
  import ProductCard from '$components/shared/ProductCard.svelte';
+ import {
+ determineOnSale,
+ formatDisplayPrice,
+ } from '$lib/utils/productDisplayUtils';
 
  export let collection = {};
  export let index;
@@ -13,8 +17,10 @@
  <ProductGridLayout>
  {#each products.edges as product}
  <ProductCard
- availableForSale={product.node.availableForSale}
  handle={product.node.handle}
+ onSale={determineOnSale(product.node.compareAtPriceRange)}
+ price={formatDisplayPrice(product.node.priceRange)}
+ soldOut={!product.node.availableForSale}
  src={getShopifyImageProps(product.node.images.edges[0].node)['src']}
  srcset={getShopifyImageProps(product.node.images.edges[0].node)[
  'srcset'
@@ -26,6 +32,10 @@
 </div>
 
 <style lang="postcss">
+ .collectionGridLayout {
+ width: 100%;
+ }
+
  .collectionTitle {
  font-family: var(--poppins);
  padding-bottom: 0.5em;

diff --git a/sveltekit/src/components/Shop/OutOfStockBadge.svelte b/sveltekit/src/components/Shop/OutOfStockBadge.svelte
diff --git a/sveltekit/src/components/Shop/ProductPage/ProductPageImageLayout.svelte b/sveltekit/src/components/Shop/ProductPage/ProductPageImageLayout.svelte
@@ -1,8 +1,11 @@
 <script>
  import SanityImage from '$components/shared/SanityImage.svelte';
+ import Badge from '$components/shared/Badge.svelte';
 
  export let fallbackUrl = '';
  export let images = [];
+ export let onSale = false;
+ export let soldOut = false;
  export let title = '';
 
  $: featuredImage = images?.[0] ?? null;
@@ -18,6 +21,7 @@
  {#each images as image}
  <div
  class="imageWrapper"
+ class:selected={image.src === featuredImage.src}
  on:click={changeImage(image)}
  on:keypress={changeImage(image)}
  role="button"
@@ -28,10 +32,22 @@
  </div>
  {/each}
  </div>
- <SanityImage
- image={featuredImage}
- loading="eager"
- style="aspect-ratio: 1; object-fit: contain; object-position: top;" />
+ <div class="mainImageWrapper">
+ {#if onSale || soldOut}
+ <div class="badges">
+ {#if onSale}
+ <Badge>On sale</Badge>
+ {/if}
+ {#if soldOut}
+ <Badge reverse>Sold out</Badge>
+ {/if}
+ </div>
+ {/if}
+ <SanityImage
+ image={featuredImage}
+ loading="eager"
+ style="aspect-ratio: 1; object-fit: contain; object-position: top;" />
+ </div>
  {:else}
  <div />
  <img src={fallbackUrl} alt={title} class="fallbackImage" />
@@ -46,19 +62,58 @@
  gap: 1.25em;
  }
 
+ .mainImageWrapper {
+ position: relative;
+
+ & .badges {
+ position: absolute;
+ top: 0.75em;
+ left: 0.75em;
+ }
+ }
+
  .gallery {
- display: flex;
- flex-direction: row;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
  gap: 1.25em;
  }
 
  .imageWrapper {
- width: calc((100% / 4) - 0.75em);
+ position: relative;
+ border-width: 1px;
+ border-style: solid;
+ border-color: transparent;
+ border-radius: 2px;
+ transition-property: border-color;
+ transition-duration: 250ms;
+ transition-timing-function: ease-in-out;
+ user-select: none;
+
+ &.selected {
+ border-color: var(--black);
+ }
+
+ &:before {
+ content: '';
+ display: block;
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: rgba(255, 255, 255, 0);
+ transition-property: background-color;
+ transition-duration: 250ms;
+ transition-timing-function: ease-in-out;
+ }
 
  @media (hover: hover) {
  &:hover {
- opacity: 0.8;
  cursor: pointer;
+
+ &:before {
+ background-color: rgba(255, 255, 255, 0.15);
+ }
  }
  }
  }

diff --git a/sveltekit/src/components/Shop/ProductPage/ProductPageLayout.svelte b/sveltekit/src/components/Shop/ProductPage/ProductPageLayout.svelte
@@ -18,13 +18,28 @@
 </script>
 
 <main>
- <ProductPageImageLayout fallbackUrl={previewImageUrl} {images} {title} />
+ <ProductPageImageLayout
+ fallbackUrl={previewImageUrl}
+ {images}
+ onSale={activeVariant.store.compareAtPrice !== 0}
+ soldOut={!activeVariant.store.inventory.isAvailable}
+ {title} />
  <div class="productPageInformation">
  <div class="variantInfo">
  <h1 class="productHeader">{title}</h1>
  <div class="priceSection">
  <span class="priceCurrency">CA</span>
- <span class="priceText">
+ {#if activeVariant.store.compareAtPrice !== 0}
+ <span class="priceText comparePrice">
+ {new Intl.NumberFormat('en-CA', {
+ style: 'currency',
+ currency: 'CAD',
+ }).format(activeVariant.store.compareAtPrice)}
+ </span>
+ {/if}
+ <span
+ class="priceText"
+ class:sale={activeVariant.store.compareAtPrice !== 0}>
  {new Intl.NumberFormat('en-CA', {
  style: 'currency',
  currency: 'CAD',
@@ -100,6 +115,15 @@
  .priceText {
  font-size: 1.25em;
  font-weight: 400;
+
+ &.sale {
+ color: var(--darkRed);
+ }
+ }
+
+ .comparePrice {
+ color: var(--mediumGray);
+ text-decoration: line-through;
  }
 
  .variantsList {

diff --git a/sveltekit/src/components/Shop/ProductPage/ProductRecommendations.svelte b/sveltekit/src/components/Shop/ProductPage/ProductRecommendations.svelte
@@ -11,8 +11,8 @@
  <div class="recommendationLayout">
  {#each recommendations.slice(0, 4) as recommendation}
  <ProductCard
- availableForSale={recommendation.availableForSale}
  handle={recommendation.handle}
+ soldOut={!recommendation.availableForSale}
  src={getShopifyImageProps(recommendation.featuredImage)['src']}
  srcset={getShopifyImageProps(recommendation.featuredImage)['srcset']}
  title={recommendation.title} />

diff --git a/sveltekit/src/components/shared/Badge.svelte b/sveltekit/src/components/shared/Badge.svelte
@@ -0,0 +1,34 @@
+<script>
+ export let reverse = false;
+</script>
+
+<div class:reverse>
+ <slot />
+</div>
+
+<style lang="postcss">
+ div {
+ max-width: fit-content;
+ display: inline-block;
+ font-size: 0.75em;
+ font-weight: 600;
+ text-transform: uppercase;
+ color: var(--black);
+ background-color: var(--paperWhite);
+ border-width: 1px;
+ border-color: var(--black);
+ border-radius: 4px;
+ padding-top: 0.25em;
+ padding-bottom: 0.25em;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+ cursor: default;
+ white-space: nowrap;
+ user-select: none;
+
+ &.reverse {
+ color: var(--paperWhite);
+ background-color: var(--black);
+ }
+ }
+</style>