In MyCashflow, you can combine products into product bundles to sell them together at one price. This article explains how to add support for product bundles to your store theme.

For more information about product bundles, see also our user guide.

Product bundles can be implemented in a theme, roughly speaking, in two ways:

Default implementation of product bundles

By default, product bundles are printed at the end of the tag's {ProductShortDesc} content. If you want to place product bundles in the desired item of your layout theme, set the value <ProductBundles supported="true" /> in theme settings and add to the theme the {ProductBundles} tag that prints the list of product bundles.

In default implementation, product bundles are presented by using the single product template. If the theme also contains the product bundle template, the theme settings described above are ignored and the product bundle template is enabled automatically.

Product bundles' template and tags

Product bundle information is presented in the template themes/shop/THEME/product-bundle.html. If the theme contains product bundles template, the product bundle setting in the document /theme.xml is ignored and product bundles are displayed by using the template.

Product bundle information is printed in the template by using the product bundle tags:

themes/shop/THEME/product-bundle.html
<h1>{BundleName}</h1>
{BundleShortDesc}
{BundleImages}
{BundlePrices}
{BundleAvailability}
{BundleBuy}

In the template, you can also print the list of products included in product bundles by using the tag {BundleProducts} with tags of products contained in product bundles used in the helper attribute:

{BundleProducts(
    helper: {{
        <a href="{BundleItemUrl}">
            <h2>{BundleItemTitle}</h2>
            {BundleItemImageUrl(
                before: '<img alt="{BundleItemImageCaption}" src="',
                after: '"/>'
            )}
        </a>
    }}
)}

You can also include product bundle information on product lists and product pages by using the {ProductBundles} tag:

{Products(
    helper: {{
        <h2>{ProductName}</h2>
        <p>The product belongs to the following product bundles:</p>
        {ProductBundles(
            helper: {{
                {BundleName}
            }}
        )}
    }}
)}

The example's nested helper attributes wouldn't actually work; to work properly, they'd have to be placed in separate files.

In the sample markup, it would also be possible to use product tags in the helper attribute of the {ProductBundles} tag, whereby they print the data of the product being handled in the same way as if they were used in the helper of the upper level {Products} tag.

With the {Bundles} tag, you can print a fully editable list of online store's product bundles on any page. You can use product bundle tags in the tag's helper attribute:

{Bundles(
    before: '<ul>',
    helper: {{
        <li>
            <a href="{BundleUrl}">
                <h3>{BundleName}</h3>
                {BundleImage}
                {BundlePrice}
            </a>
        </li>
    }}
    after: '</ul>'
)}

The {Bundles} tag has several attributes that can be used to filter and organize the list in different ways. As a result, you can create a variety of product bundle listings for different sections of your online store.