Product Bundle Item Tile¶
Styles for bundle bundle item tile used in product_bundle_item_tile macro.
Structurally .product_bundle_item_tile class contains following elements:
.product_bundle_item_tile__price-container
Example¶
Here is an example of bundle bundle item tile element usage taken from the fragment of the product_bundle_item_tile macro.
Twig
{% from "@macros/image.twig" import image %}
<bundle-item
product-id="{{ product.variant.product.id }}"
variant-id="{{ product.variant.id }}"
{% if product.notStockProductOptions.count > 0 %} has-variants="1" {% endif %}
class="product-bundle-item-tile grid"
>
<div class="grid__row">
<div class="grid__col grid__col_xs-auto">
{% 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(imgProperties) }}
</div>
<div class="grid__col grid__col_xs-grow">
<div class="mt-xs-1 mb-xs-2">
<h1 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 %}
<span class="p p_no-margin color_neutral-800 font_semibold">
{{ product.variant.product.name }}
</span>
</h1>
</div>
</div>
</div>
</bundle-item>
Product Bundle Item Tile tags¶
The .product-bundle-item-tile classes were designed to be used for individual item tiles in bundles 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 product bundle item tile less variable in your User Less section to change product bundle item tile styles.
Product Bundle Item Tile variables¶
Variables used to style product bundle item tile.
@productBundleItemTileMinWidth: 288px;
@productBundleItemTileBorder: 1px solid @neutralColors200;
@productBundleItemTileBorderRadius: 4;
@productBundleItemTileBgColor: @neutralColors0;
@productBundleItemTileColor: @globalFontColor;
@productBundleItemTilePadding: @globalSpacing;
@productBundleItemTileBoxShadow: @shadowS;
Product Bundle Item Tile styles¶
Here are standard product bundle item tile styles.
.product-bundle-item-tile {
min-width: @productBundleItemTileMinWidth;
padding: @productBundleItemTilePadding;
border: @productBundleItemTileBorder;
.pixel-to-rem(border-radius, @productBundleItemTileBorderRadius);
background-color: @productBundleItemTileBgColor;
box-shadow: @productBundleItemTileBoxShadow;
color: @productBundleItemTileColor;
text-align: left;
}
@media screen and (min-width: @breakPointXs) {
.product-bundle-item-tile {
&__price-container {
display: flex;
flex-wrap: wrap;
row-gap: @globalSpacing * 0.5;
column-gap: @globalSpacing * 0.25;
}
}
}