-
{merchandise.product.title}
+
{merchandise.product.title}
{#if merchandise.title !== 'Default Title'}
{merchandise.title}
{/if}
@@ -66,6 +68,19 @@
}
}
+ .itemImage {
+ opacity: 1;
+ transition-property: opacity;
+ transition-duration: 500ms;
+ transition-timing-function: ease;
+
+ @media (hover: hover) {
+ &:hover {
+ opacity: 0.8;
+ }
+ }
+ }
+
.itemInfo {
display: flex;
flex-direction: column;
@@ -78,6 +93,10 @@
gap: 0.5em;
}
+ .itemTitle {
+ text-decoration: none;
+ }
+
.itemPrice,
.variantTitle {
font-size: 0.75em;
diff --git a/sveltekit/src/components/shared/ProductCard.svelte b/sveltekit/src/components/shared/ProductCard.svelte
index fcbdd29..6cc3fcc 100644
--- a/sveltekit/src/components/shared/ProductCard.svelte
+++ b/sveltekit/src/components/shared/ProductCard.svelte
@@ -66,7 +66,10 @@
display: block;
aspect-ratio: 1;
object-fit: cover;
- transition: 500ms opacity ease-out;
+ opacity: 1;
+ transition-property: opacity;
+ transition-duration: 500ms;
+ transition-timing-function: eease;
&[data-loaded='false'] {
opacity: 0;
diff --git a/sveltekit/src/lib/stores/storeContext.js b/sveltekit/src/lib/stores/storeContext.js
index bcc0309..86590d4 100644
--- a/sveltekit/src/lib/stores/storeContext.js
+++ b/sveltekit/src/lib/stores/storeContext.js
@@ -13,14 +13,18 @@ export const checkoutUrl = writable('');
export const isLoading = writable(false);
export async function useCreateCart() {
- const cartRes = await createCart();
- const shopifyCart = cartRes.body?.data?.cartCreate?.cart;
- cart.set(shopifyCart);
- cartId.set(shopifyCart.id);
-
- if (browser) {
- localStorage.setItem('cartCreatedAt', Date.now());
- localStorage.setItem('cartId', JSON.stringify(shopifyCart.id));
+ try {
+ const cartRes = await createCart();
+ const shopifyCart = cartRes.body?.data?.cartCreate?.cart;
+ cart.set(shopifyCart);
+ cartId.set(shopifyCart.id);
+
+ if (browser) {
+ localStorage.setItem('cartCreatedAt', Date.now());
+ localStorage.setItem('cartId', JSON.stringify(shopifyCart.id));
+ }
+ } catch (err) {
+ console.log(err);
}
}
diff --git a/sveltekit/src/lib/utils/shopify/loadCart.js b/sveltekit/src/lib/utils/shopify/loadCart.js
index c7f6567..5e51106 100644
--- a/sveltekit/src/lib/utils/shopify/loadCart.js
+++ b/sveltekit/src/lib/utils/shopify/loadCart.js
@@ -31,6 +31,7 @@ export default async function loadCart(cartId) {
id
title
product {
+ handle
images(first: 1) {
edges {
node {
diff --git a/sveltekit/src/routes/+layout.svelte b/sveltekit/src/routes/+layout.svelte
index fbd490a..910d787 100644
--- a/sveltekit/src/routes/+layout.svelte
+++ b/sveltekit/src/routes/+layout.svelte
@@ -32,7 +32,7 @@
let difference = currentDate - cartCreatedAt;
let totalDays = Math.ceil(difference / (1000 * 3600 * 24));
let cartIdExpired = totalDays > 6;
- if (cartId === 'undefined' || cartId === 'null' || cartIdExpired) {
+ if (!cartId || cartIdExpired) {
await useCreateCart();
}
await getCartItems();
From 30e1befb9314491ad8110418f8016bd8034f2949 Mon Sep 17 00:00:00 2001
From: Kevan Hannah <25513354+kevanhannah@users.noreply.github.com>
Date: Thu, 4 May 2023 09:15:31 -0400
Subject: [PATCH 3/6] add sourcemaps
---
pnpm-lock.yaml | 128 +++++++++++++++++++++++++++++++------
sveltekit/package.json | 1 +
sveltekit/svelte.config.js | 3 +
sveltekit/vite.config.js | 18 +++++-
4 files changed, 128 insertions(+), 22 deletions(-)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cb27b5f..081e81b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -107,6 +107,9 @@ importers:
specifier: ^7.50.0
version: 7.50.0
devDependencies:
+ '@sentry/vite-plugin':
+ specifier: ^0.7.2
+ version: 0.7.2
'@sveltejs/adapter-netlify':
specifier: ^2.0.6
version: 2.0.6(@sveltejs/kit@1.15.8)
@@ -1017,7 +1020,7 @@ packages:
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies:
ajv: 6.12.6
- debug: 4.3.4(supports-color@9.3.1)
+ debug: 4.3.4(supports-color@5.5.0)
espree: 9.5.1
globals: 13.20.0
ignore: 5.2.4
@@ -1109,7 +1112,7 @@ packages:
engines: {node: '>=10.10.0'}
dependencies:
'@humanwhocodes/object-schema': 1.2.1
- debug: 4.3.4(supports-color@9.3.1)
+ debug: 4.3.4(supports-color@5.5.0)
minimatch: 3.1.2
transitivePeerDependencies:
- supports-color
@@ -2496,7 +2499,6 @@ packages:
'@sentry/types': 7.50.0
'@sentry/utils': 7.50.0
tslib: 1.14.1
- dev: false
/@sentry/browser@7.50.0:
resolution: {integrity: sha512-a+UYbP89+SAvW47/p9wxEi9eWlyp/SkYl52OCdZNXnplQY4kQIOVyiaIs5nnCxIxZgXKrhAX4eo1E9ykleFuNQ==}
@@ -2510,6 +2512,39 @@ packages:
tslib: 1.14.1
dev: false
+ /@sentry/bundler-plugin-core@0.7.2:
+ resolution: {integrity: sha512-9d1MxEgRkPCTewQ26Bs+J/GxvnNVIRuQPZrHs70qRLotMiedH4KlHauh2MhbgH5rdgm0DUeOcafhxoBSK7ji3w==}
+ engines: {node: '>= 10'}
+ dependencies:
+ '@sentry/cli': 2.17.5
+ '@sentry/node': 7.50.0
+ '@sentry/tracing': 7.50.0
+ find-up: 5.0.0
+ glob: 9.3.2
+ magic-string: 0.27.0
+ unplugin: 1.0.1
+ webpack-sources: 3.2.3
+ transitivePeerDependencies:
+ - encoding
+ - supports-color
+ dev: true
+
+ /@sentry/cli@2.17.5:
+ resolution: {integrity: sha512-0tXjLDpaKB46851EMJ6NbP0o9/gdEaDSLAyjEtXxlVO6+RyhUj6x6jDwn0vis8n/7q0AvbIjAcJrot+TbZP+WQ==}
+ engines: {node: '>= 10'}
+ hasBin: true
+ requiresBuild: true
+ dependencies:
+ https-proxy-agent: 5.0.1(supports-color@9.3.1)
+ node-fetch: 2.6.9
+ progress: 2.0.3
+ proxy-from-env: 1.1.0
+ which: 2.0.2
+ transitivePeerDependencies:
+ - encoding
+ - supports-color
+ dev: true
+
/@sentry/core@7.50.0:
resolution: {integrity: sha512-6oD1a3fYs4aiNK7tuJSd88LHjYJAetd7ZK/AfJniU7zWKj4jxIYfO8nhm0qdnhEDs81RcweVDmPhWm3Kwrzzsg==}
engines: {node: '>=8'}
@@ -2517,7 +2552,6 @@ packages:
'@sentry/types': 7.50.0
'@sentry/utils': 7.50.0
tslib: 1.14.1
- dev: false
/@sentry/node@7.50.0:
resolution: {integrity: sha512-11UJBKoQFMp7f8sbzeO2gENsKIUkVCNBTzuPRib7l2K1HMjSfacXmwwma7ZEs0mc3ofIZ1UYuyONAXmI1lK9cQ==}
@@ -2533,7 +2567,6 @@ packages:
tslib: 1.14.1
transitivePeerDependencies:
- supports-color
- dev: false
/@sentry/replay@7.50.0:
resolution: {integrity: sha512-EYRk+DTZ5luwfkiCaDpBC3YBKIEdkReTUNZtWDVUytSVjsCnttkAipx/y6bxy3HN+rSXungMd3XKQT5RNMRUNA==}
@@ -2563,12 +2596,10 @@ packages:
engines: {node: '>=8'}
dependencies:
'@sentry-internal/tracing': 7.50.0
- dev: false
/@sentry/types@7.50.0:
resolution: {integrity: sha512-Zo9vyI98QNeYT0K0y57Rb4JRWDaPEgmp+QkQ4CRQZFUTWetO5fvPZ4Gb/R7TW16LajuHZlbJBHmvmNj2pkL2kw==}
engines: {node: '>=8'}
- dev: false
/@sentry/utils@7.50.0:
resolution: {integrity: sha512-iyPwwC6fwJsiPhH27ZbIiSsY5RaccHBqADS2zEjgKYhmP4P9WGgHRDrvLEnkOjqQyKNb6c0yfmv83n0uxYnolw==}
@@ -2576,7 +2607,16 @@ packages:
dependencies:
'@sentry/types': 7.50.0
tslib: 1.14.1
- dev: false
+
+ /@sentry/vite-plugin@0.7.2:
+ resolution: {integrity: sha512-gprT6wyc1JEtjZcWjv1jQSjT2QV62ZCLmXsjK4oKosb0uaaUMR4UgKxorZyNPGSY08YangjumeJZ7UX0/zakkw==}
+ engines: {node: '>= 10'}
+ dependencies:
+ '@sentry/bundler-plugin-core': 0.7.2
+ transitivePeerDependencies:
+ - encoding
+ - supports-color
+ dev: true
/@sindresorhus/is@0.7.0:
resolution: {integrity: sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==}
@@ -2649,7 +2689,7 @@ packages:
svelte: ^3.54.0
vite: ^4.0.0
dependencies:
- debug: 4.3.4(supports-color@9.3.1)
+ debug: 4.3.4(supports-color@5.5.0)
deepmerge: 4.3.1
kleur: 4.1.5
magic-string: 0.30.0
@@ -3533,7 +3573,7 @@ packages:
resolution: {integrity: sha512-TAlMYvOuwGyLK3PfBb5WKBXZmXz2fVCgv23d6zZFdle/q3gPjmxBaeuC0pY0Dzs5PWMSgfqqEZkrye19GlDTgw==}
dependencies:
archy: 1.0.0
- debug: 4.3.4(supports-color@9.3.1)
+ debug: 4.3.4(supports-color@5.5.0)
fastq: 1.15.0
transitivePeerDependencies:
- supports-color
@@ -4332,7 +4372,6 @@ packages:
/cookie@0.4.2:
resolution: {integrity: sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==}
engines: {node: '>= 0.6'}
- dev: false
/cookie@0.5.0:
resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==}
@@ -5524,7 +5563,7 @@ packages:
ajv: 6.12.6
chalk: 4.1.2
cross-spawn: 7.0.3
- debug: 4.3.4(supports-color@9.3.1)
+ debug: 4.3.4(supports-color@5.5.0)
doctrine: 3.0.0
escape-string-regexp: 4.0.0
eslint-scope: 7.2.0
@@ -5803,7 +5842,7 @@ packages:
engines: {node: '>= 10.17.0'}
hasBin: true
dependencies:
- debug: 4.3.4(supports-color@9.3.1)
+ debug: 4.3.4(supports-color@5.5.0)
get-stream: 5.2.0
yauzl: 2.10.0
optionalDependencies:
@@ -6159,7 +6198,7 @@ packages:
debug:
optional: true
dependencies:
- debug: 4.3.4(supports-color@9.3.1)
+ debug: 4.3.4(supports-color@5.5.0)
/for-each@0.3.3:
resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
@@ -6380,7 +6419,7 @@ packages:
resolution: {integrity: sha512-83P2+3V/3E+KSdlHnGlOr4vCrlV8wDsT580AyJkMtkK/8LtZc0TOCI9bjQXH1sgYnmQTzCoPoPaOAE+a8JZqLQ==}
engines: {node: '>=14.0.0'}
dependencies:
- debug: 4.3.4(supports-color@9.3.1)
+ debug: 4.3.4(supports-color@5.5.0)
decompress-response: 7.0.0
follow-redirects: 1.15.2(debug@4.3.4)
into-stream: 6.0.0
@@ -6557,6 +6596,16 @@ packages:
once: 1.4.0
dev: true
+ /glob@9.3.2:
+ resolution: {integrity: sha512-BTv/JhKXFEHsErMte/AnfiSv8yYOLLiyH2lTg8vn02O21zWFgHPTfxtgn1QRe7NRgggUhC8hacR2Re94svHqeA==}
+ engines: {node: '>=16 || 14 >=14.17'}
+ dependencies:
+ fs.realpath: 1.0.0
+ minimatch: 7.4.6
+ minipass: 4.2.8
+ path-scurry: 1.7.0
+ dev: true
+
/global-cache-dir@4.4.0:
resolution: {integrity: sha512-bk0gI6IbbphRjAaCJJn5H+T/CcEck5B3a5KBO2BXSDzjFSV+API17w8GA7YPJ6IXJiasW8M0VsEIig1PCHdfOQ==}
engines: {node: '>=14.18.0'}
@@ -8196,9 +8245,13 @@ packages:
dependencies:
yallist: 4.0.0
+ /lru-cache@9.1.1:
+ resolution: {integrity: sha512-65/Jky17UwSb0BuB9V+MyDpsOtXKmYwzhyl+cOa9XUiI4uV2Ouy/2voFP3+al0BjZbJgMBD8FojMpAf+Z+qn4A==}
+ engines: {node: 14 || >=16.14}
+ dev: true
+
/lru_map@0.3.3:
resolution: {integrity: sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ==}
- dev: false
/luxon@3.3.0:
resolution: {integrity: sha512-An0UCfG/rSiqtAIiBPO0Y9/zAnHUZxAMiCpTd5h2smgsj7GGmcenvrvww2cqNA8/4A5ZrD1gJpHN2mIHZQF+Mg==}
@@ -8485,6 +8538,11 @@ packages:
engines: {node: '>=8'}
dev: true
+ /minipass@5.0.0:
+ resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
+ engines: {node: '>=8'}
+ dev: true
+
/minizlib@2.1.2:
resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
engines: {node: '>= 8'}
@@ -8678,7 +8736,7 @@ packages:
cookie: 0.5.0
copy-template-dir: 1.4.0
cron-parser: 4.8.1
- debug: 4.3.4(supports-color@9.3.1)
+ debug: 4.3.4(supports-color@5.5.0)
decache: 4.6.1
dot-prop: 6.0.1
dotenv: 16.0.3
@@ -9518,6 +9576,14 @@ packages:
/path-parse@1.0.7:
resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+ /path-scurry@1.7.0:
+ resolution: {integrity: sha512-UkZUeDjczjYRE495+9thsgcVgsaCPkaw80slmfVFgllxY+IO8ubTsOpFVjDPROBqJdHfVPUFRHPBV/WciOVfWg==}
+ engines: {node: '>=16 || 14 >=14.17'}
+ dependencies:
+ lru-cache: 9.1.1
+ minipass: 5.0.0
+ dev: true
+
/path-to-regexp@0.1.7:
resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
dev: true
@@ -9838,6 +9904,11 @@ packages:
speedometer: 1.0.0
through2: 2.0.5
+ /progress@2.0.3:
+ resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+ engines: {node: '>=0.4.0'}
+ dev: true
+
/prop-types@15.8.1:
resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
dependencies:
@@ -9865,7 +9936,6 @@ packages:
/proxy-from-env@1.1.0:
resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
- dev: false
/ps-list@8.1.1:
resolution: {integrity: sha512-OPS9kEJYVmiO48u/B9qneqhkMvgCxT+Tm28VCEJpheTpl8cJ0ffZRRNgS5mrQRTrX5yRTpaJ+hRDeefXYmmorQ==}
@@ -11450,7 +11520,7 @@ packages:
/tabtab@3.0.2:
resolution: {integrity: sha512-jANKmUe0sIQc/zTALTBy186PoM/k6aPrh3A7p6AaAfF6WPSbTx1JYeGIGH162btpH+mmVEXln+UxwViZHO2Jhg==}
dependencies:
- debug: 4.3.4(supports-color@9.3.1)
+ debug: 4.3.4(supports-color@5.5.0)
es6-promisify: 6.1.1
inquirer: 6.5.2
minimist: 1.2.8
@@ -11971,6 +12041,15 @@ packages:
engines: {node: '>= 0.8'}
dev: true
+ /unplugin@1.0.1:
+ resolution: {integrity: sha512-aqrHaVBWW1JVKBHmGo33T5TxeL0qWzfvjWokObHA9bYmN7eNDkwOxmLjhioHl9878qDFMAaT51XNroRyuz7WxA==}
+ dependencies:
+ acorn: 8.8.2
+ chokidar: 3.5.3
+ webpack-sources: 3.2.3
+ webpack-virtual-modules: 0.5.0
+ dev: true
+
/unset-value@1.0.0:
resolution: {integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==}
engines: {node: '>=0.10.0'}
@@ -12212,7 +12291,7 @@ packages:
dependencies:
chalk: 4.1.2
commander: 9.5.0
- debug: 4.3.4(supports-color@9.3.1)
+ debug: 4.3.4(supports-color@5.5.0)
transitivePeerDependencies:
- supports-color
dev: true
@@ -12237,6 +12316,15 @@ packages:
engines: {node: '>=12'}
dev: false
+ /webpack-sources@3.2.3:
+ resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
+ engines: {node: '>=10.13.0'}
+ dev: true
+
+ /webpack-virtual-modules@0.5.0:
+ resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
+ dev: true
+
/well-known-symbols@2.0.0:
resolution: {integrity: sha512-ZMjC3ho+KXo0BfJb7JgtQ5IBuvnShdlACNkKkdsqBmYw3bPAaJfPeYUo6tLUaT5tG/Gkh7xkpBhKRQ9e7pyg9Q==}
engines: {node: '>=6'}
diff --git a/sveltekit/package.json b/sveltekit/package.json
index 1b2088a..415faf3 100644
--- a/sveltekit/package.json
+++ b/sveltekit/package.json
@@ -23,6 +23,7 @@
"@sentry/tracing": "^7.50.0"
},
"devDependencies": {
+ "@sentry/vite-plugin": "^0.7.2",
"@sveltejs/adapter-netlify": "^2.0.6",
"@sveltejs/kit": "^1.15.8",
"autoprefixer": "^10.4.14",
diff --git a/sveltekit/svelte.config.js b/sveltekit/svelte.config.js
index 42e2b24..08fbee6 100644
--- a/sveltekit/svelte.config.js
+++ b/sveltekit/svelte.config.js
@@ -2,6 +2,9 @@ import adapter from '@sveltejs/adapter-netlify';
import preprocess from 'svelte-preprocess';
const config = {
+ compilerOptions: {
+ enableSourcemap: true,
+ },
kit: {
adapter: adapter({
split: true,
diff --git a/sveltekit/vite.config.js b/sveltekit/vite.config.js
index fce9e87..b42c49c 100644
--- a/sveltekit/vite.config.js
+++ b/sveltekit/vite.config.js
@@ -1,6 +1,20 @@
-import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { sentryVitePlugin } from '@sentry/vite-plugin';
export default defineConfig({
- plugins: [sveltekit()],
+ build: {
+ sourcemap: true,
+ },
+ plugins: [
+ sveltekit(),
+ sentryVitePlugin({
+ org: process.env.SENTRY_ORG,
+ project: process.env.SENTRY_PROJECT,
+ authToken: process.env.SENTRY_AUTH_TOKEN,
+ sourcemaps: {
+ assets: './build/**',
+ },
+ }),
+ ],
});
From 42eb19835904d87483f4ad859a5c14818b99c05f Mon Sep 17 00:00:00 2001
From: Kevan Hannah <25513354+kevanhannah@users.noreply.github.com>
Date: Thu, 4 May 2023 08:15:18 -0400
Subject: [PATCH 4/6] add 404 path
---
sveltekit/src/routes/[...path]/+page.server.js | 5 +++++
1 file changed, 5 insertions(+)
create mode 100644 sveltekit/src/routes/[...path]/+page.server.js
diff --git a/sveltekit/src/routes/[...path]/+page.server.js b/sveltekit/src/routes/[...path]/+page.server.js
new file mode 100644
index 0000000..b10006e
--- /dev/null
+++ b/sveltekit/src/routes/[...path]/+page.server.js
@@ -0,0 +1,5 @@
+import { error } from '@sveltejs/kit';
+
+export function load() {
+ throw error(404, "That page doesn't seem to exist.");
+}
From cef5ad0e4071564f88b157f5c8b0f8670547faf6 Mon Sep 17 00:00:00 2001
From: Kevan Hannah <25513354+kevanhannah@users.noreply.github.com>
Date: Thu, 4 May 2023 08:46:55 -0400
Subject: [PATCH 5/6] shop and style updates
---
sveltekit/src/components/Cart/CartItem.svelte | 25 ++++++++++++++++---
.../src/components/shared/ProductCard.svelte | 5 +++-
sveltekit/src/lib/stores/storeContext.js | 20 +++++++++------
sveltekit/src/lib/utils/shopify/loadCart.js | 1 +
sveltekit/src/routes/+layout.svelte | 2 +-
5 files changed, 40 insertions(+), 13 deletions(-)
diff --git a/sveltekit/src/components/Cart/CartItem.svelte b/sveltekit/src/components/Cart/CartItem.svelte
index eec8f03..12a8801 100644
--- a/sveltekit/src/components/Cart/CartItem.svelte
+++ b/sveltekit/src/components/Cart/CartItem.svelte
@@ -4,16 +4,18 @@
import QuantityWidget from '$components/Cart/QuantityWidget.svelte';
export let item;
+ $: console.log(item);
$: ({ estimatedCost, id, merchandise, quantity } = item);
-
+
-
{merchandise.product.title}
+
{merchandise.product.title}
{#if merchandise.title !== 'Default Title'}
{merchandise.title}
{/if}
@@ -66,6 +68,19 @@
}
}
+ .itemImage {
+ opacity: 1;
+ transition-property: opacity;
+ transition-duration: 500ms;
+ transition-timing-function: ease;
+
+ @media (hover: hover) {
+ &:hover {
+ opacity: 0.8;
+ }
+ }
+ }
+
.itemInfo {
display: flex;
flex-direction: column;
@@ -78,6 +93,10 @@
gap: 0.5em;
}
+ .itemTitle {
+ text-decoration: none;
+ }
+
.itemPrice,
.variantTitle {
font-size: 0.75em;
diff --git a/sveltekit/src/components/shared/ProductCard.svelte b/sveltekit/src/components/shared/ProductCard.svelte
index fcbdd29..6cc3fcc 100644
--- a/sveltekit/src/components/shared/ProductCard.svelte
+++ b/sveltekit/src/components/shared/ProductCard.svelte
@@ -66,7 +66,10 @@
display: block;
aspect-ratio: 1;
object-fit: cover;
- transition: 500ms opacity ease-out;
+ opacity: 1;
+ transition-property: opacity;
+ transition-duration: 500ms;
+ transition-timing-function: eease;
&[data-loaded='false'] {
opacity: 0;
diff --git a/sveltekit/src/lib/stores/storeContext.js b/sveltekit/src/lib/stores/storeContext.js
index bcc0309..86590d4 100644
--- a/sveltekit/src/lib/stores/storeContext.js
+++ b/sveltekit/src/lib/stores/storeContext.js
@@ -13,14 +13,18 @@ export const checkoutUrl = writable('');
export const isLoading = writable(false);
export async function useCreateCart() {
- const cartRes = await createCart();
- const shopifyCart = cartRes.body?.data?.cartCreate?.cart;
- cart.set(shopifyCart);
- cartId.set(shopifyCart.id);
-
- if (browser) {
- localStorage.setItem('cartCreatedAt', Date.now());
- localStorage.setItem('cartId', JSON.stringify(shopifyCart.id));
+ try {
+ const cartRes = await createCart();
+ const shopifyCart = cartRes.body?.data?.cartCreate?.cart;
+ cart.set(shopifyCart);
+ cartId.set(shopifyCart.id);
+
+ if (browser) {
+ localStorage.setItem('cartCreatedAt', Date.now());
+ localStorage.setItem('cartId', JSON.stringify(shopifyCart.id));
+ }
+ } catch (err) {
+ console.log(err);
}
}
diff --git a/sveltekit/src/lib/utils/shopify/loadCart.js b/sveltekit/src/lib/utils/shopify/loadCart.js
index c7f6567..5e51106 100644
--- a/sveltekit/src/lib/utils/shopify/loadCart.js
+++ b/sveltekit/src/lib/utils/shopify/loadCart.js
@@ -31,6 +31,7 @@ export default async function loadCart(cartId) {
id
title
product {
+ handle
images(first: 1) {
edges {
node {
diff --git a/sveltekit/src/routes/+layout.svelte b/sveltekit/src/routes/+layout.svelte
index fbd490a..910d787 100644
--- a/sveltekit/src/routes/+layout.svelte
+++ b/sveltekit/src/routes/+layout.svelte
@@ -32,7 +32,7 @@
let difference = currentDate - cartCreatedAt;
let totalDays = Math.ceil(difference / (1000 * 3600 * 24));
let cartIdExpired = totalDays > 6;
- if (cartId === 'undefined' || cartId === 'null' || cartIdExpired) {
+ if (!cartId || cartIdExpired) {
await useCreateCart();
}
await getCartItems();
From dada9680834f3c1ccc7314b2195ce1fe148c756b Mon Sep 17 00:00:00 2001
From: Kevan Hannah <25513354+kevanhannah@users.noreply.github.com>
Date: Thu, 4 May 2023 09:24:51 -0400
Subject: [PATCH 6/6] update version
---
sveltekit/package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/sveltekit/package.json b/sveltekit/package.json
index 415faf3..e62402d 100644
--- a/sveltekit/package.json
+++ b/sveltekit/package.json
@@ -1,6 +1,6 @@
{
"name": "jaketobin.sveltekit",
- "version": "1.0.0",
+ "version": "1.1.0",
"scripts": {
"dev": "vite dev",
"build": "vite build",