This article describes how Avion Technology, Inc developed a Custom Product Package Module for one of their Magento 2 projects. As mentioned in our earlier articles, we have a core team of both Magento 1.0 and Magento 2.0 developers. We have extensively worked in both migration and customization of Magento 2.0 websites.
How does Custom Product Package Module work?
This is the most crucial feature that we developed for the new version of the site. The new website has more than 45,000 products available for sale online. This is the set of features that allow site visitors to quickly and easily locate individual Product Category 1 and Product Category 2 products, as well as package both category products together to create customized products that they can then purchase at a discount.
The shopping wizard breaks the product search and selection process down into a Six-step process:
- Choose your shopping path
- Filter Product Category 1 (or Product Category 2) products
- Select Product Category 1 (or Product Category 2) product
- Filter Product Category 2 (or Product Category 1) products
- Display summary
- Add to cart
Step 1 – Choose your shopping path
- At this stage of the process, the site visitor to choose how they want to shop for products. They can opt to start with Product Category 1, or Product Category 2.
- The Product Category 1 and Product Category 2 leads them to further steps within the wizard, while the prebuilt packages option links the user to that category within the product tree.
- In this module, all packages created through the shopping wizard has a default quantity of 4. The user cannot change this value during the package building process.
- At this level, the user can click the appropriate module on the home page to then activate the controls (list of drop-down filters) that allow them to start the buying process.
- The user must make at least one selection from these menus and then click the “Buy” button to continue to the next step.
- The list of options available for each buying path is listed below:
- Product Category 1
- Attributes
- Product Category 2
- Attributes
- Product Category 1
- The specific options available within each of these menus is driven by the individual attributes assigned and configured for each product.
- In this module, the filters presented must be utilized in the order presented. Subsequent selections are disabled until the preceding menu has been used.
Step 2 – Filter/Select product
- The user is presented with a list of products based on the selections that brought them to this step in the process.
- In addition to displaying a list of applicable products, the user also has the opportunity to filter the product list further based on specific criteria for that set of products.
- Users can view the resulting list of products on the same page along with the product details like image, name, brand, and price.
- The attributes are displayed in a series of drop-down menus, including the filters as well as additional options.
- The user can continue to filter the products until they reveal a list that contains a specific product that they are interested in purchasing.
Step 3 – Option to Buy or Continue
- In this step, the user can view the product details of the product for which they have selected. User has an option to continue the buying process. (interested in either Product Category 1, or Product Category 2).
- Various options are displayed depending on the user’s selection such as by Product Category 1, or Product Category 2.
- Instead of showing details for both products in the resulting package, details for just one product are shown (either the initial Product Category 1 or Product Category 2, selection).
- The pricing displayed here is for a set of 4 units (either Product Category 1 or Product Category 2).
- Along with the price, the details for the initial product selection is also displayed in the module.
- Shop by Product Category 1
- Add products from Product Category 2 and get discount
- This option advances the user to the next stage in the shopping wizard, allowing them to add products from Product Category 2 to the product selected from Product Category 1 and build their own “package.”
- Users can filter / select products from Product Category 2 to add to their package.
- Users can also directly buy the products from Product Category 1 by clicking on the “Add to Cart” button.
- Shop by Product Category 2
- Add products from Product Category 1 and get discount
- This option advances the user to the next stage in the shopping wizard, allowing them to add products from the Product Category 1 to the product selected and build their own “package.”
- Users can filter/select products from Product Category 1 to add to their package.
- Users can also directly buy the products from Product Category 2 by clicking on the “Add to Cart” button.
Step 4 – Filter package product
- In this step, the users can filter the available products to add to their package.
- As an example, if the user has selected a product from Product Category 1, the initial list of products displayed to the user is filtered on the size attribute of their product choice.
- The same filters outlined in step 2 above are displayed here, depending on which path the user has chosen.
- Users can also change their selection in this step. They can start from the beginning of the package building process where they can update their initial product selection.
- In this step, the user can also view the list of filters available for the second product.
- The price shown at this step is the total price of the package.
- The user can continue to manipulate the filters until they reveal a list of products that contains the product they want to add to their package. Once they click on a specific product, they are taken to the next step.
Step 5 – Display summary
- Once the user has selected both a Product Category 1 and Product Category 2 for their package, they can view a Package Summary that outlines the product details for all their selections.
- The following information is displayed in this step:
- Package Price
- Product Name
- Product Photo
- Technical Specifications
- Add to Cart
- We have also integrated the Affirm Financing option in the module, which offers multiple financing options to the users.
Step 6 – Shopping cart
- The product added by the user is to be displayed in the shopping cart.
- The price reduction for the packaged product is displayed as a “package discount” line item in the cart.
- The price of the package increases or reduces according to the pricing rules set by the Admin.
Why should you choose Avion?
We have a team of experienced Magento developers who have worked on many Magento projects involving both customizations and migrations. Our team is efficient in handling complex projects through which we can assist you in custom develop any modules required during the development of the website. Please do not hesitate to Contact Us, and you will be able to make your vision a reality and a dream come true.
Disclaimer:
Wherever any material is quoted as sourced from the published text with publishing rights vested in an individual, it is stated that it is a genuine quotation and no intention to claim it as our own.
