Skip to content

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;
    }
}

Modules reference

bundle_items