Skip to main content

getSelectedProductOptions
component

The getSelectedProductOptions returns the selected options from the Request search parameters. The selected options can then be easily passed to your GraphQL query with variantBySelectedOptions.

Anchor to Props
Props(
request
)

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
}
}
}
`;

Anchor to relatedRelated

VariantSelector