In this article we will show how to easily list the individual products of a product bundle, with an example using the Repeater with a custom query web part in the product detail page, or as a nested control directly in the product detail transformation.
To start with, let’s look at the Bundle product type - described at
Product type bundle.
Now imagine you would like to list the various products that are in this bundle, so that the customer may purchase them individually or see just how special the bundle offer is..
The key thing is to use the appropriate web part in the page template or nested control in the transformation, for example a "
Repeater with custom query" (
QueryRepeater) with the following
WHERE condition:
SKUID IN (SELECT SKUID FROM COM_Bundle WHERE BundleID={%SKUID%})
You can define it as a standalone web part in the "
Products" Page template, under the
ProductList webpart.
The web part properties can be set as the following (note that these are only those changed, you can set the others according to your needs):
Default
Web part control ID: BundedProducts
Web part title: Bunded products list
Visibility
Show for document types: CMS.Bundle
Content
Query name: ecommerce.sku.selectall
Content filter
WHERE condition: SKUID IN (SELECT SKUID FROM COM_Bundle WHERE BundleID={%SKUID%})
Transformations
Transformation name: CMS.Bundle.bundlelist
HTML Envelope
Content before: <h3>Bundled items</h3>
This approach is easier to manage and setup.
The transformation
CMS.Bundle.bundlelist mentioned above could be similar to the ordinary product list transformation (you can copy its content into that new transformation). Basically, the most simple list can be made with the expression:
<%# Eval("SKUName") %>
Apart from the standalone web part option, an alternative would be to place it in the transformation as a nested control, which could look like the below (in the
Bundle product document type transformation named "
CorporateSite" in this example):
<h3>Bundled items</h3>
<div class="bundledproducts">
<cc1:QueryRepeater ID="rptBundled" runat="server" QueryName="ecommerce.sku.selectall" TransformationName="cms.bundle.bundlelist" />
</div>
</div>
<script runat="server">
protected void Page_PreRender(object sender, EventArgs e)
{
rptBundled.WhereCondition = "SKUID IN (SELECT SKUID FROM COM_Bundle WHERE BundleID = "+ CMSContext.CurrentDocument.NodeSKUID +" )";
rptBundled.ReloadData(true);
}
</script>
The transformation inline code-behind sets the
WhereCondition property of the query repeater.
It requires your query (that’s set in properties of the repeater) to be defined with standard macros, i.e. it contains the
##WHERE## macro in its definition.
You can also set the property of the nested control directly, not necessarily in the transformation inline codebehind (
Page_PreRender). To do this you’d enable
DelayedLoading of the nested query repeater and trigger the
ReloadData in the
Page_PreRender. You could use the
Eval function or other methods in the
WhereCondition property set directly in the nested control definition.
-zc-