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.

Request
required

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