-
Notifications
You must be signed in to change notification settings - Fork 281
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6e23e6d
commit d463bae
Showing
12 changed files
with
799 additions
and
287 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
119 changes: 119 additions & 0 deletions
119
packages/hydrogen-react/src/getProductOptions.example.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| import React from 'react'; | ||
| import {getProductOptions} from '@shopify/hydrogen-react'; | ||
|
|
||
| // Make sure you are querying for the following fields: | ||
| // - product.handle | ||
| // - product.encodedVariantExistence | ||
| // - product.encodedVariantAvailability | ||
| // - product.options.name | ||
| // - product.options.optionValues.name | ||
| // - product.options.optionValues.firstSelectableVariant | ||
| // - product.selectedOrFirstAvailableVariant | ||
| // - product.adjacentVariants | ||
| // | ||
| // For any fields that are ProductVariant type, make sure to query for: | ||
| // - variant.product.handle | ||
| // - variant.selectedOptions.name | ||
| // - variant.selectedOptions.value | ||
|
|
||
| export default function ProductForm() { | ||
| const product = { | ||
| /* Result from querying the SFAPI for a product */ | ||
| }; | ||
|
|
||
| const productOptions = getProductOptions(product); | ||
|
|
||
| return ( | ||
| <> | ||
| {productOptions.map((option) => ( | ||
| <div key={option.name}> | ||
| <h5>{option.name}</h5> | ||
| <div> | ||
| {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 ( | ||
| <a | ||
| key={option.name + name} | ||
| href={`/products/${handle}?${variantUriQuery}`} | ||
| style={{ | ||
| border: selected | ||
| ? '1px solid black' | ||
| : '1px solid transparent', | ||
| opacity: available ? 1 : 0.3, | ||
| }} | ||
| > | ||
| <ProductOptionSwatch swatch={swatch} name={name} /> | ||
| </a> | ||
| ); | ||
| } else { | ||
| // SEO - When the variant is an | ||
| // update to the search param, | ||
| // render it as a button with | ||
| // javascript navigating to | ||
| // the variant so that SEO bots | ||
| // do not index these as | ||
| // duplicated links | ||
| return ( | ||
| <button | ||
| type="button" | ||
| key={option.name + name} | ||
| style={{ | ||
| border: selected | ||
| ? '1px solid black' | ||
| : '1px solid transparent', | ||
| opacity: available ? 1 : 0.3, | ||
| }} | ||
| disabled={!exists} | ||
| onClick={() => { | ||
| if (!selected) { | ||
| // Navigate to `?${variantUriQuery}` | ||
| } | ||
| }} | ||
| > | ||
| <ProductOptionSwatch swatch={swatch} name={name} /> | ||
| </button> | ||
| ); | ||
| } | ||
| })} | ||
| </div> | ||
| <br /> | ||
| </div> | ||
| ))} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function ProductOptionSwatch({swatch, name}) { | ||
| const image = swatch?.image?.previewImage?.url; | ||
| const color = swatch?.color; | ||
|
|
||
| if (!image && !color) return name; | ||
|
|
||
| return ( | ||
| <div | ||
| aria-label={name} | ||
| className="product-option-label-swatch" | ||
| style={{ | ||
| backgroundColor: color || 'transparent', | ||
| }} | ||
| > | ||
| {!!image && <img src={image} alt={name} />} | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.