Add a customized bundle

In this tutorial, you'll learn how to do the following tasks:

• Set up your environment to use functions.
• Create a cart_transform function.

• You've created a Partner account.
• You've created a development store.

• You've created an app that uses Shopify CLI 3.49.5 or higher. If you previously installed Shopify CLI, then make sure that you're using the latest version.

  If you plan to create a UI for your extension, then start with the Remix app template.

• You've installed Node.js 16 or higher.

• You've installed your app on the development store.

• You're familiar with the Cart Transform Function API.

The following requirements are specific to Rust-based development with Shopify Functions.

• You've installed Rust.

  On Windows, Rust requires the Microsoft C++ Build Tools. Make sure to select the Desktop development with C++ workload when installing the tools.

• You've installed cargo-wasi:

• A bundle can have up to 150 components.
• After an app has assigned components to a bundle, only that app can manage the components of the bundle.
• Nested bundles aren't supported. A bundle can't have components and be part of another bundle simultaneously.

To create a cart transform extension, you can use Shopify CLI, which generates starter code for building your extension and automates common development tasks.

1. Navigate to your app directory:

2. Run the following command to create the app extension:

3. Choose the language that you want to use. For this tutorial, you should select either Rust or JavaScript.

   Shopify defaults to Rust as the most performant and recommended language choice to stay within the platform limits. For more information, refer to language considerations.

4. Navigate to extensions/demo-cart-transform-extension:

run.graphql defines the input for the function target. The following example shows an input that retrieves information about buyer's cart like merchandise, quantity etc.

Replace the contents of src/run.graphql file with the following code.

The Function API references provide information on the available fields for the input query.

In this example, our function will output expand operations for cart lines where merchandise has a metafield referencing other bundle components.

Replace the contents of src/run.rs file with the following code.

You need to request the write_cart_transforms and write_products access scopes to run the mutations in this guide.

1. In shopify.app.toml in the root of your app, add the write_cart_transforms scope.

2. Deploy your updated configuration to Shopify:

3. Restart your app.

4. Use the URL provided by the CLI to open and re-install your app. You should be prompted to accept the new access scope permissions in your store.

To activate your function, create a cartTransform object on the store where you installed your app. You can do this using the cartTransformCreate GraphQL mutation.

1. Find the ID of your function by executing the following query:

   The result contains a node with your function's ID:

2. Run the following mutation. Replace YOUR_FUNCTION_ID_HERE with the ID of your function:

   You should receive a GraphQL response that includes the ID of the new cartTransform object.

In this tutorial, we will take the example of a meal bundle which contains a burger and fries.

1. Create bundle component products, i.e. burger and fries.

1. Create a bundle parent product, i.e. Meal Bundle. This example sets requires_components on the variant of the bundle to true. This is required when the variants is meant to be sold as a bundle only. It prevents the variant from being sold as a regular product in case the function doesn't output an operation. For example, the variant Meal Bundle should always be sold as a bundle with components and not as a regular product.

To test your function, you need to make it available to your development store.

1. If you're developing a function in a language other than JavaScript or TypeScript, ensure you have configured build.watch in your function extension configuration.

2. Navigate back to your app root:

3. Use the Shopify CLI dev command to start app preview:

   You can keep the preview running as you work on your function. When you make changes to a watched file, Shopify CLI rebuilds your function and updates the function extension's drafts, so you can immediately test your changes.

4. Follow the CLI prompts to preview your app, and install it on your development store.

Follow the steps below to test your function on your development store.

1. Navigate to your online storefront.
2. Add the meal bundle product to your cart.
3. Navigate to checkout.
4. You will now see that your meal bundle product is converted into a bundle which includes a burger and fries.

When you're ready to release your changes to users, you can create and release an app version. An app version is a snapshot of your app configuration and all extensions.

1. Navigate to your app directory.

2. Run the following command.

   Optionally, you can provide a name or message for the version using the --version and --message flags.

Releasing an app version replaces the current active version that's served to stores that have your app installed. It might take several minutes for app users to be upgraded to the new version.

• Learn how to add a product configuration extension for bundles in the Shopify admin.
• Learn how to use variables in your input query.