### Install Dependencies Source: https://github.com/shopify/function-examples/blob/main/order-routing/javascript/pickup-point-delivery-option-generators/default/README.md Install necessary dependencies for the project. Run this command in your terminal. ```bash yarn install ``` -------------------------------- ### Install Shopify CLI with npm Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Use this command to install the Shopify CLI and the Ruby template using npm. ```shell npm init @shopify/app@latest --template=ruby ``` -------------------------------- ### Install Shopify CLI with Yarn Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Use this command to install the Shopify CLI and the Ruby template using Yarn. ```shell yarn create @shopify/app --template=ruby ``` -------------------------------- ### Install Shopify CLI with pnpm Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Use this command to install the Shopify CLI and the Ruby template using pnpm. ```shell pnpm create @shopify/app@latest --template=ruby ``` -------------------------------- ### Start Local Development with pnpm Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-price-per-component/README.md Run this command from your app's root directory to start local development, connecting the Shopify CLI to your Partners dashboard. ```shell pnpm run dev ``` -------------------------------- ### Start Local Development with npm Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-price-per-component/README.md Run this command from your app's root directory to start local development, connecting the Shopify CLI to your Partners dashboard. ```shell npm run dev ``` -------------------------------- ### Install Dependencies with npm Source: https://github.com/shopify/function-examples/blob/main/sample-apps/discounts/README.md Installs project dependencies using npm. Ensure Node.js is installed. ```shell npm install ``` -------------------------------- ### Install Dependencies with pnpm Source: https://github.com/shopify/function-examples/blob/main/sample-apps/discounts/README.md Installs project dependencies using pnpm. Ensure Node.js is installed. ```shell pnpm install ``` -------------------------------- ### Start Local Development Server Source: https://github.com/shopify/function-examples/blob/main/sample-apps/delivery-customizations/README.md Starts the local development server for your Shopify app. This command is powered by the Shopify CLI and provides environment variables, remote configuration updates, and tunneling. ```shell shopify app dev ``` -------------------------------- ### Start Local Development with Yarn Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-price-per-component/README.md Run this command from your app's root directory to start local development, connecting the Shopify CLI to your Partners dashboard. ```shell yarn dev ``` -------------------------------- ### Install Shopify CLI Source: https://github.com/shopify/function-examples/blob/main/sample-apps/delivery-customizations/README.md Installs the latest version of the Shopify CLI globally. This is a prerequisite for initializing and developing Shopify apps. ```shell npm install -g @shopify/cli@latest ``` -------------------------------- ### Run Target Input Example (Fetch Result) Source: https://github.com/shopify/function-examples/blob/main/order-routing/javascript/pickup-point-delivery-option-generators/default/README.md This JSON represents the input to the run target, containing the result of the fetch operation. ```json { "fetchResult": { "status": 200, "body": "{\"deliveryPoints\":[{\"pointId\":\"001\",\"pointName\":\"Toronto Store\",\"location\":{\"addressComponents\":{\"streetNumber\":\"620\",\"route\":\"King St W\",\"locality\":\"Toronto\",\"administrativeArea\":{\"name\":\"Ontario\",\"code\":\"ON\"},\"postalCode\":\"M5V 1M6\",\"country\":\"Canada\",\"countryCode\":\"CA\"},\"geometry\":{\"location\":{\"lat\":43.644664618786685,\"lng\":-79.40066267417106}}},\"openingHours\":{\"weekdayText\":[\"Monday: 9:00 AM – 9:00 PM\",\"Tuesday: 9:00 AM – 9:00 PM\",\"Wednesday: 9:00 AM – 9:00 PM\",\"Thursday: 9:00 AM – 9:00 PM\",\"Friday: 9:00 AM – 9:00 PM\",\"Saturday: 10:00 AM – 6:00 PM\",\"Sunday: Closed\"]}}}" } } ``` -------------------------------- ### Prisma Commands for MongoDB Source: https://github.com/shopify/function-examples/blob/main/sample-apps/delivery-customizations/README.md Use these commands for pre-development setup and deployment with MongoDB when Prisma Migrate is not supported. Ensure your `shopify.web.toml` file is updated. ```toml [commands] predev = "npx prisma generate && npx prisma db push" dev = "npx prisma migrate deploy && npm exec react-router dev" ``` -------------------------------- ### Start Development with Tunnel URL (npm) Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Run the development server with a specified tunnel URL using npm. This connects your local development environment to the ngrok or Cloudflare tunnel. ```shell npm run dev --tunnel-url https://tunnel-url:3000 ``` -------------------------------- ### Install Ruby Dependencies Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Install the necessary Ruby gems for your Rails application using Bundler. ```shell bundle install ``` -------------------------------- ### Cart Merge Expand Input Example Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/README.md An example of the input cart structure when using the `cart-merge-expand` extension, including bundle details and a price adjustment. ```json { "cart": { "lines": [ { "id": "gid://shopify/CartLine/4", "quantity": 9, "merchandise": { "id": "gid://shopify/ProductVariant/1111", "title": "A neat bundle", "component_reference": { "value": "[\"gid://shopify/ProductVariant/111\",\"gid://shopify/ProductVariant/222\"]" }, "component_quantities": { "value": "[2,3]" }, "price_adjustment": { "value": "10.5" } } } ] } } ``` -------------------------------- ### Start Development with Tunnel URL (pnpm) Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Run the development server with a specified tunnel URL using pnpm. This connects your local development environment to the ngrok or Cloudflare tunnel. ```shell pnpm dev --tunnel-url https://tunnel-url:3000 ``` -------------------------------- ### Create Shopify App with npm Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-price-per-component/README.md Use this command to scaffold a new Shopify app project using npm, cloning the template and installing dependencies. ```shell npm init @shopify/app@latest ``` -------------------------------- ### JSON Example for Component Reference Metafield Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/README.md An example of the 'component_reference' metafield value, which is an array of product variant IDs that constitute a bundle. ```json [ "gid://shopify/ProductVariant/", "gid://shopify/ProductVariant/" ] ``` -------------------------------- ### Start Development with Tunnel URL (Yarn) Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Run the development server with a specified tunnel URL using yarn. This connects your local development environment to the ngrok or Cloudflare tunnel. ```shell yarn dev --tunnel-url https://tunnel-url:3000 ``` -------------------------------- ### Fetch Target Input Example Source: https://github.com/shopify/function-examples/blob/main/order-routing/rust/pickup-point-delivery-option-generators/default/README.md This JSON represents the input to the fetch target, specifying delivery address details. ```json { "deliveryAddress": { "countryCode": "CA", "longitude": 43.70, "latitude": -79.42 } } ``` -------------------------------- ### JSON Example for Component Quantities Metafield Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/README.md An example of the 'component_quantities' metafield value, which is an array of integers corresponding to the quantities of product variants listed in 'component_reference'. ```json [ , ] ``` -------------------------------- ### Create Shopify App with pnpm Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-price-per-component/README.md Use this command to scaffold a new Shopify app project using pnpm, cloning the template and installing dependencies. ```shell pnpm create @shopify/app@latest ``` -------------------------------- ### Fetch Target Input Example Source: https://github.com/shopify/function-examples/blob/main/order-routing/javascript/pickup-point-delivery-option-generators/default/README.md This JSON represents the input to the fetch target, containing delivery address details. ```json { "deliveryAddres": { "countryCode": "CA", "longitude": 43.70, "latitude": -79.42 } } ``` -------------------------------- ### Example JSON for Component Parents Metafield Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/README.md An example illustrating the 'component_parents' metafield value for a bundle. It shows how to define a bundle with two shirts and one pair of pants, referencing their product variant IDs and quantities. ```json [ { "id": "gid://shopify/ProductVariant/6", "component_reference": { "value": [ "gid://shopify/ProductVariant/3", "gid://shopify/ProductVariant/4" ] }, "component_quantities": { "value": [2, 1] } } ] ``` -------------------------------- ### Example Pickup Point Delivery Option Output Source: https://github.com/shopify/function-examples/blob/main/order-routing/javascript/pickup-point-delivery-option-generators/default/README.md This JSON output represents a sample structure for a pickup point delivery option. It includes details about the pickup point's ID, name, provider, address, and business hours. ```json { "operations": [ { "add": { "cost": null, "pickup_point": { "external_id": "001", "name": "Toronto Store", "provider": { "name": "Shopify Demo", "logo_url": "https://cdn.shopify.com/s/files/1/0628/3830/9033/files/shopify_icon_146101.png?v=1706120545" }, "address": { "address1": "620 King St W", "address2": null, "city": "Toronto", "country": "Canada", "country_code": "CA", "latitude": 43.644664618786685, "longitude": -79.40066267417106, "phone": null, "province": "Ontario", "province_code": "ON", "zip": "M5V 1M6" }, "business_hours": [ { "day": "MONDAY", "periods": [ { "opening_time": "09:00:00", "closing_time": "21:00:00" } ] }, { "day": "TUESDAY", "periods": [ { "opening_time": "09:00:00", "closing_time": "21:00:00" } ] }, { "day": "WEDNESDAY", "periods": [ { "opening_time": "09:00:00", "closing_time": "21:00:00" } ] }, { "day": "THURSDAY", "periods": [ { "opening_time": "09:00:00", "closing_time": "21:00:00" } ] }, { "day": "FRIDAY", "periods": [ { "opening_time": "09:00:00", "closing_time": "21:00:00" } ] }, { "day": "SATURDAY", "periods": [ { "opening_time": "10:00:00", "closing_time": "18:00:00" } ] }, { "day": "SUNDAY", "periods": [] } ] } } } ] } ``` -------------------------------- ### Fetch Target Output Example (HTTP Request) Source: https://github.com/shopify/function-examples/blob/main/order-routing/javascript/pickup-point-delivery-option-generators/default/README.md This JSON represents the output of the fetch target, detailing the HTTP request to the external API. ```json { "request": { "method": "GET", "url": "https://cdn.shopify.com/s/files/1/0628/3830/9033/files/pickup-points-external-api-v2.json?v=1714588690&lat=-79.42&lon=43.7", "headers": [ { "name": "Accept", "value": "application/json; charset=utf-8" } ], "body": null, "policy": { "read_timeout_ms": 500 } } } ``` -------------------------------- ### Create Shopify App with Yarn Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-price-per-component/README.md Use this command to scaffold a new Shopify app project using Yarn, cloning the template and installing dependencies. ```shell yarn create @shopify/app ``` -------------------------------- ### Run Target Input Example Source: https://github.com/shopify/function-examples/blob/main/order-routing/rust/pickup-point-delivery-option-generators/default/README.md This JSON represents the input to the run target, containing the status and body of an external API HTTP response. ```json { "fetchResult": { "status": 200, "body": "{\"deliveryPoints\":[{\"pointId\":\"001\",\"pointName\":\"Toronto Store\",\"location\":{\"addressComponents\":{\"streetNumber\":\"620\",\"route\":\"King St W\",\"locality\":\"Toronto\",\"administrativeArea\":{\"name\":\"Ontario\",\"code\":\"ON\"},\"postalCode\":\"M5V 1M6\",\"country\":\"Canada\",\"countryCode\":\"CA\"},\"geometry\":{\"location\":{\"lat\":43.644664618786685,\"lng\":-79.40066267417106}}},\"openingHours\":{\"weekdayText\":[\"Monday: 9:00 AM – 9:00 PM\",\"Tuesday: 9:00 AM – 9:00 PM\",\"Wednesday: 9:00 AM – 9:00 PM\",\"Thursday: 9:00 AM – 9:00 PM\",\"Friday: 9:00 AM – 9:00 PM\",\"Saturday: 10:00 AM – 6:00 PM\",\"Sunday: Closed\"]}}]}" } } ``` -------------------------------- ### Cart Merge Expand Output Example Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/README.md The expected output structure from the `cart-merge-expand` extension, showing expanded cart items and price adjustments. ```json { “operations”: [ { “expand”: { “cartLineId”: “gid://shopify/CartLine/4”, “expandedCartItems”: [ { “merchandiseId”: “gid://shopify/ProductVariant/111”, “quantity”: 2 }, { “merchandiseId”: “gid://shopify/ProductVariant/222”, “quantity”: 3 } ], “price”: { “percentageDecrease”: { “value”: 10.5 } } } } ] } ``` -------------------------------- ### Run Cloudflare Tunnel Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Use Cloudflare Tunnel to create a secure tunnel for previewing your app. This command starts the tunnel, forwarding traffic to localhost:3000. ```shell cloudflared tunnel --url http://localhost:3000 ``` -------------------------------- ### Build Frontend and Backend with npm Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Build both the frontend and backend of the application using npm. Replace 'REPLACE_ME' with your actual API key. ```shell npm run build --api-key=REPLACE_ME ``` -------------------------------- ### Initialize Shopify App with React Router Template Source: https://github.com/shopify/function-examples/blob/main/sample-apps/delivery-customizations/README.md Initializes a new Shopify app using the specified React Router template from GitHub. This command sets up the project structure and necessary configurations. ```shell shopify app init --template=https://github.com/Shopify/shopify-app-template-react-router ``` -------------------------------- ### Build Frontend and Backend with pnpm Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Build both the frontend and backend of the application using pnpm. Replace 'REPLACE_ME' with your actual API key. ```shell pnpm run build --api-key=REPLACE_ME ``` -------------------------------- ### Development Server with Reset Flag (npm) Source: https://github.com/shopify/function-examples/blob/main/sample-apps/discounts/README.md Run the development server with the `--reset` flag using npm. This is useful for resetting authentication loops when scopes change. ```shell npm run dev -- --reset ``` -------------------------------- ### Manual Build for Production Deployment Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Manually build the frontend and backend separately when deploying the web folder to production. Ensure you set the SHOPIFY_API_KEY environment variable. ```shell cd web/frontend SHOPIFY_API_KEY=REPLACE_ME yarn build cd .. rake build:all ``` -------------------------------- ### Navigate to web directory Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Switch to the 'web' directory to manage Ruby dependencies and run Rails commands. ```shell cd web ``` -------------------------------- ### Build Frontend and Backend with Yarn Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Build both the frontend and backend of the application using yarn. Replace 'REPLACE_ME' with your actual API key. ```shell yarn build --api-key=REPLACE_ME ``` -------------------------------- ### Development Server with Reset Flag (pnpm) Source: https://github.com/shopify/function-examples/blob/main/sample-apps/discounts/README.md Run the development server with the `--reset` flag using pnpm. This is useful for resetting authentication loops when scopes change. ```shell pnpm run dev -- --reset ``` -------------------------------- ### Build App with npm Source: https://github.com/shopify/function-examples/blob/main/sample-apps/discounts/README.md Build your Shopify application using npm. ```shell npm run build ``` -------------------------------- ### Run Tests Source: https://github.com/shopify/function-examples/blob/main/order-routing/javascript/pickup-point-delivery-option-generators/default/README.md Execute the project's tests. Run this command in your terminal. ```bash yarn test ``` -------------------------------- ### Authenticate Admin and Query Products Source: https://github.com/shopify/function-examples/blob/main/sample-apps/discounts/README.md Authenticates an admin request and queries the first 25 products, returning their titles and descriptions. This code should be placed in a loader function. ```javascript export async function loader({ request }) { const { admin } = await shopify.authenticate.admin(request); const response = await admin.graphql( { "query": "query { products(first: 25) { nodes { title description } } }", "variables": {} } ); const { data: { products: { nodes }, }, } = await response.json(); return json(nodes); } ``` -------------------------------- ### Run Rails Template Script Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Execute the Rails template script to set up the database and encrypted credentials. ```shell bin/rails app:template LOCATION=./template.rb ``` -------------------------------- ### Expand Liquid Templates Source: https://github.com/shopify/function-examples/blob/main/README.md Run this command to expand any .liquid templates in the repository. You can optionally specify a language flavor like 'vanilla-js' or 'typescript'. ```shell yarn yarn expand-liquid # optionally provide the language flavor yarn expand-liquid vanilla-js yarn expand-liquid typescript ``` -------------------------------- ### Build App with pnpm Source: https://github.com/shopify/function-examples/blob/main/sample-apps/discounts/README.md Build your Shopify application using pnpm. ```shell pnpm run build ``` -------------------------------- ### Build App with Yarn Source: https://github.com/shopify/function-examples/blob/main/sample-apps/discounts/README.md Build your Shopify application using Yarn. ```shell yarn build ``` -------------------------------- ### Development Server with Reset Flag (Yarn) Source: https://github.com/shopify/function-examples/blob/main/sample-apps/discounts/README.md Run the development server with the `--reset` flag using Yarn. This is useful for resetting authentication loops when scopes change. ```shell yarn dev --reset ``` -------------------------------- ### Deploy App with npm Source: https://github.com/shopify/function-examples/blob/main/sample-apps/discounts/README.md Deploy your Shopify application using npm. This command also updates your app's scopes with Shopify. ```shell npm run deploy ``` -------------------------------- ### Run Rust Tests Source: https://github.com/shopify/function-examples/blob/main/README.md Execute the test suite for Rust implementations of Shopify Functions. ```shell cargo test ``` -------------------------------- ### Run JavaScript Tests Source: https://github.com/shopify/function-examples/blob/main/README.md Execute the test suite for JavaScript implementations of Shopify Functions. ```shell yarn test-js ``` -------------------------------- ### Deploy Function Source: https://github.com/shopify/function-examples/blob/main/order-routing/javascript/pickup-point-delivery-option-generators/default/README.md Deploy the function to your Shopify app. Navigate to the app's root directory and run this command in your terminal. ```bash yarn deploy ``` -------------------------------- ### Return to App Root Directory Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Navigate back to the root directory of your Shopify app after setting up the Rails app. ```shell cd .. ``` -------------------------------- ### Authenticate Admin and Query Products Source: https://github.com/shopify/function-examples/blob/main/sample-apps/delivery-customizations/README.md Demonstrates how to authenticate with the Shopify Admin API and query for the first 25 products. This code is typically used in a loader function for a route. ```javascript export async function loader({ request }) { const { admin } = await shopify.authenticate.admin(request); const response = await admin.graphql( { products(first: 25) { nodes { title description } } } ); const { data: { products: { nodes }, }, } = await response.json(); return nodes; } ``` -------------------------------- ### Deploy App with pnpm Source: https://github.com/shopify/function-examples/blob/main/sample-apps/discounts/README.md Deploy your Shopify application using pnpm. This command also updates your app's scopes with Shopify. ```shell pnpm run deploy ``` -------------------------------- ### Bundle Component References Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/README.md Defines the product variant IDs that make up a bundle. The order must match `component_quantities`. ```json ["gid://shopify/ProductVariant/3", "gid://shopify/ProductVariant/4"] ``` -------------------------------- ### Run TypeScript Tests Source: https://github.com/shopify/function-examples/blob/main/README.md Execute the test suite for TypeScript implementations of Shopify Functions. ```shell yarn test-ts ``` -------------------------------- ### Define App-Specific Webhooks in shopify.app.toml Source: https://github.com/shopify/function-examples/blob/main/sample-apps/delivery-customizations/README.md Declare app-specific webhooks in the shopify.app.toml file for automatic syncing. This is the recommended approach over registering webhooks in the afterAuth hook. ```toml webhooks = { "CUSTOMERS_CREATE" = "/webhooks", "CUSTOMERS_UPDATE" = "/webhooks", } ``` -------------------------------- ### Bundle Component Quantities Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/README.md Specifies the required quantity for each component in a bundle. The order must match `component_reference`. ```json [2, 1] ``` -------------------------------- ### Bundle Definition JSON Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/README.md This JSON structure defines a product bundle. Ensure that `component_reference` and `component_quantities` values match the parent product variant. ```json [ { "id": "gid://shopify/ProductVariant/", "component_reference": { "value": [ "gid://shopify/ProductVariant/", "gid://shopify/ProductVariant/" ] }, "component_quantities": { "value": [ , ] } } ] ``` -------------------------------- ### Generate TypeScript Types with Shopify CLI Source: https://github.com/shopify/function-examples/blob/main/order-routing/typescript/pickup-point-delivery-option-generators/default/README.md Execute this command to generate the TypeScript types for your function's input and output API. ```bash yarn shopify app function typegen ``` -------------------------------- ### Build Shopify Function with Rust Source: https://github.com/shopify/function-examples/blob/main/discounts/rust/discount/default/README.md Compile a specific Rust Shopify function for the wasm32-wasip1 target in release mode. The Shopify CLI's build command also utilizes this process. ```shell cargo build --target=wasm32-wasip1 --release ``` -------------------------------- ### Format Rust Code Source: https://github.com/shopify/function-examples/blob/main/README.md Apply standard formatting to Rust code using cargo fmt. ```shell cargo fmt ``` -------------------------------- ### Set Server Host for HMR Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Configure the server.host setting in vite.config.js to 'localhost' when adjusting HMR settings. ```javascript server: { host: "localhost", ... } ``` -------------------------------- ### Configure GraphQL Endpoint in .graphqlrc.ts Source: https://github.com/shopify/function-examples/blob/main/sample-apps/delivery-customizations/README.md Update the .graphqlrc.ts file to specify the correct GraphQL API endpoint if you are not using the Shopify Admin API, such as the Storefront API or a third-party API. ```typescript import type { App } from "@shopify/shopify-api"; const app: App = { // ... other app configurations }; export default app; // Example for .graphqlrc.ts export default { projects: { app: { schema: process.env.NODE_ENV === "production" ? "https:///graphql" : "https:///graphql", documents: "./app/graphql/**/*.graphql", }, }, }; ``` -------------------------------- ### Lint Rust Code Source: https://github.com/shopify/function-examples/blob/main/README.md Perform linting on Rust code with clippy, enforcing warnings as errors. ```shell cargo clippy -- -D warnings ``` -------------------------------- ### GraphQL Query for Cart Merge Expand - Bundle Expansion Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/README.md This GraphQL query fetches cart line items and their associated component reference and quantity metafields. It's used to identify and expand bundle products. ```graphql query Input { cart { lines { id quantity merchandise { ... on ProductVariant { id component_reference: metafield( namespace: "custom" key: "component_reference" ) { value } component_quantities: metafield( namespace: "custom" key: "component_quantities" ) { value } price_adjustment: metafield( namespace: "custom" key: "price_adjustment" ) { value } } } } } } ``` -------------------------------- ### Bundle Component Parents JSON Schema Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/README.md This JSON schema defines the structure for the 'component_parents' metafield, which specifies the bundle a child product variant belongs to. It includes properties for the parent variant ID, component references, quantities, and price adjustments. ```json { "$schema": "https://json-schema.org/draft/2020-12/schema", "title": "Bundle component parents", "description": "A definition of the bundle a child belongs to", "type": "array", "items": { "type": "object", "properties": { "id": { "description": "ID of bundle parent product variant: gid://shopify/ProductVariant/", "type": "string" }, "component_reference": { "type": "object", "properties": { "value": { "description": "Array of product variant IDs: [gid://shopify/ProductVariant/]", "type": "array", "items": { "type": "string" }, "minItems": 1, "uniqueItems": true } }, "required": ["value"] }, "component_quantities": { "type": "object", "properties": { "value": { "description": "Array of quantities of product variants defined in component_reference: [1]", "type": "array", "items": { "type": "integer" }, "minItems": 1 } }, "required": ["value"] }, "price_adjustment": { "type": "object", "properties": { "value": { "description": "Array of quantities of product variants defined in component_reference: [1]", "type": "number", "minimum": 0 } }, "required": ["value"] } }, "required": ["id", "component_reference", "component_quantities"] } } ``` -------------------------------- ### JSON Structure for Bundle Rule Metafield Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/README.md Defines the expected JSON structure for the 'component_parents' metafield on a product variant. This structure specifies bundle rules, including parent ID, child references, and quantities. ```json { "id": , "component_reference": { "value": }, "component_quantities": { "value": } } ``` -------------------------------- ### External API Pickup Point Data Structure Source: https://github.com/shopify/function-examples/blob/main/order-routing/javascript/pickup-point-delivery-option-generators/default/README.md This JSON structure represents the data format of the external API providing pickup point information. ```json { "deliveryPoints": [ { "pointId": "001", "pointName": "Toronto Store", "location": { "addressComponents": { "streetNumber": "620", "route": "King St W", "locality": "Toronto", "administrativeArea": { "name": "Ontario", "code": "ON" }, "postalCode": "M5V 1M6", "country": "Canada", "countryCode": "CA" }, "geometry": { "location": { "lat": 43.644664618786685, "lng": -79.40066267417106 } } }, "openingHours": { "weekdayText": [ "Monday: 9:00 AM – 9:00 PM", "Tuesday: 9:00 AM – 9:00 PM", "Wednesday: 9:00 AM – 9:00 PM", "Thursday: 9:00 AM – 9:00 PM", "Friday: 9:00 AM – 9:00 PM", "Saturday: 10:00 AM – 6:00 PM", "Sunday: Closed" ] } } ] } ``` -------------------------------- ### Enable HMR in Development Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/web/frontend/index.html This script is embedded to enable Hot Module Replacement (HMR) during development. It checks if the environment is not production and dynamically adds a script tag to the head of the document to facilitate HMR. ```javascript if (!import.meta.env || !import.meta.env.PROD) { // Because the base HTML is rendered in the server side, we need to manually embed the code to enable HMR in our // code, so that the vite server is properly enabled to run HMR const script = document.createElement('script'); script.setAttribute('type', "module"); script.setAttribute('src', "./dev_embed.js"); document.getElementsByTagName('head')[0].append(script); } ``` -------------------------------- ### Configure HMR for Firefox Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/GETTING_STARTED.md Adjust the HMR configuration in vite.config.js to resolve hot module replacement issues in Firefox. This involves setting the protocol, host, and port for the HMR connection. ```javascript const host = process.env.HOST ? process.env.HOST.replace(/https?:\/\//, "") : "localhost"; let hmrConfig; if (host === "localhost") { hmrConfig = { protocol: "ws", host: "localhost", port: 64999, clientPort: 64999, }; } else { hmrConfig = { protocol: "wss", host: host, port: process.env.FRONTEND_PORT, clientPort: 443, }; } ``` -------------------------------- ### GraphQL Query for Cart Merge Expand - Component Parents Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/README.md This GraphQL query retrieves cart line items and their associated component parent metafields. It's used to identify bundle components for merging. ```graphql query Input { cart { lines { id quantity merchandise { ... on ProductVariant { id component_parents: metafield( namespace: "custom" key: "component_parents" ) { value } } } } } } ``` -------------------------------- ### Prisma Schema for MongoDB Session ID Mapping Source: https://github.com/shopify/function-examples/blob/main/sample-apps/payment-customizations/README.md When using MongoDB with Prisma, map the `_id` field to a new `id` field in your Session model to ensure correct session identification. ```prisma model Session { session_id String @id @default(auto()) @map("_id") @db.ObjectId id String @unique ... ``` -------------------------------- ### Register Cart Transform Extension Mutation Source: https://github.com/shopify/function-examples/blob/main/sample-apps/bundles-cart-transform/README.md This GraphQL mutation is used to register the cart_transform extension with a shop after authentication. It requires the function ID as a variable. ```graphql mutation cartTransformCreate($functionId: String!) { cartTransformCreate(functionId: $functionId) { cartTransform { functionId id } userErrors { field message } } } ``` -------------------------------- ### Map MongoDB _id to id Field in Prisma Schema Source: https://github.com/shopify/function-examples/blob/main/sample-apps/delivery-customizations/README.md When using MongoDB with Prisma, map the MongoDB '_id' field to the 'id' field in your Prisma schema to ensure correct session handling. This involves adding a new field with @id and @map attributes. ```prisma model Session { session_id String @id @default(auto()) @map("_id") @db.ObjectId id String @unique shop String state String isOnline Boolean expires DateTime cookie Json? } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.