Magento 2 Bundle Option Image Popup Collapse

Introduction

Magento 2 Bundle Option Image - Popup - Collapse extension allows you to add images on bundle product items, display bundles items details in a popup, collapse/expand each bundle item.

Installation

The extension has 2 separate ways of installation: via composer and via package upload.

Please follow this Installation Guide to install the extension.

Extension Configuration

Configuration Settings

To configure the extension, log into the Magento 2 Backend and go to STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Bundle Items

General

Enable - if "Yes", the extension will be enable in frontend. The image of each bundle item/option will display in frontend

"Bundle Items" CSS Selector - enter a comma-seperated list of CSS Selector for each Bundle Item/Option. Example:

  • For "default Bundle Item Type: radio" : input.bundle.option
  • For "default Bundle Item Type: select, multiple select : select.bundle.option
  • For "Other : .option>.control>input

If you use a custom "bundle items" selector or a theme that use a custom "bundle items" selector: please check the CSS selector of your bundle items, or contact Ulmod Support Team if you need any assistance on it

"Bundle Item" Image Width (px) - enter the width of the bundle item image. Eg. 75

"Bundle Item" Image Height (px) - enter the height of the bundle item image. Eg. 75

Collapse/Expand

Enable Expand/Collapse On Each "Bundle Item" - If "Yes",  the expand/collapse feature will be enabled in frontend of each bundle item/option

Slider

Enable Slider For "Bundle Item" Of Input Type "Multiple Select" - If "Yes", the slider will be enabled on each bundle item image that has a "multi-select" input type.

Number Of "Bundle Item" Images Visible In The Slider - enter the number of bundle item images that are visible in the slider. eg. 3

Slide Speed - enter the transition time (in milliseconds) between two slides. Eg.500

Auto Slide Bundle Images? - If "Yes", bundle images will auto-slide

Popup

Enable Popup On Each "Bundle Item" To Display More Infos - If "Yes" the pop-up icon will appear on the right side of each bundle item. All selected "Bundle Item" Data will display in the popup when the user clicks on the popup icon

Popup Link Text - Enter the text to appears in the popup link. Eg. "View More", or "Expand"

Select "Bundle Item" Data To Show In Pop-up - Select what to display in the bundle item popup

"Bundle Item" Image Width In Pop-up (px) - Enter the width of the bundle item image in the popup. Eg. 600

"Bundle Item" Image Height In Pop-up (px) - Enter the height of the bundle item image in the popup. Eg. 600

Design (Adjust Colors)

You can add only CSS codes that you need to adjust the colors, no need to add it all

Expand/Collapse

Title - Label color

.bundle-options-container .product-options-wrapper .fieldset .um-b-o-expand-collapse>.label {
    color: #333;
    background: #f6f6f6;
    border: 1px solid #ccc;
    border-bottom: 1px solid #dedede;
}

Popup

Popup link color

.um-b-item-popup-link-container a.um-b-item-popup-link {
	background-color: #e7e7e7;
    color: #333;	
    border: 1px solid #c2c2c2;	
}

Frontend View

Example of bundle items images in frontend

 

Example of bundle items expanded in frontend

 

Example of bundle items popup in frontend

 

Extension Support

Need Help?

Ulmod Support team is always ready to assist you, no matter which part of the world you are in. If something does happen and you think you might be experiencing an issue or bug, please contact us via [email protected] or submit a ticket from our Helpdesk Ticket and we will help you out.

Got Questions?

Should you have any questions or feature suggestions, please Contact Us. Your feedback is welcome!

Extension Product Page