product_bundle_item_tile¶
The product_bundle_item_tile macro is used to render a tile of a single product included in the given bundle.
Definition¶
Input parameters¶
product¶
Product parameter represents a ProductBundleItem object from ObjectApi.
options¶
object represents an object of product quantity options
| Option key | Type | Default | Required | Description |
|---|---|---|---|---|
| options.hasProducerName | boolean |
- | no | If set to true the product will have nthe name of its producer displayed |
| options.hasRegularPriceOutsideBundle | boolean |
- | no | If set to true the product will have the regular price outside the bundle displayed |
| options.hasCheaperInTheBundleInfo | boolean |
- | no | If set to true the product will have the tag informing about it being cheaper in the bundle displayed |
| options.hasShortDescription | boolean |
- | no | If set to true the product will have the short description displayed |
| options.groupFlashMessengerName | string |
- | no | Name of a flash messenger that covers errors for all products in the bundle |
Example¶
In this example we render simple product bundle item tiles. To get the product object we use the getProduct() method from ObjectApi. Then we iterate through its bundle items and render the product_bundle_item_tile macro for each item.
{% from "@macros/product_bundle_item_tile.twig" import product_bundle_item_tile %}
{% set product = ObjectApi.getProduct(product_id) %}
{% for bundleItem in product.bundle.items %}
{% set variantId = moduleInstanceId ~ "-#{bundleItem.variant.product.id}" %}
{{ product_bundle_item_tile(bundleItem) }}
{% endfor %}
Example¶
In this example we render product bundle item tiles with producer name and a short description.
{% from "@macros/product_bundle_item_tile.twig" import product_bundle_item_tile %}
{% set product = ObjectApi.getProduct(product_id) %}
{% for bundleItem in product.bundle.items %}
{% set variantId = moduleInstanceId ~ "-#{bundleItem.variant.product.id}" %}
{{ product_bundle_item_tile(bundleItem, {
hasProducerName: true,
hasShortDescription: true
}) }}
{% endfor %}
Example¶
In this example we render product bundle item tiles with all the props
{% from "@macros/product_bundle_item_tile.twig" import product_bundle_item_tile %}
{% set product = ObjectApi.getProduct(product_id) %}
{% for bundleItem in product.bundle.items %}
{% set variantId = moduleInstanceId ~ "-#{bundleItem.variant.product.id}" %}
{{ product_bundle_item_tile(bundleItem, {
hasProducerName: true,
hasRegularPriceOutsideBundle: true,
hasCheaperInTheBundleInfo: true,
hasShortDescription: true
}) }}
{% endfor %}
Macro source code¶
{% macro product_bundle_item_tile(product, options) %}
{% from "@macros/image.twig" import image %}
{% from "@macros/product_variants.twig" import product_variants %}
{% from "@macros/section_title.twig" import section_title %}
{% from "@macros/product_producer.twig" import product_producer %}
{% from "@macros/product_short_description.twig" import product_short_description %}
{% from "@macros/product_availability.twig" import product_availability %}
{% set globalPricesSettings = ObjectApi.getProductPricesSettings() %}
{% set basketSettings = ObjectApi.getBasketSettings() %}
{% set shouldShowNetPrice = globalPricesSettings.showNetPrice and not globalPricesSettings.showGrossPrice %}
{% set shouldShowGrossPrice = not globalPricesSettings.showNetPrice and globalPricesSettings.showGrossPrice %}
{% set stockVariantName = '' %}
{% for optionValue in product.variant.optionValues %}
{% if optionValue.option.isStockOption %}
{% set stockVariantName = "#{optionValue.option.name}: #{optionValue.optionValue.name}" %}
{% endif %}
{% endfor %}
{% set image %}
{% set imgProperties = {
src: product.variant.image.url ?? product.variant.product.featuredImage.url,
alt: product.variant.image.name ?? product.variant.product.featuredImage.name,
title: product.variant.image.name ?? product.variant.product.featuredImage.name,
width: 233,
height: 291
} %}
{{ image({ img: imgProperties }) }}
{% endset %}
{% set productTitleAndQuantity %}
<div class="mt-xs-1 mb-xs-2">
<h2 class="label_vcenter">
{% if product.quantity > 1 %}
<span class="tag tag_quaternary p_xs p_no-margin">
<span class="font_semibold">{{ product.quantity }} {{ product.variant.product.unit.name }}</span>
x
</span>
{% endif %}
<a
href="{{ product.variant.product.url }}"
title="{{ product.variant.product.name }}"
class="p p_no-margin color_main font_semibold link_no-underline"
>
{{ product.variant.product.name }} {{ stockVariantName ? "(#{stockVariantName})" : '' }}
</a>
</h2>
</div>
{% endset %}
{% set productPrice %}
<div class="product-bundle-item-tile__price-container mb-xs-2">
<p class="p p_xs p_no-margin color_main mb-xs-3">
{% if options.hasRegularPriceOutsideBundle %}
{{ translate('Regular price outside the bundle') }}:
<h-tab-panel
{% if not shouldShowNetPrice %}hidden{% endif %}
name="price-net-{{ product.bundle.product.id }}"
class="js__product-price-net"
>
<span class="font_semibold">{{ product.variant.price.formatNet }}</span>
</h-tab-panel>
<h-tab-panel
{% if not shouldShowGrossPrice %}hidden{% endif %}
name="price-gross-{{ product.bundle.product.id }}"
class="js__product-price-gross"
>
<span class="font_semibold">{{ product.variant.price.formatGross }}</span>
</h-tab-panel>
{% endif %}
</p>
{% if options.hasCheaperInTheBundleInfo %}
<span class="tag tag_notice tag_quaternary p_xs p_no-margin mt-xs-1 mt-sm-0">
{{ translate('Cheaper in the bundle!') }}
</span>
{% endif %}
</div>
{% endset %}
<bundle-item
product-id="{{ product.variant.product.id }}"
variant-id="{{ product.variant.id }}"
bundle-item-id="{{ product.id }}"
{% if product.notStockProductOptions.count > 0 %} has-variants="1" {% endif %}
class="product-bundle-item-tile grid"
>
<div class="grid__row visible-xs-only mb-xs-2">
<div class="grid__col grid__col_xs-4">{{ image }}</div>
<div class="grid__col grid__col_xs-8 grid__col_md-grow">
{% if options.hasProducerName %}
{{ product_producer(product.variant.product) }}
{% endif %}
{{ productTitleAndQuantity }}
{{ productPrice }}
</div>
</div>
<div class="grid__row">
<div class="grid__col grid__col_xs-4 grid__col_md-auto hidden-xs-only">{{ image }}</div>
<div class="grid__col grid__col_xs-grow">
{% if options.hasProducerName %}
{{ product_producer(product.variant.product, {
classNames: 'hidden-xs-only'
}) }}
{% endif %}
<div class="hidden-xs-only">
{{ productTitleAndQuantity }}
{{ productPrice }}
</div>
{% if product.notStockProductOptions.count > 0 and product.bundle.product.isAvailable %}
{{
product_variants(
product.variant.product,
options|merge({
hidePriceModification: true,
noMessages: true,
groupFlashMessengerName: options.groupFlashMessengerName,
singleChoiceBoxDisplayStyle: 'isModernRadioButtonStyle',
shouldDisplayNonStockOptionsOnly: true,
productInstanceKey: product.id
})
)
}}
{% endif %}
{% if options.hasShortDescription and product.variant.product.shortDescription|length > 0 %}
{{ product_short_description(product.variant.product.shortDescription, {
classNames: 'product-short-description__content-secondary'
}) }}
{% endif %}
{% if basketSettings.isBuyingEnabled %}
{{ product_availability(product.variant.product, {
classNames: 'product-availability_flex product-availability_s'
}) }}
{% endif %}
</div>
</div>
</bundle-item>
{% endmacro %}