HowTo - Render Configurable Bundle Templates on the Storefront
Edit on GitHubThe configurable bundle functionality is implemented by 3 widgets:
QuoteConfiguredBundleWidget
SalesConfiguredBundleWidget
ConfiguredBundleNoteWidget
By adding these widgets to respective templates, you can render the Configurable Bundle Templates in the Storefront. Specifically, in the Cart, Checkout Summary, Order Details, and Quote Request pages. This article provides information about how to do that.
Rendering Configurable Bundle Templates on the cart page
To render a configured bundle
product on the cart page, call QuoteConfiguredBundleWidget
in the cart page template (CartPage/Theme/default/templates/page-layout-cart/page-layout-cart.twig
).
Code example that renders configured bundle product on the cart page
{% widget 'QuoteConfiguredBundleWidget' args [data.cart] with {
data: {
isEditable: data.isQuoteEditable,
},
} only %}
{% endwidget %}
To add comments to a configured bundle
product, set up the ConfiguredBundleNoteWidget
module for your project. ConfiguredBundleNoteWidget
will be called automatically in the configured-bundle
molecule of the QuoteConfiguredBundleWidget
module.
Code example that renders ConfiguredBundleNoteWidget
{% if data.isEditable %}
{% block editableConfigurableBundleNote %}
{% widget 'ConfiguredBundleNoteWidget' args [data.bundle, data.quote] only %}{% endwidget %}
{% endblock %}
{% else %}
{% block notEditableConfigurableBundleNote %}
{% include molecule('readonly-bundled-note', 'ConfigurableBundleNoteWidget') ignore missing with {
data: {
bundle: data.bundle,
},
} only %}
{% endblock %}
{% endif %}
Rendering Configurable Bundle Templates on the checkout summary page
To render the configured bundle
product on the Checkout Summary page, call QuoteConfiguredBundleWidget
in the checkout summary page template (CheckoutPage/Theme/default/views/summary/summary.twig
).
Code example that renders configured bundle product on the checkout page, summary step
{% widget 'QuoteConfiguredBundleWidget' args [data.cart, shipmentGroup.items] with {
data: {
isEditable: false,
isQuantityVisible: false,
},
} only %}
{% endwidget %}
If you set up ConfiguredBundleNoteWidget
for your product, it will be called automatically in the configured-bundle
molecule of the QuoteConfiguredBundleWidget
(the same example as for the cart page). It is impossible to edit or remove comments for the configured bundle product on the checkout summary step. The customer can read comments which are editable on the cart page only.
Rendering Configurable Bundle Templates on the order details page
To render the configured bundle
product on the order details page, call SalesConfiguredBundleWidget
in the order-detail-table
(CustomerPage/Theme/default/components/molecules/order-detail-table/order-detail-table.twig
) molecule of the CustomerReorderWidget
.
Code example which renders configured bundle product in the order details page
{% widget 'OrderConfiguredBundleWidget' args [data.order, shipmentGroup.items] only %}
{% endwidget %}
If you set up the ConfiguredBundleNoteWidget
for your product, molecule readonly-bundled-note
of the widget will be called automatically inside the ordered-configured-bundle
(SalesConfigurableBundleWidget/Theme/default/components/molecules/ordered-configured-bundle/ordered-configured-bundle.twig
) molecule of the SalesConfiguredBundleWidget
.
It’s not possible to edit or remove comments for the ordered configured bundle product at the order details step too. The customer can only read comments which are editable on the cart page only. Example:
{% include molecule('readonly-bundled-note', 'ConfigurableBundleNoteWidget') ignore missing with {
data: {
bundle: data.bundle,
},
} only %}
Rendering Configurable Bundle Templates on the quote request pages
Rendering configured bundle
products on the Quote Request pages is implemented by calling QuoteConfiguredBundleWidget
inside the view of a special quote request page.
Code example which renders configured bundle product on the quote request page
{% widget 'QuoteConfiguredBundleWidget' args [quote] with {
data: {
isEditable: false,
},
} only %}
{% endwidget %}
- To render the Configured bundle on the
Quote Request Create
page, paste this code inside theQuoteRequestPage/Theme/default/views/quote-request-create/quote-request-create.twig
view. - To render the Configured bundle on the
Quote Request Details
page, paste this code inside theQuoteRequestPage/Theme/default/views/quote-request-details/quote-request-details.twig
view. - To render the Configured bundle in the
Quote Request Edit
page, paste this code inside theQuoteRequestPage/Theme/default/views/quote-request-edit/quote-request-edit.twig
view.
Thank you!
For submitting the form