diff --git a/package.json b/package.json index 958eb9f..42e1537 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "svelte": "^3.50.1", "svelte-check": "^2.9.0", "svelte-preprocess": "^4.10.7", - "swell-node": "^4.0.10", + "swell-js": "^3.17.6", "tslib": "^2.4.0", "typescript": "^4.8.3", "vite": "^3.1.2" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 65f7bc3..8b71ef0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -27,7 +27,7 @@ specifiers: svelte: ^3.50.1 svelte-check: ^2.9.0 svelte-preprocess: ^4.10.7 - swell-node: ^4.0.10 + swell-js: ^3.17.6 tslib: ^2.4.0 tweakpane: ^3.1.0 typescript: ^4.8.3 @@ -63,7 +63,7 @@ devDependencies: svelte: 3.50.1 svelte-check: 2.9.0_shdnsuo55vjluqozcjtxyryg5e svelte-preprocess: 4.10.7_52dhhvjbzvlifk77xwmrmntvea - swell-node: 4.0.10 + swell-js: 3.17.6 tslib: 2.4.0 typescript: 4.8.3 vite: 3.1.2_sass@1.54.9 @@ -836,6 +836,13 @@ packages: resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==} dev: true + /call-bind/1.0.2: + resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==} + dependencies: + function-bind: 1.1.1 + get-intrinsic: 1.1.3 + dev: true + /callsites/3.1.0: resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} engines: {node: '>=6'} @@ -1669,6 +1676,14 @@ packages: wide-align: 1.1.5 dev: true + /get-intrinsic/1.1.3: + resolution: {integrity: sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==} + dependencies: + function-bind: 1.1.1 + has: 1.0.3 + has-symbols: 1.0.3 + dev: true + /glob-parent/5.1.2: resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} engines: {node: '>= 6'} @@ -1734,6 +1749,11 @@ packages: engines: {node: '>=8'} dev: true + /has-symbols/1.0.3: + resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==} + engines: {node: '>= 0.4'} + dev: true + /has-unicode/2.0.1: resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==} dev: true @@ -1831,6 +1851,15 @@ packages: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} dev: true + /isomorphic-fetch/3.0.0: + resolution: {integrity: sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA==} + dependencies: + node-fetch: 2.6.7 + whatwg-fetch: 3.6.2 + transitivePeerDependencies: + - encoding + dev: true + /js-sdsl/4.1.4: resolution: {integrity: sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==} dev: true @@ -1875,6 +1904,10 @@ packages: p-locate: 5.0.0 dev: true + /lodash.camelcase/4.3.0: + resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==} + dev: true + /lodash.memoize/4.1.2: resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==} dev: true @@ -1883,10 +1916,18 @@ packages: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} dev: true + /lodash.snakecase/4.1.1: + resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==} + dev: true + /lodash.uniq/4.5.0: resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==} dev: true + /lodash/4.17.21: + resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} + dev: true + /lru-cache/6.0.0: resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==} engines: {node: '>=10'} @@ -2093,6 +2134,17 @@ packages: engines: {node: '>=0.10.0'} dev: true + /object-inspect/1.12.2: + resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==} + dev: true + + /object-keys-normalizer/1.0.1: + resolution: {integrity: sha512-bQk7HLUK9UxmOlniNcwaESebtOM7i8eJhTnqDQCwkukVA72XRnO0RIvs+a5EIJsH8tWEK9m96NryugxdXQ6AXg==} + dependencies: + lodash.camelcase: 4.3.0 + lodash.snakecase: 4.1.1 + dev: true + /ogl/0.0.97: resolution: {integrity: sha512-8VGNwb+BnVgg80uF2MDJGX+rLja8DPvmSsW1a3KCZO4pQF8sszRCgQVQmUA2EnoIYXtMUEztChkB0fuoFcWLxw==} dev: false @@ -2852,6 +2904,13 @@ packages: engines: {node: '>=6'} dev: true + /qs/6.10.3: + resolution: {integrity: sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==} + engines: {node: '>=0.6'} + dependencies: + side-channel: 1.0.4 + dev: true + /queue-microtask/1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} dev: true @@ -3006,6 +3065,14 @@ packages: engines: {node: '>=8'} dev: true + /side-channel/1.0.4: + resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} + dependencies: + call-bind: 1.0.2 + get-intrinsic: 1.1.3 + object-inspect: 1.12.2 + dev: true + /signal-exit/3.0.7: resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==} dev: true @@ -3224,9 +3291,17 @@ packages: stable: 0.1.8 dev: true - /swell-node/4.0.10: - resolution: {integrity: sha512-b+7jRxN/RewaSapi5Q5eKclLfgrg/LJLlHD1zm5jMKiht6/dM4O2ny/J4Sg9CI+J72t/PWiwtkLI4SGm/Npsig==} - engines: {node: '>= v12.21.0'} + /swell-js/3.17.6: + resolution: {integrity: sha512-4Fo8LWOQzn5QP+qxhpoHo8gykxdQ8noTRxNAARj4nO2wnQhmxFLjsGTjkAFxKo1orId8zM79h5sj3Cx5Xp/6qw==} + engines: {node: 14.19.1, npm: '>=8'} + dependencies: + deepmerge: 4.2.2 + isomorphic-fetch: 3.0.0 + lodash: 4.17.21 + object-keys-normalizer: 1.0.1 + qs: 6.10.3 + transitivePeerDependencies: + - encoding dev: true /tar/6.1.11: @@ -3380,6 +3455,10 @@ packages: resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} dev: true + /whatwg-fetch/3.6.2: + resolution: {integrity: sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==} + dev: true + /whatwg-url/5.0.0: resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==} dependencies: diff --git a/src/components/layouts/PosterLayout.svelte b/src/components/layouts/PosterLayout.svelte index c3c7999..f4b8b91 100644 --- a/src/components/layouts/PosterLayout.svelte +++ b/src/components/layouts/PosterLayout.svelte @@ -3,7 +3,6 @@ {#if $cartOpen} -
+
@@ -155,10 +95,10 @@
{/if} - {#if !$cartData || $cartIsUpdating} + {#if (!$cartData && $cartData !== 'null') || $cartIsUpdating}

Updating…

diff --git a/src/routes/api/swell/+server.ts b/src/routes/api/swell/+server.ts deleted file mode 100644 index 94263f6..0000000 --- a/src/routes/api/swell/+server.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { error } from '@sveltejs/kit' -import type { RequestHandler } from './$types' -import * as swell from '$utils/functions/swell' - - -export const POST: RequestHandler = async ({ request }) => { - try { - const body = await request.json() - const { action, cartId, productId } = body - let result = {} - - if (body) { - switch (action) { - case 'getProducts': { - result = await swell.getProducts(body.category) - break - } - case 'getProduct': { - result = await swell.getProduct(productId) - break - } - case 'createCart': { - result = await swell.createCart() - break - } - case 'fetchCart': { - result = await swell.fetchCart(cartId) - break - } - case 'addToCart': { - result = await swell.addToCart(cartId, productId, body.quantity) - break - } - case 'updateCartItem': { - result = await swell.updateCartItem(cartId, productId, body.quantity) - break - } - case 'removeCartItem': { - result = await swell.removeCartItem(cartId, productId) - break - } - default: break - } - - return new Response(JSON.stringify({ - ...result - })) - } - } catch (err) { - throw error(500, err.message || `Can't fetch query`) - } -} \ No newline at end of file diff --git a/src/routes/shop/+layout.server.ts b/src/routes/shop/+layout.server.ts index c9bc93f..0759a08 100644 --- a/src/routes/shop/+layout.server.ts +++ b/src/routes/shop/+layout.server.ts @@ -1,7 +1,7 @@ import { error } from '@sveltejs/kit' import type { PageServerLoad } from './$types' import { fetchAPI } from '$utils/api' -import { getProducts } from '$utils/functions/swell' +import { getProducts } from '$utils/functions/shop' export const load: PageServerLoad = async () => { try { diff --git a/src/routes/shop/+page.server.ts b/src/routes/shop/+page.server.ts index 5e480dc..85b337b 100644 --- a/src/routes/shop/+page.server.ts +++ b/src/routes/shop/+page.server.ts @@ -1,7 +1,7 @@ import { error } from '@sveltejs/kit' import type { PageServerLoad } from './$types' import { fetchAPI } from '$utils/api' -import { getProduct } from '$utils/functions/swell' +import { getProduct } from '$utils/functions/shop' import { getRandomItem } from '$utils/functions' export const load: PageServerLoad = async ({}) => { @@ -36,7 +36,7 @@ export const load: PageServerLoad = async ({}) => { }`) if (data) { - const randomPoster = getRandomItem(data.data.posters) + const randomPoster: any = getRandomItem(data.data.posters) // Fetch Swell API for product const shopProduct = await getProduct(randomPoster.product_id) diff --git a/src/routes/shop/[type]-[name]/+page.server.ts b/src/routes/shop/[type]-[name]/+page.server.ts index cea9844..b636a7e 100644 --- a/src/routes/shop/[type]-[name]/+page.server.ts +++ b/src/routes/shop/[type]-[name]/+page.server.ts @@ -1,7 +1,7 @@ import { error } from '@sveltejs/kit' import type { PageServerLoad } from './$types' import { fetchAPI } from '$utils/api' -import { getProduct } from '$utils/functions/swell' +import { getProduct } from '$utils/functions/shop' export const load: PageServerLoad = async ({ params }) => { try { diff --git a/src/utils/functions/shop.ts b/src/utils/functions/shop.ts index e705b79..7757f5c 100644 --- a/src/utils/functions/shop.ts +++ b/src/utils/functions/shop.ts @@ -1,34 +1,99 @@ +import swell from 'swell-js' import { addNotification } from '$utils/functions/notifications' import { cartData } from '$utils/stores/shop' +import { PUBLIC_SWELL_STORE_ID, PUBLIC_SWELL_API_PUBLIC_TOKEN } from '$env/static/public' +// Init Swell +export const initSwell = () => { + swell.init(PUBLIC_SWELL_STORE_ID, PUBLIC_SWELL_API_PUBLIC_TOKEN) +} + + +/** + * Get current cart + */ +export const getCart = async () => { + const cart = await swell.cart.get() + + if (cart) { + return cart + } +} + /** * Add a product to a cart */ -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, - productId: product.id, - quantity, - }) +export const addToCart = async (product: any, quantity: number = 1) => { + const updatedCart = await swell.cart.addItem({ + product_id: product.id, + quantity, + }) + + if (updatedCart) { + // Update cart data + cartData.set(updatedCart) + + // Show notification + addNotification({ + title: 'Added to cart', + name: `${product.name} - x1`, + image: product.images[0].file.url, }) + } +} - if (updatedCart.ok) { - const newCart = await updatedCart.json() - cartData.set(newCart) +/** + * Update Cart item + */ +export const updateCartItem = async (productId: string, quantity: number) => { + const updatedCart = await swell.cart.updateItem(productId, { + quantity, + }) - // Show notification - addNotification({ - title: 'Added to cart', - name: `${product.name} - x1`, - image: product.images[0].file.url, - }) - } - } else { - console.log('No active cart') + if (updatedCart) { + return updatedCart + } +} + +/** + * Remove Cart item + */ +export const removeCartItem = async (productId: string) => { + const updatedCart = await swell.cart.removeItem(productId) + + if (updatedCart) { + return updatedCart + } +} + + + +/** + * Fetch products + */ +export const getProducts = async (category?: string, limit: number = 25, page: number = 1) => { + const products = await swell.products.list({ + where: { + active: true, + }, + category, + limit, + page + }) + + if (products) { + return products + } +} + +/** + * Retrieve a product + */ +export const getProduct = async (id: string) => { + const product = await swell.products.get(id) + + if (product) { + return product } } \ No newline at end of file diff --git a/src/utils/functions/swell.ts b/src/utils/functions/swell.ts deleted file mode 100644 index 837abc9..0000000 --- a/src/utils/functions/swell.ts +++ /dev/null @@ -1,157 +0,0 @@ -import swell from 'swell-node' -import { SWELL_API_TOKEN, SWELL_STORE_ID } from '$env/static/private' - -// Init Swell -swell.init(SWELL_STORE_ID, SWELL_API_TOKEN) - - - -/** - * Fetch products - */ -export const getProducts = async (category?: string, limit: number = 25, page: number = 1) => { - const products = await swell.get('/products', { - where: { - active: true, - }, - category, - limit, - page - }) - - if (products) { - return products - } -} - - -/** - * Retrieve a product - */ -export const getProduct = async (id: string) => { - const product = await swell.get('/products/{id}', { - id - }) - - if (product) { - return product - } -} - - -/** - * Create a cart - */ -export const createCart = async () => { - const cart = await swell.post('/carts') - - if (cart) { - return cart - } -} - - -/** - * Retrieve cart - */ -export const fetchCart = async (id: string) => { - const cart = await swell.get('/carts/{id}', { - id, - expand: [ - 'items.product', - 'items.variant', - ] - }) - - if (cart) { - return cart - } -} - - -/** - * Add product to cart - */ -export const addToCart = async (cartId: string, productId: string, quantity: number) => { - // Fetch current cart data - const currentCart = await fetchCart(cartId) - - // Updated cart with new items - const updatedCart = await swell.put('/carts/{id}', { - id: cartId, - items: [ - ...currentCart.items || [], - { - product_id: productId, - quantity, - } - ], - }) - if (updatedCart) { - // Fetch latest cart with updates - const cart = await fetchCart(cartId) - if (cart) { - return cart - } - } -} - - -/** - * Update cart item - */ -export const updateCartItem = async (cartId: string, productId: string, quantity: number) => { - // Fetch current cart data - const currentCart = await fetchCart(cartId) - - // Updated items with replacing new item quantity - const updatedCartItems = currentCart.items.map((item: any) => { - // Replace item quantity with selected one - if (item.id === productId) { - item.quantity = quantity - } - return item - }) - - const updatedCart = await swell.put('/carts/{id}', { - id: cartId, - $set: { - items: updatedCartItems, - } - }) - if (updatedCart) { - // Fetch latest cart with updates - const cart = await fetchCart(cartId) - if (cart) { - return cart - } - } -} - - -/** - * Remove cart item - */ -export const removeCartItem = async (cartId: string, productId: string) => { - // Fetch current cart data - const currentCart = await fetchCart(cartId) - - // Updated items and remove selected item - const updatedCartItems = [...currentCart.items.filter((item: any) => { - return item.id !== productId - })] - - const updatedCart = await swell.put('/carts/{id}', { - id: cartId, - $set: { - items: updatedCartItems, - } - }) - if (updatedCart) { - // Fetch latest cart with updates - const cart = await fetchCart(cartId) - if (cart) { - return cart - } - } -} \ No newline at end of file diff --git a/src/utils/stores/shop.ts b/src/utils/stores/shop.ts index 7b7d636..a6c7272 100644 --- a/src/utils/stores/shop.ts +++ b/src/utils/stores/shop.ts @@ -6,6 +6,9 @@ import { writable, derived, type Writable, type Readable } from 'svelte/store' */ export const shopCurrentProductSlug: Writable = writable(null) +/** Notifications */ +export const cartNotifications: Writable = writable([]) + /** * Cart @@ -13,17 +16,6 @@ export const shopCurrentProductSlug: Writable = writable(null) /** Cart open state */ export const cartOpen: Writable = writable(false) -/** Cart open state */ -export const cartId: Writable = writable(null) - -// Write to localStorage when changing cartId -if (typeof localStorage !== 'undefined') { - const id = localStorage.getItem('cartId') - id && cartId.set(id ? id : null) - - cartId.subscribe(value => localStorage.setItem('cartId', value)) -} - /** Raw Cart data */ export const cartData: Writable = writable(null) @@ -33,10 +25,4 @@ export const cartIsUpdating: Writable = writable(false) /** Amount of products present in cart */ export const cartAmount: Readable = derived(cartData, ($cart) => { return $cart && $cart.item_quantity > 0 ? $cart.item_quantity : 0 -}) - - -/** - * Notifications - */ -export const cartNotifications: Writable = writable([]) \ No newline at end of file +}) \ No newline at end of file