{productOptions.map((option) => (
))}
{
open('cart');
}}
lines={
selectedVariant
? [
{
merchandiseId: selectedVariant.id,
quantity: 1,
selectedVariant,
},
]
: []
}
>
{selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
);
}
function ProductOptionSwatch({
swatch,
name,
}: {
swatch?: Maybe{option.name}
{option.optionValues.map((value) => {
const {
name,
handle,
variantUriQuery,
selected,
available,
exists,
isDifferentProduct,
swatch,
} = value;
if (isDifferentProduct) {
// SEO
// When the variant is a combined listing child product
// that leads to a different url, we need to render it
// as an anchor tag
return (
{!!image && 
}
);
}
```
9. Update `app.css`
```diff
+ /*
+ * --------------------------------------------------
+ * Non anchor links
+ * --------------------------------------------------
+ */
+ .link:hover {
+ text-decoration: underline;
+ cursor: pointer;
+ }
...
- .product-options-item {
+ .product-options-item,
+ .product-options-item:disabled {
+ padding: 0.25rem 0.5rem;
+ background-color: transparent;
+ font-size: 1rem;
+ font-family: inherit;
+ }
+ .product-option-label-swatch {
+ width: 1.25rem;
+ height: 1.25rem;
+ margin: 0.25rem 0;
+ }
+ .product-option-label-swatch img {
+ width: 100%;
+ }
```
10. Update `lib/variants.ts`
Make `useVariantUrl` and `getVariantUrl` flexible to supplying a selected option param
```diff
export function useVariantUrl(
handle: string,
- selectedOptions: SelectedOption[],
+ selectedOptions?: SelectedOption[],
) {
const {pathname} = useLocation();
return useMemo(() => {
return getVariantUrl({
handle,
pathname,
searchParams: new URLSearchParams(),
selectedOptions,
});
}, [handle, selectedOptions, pathname]);
}
export function getVariantUrl({
handle,
pathname,
searchParams,
selectedOptions,
}: {
handle: string;
pathname: string;
searchParams: URLSearchParams;
- selectedOptions: SelectedOption[];
+ selectedOptions?: SelectedOption[],
}) {
const match = /(\/[a-zA-Z]{2}-[a-zA-Z]{2}\/)/g.exec(pathname);
const isLocalePathname = match && match.length > 0;
const path = isLocalePathname
? `${match![0]}products/${handle}`
: `/products/${handle}`;
- selectedOptions.forEach((option) => {
+ selectedOptions?.forEach((option) => {
searchParams.set(option.name, option.value);
});
```
11. Update `routes/collections.$handle.tsx`
We no longer need to query for the variants since product route can efficiently
obtain the first available variants. Update the code to reflect that:
```diff
const PRODUCT_ITEM_FRAGMENT = `#graphql
fragment MoneyProductItem on MoneyV2 {
amount
currencyCode
}
fragment ProductItem on Product {
id
handle
title
featuredImage {
id
altText
url
width
height
}
priceRange {
minVariantPrice {
...MoneyProductItem
}
maxVariantPrice {
...MoneyProductItem
}
}
- variants(first: 1) {
- nodes {
- selectedOptions {
- name
- value
- }
- }
- }
}
` as const;
```
and remove the variant reference
```diff
function ProductItem({
product,
loading,
}: {
product: ProductItemFragment;
loading?: 'eager' | 'lazy';
}) {
- const variant = product.variants.nodes[0];
- const variantUrl = useVariantUrl(product.handle, variant.selectedOptions);
+ const variantUrl = useVariantUrl(product.handle);
return (
```
12. Update `routes/collections.all.tsx`
Same reasoning as `collections.$handle.tsx`
```diff
const PRODUCT_ITEM_FRAGMENT = `#graphql
fragment MoneyProductItem on MoneyV2 {
amount
currencyCode
}
fragment ProductItem on Product {
id
handle
title
featuredImage {
id
altText
url
width
height
}
priceRange {
minVariantPrice {
...MoneyProductItem
}
maxVariantPrice {
...MoneyProductItem
}
}
- variants(first: 1) {
- nodes {
- selectedOptions {
- name
- value
- }
- }
- }
}
` as const;
```
and remove the variant reference
```diff
function ProductItem({
product,
loading,
}: {
product: ProductItemFragment;
loading?: 'eager' | 'lazy';
}) {
- const variant = product.variants.nodes[0];
- const variantUrl = useVariantUrl(product.handle, variant.selectedOptions);
+ const variantUrl = useVariantUrl(product.handle);
return (
```
13. Update `routes/search.tsx`
Instead of using the first variant, use `selectedOrFirstAvailableVariant`
```diff
const SEARCH_PRODUCT_FRAGMENT = `#graphql
fragment SearchProduct on Product {
__typename
handle
id
publishedAt
title
trackingParameters
vendor
- variants(first: 1) {
- nodes {
+ selectedOrFirstAvailableVariant(
+ selectedOptions: []
+ ignoreUnknownOptions: true
+ caseInsensitiveMatch: true
+ ) {
id
image {
url
altText
width
height
}
price {
amount
currencyCode
}
compareAtPrice {
amount
currencyCode
}
selectedOptions {
name
value
}
product {
handle
title
}
}
- }
}
` as const;
```
```diff
const PREDICTIVE_SEARCH_PRODUCT_FRAGMENT = `#graphql
fragment PredictiveProduct on Product {
__typename
id
title
handle
trackingParameters
- variants(first: 1) {
- nodes {
+ selectedOrFirstAvailableVariant(
+ selectedOptions: []
+ ignoreUnknownOptions: true
+ caseInsensitiveMatch: true
+ ) {
id
image {
url
altText
width
height
}
price {
amount
currencyCode
}
}
- }
}
```
14. Update `components/SearchResults.tsx`
```diff
function SearchResultsProducts({
term,
products,
}: PartialSearchResult<'products'>) {
if (!products?.nodes.length) {
return null;
}
return (
Products
- {product.variants.nodes[0].image && (
+ {image && (
);
});
```
15. Update `components/SearchResultsPredictive.tsx`
```diff
function SearchResultsPredictiveProducts({
term,
products,
closeSearch,
}: PartialPredictiveSearchResult<'products'>) {
if (!products.length) return null;
return (
{product.title}
-Products
-
{products.map((product) => {
const productUrl = urlWithTrackingParams({
baseUrl: `/products/${product.handle}`,
trackingParams: product.trackingParameters,
term: term.current,
});
+ const price = product?.selectedOrFirstAvailableVariant?.price;
- const image = product?.variants?.nodes?.[0].image;
+ const image = product?.selectedOrFirstAvailableVariant?.image;
return (
-
{image && (
)} {product.title}
- {product?.variants?.nodes?.[0].price && ( + {price && ( -+ )}
);
})}
-
- Error
- ... -
+
);
}
```
- Refactor the cart and product form components ([#2132](https://github.com/Shopify/hydrogen/pull/2132)) by [@blittle](https://github.com/blittle)
- Remove manual setting of session in headers and recommend setting it in server after response is created. ([#2137](https://github.com/Shopify/hydrogen/pull/2137)) by [@michenly](https://github.com/michenly)
Step 1: Add `isPending` implementation in session
```diff
// in app/lib/session.ts
export class AppSession implements HydrogenSession {
+ public isPending = false;
get unset() {
+ this.isPending = true;
return this.#session.unset;
}
get set() {
+ this.isPending = true;
return this.#session.set;
}
commit() {
+ this.isPending = false;
return this.#sessionStorage.commitSession(this.#session);
}
}
```
Step 2: update response header if `session.isPending` is true
```diff
// in server.ts
export default {
async fetch(request: Request): Promise