get Selected Product Optionscomponent
component
The returns the selected options from the Request search parameters. The selected options can then be easily passed to your GraphQL query with
.
Anchor to PropsProps( )
Props( )
Anchor to Props-parametersParameters
Anchor to request
request
Request
required
Anchor to Props-returnsReturns
SelectedOptionInput[]
Was this section helpful?
Example code
import {getSelectedProductOptions} from '@shopify/hydrogen';
export async function loader({request, params, context}) {
const selectedOptions = getSelectedProductOptions(request);
const {product} = await context.storefront.query(PRODUCT_QUERY, {
variables: {
handle: params.productHandle,
selectedOptions,
},
});
return {product};
}
const PRODUCT_QUERY = `#graphql
query Product($handle: String!, $selectedOptions: [SelectedOptionInput!]!) {
product(handle: $handle) {
title
description
options {
name
values
}
selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
...ProductVariantFragment
}
}
}
`;