Endertech Logo
Endertech
Author
Jonathan Anderson
Jonathan Anderson
Published
2/14/2017
Categories
E-Commerce

How to Customize Magento 2 Product Bundles

Custom Magento 2 Product Bundles

Last week, we focused on building custom shipping methods to match a client’s specific business needs. This week, we’re going to continue with our case-study of Milk Jar Cookies and how we built a custom Magento 2 Product Bundles page with user defined quantities.

Typically, when an ecommerce site offers a product bundle, there are a set number of options to make choices simple for the customer. However, in the case of Milk Jar Cookies, they wanted to allow the customer to make their own custom box of cookies, in which:

  • • THEY COULD CHOOSE ANY FLAVOR
    • THEY COULD CHOOSE ANY QUANTITY OF EACH FLAVOR 

Unfortunately, Magento 2 doesn’t natively offer this level of customization; however, the Bundle Products Extension comes close. With a little backend tinkering, we were able to to offer the functionality MJC needed.

As we modified the Bundle Products extension, we ran into a few road-blocks. In order to display each cookie MJC sells, we needed to modify the back-end for each product as “User-Defined = True”. This allowed a number of useful qualities:

Magento-768x418

  • • IT ENABLED IMAGES TO BE USED FOR EACH ITEM
    • • IT ALLOWED FOR THE PRODUCTS TO USE CHECKBOXES INSTEAD OF RADIO BUTTONS
    • • WHEN AN ITEM SELECTION >1, WE WROTE CODE TO AUTO-SELECT THE HIDDEN CHECKBOX
    • • WHEN AN ITEM SELECTION <1, WE WROTE CODE TO AUTO-DESELECT THE HIDDEN CHECKBOX
    • • A RUNNING TOTAL BADGE OF SELECTED COOKIES WAS IMPLEMENTED ABOVE THE ADD TO CART BUTTON. 
    • • WE ALSO CUSTOMIZED THE PRICE-BUNDLE WIDGET, WHICH IS RESPONSIBLE FOR MANAGING THE BUNDLE OPTIONS DISPLAYED (AKA THE COOKIE OPTIONS). SOME OF THE CUSTOMIZATIONS WE IMPLEMENTED INCLUDE:

For better UI/UX, the customer could only add the custom box to their cart with the correct number of cookies in their order (6/6 cookies). Currently, the input box for each cookie is limited to read-only, only modifiable through the + and – buttons. A future change that would improve the UX of ordering a custom box of cookie is to allow users to enter a cookie quantity without having to use the + and – buttons.

In summary, we now have figured out how to devise custom and complex product bundles using Magento 2. We hope this tutorial gave you some insight on how to modify Magento 2 to meet your custom product bundle needs and directed you away from any mishaps. Please reach out to us if you have any questions, at [email protected] or call (310) 400-0800.