diff --git a/.changeset/selfish-frogs-change.md b/.changeset/selfish-frogs-change.md new file mode 100644 index 000000000..3eb55af3b --- /dev/null +++ b/.changeset/selfish-frogs-change.md @@ -0,0 +1,7 @@ +--- +'skeleton': patch +'@shopify/hydrogen': patch +'@shopify/create-hydrogen': patch +--- + +createCartHandler supplies updateGiftCardCodes method diff --git a/docs/shopify-dev/analytics-setup/js/app/lib/fragments.js b/docs/shopify-dev/analytics-setup/js/app/lib/fragments.js index 3b4858c8e..82ac2da58 100644 --- a/docs/shopify-dev/analytics-setup/js/app/lib/fragments.js +++ b/docs/shopify-dev/analytics-setup/js/app/lib/fragments.js @@ -60,6 +60,12 @@ export const CART_QUERY_FRAGMENT = `#graphql updatedAt // [END query] id + appliedGiftCards { + lastCharacters + amountUsed { + ...Money + } + } checkoutUrl totalQuantity buyerIdentity { diff --git a/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx b/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx index aa0426ede..557495ed6 100644 --- a/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx +++ b/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx @@ -51,6 +51,18 @@ export async function action({request, context}) { result = await cart.updateDiscountCodes(discountCodes); break; } + case CartForm.ACTIONS.GiftCardCodesUpdate: { + const formGiftCardCode = inputs.giftCardCode; + + // User inputted gift card code + const giftCardCodes = formGiftCardCode ? [formGiftCardCode] : []; + + // Combine gift card codes already applied on cart + giftCardCodes.push(...inputs.giftCardCodes); + + result = await cart.updateGiftCardCodes(giftCardCodes); + break; + } case CartForm.ACTIONS.BuyerIdentityUpdate: { result = await cart.updateBuyerIdentity({ ...inputs.buyerIdentity, diff --git a/docs/shopify-dev/analytics-setup/ts/app/lib/fragments.ts b/docs/shopify-dev/analytics-setup/ts/app/lib/fragments.ts index 2050b009b..3265ccc96 100644 --- a/docs/shopify-dev/analytics-setup/ts/app/lib/fragments.ts +++ b/docs/shopify-dev/analytics-setup/ts/app/lib/fragments.ts @@ -60,6 +60,12 @@ export const CART_QUERY_FRAGMENT = `#graphql updatedAt // [END query] id + appliedGiftCards { + lastCharacters + amountUsed { + ...Money + } + } checkoutUrl totalQuantity buyerIdentity { diff --git a/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx b/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx index 81e6f1e4c..c480bd0e0 100644 --- a/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx +++ b/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx @@ -48,6 +48,20 @@ export async function action({request, context}: ActionFunctionArgs) { result = await cart.updateDiscountCodes(discountCodes); break; } + case CartForm.ACTIONS.GiftCardCodesUpdate: { + const formGiftCardCode = inputs.giftCardCode; + + // User inputted gift card code + const giftCardCodes = ( + formGiftCardCode ? [formGiftCardCode] : [] + ) as string[]; + + // Combine gift card codes already applied on cart + giftCardCodes.push(...inputs.giftCardCodes); + + result = await cart.updateGiftCardCodes(giftCardCodes); + break; + } case CartForm.ACTIONS.BuyerIdentityUpdate: { result = await cart.updateBuyerIdentity({ ...inputs.buyerIdentity, diff --git a/examples/b2b/app/lib/fragments.ts b/examples/b2b/app/lib/fragments.ts index 590c6b3cf..a838ec016 100644 --- a/examples/b2b/app/lib/fragments.ts +++ b/examples/b2b/app/lib/fragments.ts @@ -76,6 +76,12 @@ export const CART_QUERY_FRAGMENT = `#graphql fragment CartApiQuery on Cart { updatedAt id + appliedGiftCards { + lastCharacters + amountUsed { + ...Money + } + } checkoutUrl totalQuantity buyerIdentity { diff --git a/examples/b2b/storefrontapi.generated.d.ts b/examples/b2b/storefrontapi.generated.d.ts index 4befcea1d..28d66809e 100644 --- a/examples/b2b/storefrontapi.generated.d.ts +++ b/examples/b2b/storefrontapi.generated.d.ts @@ -53,6 +53,11 @@ export type CartApiQueryFragment = Pick< StorefrontAPI.Cart, 'updatedAt' | 'id' | 'checkoutUrl' | 'totalQuantity' | 'note' > & { + appliedGiftCards: Array< + Pick & { + amountUsed: Pick; + } + >; buyerIdentity: Pick< StorefrontAPI.CartBuyerIdentity, 'countryCode' | 'email' | 'phone' diff --git a/examples/custom-cart-method/app/lib/fragments.ts b/examples/custom-cart-method/app/lib/fragments.ts index 8eefecd74..9c7f31eb9 100644 --- a/examples/custom-cart-method/app/lib/fragments.ts +++ b/examples/custom-cart-method/app/lib/fragments.ts @@ -66,6 +66,12 @@ export const CART_QUERY_FRAGMENT = `#graphql fragment CartApiQuery on Cart { updatedAt id + appliedGiftCards { + lastCharacters + amountUsed { + ...Money + } + } checkoutUrl totalQuantity buyerIdentity { diff --git a/examples/custom-cart-method/app/routes/cart.tsx b/examples/custom-cart-method/app/routes/cart.tsx index f2ab4eb33..70399a4f8 100644 --- a/examples/custom-cart-method/app/routes/cart.tsx +++ b/examples/custom-cart-method/app/routes/cart.tsx @@ -70,6 +70,20 @@ export async function action({request, context}: ActionFunctionArgs) { result = await cart.updateDiscountCodes(discountCodes); break; } + case CartForm.ACTIONS.GiftCardCodesUpdate: { + const formGiftCardCode = inputs.giftCardCode; + + // User inputted gift card code + const giftCardCodes = ( + formGiftCardCode ? [formGiftCardCode] : [] + ) as string[]; + + // Combine gift card codes already applied on cart + giftCardCodes.push(...inputs.giftCardCodes); + + result = await cart.updateGiftCardCodes(giftCardCodes); + break; + } case CartForm.ACTIONS.BuyerIdentityUpdate: { result = await cart.updateBuyerIdentity({ ...inputs.buyerIdentity, diff --git a/examples/custom-cart-method/storefrontapi.generated.d.ts b/examples/custom-cart-method/storefrontapi.generated.d.ts index 062db7ca5..6d4cee96d 100644 --- a/examples/custom-cart-method/storefrontapi.generated.d.ts +++ b/examples/custom-cart-method/storefrontapi.generated.d.ts @@ -45,6 +45,11 @@ export type CartApiQueryFragment = Pick< StorefrontAPI.Cart, 'updatedAt' | 'id' | 'checkoutUrl' | 'totalQuantity' | 'note' > & { + appliedGiftCards: Array< + Pick & { + amountUsed: Pick; + } + >; buyerIdentity: Pick< StorefrontAPI.CartBuyerIdentity, 'countryCode' | 'email' | 'phone' diff --git a/examples/legacy-customer-account-flow/app/routes/cart.tsx b/examples/legacy-customer-account-flow/app/routes/cart.tsx index 4fc07e087..875827f6c 100644 --- a/examples/legacy-customer-account-flow/app/routes/cart.tsx +++ b/examples/legacy-customer-account-flow/app/routes/cart.tsx @@ -55,6 +55,20 @@ export async function action({request, context}: ActionFunctionArgs) { result = await cart.updateDiscountCodes(discountCodes); break; } + case CartForm.ACTIONS.GiftCardCodesUpdate: { + const formGiftCardCode = inputs.giftCardCode; + + // User inputted gift card code + const giftCardCodes = ( + formGiftCardCode ? [formGiftCardCode] : [] + ) as string[]; + + // Combine gift card codes already applied on cart + giftCardCodes.push(...inputs.giftCardCodes); + + result = await cart.updateGiftCardCodes(giftCardCodes); + break; + } case CartForm.ACTIONS.BuyerIdentityUpdate: { result = await cart.updateBuyerIdentity({ ...inputs.buyerIdentity, diff --git a/examples/legacy-customer-account-flow/storefrontapi.generated.d.ts b/examples/legacy-customer-account-flow/storefrontapi.generated.d.ts index c36eaf445..c52669406 100644 --- a/examples/legacy-customer-account-flow/storefrontapi.generated.d.ts +++ b/examples/legacy-customer-account-flow/storefrontapi.generated.d.ts @@ -72,6 +72,11 @@ export type CartApiQueryFragment = Pick< StorefrontAPI.Cart, 'updatedAt' | 'id' | 'checkoutUrl' | 'totalQuantity' | 'note' > & { + appliedGiftCards: Array< + Pick & { + amountUsed: Pick; + } + >; buyerIdentity: Pick< StorefrontAPI.CartBuyerIdentity, 'countryCode' | 'email' | 'phone' diff --git a/examples/metaobjects/storefrontapi.generated.d.ts b/examples/metaobjects/storefrontapi.generated.d.ts index e94afa5ea..dc2d3e7c2 100644 --- a/examples/metaobjects/storefrontapi.generated.d.ts +++ b/examples/metaobjects/storefrontapi.generated.d.ts @@ -72,6 +72,11 @@ export type CartApiQueryFragment = Pick< StorefrontAPI.Cart, 'updatedAt' | 'id' | 'checkoutUrl' | 'totalQuantity' | 'note' > & { + appliedGiftCards: Array< + Pick & { + amountUsed: Pick; + } + >; buyerIdentity: Pick< StorefrontAPI.CartBuyerIdentity, 'countryCode' | 'email' | 'phone' diff --git a/examples/multipass/app/routes/cart.tsx b/examples/multipass/app/routes/cart.tsx index 831ef58ef..aa1ddcda8 100644 --- a/examples/multipass/app/routes/cart.tsx +++ b/examples/multipass/app/routes/cart.tsx @@ -55,6 +55,20 @@ export async function action({request, context}: ActionFunctionArgs) { result = await cart.updateDiscountCodes(discountCodes); break; } + case CartForm.ACTIONS.GiftCardCodesUpdate: { + const formGiftCardCode = inputs.giftCardCode; + + // User inputted gift card code + const giftCardCodes = ( + formGiftCardCode ? [formGiftCardCode] : [] + ) as string[]; + + // Combine gift card codes already applied on cart + giftCardCodes.push(...inputs.giftCardCodes); + + result = await cart.updateGiftCardCodes(giftCardCodes); + break; + } case CartForm.ACTIONS.BuyerIdentityUpdate: { result = await cart.updateBuyerIdentity({ ...inputs.buyerIdentity, diff --git a/examples/multipass/storefrontapi.generated.d.ts b/examples/multipass/storefrontapi.generated.d.ts index 1af920e19..90e3c820e 100644 --- a/examples/multipass/storefrontapi.generated.d.ts +++ b/examples/multipass/storefrontapi.generated.d.ts @@ -72,6 +72,11 @@ export type CartApiQueryFragment = Pick< StorefrontAPI.Cart, 'updatedAt' | 'id' | 'checkoutUrl' | 'totalQuantity' | 'note' > & { + appliedGiftCards: Array< + Pick & { + amountUsed: Pick; + } + >; buyerIdentity: Pick< StorefrontAPI.CartBuyerIdentity, 'countryCode' | 'email' | 'phone' diff --git a/examples/subscriptions/app/lib/fragments.ts b/examples/subscriptions/app/lib/fragments.ts index 15ebfcba5..d16533ad0 100644 --- a/examples/subscriptions/app/lib/fragments.ts +++ b/examples/subscriptions/app/lib/fragments.ts @@ -67,6 +67,12 @@ export const CART_QUERY_FRAGMENT = `#graphql fragment CartApiQuery on Cart { updatedAt id + appliedGiftCards { + lastCharacters + amountUsed { + ...Money + } + } checkoutUrl totalQuantity buyerIdentity { diff --git a/examples/subscriptions/storefrontapi.generated.d.ts b/examples/subscriptions/storefrontapi.generated.d.ts index 3b76d1eee..c989df380 100644 --- a/examples/subscriptions/storefrontapi.generated.d.ts +++ b/examples/subscriptions/storefrontapi.generated.d.ts @@ -45,6 +45,11 @@ export type CartApiQueryFragment = Pick< StorefrontAPI.Cart, 'updatedAt' | 'id' | 'checkoutUrl' | 'totalQuantity' | 'note' > & { + appliedGiftCards: Array< + Pick & { + amountUsed: Pick; + } + >; buyerIdentity: Pick< StorefrontAPI.CartBuyerIdentity, 'countryCode' | 'email' | 'phone' diff --git a/package-lock.json b/package-lock.json index 421006463..b17b093c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -98,7 +98,7 @@ "@remix-run/node": "^2.10.1", "@remix-run/react": "^2.10.1", "@remix-run/server-runtime": "^2.10.1", - "@shopify/hydrogen": "2024.7.3", + "@shopify/hydrogen": "2024.7.4", "compression": "^1.7.4", "cross-env": "^7.0.3", "express": "^4.19.2", @@ -29654,7 +29654,7 @@ }, "packages/cli": { "name": "@shopify/cli-hydrogen", - "version": "8.4.0", + "version": "8.4.1", "license": "MIT", "dependencies": { "@ast-grep/napi": "0.11.0", @@ -29903,7 +29903,7 @@ }, "packages/create-hydrogen": { "name": "@shopify/create-hydrogen", - "version": "5.0.3", + "version": "5.0.4", "license": "MIT", "dependencies": { "@ast-grep/napi": "0.11.0" @@ -29917,7 +29917,7 @@ }, "packages/hydrogen": { "name": "@shopify/hydrogen", - "version": "2024.7.3", + "version": "2024.7.4", "license": "MIT", "dependencies": { "@shopify/hydrogen-react": "2024.7.2", @@ -32326,11 +32326,11 @@ } }, "templates/skeleton": { - "version": "2024.7.4", + "version": "2024.7.5", "dependencies": { "@remix-run/react": "^2.10.1", "@remix-run/server-runtime": "^2.10.1", - "@shopify/hydrogen": "2024.7.3", + "@shopify/hydrogen": "2024.7.4", "@shopify/remix-oxygen": "^2.0.6", "graphql": "^16.6.0", "graphql-tag": "^2.12.6", @@ -43606,7 +43606,7 @@ "@remix-run/react": "^2.10.1", "@remix-run/server-runtime": "^2.10.1", "@shopify/cli": "3.65.3", - "@shopify/hydrogen": "2024.7.3", + "@shopify/hydrogen": "2024.7.4", "@types/compression": "^1.7.2", "@types/express": "^4.17.17", "@types/morgan": "^1.9.4", @@ -51199,7 +51199,7 @@ "@remix-run/react": "^2.10.1", "@remix-run/server-runtime": "^2.10.1", "@shopify/cli": "~3.65.3", - "@shopify/hydrogen": "2024.7.3", + "@shopify/hydrogen": "2024.7.4", "@shopify/hydrogen-codegen": "^0.3.1", "@shopify/mini-oxygen": "^3.0.4", "@shopify/oxygen-workers-types": "^4.1.2", diff --git a/packages/hydrogen/docs/generated/generated_docs_data.json b/packages/hydrogen/docs/generated/generated_docs_data.json index b879834f6..127ba7664 100644 --- a/packages/hydrogen/docs/generated/generated_docs_data.json +++ b/packages/hydrogen/docs/generated/generated_docs_data.json @@ -22720,6 +22720,5876 @@ }, "definitions": [] }, + { + "name": "Storefront API Types", + "category": "utilities", + "isVisualComponent": false, + "related": [ + { + "name": "storefrontApiCustomScalars", + "type": "gear", + "url": "/api/hydrogen/utilities/storefrontApiCustomScalars" + }, + { + "name": "Storefront Schema", + "type": "gear", + "url": "/api/hydrogen/utilities/storefront-schema" + } + ], + "description": "\n If you are using TypeScript, pre-generated TypeScript types are available that match the Storefront API's GraphQL schema. These types can be used when you need to manually create an object that matches a Storefront API object's shape.\n\nThese types also work really well with the new [`satisfies` operator](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator) introduced in TypeScript 4.9, though you don't need to use `satisfies` to use these types.\n ", + "type": "utility", + "defaultExample": { + "description": "I am the default example", + "codeblock": { + "tabs": [ + { + "title": "Storefront API Types in TypeScript", + "code": "import type {\n Product,\n Collection,\n} from '@shopify/hydrogen/storefront-api-types';\n\nconst myProduct = {id: '123', title: 'My Product'} satisfies Partial<Product>;\nconsole.log(myProduct.title);\n\nconst myCollection = {\n id: '456',\n title: 'My Collection',\n} satisfies Partial<Collection>;\nconsole.log(myCollection.title);\n\nconst myNotSatisfyingProduct: Partial<Product> = {\n id: '789',\n title: 'Other Product',\n};\nconsole.log(myNotSatisfyingProduct.title);\n", + "language": "ts" + } + ], + "title": "Example code" + } + }, + "definitions": [] + }, + { + "name": "Image", + "category": "components", + "subCategory": "media", + "isVisualComponent": false, + "related": [ + { + "name": "MediaFile", + "type": "component", + "url": "/api/hydrogen/components/mediafile" + } + ], + "description": "The `Image` component renders an image for the Storefront API's\n[Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.\n\nImages default to being responsive automatically (`width: 100%, height: auto`), and expect an `aspectRatio` prop, which ensures your image doesn't create any layout shift. For fixed-size images, you can set `width` to an exact value, and a `srcSet` with 1x, 2x, and 3x DPI variants will automatically be generated for you.", + "type": "component", + "defaultExample": { + "description": "I am the default example", + "codeblock": { + "tabs": [ + { + "title": "JavaScript", + "code": "import {Image} from '@shopify/hydrogen';\n\n// An example query\nconst IMAGE_QUERY = `#graphql\n query {\n product {\n featuredImage {\n altText\n url\n height\n width\n }\n }\n }\n`;\n\nexport default function ProductImage({product}) {\n if (!product.featuredImage) {\n return null;\n }\n\n return (\n <Image\n data={product.featuredImage}\n sizes=\"(min-width: 45em) 50vw, 100vw\"\n aspectRatio=\"4/5\"\n />\n );\n}\n", + "language": "jsx" + }, + { + "title": "TypeScript", + "code": "import React from 'react';\nimport {Image} from '@shopify/hydrogen';\nimport type {Product} from '@shopify/hydrogen/storefront-api-types';\n\n// An example query\nconst IMAGE_QUERY = `#graphql\n query {\n product {\n featuredImage {\n altText\n url\n height\n width\n }\n }\n }\n`;\n\nexport default function ProductImage({product}: {product: Product}) {\n if (!product.featuredImage) {\n return null;\n }\n\n return (\n <Image\n data={product.featuredImage}\n sizes=\"(min-width: 45em) 50vw, 100vw\"\n aspectRatio=\"4/5\"\n />\n );\n}\n", + "language": "tsx" + } + ], + "title": "Example code" + } + }, + "definitions": [ + { + "title": "Props", + "description": "", + "type": "HydrogenImageBaseProps", + "typeDefinitions": { + "HydrogenImageBaseProps": { + "filePath": "/Image.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "HydrogenImageBaseProps", + "value": "{\n /** The aspect ratio of the image, in the format of `width/height`.\n *\n * @example\n * ```\n * \n * ```\n */\n aspectRatio?: string;\n /** The crop position of the image.\n *\n * @remarks\n * In the event that AspectRatio is set, without specifying a crop,\n * the Shopify CDN won't return the expected image.\n *\n * @defaultValue `center`\n */\n crop?: Crop;\n /** Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2024-07/objects/Image) object. Must be an Image object.\n *\n * @example\n * ```\n * import {IMAGE_FRAGMENT, Image} from '@shopify/hydrogen';\n *\n * export const IMAGE_QUERY = `#graphql\n * ${IMAGE_FRAGMENT}\n * query {\n * product {\n * featuredImage {\n * ...Image\n * }\n * }\n * }`\n *\n * \n * ```\n *\n * Image: {@link https://shopify.dev/api/storefront/reference/common-objects/image}\n */\n data?: PartialDeep;\n /** A function that returns a URL string for an image.\n *\n * @remarks\n * By default, this uses Shopify’s CDN {@link https://cdn.shopify.com/} but you can provide\n * your own function to use a another provider, as long as they support URL based image transformations.\n */\n loader?: Loader;\n /** An optional prop you can use to change the default srcSet generation behaviour */\n srcSetOptions?: SrcSetOptions;\n}", + "description": "", + "members": [ + { + "filePath": "/Image.tsx", + "syntaxKind": "PropertySignature", + "name": "aspectRatio", + "value": "string", + "description": "The aspect ratio of the image, in the format of `width/height`.", + "isOptional": true, + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "/Image.tsx", + "syntaxKind": "PropertySignature", + "name": "crop", + "value": "Crop", + "description": "The crop position of the image.", + "isOptional": true, + "defaultValue": "`center`" + }, + { + "filePath": "/Image.tsx", + "syntaxKind": "PropertySignature", + "name": "data", + "value": "PartialDeep", + "description": "Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2024-07/objects/Image) object. Must be an Image object.", + "isOptional": true, + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "import {IMAGE_FRAGMENT, Image} from '@shopify/hydrogen';\n\nexport const IMAGE_QUERY = `#graphql\n${IMAGE_FRAGMENT}\nquery {\n product {\n featuredImage {\n ...Image\n }\n }\n}`\n\n", + "title": "Example" + }, + { + "code": "Image:", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "/Image.tsx", + "syntaxKind": "PropertySignature", + "name": "loader", + "value": "Loader", + "description": "A function that returns a URL string for an image.", + "isOptional": true + }, + { + "filePath": "/Image.tsx", + "syntaxKind": "PropertySignature", + "name": "srcSetOptions", + "value": "SrcSetOptions", + "description": "An optional prop you can use to change the default srcSet generation behaviour", + "isOptional": true + } + ] + }, + "Crop": { + "filePath": "/Image.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Crop", + "value": "'center' | 'top' | 'bottom' | 'left' | 'right'", + "description": "" + }, + "Loader": { + "filePath": "/Image.tsx", + "name": "Loader", + "description": "", + "params": [ + { + "name": "params", + "description": "", + "value": "LoaderParams", + "filePath": "/Image.tsx" + } + ], + "returns": { + "filePath": "/Image.tsx", + "description": "", + "name": "string", + "value": "string" + }, + "value": "export type Loader = (params: LoaderParams) => string;" + }, + "LoaderParams": { + "filePath": "/Image.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "LoaderParams", + "value": "{\n /** The base URL of the image */\n src?: ImageType['url'];\n /** The URL param that controls width */\n width?: number;\n /** The URL param that controls height */\n height?: number;\n /** The URL param that controls the cropping region */\n crop?: Crop;\n}", + "description": "", + "members": [ + { + "filePath": "/Image.tsx", + "syntaxKind": "PropertySignature", + "name": "src", + "value": "string", + "description": "The base URL of the image", + "isOptional": true + }, + { + "filePath": "/Image.tsx", + "syntaxKind": "PropertySignature", + "name": "width", + "value": "number", + "description": "The URL param that controls width", + "isOptional": true + }, + { + "filePath": "/Image.tsx", + "syntaxKind": "PropertySignature", + "name": "height", + "value": "number", + "description": "The URL param that controls height", + "isOptional": true + }, + { + "filePath": "/Image.tsx", + "syntaxKind": "PropertySignature", + "name": "crop", + "value": "Crop", + "description": "The URL param that controls the cropping region", + "isOptional": true + } + ] + }, + "SrcSetOptions": { + "filePath": "/Image.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "SrcSetOptions", + "value": "{\n /** The number of sizes to generate */\n intervals: number;\n /** The smallest image size */\n startingWidth: number;\n /** The increment by which to increase for each size, in pixels */\n incrementSize: number;\n /** The size used for placeholder fallback images */\n placeholderWidth: number;\n}", + "description": "", + "members": [ + { + "filePath": "/Image.tsx", + "syntaxKind": "PropertySignature", + "name": "intervals", + "value": "number", + "description": "The number of sizes to generate" + }, + { + "filePath": "/Image.tsx", + "syntaxKind": "PropertySignature", + "name": "startingWidth", + "value": "number", + "description": "The smallest image size" + }, + { + "filePath": "/Image.tsx", + "syntaxKind": "PropertySignature", + "name": "incrementSize", + "value": "number", + "description": "The increment by which to increase for each size, in pixels" + }, + { + "filePath": "/Image.tsx", + "syntaxKind": "PropertySignature", + "name": "placeholderWidth", + "value": "number", + "description": "The size used for placeholder fallback images" + } + ] + } + } + } + ] + }, + { + "name": "ExternalVideo", + "category": "components", + "subCategory": "media", + "isVisualComponent": false, + "related": [ + { + "name": "MediaFile", + "type": "component", + "url": "/api/hydrogen/components/mediafile" + } + ], + "description": "The `ExternalVideo` component renders an embedded video for the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).", + "type": "component", + "defaultExample": { + "description": "I am the default example", + "codeblock": { + "tabs": [ + { + "title": "JavaScript", + "code": "import {ExternalVideo} from '@shopify/hydrogen';\n\nexport default function MyProductVideo({products}) {\n const firstMediaElement = products.nodes[0].media.nodes[0];\n\n if (firstMediaElement.__typename === 'ExternalVideo') {\n return <ExternalVideo data={firstMediaElement} />;\n }\n}\n", + "language": "jsx" + }, + { + "title": "TypeScript", + "code": "import {ExternalVideo} from '@shopify/hydrogen';\nimport type {ProductConnection} from '@shopify/hydrogen/storefront-api-types';\n\nexport default function MyProductVideo({\n products,\n}: {\n products: ProductConnection;\n}) {\n const firstMediaElement = products.nodes[0].media.nodes[0];\n if (firstMediaElement.__typename === 'ExternalVideo') {\n return <ExternalVideo data={firstMediaElement} />;\n }\n}\n", + "language": "tsx" + } + ], + "title": "ExternalVideo example" + } + }, + "definitions": [ + { + "title": "Props", + "description": "Takes in the same props as a native `