Bundle Items¶
Styles for bundle items used in bundle_items module.
Structurally .bundle-items
class contains following elements:
.bundle-items__plus
.bundle-items__list
Example¶
Here is an example of bundle items element usage taken from the bundle_items module.
Twig
{% from "@macros/product_bundle_item_tile.twig" import product_bundle_item_tile %}
{% set product = ObjectApi.getProduct(product_id) %}
<product-bundles class="bundle-items">
<div class="bundle-items__list">
{% for bundleItem in product.bundle.items %}
{% if not loop.first %}
<h2 class="bundle-items__plus">+</h2>
{% endif %}
{% set variantId = moduleInstanceId ~ "-#{bundleItem.variant.product.id}" %}
{{
product_bundle_item_tile(
bundleItem,
moduleConfig|merge({
instanceId: variantId,
groupFlashMessengerName
}
))
}}
{% endfor %}
</div>
</product-bundles>
Bundle Items tags¶
The .bundle-items
classes were designed to be used for items included in the bundle in a form of block elements like <div>
. However, you can use them with any other element and customize it to your own needs.
LESS¶
You can modify any bundle items less variable in your User Less
section to change bundle items styles.
Bundle Product Item Tile variables¶
Variables used to style bundle items.
@bundleItemsPadding: @globalSpacing;
@bundleItemsGap: @globalSpacing * 1.25;
@bundleItemsBgColor: @neutralColors50;
@bundleItemsBorderWidth: 1px;
@bundleItemsBorderStyle: dashed;
@bundleItemsBorderColor: @neutralColors300;
@bundleItemsBorderRadius: 8;
@bundleItemsPlusColor: @neutralColors300;
Bundle Items styles¶
Here are standard bundle items styles.
.bundle-items {
display: flex;
flex-direction: column;
padding: @bundleItemsPadding;
gap: @bundleItemsGap;
background-color: @bundleItemsBgColor;
border: @bundleItemsBorderWidth @bundleItemsBorderStyle @bundleItemsBorderColor;
.pixel-to-rem(border-radius, @bundleItemsBorderRadius);
&__plus {
text-align: center;
.weight-semibold();
color: @bundleItemsPlusColor;
}
&__list {
display: flex;
flex-direction: column;
}
}