Choose a version:

getSelectedProductOptions

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[]

Examples

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

}

Examples

Example code

JavaScript

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

TypeScript

import {getSelectedProductOptions} from '@shopify/hydrogen';
import {type LoaderFunctionArgs} from 'react-router';

export async function loader({request, params, context}: LoaderFunctionArgs) {
  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

Was this page helpful?

Anchor to PropsProps(requestrequest)

Anchor to Props-parametersParameters

Anchor to Props-returnsReturns

Anchor to RelatedRelated

Anchor to Props
Props(
request
)