Skip to main content

Bundles grouped view emails

Shopify's transactional emails, such as order confirmations and shipping updates, can display Bundles in a grouped view. Prior to this update Shopify used flat views to display all order line items as a linear list, while a grouped view nests items under their bundle parent. As a transactional email Partner, you can implement this view using the GraphQL Admin API.

For example, in the following image, a bundle of products is left ungrouped in an order confirmation email:

Order confirmation email that lists a bundle of products ungrouped

In this image, the products in a Bundle are presented in a grouped view:

Order confirmation email that lists a bundle of products grouped

Anchor to Step 1: Querying for the ,[object Object], dataStep 1: Querying for the lineItemsGroup data

Whether you're displaying Bundles as a grouped view or as a flat view, you'll first need to query the lineItems on your order. The following query leverages order and is kept simple for demonstration purposes, add additional fields as needed for your purposes.

Tip

The following example is limited to the price after any discounts are applied. You could optionally retrieve and later calculate the price before discounts and total discounts.

POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

GraphQL mutation

query GetOrder {
order(id: "gid://shopify/Order/1") {
lineItems(first: 100) {
nodes {
title
quantity
discountedTotalSet {
shopMoney {
amount
currencyCode
}
}
lineItemGroup {
id
title
quantity
}
}
}
}
}

JSON response

{
"data": {
"order": {
"lineItems": {
"nodes": [
{
"title": "Short Sleeve T-Shirt - Green",
"quantity": 1,
"discountedTotalSet": {
"shopMoney": {
"amount": "22.0",
"currencyCode": "USD"
}
},
"lineItemGroup": {
"id": "gid://shopify/LineItemGroup/1",
"title": "Green Shirt and Shorts Bundle",
"quantity": 1
}
},
{
"title": "Shorts - Green",
"quantity": 1,
"discountedTotalSet": {
"shopMoney": {
"amount": "0.0",
"currencyCode": "USD"
}
},
"lineItemGroup": {
"id": "gid://shopify/LineItemGroup/1",
"title": "Green Shirt and Shorts Bundle",
"quantity": 1
}
},
{
"title": "Sneakers",
"quantity": 1,
"discountedTotalSet": {
"shopMoney": {
"amount": "100.0",
"currencyCode": "USD"
}
},
"lineItemGroup": null
}
]
}
}
}
}
Note

At this point you have all the data needed to display Bundles as a flat view. When displaying line items you'll note which products are part of a bundle.

The relevant fields we're requesting are:

  • title: The title of the line item, potentially a Bundle component
  • quantity: The quantity of the line item
  • discountedTotalSet.shopMoney.amount: The total price of the line item after any discounts
  • discountedTotalsSet.shopMoney.currencyCode: The currency code of the total price
  • lineItemGroup: The Bundle parent of the line item, if it exists
    • id: The unique identifier of the lineItemGroup
    • title: The title of the Bundle parent product
    • quantity: The quantity of the Bundle parent product

Anchor to Step 2: Grouping BundlesStep 2: Grouping Bundles

After you've retrieved lineItemGroup data, you'll group the Bundle components under the parent product to make it easier to present them as a grouped view.

Any product with a null lineItemGroup field is not part of a Bundle and should be displayed as a standalone product.

function groupBundles(response) {
const lineItems = response.data.order.lineItems.nodes;
const bundles = new Map();
const result = [];

// First pass: Identify bundles and group items by productId
lineItems.forEach((item) => {
if (item.lineItemGroup) {
const { id, title } = item.lineItemGroup;
if (!bundles.has(id)) {
bundles.set(id, {
bundleTitle: title,
quantity: item.quantity,
components: [],
});
}

bundles.get(id).components.push({
title: item.title,
quantity: item.quantity,
price: item.discountedTotalSet.shopMoney.amount,
});
} else {
// Non-bundle items would be handled here
result.push(item);
}
});

// Convert bundles map to array format
bundles.forEach((bundle) => {
result.unshift({
title: bundle.bundleTitle,
quantity: bundle.quantity,
components: bundle.components,
lineItemGroup: {
title: bundle.bundleTitle,
},
});
});

return result;
}

Passing in our above result to this function, results in a data structure that looks like this:

const result = [
{
"title": "Green Shirt and Shorts Bundle",
"quantity": 1,
"components": [
{
"title": "Short Sleeve T-Shirt - Green",
"quantity": 1,
"price": "22.0"
},
{
"title": "Shorts - Green",
"quantity": 1,
"price": "0.0"
},
],
lineItemGroup: { title: 'Green Shirt and Shorts Bundle' }
},
{
"title": "Sneakers",
"quantity": 1,
"discountedTotalSet": {
"shopMoney": {
"amount": "100.0",
"currencyCode": "USD"
}
},
"lineItemGroup": null
}
]

With this data you can display your Bundles as a grouped view in your transactional emails.

Anchor to Step 3: Calculating the bundle priceStep 3: Calculating the bundle price

The last thing you'll need to do is calculate the total price of a bundle if you want to display it. This is a simple sum of the prices of the components.

function calculateBundlePrice(bundle) {
return bundle.components.reduce((acc, component) => {
return acc + parseFloat(component.price);
}, 0);
}

calculateBundlePrice(result[0]); // 22.0

By passing in each bundle object, the above will total up the price of all the components in the bundle. You'll need to modify this depending on the fields you queried. For example, if you queried discountedTotalSet, you'll get the total discounted price of the line item accounting for any quantity. If instead you used discountedUnitPriceSet, you'd get the discounted price per unit and will need to account for price and quantity in your calculation.

Was this page helpful?