This commit is contained in:
Samantha Kellow 2023-11-24 09:21:59 +00:00
parent b349798017
commit 09e1cf2ef2
2 changed files with 4 additions and 4 deletions

View File

@ -1,20 +1,20 @@
'use client' 'use client'
import Price from "components/price"; import Price from "components/price";
import { Product } from "lib/shopify/types"; import { Product, ProductVariant } from "lib/shopify/types";
import { useState } from "react"; import { useState } from "react";
import { VariantSelector } from "./variant-selector"; import { VariantSelector } from "./variant-selector";
export function VariantDetails({ product }: { product: Product }) { export function VariantDetails({ product }: { product: Product }) {
const filterDeterminedOptions = product.options.filter(option => option.name !== 'Wrap'); const filterDeterminedOptions = product.options.filter(option => option.name !== 'Wrap');
const [selectedVariant, setSelectedVariant] = useState(product.variants[0]); const [selectedVariant, setSelectedVariant] = useState<Partial<ProductVariant> | undefined>(product.variants[0]);
return ( return (
<> <>
<div className='flex flex-col border-b mb-6 dark:border-neutral-700'> <div className='flex flex-col border-b mb-6 dark:border-neutral-700'>
<div className="place-self-end mr-auto w-auto rounded-full bg-gray-600 p-2 text-sm text-white mb-6"> <div className="place-self-end mr-auto w-auto rounded-full bg-gray-600 p-2 text-sm text-white mb-6">
<Price <Price
amount={selectedVariant?.price.amount || product.variants[0]!.price.amount} amount={selectedVariant?.price?.amount || product.variants[0]!.price.amount}
currencyCode={product.priceRange.maxVariantPrice.currencyCode} currencyCode={product.priceRange.maxVariantPrice.currencyCode}
/> />
</div> </div>

View File

@ -26,7 +26,7 @@ export function VariantSelector({
}: { }: {
options: ProductOption[]; options: ProductOption[];
variants: ProductVariant[]; variants: ProductVariant[];
setSelectedVariant: (newVariant: OptimizedVariant | undefined) => void, setSelectedVariant: (value: OptimizedVariant | undefined) => void,
}) { }) {
const pathname = usePathname(); const pathname = usePathname();
const currentParams = useSearchParams(); const currentParams = useSearchParams();