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!