diff --git a/commerce.config.json b/commerce.config.json index 01d7fa69e..bef7db222 100644 --- a/commerce.config.json +++ b/commerce.config.json @@ -1,3 +1,7 @@ { - "provider": "shopify" + "provider": "bigcommerce", + "features": { + "wishlist": true, + "customCheckout": false + } } diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index c0fdd32d2..05e7a1cee 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -1,23 +1,20 @@ import cn from 'classnames' import Image from 'next/image' import { NextSeo } from 'next-seo' -import { FC, useState } from 'react' +import { FC, useEffect, useState } from 'react' import s from './ProductView.module.css' - import { Swatch, ProductSlider } from '@components/product' import { Button, Container, Text, useUI } from '@components/ui' - import type { Product } from '@commerce/types' import usePrice from '@framework/product/use-price' import { useAddItem } from '@framework/cart' - import { getVariant, SelectedOptions } from '../helpers' import WishlistButton from '@components/wishlist/WishlistButton' interface Props { - className?: string children?: any product: Product + className?: string } const ProductView: FC = ({ product }) => { @@ -29,12 +26,18 @@ const ProductView: FC = ({ product }) => { }) const { openSidebar } = useUI() const [loading, setLoading] = useState(false) - const [choices, setChoices] = useState({ - size: null, - color: null, - }) + const [choices, setChoices] = useState({}) + + useEffect(() => { + // Selects the default option + product.variants[0].options?.forEach((v) => { + setChoices((choices) => ({ + ...choices, + [v.displayName.toLowerCase()]: v.values[0].label.toLowerCase(), + })) + }) + }, []) - // Select the correct variant based on choices const variant = getVariant(product, choices) const addToCart = async () => { @@ -143,7 +146,6 @@ const ProductView: FC = ({ product }) => { className={s.button} onClick={addToCart} loading={loading} - disabled={!variant && product.options.length > 0} > Add to Cart diff --git a/components/product/helpers.ts b/components/product/helpers.ts index 44bdeca97..f8ab538ba 100644 --- a/components/product/helpers.ts +++ b/components/product/helpers.ts @@ -1,9 +1,5 @@ import type { Product } from '@commerce/types' - -export type SelectedOptions = { - size: string | null - color: string | null -} +export type SelectedOptions = Record export function getVariant(product: Product, opts: SelectedOptions) { const variant = product.variants.find((variant) => { diff --git a/config/seo.json b/config/seo.json index 899c09148..82520cf9b 100644 --- a/config/seo.json +++ b/config/seo.json @@ -11,7 +11,7 @@ "site_name": "Next.js Commerce", "images": [ { - "url": "https://shopify.demo.vercel.store/card.png", + "url": "/card.png", "width": 800, "height": 600, "alt": "Next.js Commerce" diff --git a/framework/shopify/utils/normalize.ts b/framework/shopify/utils/normalize.ts index 5f11fe7c6..5a8e7548b 100644 --- a/framework/shopify/utils/normalize.ts +++ b/framework/shopify/utils/normalize.ts @@ -99,12 +99,11 @@ export function normalizeProduct(productNode: ShopifyProduct): Product { price: money(priceRange?.minVariantPrice), images: normalizeProductImages(images), variants: variants ? normalizeProductVariants(variants) : [], - options: - options - ?.filter(({ name, values }) => { - return name !== 'Title' && values !== ['Default Title'] - }) - .map((o) => normalizeProductOption(o)) ?? [], + options: options + ? options + .filter((o) => o.name !== 'Title') // By default Shopify adds a 'Title' name when there's only one option. We don't need it. https://community.shopify.com/c/Shopify-APIs-SDKs/Adding-new-product-variant-is-automatically-adding-quot-Default/td-p/358095 + .map((o) => normalizeProductOption(o)) + : [], ...rest, } @@ -152,12 +151,13 @@ function normalizeLineItem({ path: '', discounts: [], options: - variant?.title !== 'Default Title' - ? [ + // By default Shopify adds a default variant with default names, we're removing it. https://community.shopify.com/c/Shopify-APIs-SDKs/Adding-new-product-variant-is-automatically-adding-quot-Default/td-p/358095 + variant?.title == 'Default Title' + ? [] + : [ { value: variant?.title, }, - ] - : [], + ], } } diff --git a/tsconfig.json b/tsconfig.json index e20f37099..9e712fb18 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,8 +22,8 @@ "@components/*": ["components/*"], "@commerce": ["framework/commerce"], "@commerce/*": ["framework/commerce/*"], - "@framework": ["framework/shopify"], - "@framework/*": ["framework/shopify/*"] + "@framework": ["framework/bigcommerce"], + "@framework/*": ["framework/bigcommerce/*"] } }, "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],