From 5a5dd3ccaa052874d3e774b7efee5c35cc144515 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Fri, 5 Nov 2021 17:43:29 +0100 Subject: [PATCH 01/31] Use an atom for the Cart button --- src/components/atoms/CartButton.svelte | 2 +- src/style/atoms/_cart-button.scss | 27 +++++++++++++++++++++++++ src/style/pages/_shop.scss | 28 -------------------------- src/style/style.scss | 1 + 4 files changed, 29 insertions(+), 29 deletions(-) create mode 100644 src/style/atoms/_cart-button.scss diff --git a/src/components/atoms/CartButton.svelte b/src/components/atoms/CartButton.svelte index 8238a8a..c4f7566 100644 --- a/src/components/atoms/CartButton.svelte +++ b/src/components/atoms/CartButton.svelte @@ -8,7 +8,7 @@ } -
+
diff --git a/src/style/atoms/_cart-button.scss b/src/style/atoms/_cart-button.scss new file mode 100644 index 0000000..d22aadb --- /dev/null +++ b/src/style/atoms/_cart-button.scss @@ -0,0 +1,27 @@ +// Cart +.cart-button { + display: none; + position: relative; + + @include bp (sm) { + display: flex; + margin-left: auto; + } + + .quantity { + position: absolute; + top: 50%; + left: -12px; + transform: translateY(-50%); + display: flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + font-size: rem(11px); + font-weight: 600; + color: #fff; + background-color: $color-secondary; + border-radius: 100%; + } +} \ No newline at end of file diff --git a/src/style/pages/_shop.scss b/src/style/pages/_shop.scss index 8891520..8eed7ac 100644 --- a/src/style/pages/_shop.scss +++ b/src/style/pages/_shop.scss @@ -77,34 +77,6 @@ } } } - - // Cart - &__cart { - display: none; - position: relative; - - @include bp (sm) { - display: flex; - margin-left: auto; - } - - .quantity { - position: absolute; - top: 50%; - left: -12px; - transform: translateY(-50%); - display: flex; - align-items: center; - justify-content: center; - width: 22px; - height: 22px; - font-size: rem(11px); - font-weight: 600; - color: #fff; - background-color: $color-secondary; - border-radius: 100%; - } - } } // Intro diff --git a/src/style/style.scss b/src/style/style.scss index 04bfc64..afd884a 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -43,6 +43,7 @@ @import "atoms/box-cta"; @import "atoms/site-title"; @import "atoms/photo"; +@import "atoms/cart-button"; // Molecules @import "molecules/photo-card"; From 35ba7f7c638d178b13a420574cc2581c81da3977 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Fri, 5 Nov 2021 17:49:34 +0100 Subject: [PATCH 02/31] Change Cart button naming --- .../atoms/{CartButton.svelte => ButtonCart.svelte} | 2 +- src/routes/shop/__layout.svelte | 6 +++--- src/style/atoms/{_cart-button.scss => _button-cart.scss} | 2 +- src/style/style.scss | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) rename src/components/atoms/{CartButton.svelte => ButtonCart.svelte} (94%) rename src/style/atoms/{_cart-button.scss => _button-cart.scss} (97%) diff --git a/src/components/atoms/CartButton.svelte b/src/components/atoms/ButtonCart.svelte similarity index 94% rename from src/components/atoms/CartButton.svelte rename to src/components/atoms/ButtonCart.svelte index c4f7566..2e2cc76 100644 --- a/src/components/atoms/CartButton.svelte +++ b/src/components/atoms/ButtonCart.svelte @@ -8,7 +8,7 @@ } -
+
diff --git a/src/routes/shop/__layout.svelte b/src/routes/shop/__layout.svelte index 7255664..4c9dc5e 100644 --- a/src/routes/shop/__layout.svelte +++ b/src/routes/shop/__layout.svelte @@ -4,7 +4,7 @@ import Metas from '$components/Metas.svelte' import SiteTitle from '$components/atoms/SiteTitle.svelte' import Image from '$components/atoms/Image.svelte' - import CartButton from '$components/atoms/CartButton.svelte' + import ButtonCart from '$components/atoms/ButtonCart.svelte' import PosterLayout from '$components/layouts/PosterLayout.svelte' import Poster from '$components/molecules/Poster.svelte' import EmailForm from '$components/molecules/EmailForm.svelte' @@ -51,7 +51,7 @@ - +
@@ -78,7 +78,7 @@ - +
diff --git a/src/style/atoms/_cart-button.scss b/src/style/atoms/_button-cart.scss similarity index 97% rename from src/style/atoms/_cart-button.scss rename to src/style/atoms/_button-cart.scss index d22aadb..23867eb 100644 --- a/src/style/atoms/_cart-button.scss +++ b/src/style/atoms/_button-cart.scss @@ -1,5 +1,5 @@ // Cart -.cart-button { +.button-cart { display: none; position: relative; diff --git a/src/style/style.scss b/src/style/style.scss index afd884a..88edfa2 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -37,13 +37,13 @@ // Atoms @import "atoms/button"; @import "atoms/button-circle"; +@import "atoms/button-cart"; @import "atoms/badge"; @import "atoms/arrow"; @import "atoms/discover"; @import "atoms/box-cta"; @import "atoms/site-title"; @import "atoms/photo"; -@import "atoms/cart-button"; // Molecules @import "molecules/photo-card"; From 8062987bb351da17dd600add4a23e926efcca9b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Sat, 6 Nov 2021 15:12:44 +0100 Subject: [PATCH 03/31] Change Cart button icon and size --- src/components/atoms/ButtonCart.svelte | 7 +++---- src/style/atoms/_button-cart.scss | 9 +++++++++ 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/atoms/ButtonCart.svelte b/src/components/atoms/ButtonCart.svelte index 2e2cc76..611535e 100644 --- a/src/components/atoms/ButtonCart.svelte +++ b/src/components/atoms/ButtonCart.svelte @@ -2,15 +2,14 @@ import { cartOpen, cartAmount } from '$utils/store' import ButtonCircle from './ButtonCircle.svelte' - - const handleCartOpening = () => { + const openCart = () => { $cartOpen = true }
- - + + Cart icon {#if $cartAmount > 0} diff --git a/src/style/atoms/_button-cart.scss b/src/style/atoms/_button-cart.scss index 23867eb..cdc09ea 100644 --- a/src/style/atoms/_button-cart.scss +++ b/src/style/atoms/_button-cart.scss @@ -8,6 +8,15 @@ margin-left: auto; } + // Icon + img { + display: block; + width: 27px; + height: 27px; + margin-top: -3px; + } + + // Quantity label .quantity { position: absolute; top: 50%; From 70c0165cf9055f3bbc8616f768b557bd4ecc0075 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Sun, 7 Nov 2021 11:46:31 +0100 Subject: [PATCH 04/31] [chore] Update npm packages --- package.json | 2 +- pnpm-lock.yaml | 80 +++++++++--------------- src/components/organisms/Carousel.svelte | 1 - 3 files changed, 29 insertions(+), 54 deletions(-) diff --git a/package.json b/package.json index 1e178d0..f2596b0 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "@sveltejs/kit": "next", "@typescript-eslint/eslint-plugin": "^5.3.0", "@typescript-eslint/parser": "^5.3.0", - "eslint": "^8.1.0", + "eslint": "^8.2.0", "eslint-plugin-svelte3": "^3.2.1", "sass": "^1.43.4", "svelte": "^3.44.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f8094e5..a4b613d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,7 +8,7 @@ specifiers: '@typescript-eslint/parser': ^5.3.0 dayjs: ^1.10.7 embla-carousel: ^5.0.1 - eslint: ^8.1.0 + eslint: ^8.2.0 eslint-plugin-svelte3: ^3.2.1 focus-visible: ^5.2.0 sanitize.css: ^13.0.0 @@ -28,11 +28,11 @@ dependencies: devDependencies: '@sveltejs/adapter-node': 1.0.0-next.55 '@sveltejs/adapter-vercel': 1.0.0-next.31 - '@sveltejs/kit': 1.0.0-next.193_sass@1.43.4+svelte@3.44.1 - '@typescript-eslint/eslint-plugin': 5.3.0_f8873316f48f7781ccc3e081fc76e214 - '@typescript-eslint/parser': 5.3.0_eslint@8.1.0+typescript@4.4.4 - eslint: 8.1.0 - eslint-plugin-svelte3: 3.2.1_eslint@8.1.0+svelte@3.44.1 + '@sveltejs/kit': 1.0.0-next.195_sass@1.43.4+svelte@3.44.1 + '@typescript-eslint/eslint-plugin': 5.3.0_c2f57e23dad63fa3be14ade7e20e2af7 + '@typescript-eslint/parser': 5.3.0_eslint@8.2.0+typescript@4.4.4 + eslint: 8.2.0 + eslint-plugin-svelte3: 3.2.1_eslint@8.2.0+svelte@3.44.1 sass: 1.43.4 svelte: 3.44.1 svelte-check: 2.2.8_sass@1.43.4+svelte@3.44.1 @@ -42,8 +42,8 @@ devDependencies: packages: - /@eslint/eslintrc/1.0.3: - resolution: {integrity: sha512-DHI1wDPoKCBPoLZA3qDR91+3te/wDSc1YhKg3jR8NxKKRJq2hwHwcWv31cSwSYvIBrmbENoYMWcenW8uproQqg==} + /@eslint/eslintrc/1.0.4: + resolution: {integrity: sha512-h8Vx6MdxwWI2WM8/zREHMoqdgLNXEL4QX3MWSVMdyNJGvXVOs+6lp+m2hc3FnuMHDc4poxFNI20vCk0OmI4G0Q==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: ajv: 6.12.6 @@ -52,7 +52,7 @@ packages: globals: 13.12.0 ignore: 4.0.6 import-fresh: 3.3.0 - js-yaml: 3.14.1 + js-yaml: 4.1.0 minimatch: 3.0.4 strip-json-comments: 3.1.1 transitivePeerDependencies: @@ -116,8 +116,8 @@ packages: esbuild: 0.13.12 dev: true - /@sveltejs/kit/1.0.0-next.193_sass@1.43.4+svelte@3.44.1: - resolution: {integrity: sha512-JRe7ZTZONNL2t+uFUkrT6HDWajD/Dp0lDMiB4FODZAtQLx94PKit0I699/dHrQR0qpzE3gYipqtxInTWasFpBg==} + /@sveltejs/kit/1.0.0-next.195_sass@1.43.4+svelte@3.44.1: + resolution: {integrity: sha512-R2X4FgzXQhp63XOik6S1Flw91S2CEA7sTxdsnNFrq3O+bIN7pQhJhkm6zgH68MZANdDcq8oIiSRkxT4M3t1+jQ==} engines: {node: '>=14.13'} hasBin: true peerDependencies: @@ -177,7 +177,7 @@ packages: '@types/node': 16.11.6 dev: true - /@typescript-eslint/eslint-plugin/5.3.0_f8873316f48f7781ccc3e081fc76e214: + /@typescript-eslint/eslint-plugin/5.3.0_c2f57e23dad63fa3be14ade7e20e2af7: resolution: {integrity: sha512-ARUEJHJrq85aaiCqez7SANeahDsJTD3AEua34EoQN9pHS6S5Bq9emcIaGGySt/4X2zSi+vF5hAH52sEen7IO7g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -188,11 +188,11 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/experimental-utils': 5.3.0_eslint@8.1.0+typescript@4.4.4 - '@typescript-eslint/parser': 5.3.0_eslint@8.1.0+typescript@4.4.4 + '@typescript-eslint/experimental-utils': 5.3.0_eslint@8.2.0+typescript@4.4.4 + '@typescript-eslint/parser': 5.3.0_eslint@8.2.0+typescript@4.4.4 '@typescript-eslint/scope-manager': 5.3.0 debug: 4.3.2 - eslint: 8.1.0 + eslint: 8.2.0 functional-red-black-tree: 1.0.1 ignore: 5.1.9 regexpp: 3.2.0 @@ -203,7 +203,7 @@ packages: - supports-color dev: true - /@typescript-eslint/experimental-utils/5.3.0_eslint@8.1.0+typescript@4.4.4: + /@typescript-eslint/experimental-utils/5.3.0_eslint@8.2.0+typescript@4.4.4: resolution: {integrity: sha512-NFVxYTjKj69qB0FM+piah1x3G/63WB8vCBMnlnEHUsiLzXSTWb9FmFn36FD9Zb4APKBLY3xRArOGSMQkuzTF1w==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -213,15 +213,15 @@ packages: '@typescript-eslint/scope-manager': 5.3.0 '@typescript-eslint/types': 5.3.0 '@typescript-eslint/typescript-estree': 5.3.0_typescript@4.4.4 - eslint: 8.1.0 + eslint: 8.2.0 eslint-scope: 5.1.1 - eslint-utils: 3.0.0_eslint@8.1.0 + eslint-utils: 3.0.0_eslint@8.2.0 transitivePeerDependencies: - supports-color - typescript dev: true - /@typescript-eslint/parser/5.3.0_eslint@8.1.0+typescript@4.4.4: + /@typescript-eslint/parser/5.3.0_eslint@8.2.0+typescript@4.4.4: resolution: {integrity: sha512-rKu/yAReip7ovx8UwOAszJVO5MgBquo8WjIQcp1gx4pYQCwYzag+I5nVNHO4MqyMkAo0gWt2gWUi+36gWAVKcw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -235,7 +235,7 @@ packages: '@typescript-eslint/types': 5.3.0 '@typescript-eslint/typescript-estree': 5.3.0_typescript@4.4.4 debug: 4.3.2 - eslint: 8.1.0 + eslint: 8.2.0 typescript: 4.4.4 transitivePeerDependencies: - supports-color @@ -331,12 +331,6 @@ packages: picomatch: 2.3.0 dev: true - /argparse/1.0.10: - resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==} - dependencies: - sprintf-js: 1.0.3 - dev: true - /argparse/2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} dev: true @@ -649,14 +643,14 @@ packages: engines: {node: '>=10'} dev: true - /eslint-plugin-svelte3/3.2.1_eslint@8.1.0+svelte@3.44.1: + /eslint-plugin-svelte3/3.2.1_eslint@8.2.0+svelte@3.44.1: resolution: {integrity: sha512-YoBR9mLoKCjGghJ/gvpnFZKaMEu/VRcuxpSRS8KuozuEo7CdBH7bmBHa6FmMm0i4kJnOyx+PVsaptz96K6H/4Q==} engines: {node: '>=10'} peerDependencies: eslint: '>=6.0.0' svelte: ^3.2.0 dependencies: - eslint: 8.1.0 + eslint: 8.2.0 svelte: 3.44.1 dev: true @@ -676,13 +670,13 @@ packages: estraverse: 5.3.0 dev: true - /eslint-utils/3.0.0_eslint@8.1.0: + /eslint-utils/3.0.0_eslint@8.2.0: resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==} engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0} peerDependencies: eslint: '>=5' dependencies: - eslint: 8.1.0 + eslint: 8.2.0 eslint-visitor-keys: 2.1.0 dev: true @@ -696,12 +690,12 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /eslint/8.1.0: - resolution: {integrity: sha512-JZvNneArGSUsluHWJ8g8MMs3CfIEzwaLx9KyH4tZ2i+R2/rPWzL8c0zg3rHdwYVpN/1sB9gqnjHwz9HoeJpGHw==} + /eslint/8.2.0: + resolution: {integrity: sha512-erw7XmM+CLxTOickrimJ1SiF55jiNlVSp2qqm0NuBWPtHYQCegD5ZMaW0c3i5ytPqL+SSLaCxdvQXFPLJn+ABw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} hasBin: true dependencies: - '@eslint/eslintrc': 1.0.3 + '@eslint/eslintrc': 1.0.4 '@humanwhocodes/config-array': 0.6.0 ajv: 6.12.6 chalk: 4.1.2 @@ -711,7 +705,7 @@ packages: enquirer: 2.3.6 escape-string-regexp: 4.0.0 eslint-scope: 6.0.0 - eslint-utils: 3.0.0_eslint@8.1.0 + eslint-utils: 3.0.0_eslint@8.2.0 eslint-visitor-keys: 3.0.0 espree: 9.0.0 esquery: 1.4.0 @@ -752,12 +746,6 @@ packages: eslint-visitor-keys: 3.0.0 dev: true - /esprima/4.0.1: - resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==} - engines: {node: '>=4'} - hasBin: true - dev: true - /esquery/1.4.0: resolution: {integrity: sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==} engines: {node: '>=0.10'} @@ -1006,14 +994,6 @@ packages: resolution: {integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=} dev: true - /js-yaml/3.14.1: - resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==} - hasBin: true - dependencies: - argparse: 1.0.10 - esprima: 4.0.1 - dev: true - /js-yaml/4.1.0: resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==} hasBin: true @@ -1337,10 +1317,6 @@ packages: resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==} dev: true - /sprintf-js/1.0.3: - resolution: {integrity: sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=} - dev: true - /strip-ansi/6.0.1: resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} engines: {node: '>=8'} diff --git a/src/components/organisms/Carousel.svelte b/src/components/organisms/Carousel.svelte index 838ccdd..5a1e9e4 100644 --- a/src/components/organisms/Carousel.svelte +++ b/src/components/organisms/Carousel.svelte @@ -1,7 +1,6 @@ {/if}
+
Back to Houses Of @@ -67,7 +92,7 @@ />
-
- \ No newline at end of file +
\ No newline at end of file diff --git a/src/components/organisms/Cart.svelte b/src/components/organisms/Cart.svelte index e880d87..34b4d75 100644 --- a/src/components/organisms/Cart.svelte +++ b/src/components/organisms/Cart.svelte @@ -2,7 +2,7 @@ import { onMount } from 'svelte' import { fade, fly } from 'svelte/transition' import { quartOut } from 'svelte/easing' - import { cartOpen, cartId, cartData, cartAmount } from '$utils/store' + import { cartOpen, cartId, cartData, cartAmount, cartIsUpdating } from '$utils/store' // Components import Button from '$components/atoms/Button.svelte' import CartItem from '$components/molecules/CartItem.svelte' @@ -25,7 +25,7 @@ const cart = await existantCart.json() $cartId = cart.id $cartData = cart - console.log('fetched existant cart:', $cartId, $cartData) + // console.log('Fetched existant cart:', $cartId, $cartData) } } // Cart doesn't exists @@ -41,7 +41,7 @@ const cart = await newCart.json() $cartId = cart.id $cartData = cart - console.log('new cart:', localStorage.getItem('cartId')) + // console.log('Created new cart:', localStorage.getItem('cartId')) } } }) @@ -54,43 +54,53 @@ // Item quantity changed const changedQuantity = async ({ detail: { id, quantity } }) => { - // Update item in cart - // const updatedCart = await swell.cart.updateItem(id, { - // quantity - // }) - // if (updatedCart) { - // $cartData = updatedCart - // } + // Cart is now updating + $cartIsUpdating = true + // Get updated cart const updatedCart = await fetch('/api/swell', { method: 'POST', body: JSON.stringify({ action: 'updateCartItem', cartId: $cartId, productId: id, - quantity: quantity + quantity, }) }) - if (updatedCart.ok) { - // const cart = await updatedCart.json() - // $cartData = cart - // console.log('updated cart:', $cartData.items) + const cart = await updatedCart.json() + $cartData = cart + // Cart is updated + $cartIsUpdating = false } } // Item removed const removedItem = async ({ detail: id }) => { + // Cart is now updating + $cartIsUpdating = true + // Remove item from cart - // const removedItem = await swell.cart.removeItem(id) - // if (removedItem) { - // $cartData = removedItem - // } + const updatedCart = await fetch('/api/swell', { + method: 'POST', + body: JSON.stringify({ + action: 'removeCartItem', + cartId: $cartId, + productId: id, + }) + }) + if (updatedCart.ok) { + const cart = await updatedCart.json() + $cartData = cart + // Cart is updated + $cartIsUpdating = false + } } {#if $cartOpen}
From 571f5d0a6d5d00f6c25acfc7440fb5485d2bbd38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Mon, 8 Nov 2021 12:56:58 +0100 Subject: [PATCH 19/31] Use sveltekit:noscroll on Button link --- src/components/atoms/Button.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/atoms/Button.svelte b/src/components/atoms/Button.svelte index 7e325b5..c05e391 100644 --- a/src/components/atoms/Button.svelte +++ b/src/components/atoms/Button.svelte @@ -34,6 +34,7 @@ href={url} class={classes} {rel} {target} sveltekit:prefetch={url && isExternal ? null : true} + sveltekit:noscroll={isExternal ? null : true} disabled={disabled} on:click > From 378a64f2b028288548e533fc810bbd568b0415ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Mon, 8 Nov 2021 13:00:31 +0100 Subject: [PATCH 20/31] =?UTF-8?q?=E2=9C=A8=20Add=20product=20to=20cart=20f?= =?UTF-8?q?rom=20anywhere?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Make a global function that adds a product to the current cart --- src/components/layouts/PosterLayout.svelte | 33 ++-------------------- src/components/molecules/Poster.svelte | 5 ++++ src/utils/functions/shop.ts | 9 +++--- 3 files changed, 13 insertions(+), 34 deletions(-) diff --git a/src/components/layouts/PosterLayout.svelte b/src/components/layouts/PosterLayout.svelte index 5a2a944..6108c43 100644 --- a/src/components/layouts/PosterLayout.svelte +++ b/src/components/layouts/PosterLayout.svelte @@ -1,7 +1,7 @@
@@ -98,7 +71,7 @@
diff --git a/src/components/molecules/Poster.svelte b/src/components/molecules/Poster.svelte index 32b31eb..7ca6937 100644 --- a/src/components/molecules/Poster.svelte +++ b/src/components/molecules/Poster.svelte @@ -1,7 +1,11 @@ @@ -33,6 +37,7 @@ text="Add to cart" color="pinklight" size="xsmall" + on:click={() => addToCart($cartId, product)} /> \ No newline at end of file diff --git a/src/utils/functions/shop.ts b/src/utils/functions/shop.ts index 29bfe70..b4e375f 100644 --- a/src/utils/functions/shop.ts +++ b/src/utils/functions/shop.ts @@ -1,17 +1,18 @@ import { addNotification } from '$utils/functions/notifications' -import type { Writable } from 'svelte/store' +import { cartData } from '$utils/stores/shop' + /** * Add a product to a cart */ -export const addToCart = async (cart: string, cartData: Writable, product: any, quantity: number = 1) => { - if (cart && cart !== 'null') { +export const addToCart = async (cartId: string, product: any, quantity: number = 1) => { + if (cartId && cartId !== 'null') { const updatedCart = await fetch('/api/swell', { method: 'POST', body: JSON.stringify({ action: 'addToCart', - cartId: cart, + cartId, productId: product.id, quantity, }) From 75f3e5f1d179584856b64bfcfbb986f1b6e7db73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Mon, 8 Nov 2021 13:24:33 +0100 Subject: [PATCH 21/31] Get a category of products from Swell --- src/components/layouts/PosterLayout.svelte | 4 +- src/routes/api/swell.ts | 11 ++++-- src/routes/shop/__layout.svelte | 45 ++++++++++++++-------- src/utils/functions/swell.ts | 19 +++++++++ 4 files changed, 59 insertions(+), 20 deletions(-) diff --git a/src/components/layouts/PosterLayout.svelte b/src/components/layouts/PosterLayout.svelte index 6108c43..c48519a 100644 --- a/src/components/layouts/PosterLayout.svelte +++ b/src/components/layouts/PosterLayout.svelte @@ -8,7 +8,7 @@ import Carousel from '$components/organisms/Carousel.svelte' export let product: any - export let productShop: any + export let shopProduct: any /** @@ -66,7 +66,7 @@
{capitalizeFirstLetter(product.type)}
-
{productShop.name} – {productShop.price}€
+
{shopProduct.name} – {shopProduct.price}€