Product Info Switcher
☆☆☆☆☆ Leave review to help in further development
Overview
A configurable product appears to be a single product with lists of options for each variant. However, each option represents a separate product.
By default, when selecting a configurable product option, you see almost the same information as for a configurable product. With this module, when selecting a configurable product option, your customer will see exactly the information about the selected product. You can decide which information you want to take from the configurable product and which information from its option.
You have a new store and related products have not been added for all variants of configurable products. It doesn't matter, display the related products of the configurable product for such products. Now the customer will always have recommendations, and they will be the most relevant.
Configurable products will become more useful and convenient. Instead of dozens of products in a category or search that differ only size e.g. S, M or volume e.g. 500ml, 1L that only complicate the search and choice, make one configurable.
Tasks performed
- Show the following selected product data instead of the configurable product data, when an option is selected:
- Show the relevant data of a configurable product when a selected variant has no data for:
- Allow writing reviews for products that are Not Visible Individually.
- Show switchable product data in the browser console for debugging.
Features
- Compatibility with most themes due to the flexibility of module configuration.
- Support Dropdown, Visual Swatch, Text Swatch attribute input types.
- No reloads or AJAX requests to display selected product data.
- Plugins are used to prevent conflicts among modules.
- Meets Magento Coding Standard.
- Tested and verified by Adobe Extension Quality Program.
Install
Use Composer to install the module or get the code for review:
- Log in to your Marketplace account that purchased the module.
- Add or update your Access Keys i.e.
<Public Key>and<Private Key>for Adobe Commerce Marketplace repository inauth.jsonusing the following command:
composer config --auth http-basic.repo.magento.com <Public Key> <Private Key> # Add or update Access Keys in auth.json
# e.g. composer config --auth http-basic.repo.magento.com 39b747b8ab1d624582bb3n1a09deb489 31b9fce4cb78f523fd34aa3abb90c89c
- Execute the following commands:
composer require vct/productinfoswitcher # Install the module using Composer
bin/magento setup:upgrade --safe-mode=1 # Update the database schema and data
bin/magento setup:static-content:deploy --force # Deploy static view files
- The module was installed in
vendor/vctdirectory.
Optional execute in production mode:
bin/magento setup:di:compile # Recompile the code in production mode
Help for common issues is on the FAQ page.
For further assistance, contact me by email vct.vendor@gmail.com.
Get your authentication keys and install an extension in the Adobe Commerce Documentation.
Update
Use Composer to update the module or get the code for review:
composer require --update-with-dependencies vct/productinfoswitcher # Update the module using Composer
bin/magento setup:upgrade --safe-mode=1 # Update the database schema and data
bin/magento setup:static-content:deploy --force # Deploy static view files
Execute only in production mode:
bin/magento setup:di:compile # Recompile the code in production mode
Upgrade an extension in the Adobe Commerce Documentation.
Uninstall
Execute the following commands to uninstall a module:
bin/magento module:uninstall Vct_ProductInfoSwitcher # Uninstall module
bin/magento setup:upgrade --safe-mode=1 # Update the database schema and data
bin/magento setup:static-content:deploy --force # Deploy static view files
Uninstall modules in the Adobe Commerce Documentation.
Configure
Flush Magento Cache in System Cache Management after configuration change to see the changes!
Clean and flush cache types in the Adobe Commerce Documentation.
Use Use System Value / Use Default / Use Website checkbox to the right of the setting to set the default value.
Use system value in the Adobe Commerce Documentation.
Switchable Elements
| Config | Switchable Elements |
| Admin path | VCT Product Info Switcher General |
| Type | None Page title Name Review Summary Availability SKU Add To Wishlist Button Add To Compare Button Short Description Description Additional Attributes Reviews Review Form Related Up-Sell |
| Default | None |
| Description | Show the selected child product (variant) data instead of the parent product data, when an option is selected on the configurable product page. No items are selected by default. |
Use CTRL+a to select all elements or hold CTRL to unselect an element in Admin.
Element Fallbacks
Element fallbacks are optional and can be selected for each element separately.
| Config | Element Fallbacks |
| Admin path | VCT Product Info Switcher General |
| Type | None Review Summary Short Description Description Related Up-Sell |
| Default | None |
| Description | Yes to display relevant product data of a configurable product when a selected variant has no data. No to display relevant product data of a selected variant even if no data. |
Use CTRL+a to select all elements or hold CTRL to unselect an element in Admin.
Element selectors
The module allows you to change jQuery Selector of elements for compatibility with different themes. It is necessary to specify the correct element selector for your frontend theme to display selected product data instead of the configurable product data on the configurable product page, when an option is selected.
For example, element selector for the product SKU in Luma theme is .product.attribute.sku .value:
By default, SKU selector is specified for the default Luma theme.
Module compatibility with third-party themes on the FAQ page.
Selector validation in Admin
The module has jQuery selector validation in Admin for selector input fields when Save Config.
For example, element selector for the product SKU:
where ..value is an invalid jQuery selector. Use .value instead of ..value.
Ensure that the correct jQuery Selector is specified, if after configuring the module and clearing the cache, element switching still does not work.
Name Selector
| Config | Name Selector |
| Admin path | VCT Product Info Switcher General |
| Type | jQuery Selector |
| Default | .page-title .base |
| Description | Product Name element selector. |
Review Summary Selector
| Config | Review Summary Selector |
| Admin path | VCT Product Info Switcher General |
| Type | jQuery Selector |
| Default | .product-reviews-summary |
| Description | Product Review summary element selector. |
SKU Selector
| Config | SKU Selector |
| Admin path | VCT Product Info Switcher General |
| Type | jQuery Selector |
| Default | .product.attribute.sku .value |
| Description | Product SKU element selector. |
Availability Selector
| Config | Availability Selector |
| Admin path | VCT Product Info Switcher General |
| Type | jQuery Selector |
| Default | .product-info-main .stock.available span |
| Description | Product Availability element selector. |
Short Description Selector
| Config | Short Description Selector |
| Admin path | VCT Product Info Switcher General |
| Type | jQuery Selector |
| Default | .product.attribute.overview .value |
| Description | Product Short description element selector. |
Add To Wishlist Selector
Only products with visibility other than Not visible individually can be added to a wishlist.
| Config | Add To Wishlist Selector |
| Admin path | VCT Product Info Switcher General |
| Type | jQuery Selector |
| Default | .towishlist |
| Description | Add to wishlist button element selector. |
Add To Compare Selector
Only products with visibility other than Not visible individually can be added to a comparison.
| Config | Add To Compare Selector |
| Admin path | VCT Product Info Switcher General |
| Type | jQuery Selector |
| Default | .tocompare |
| Description | Add to compare button element selector. |
Description Selector
| Config | Description Selector |
| Admin path | VCT Product Info Switcher General |
| Type | jQuery Selector |
| Default | #description .description .value |
| Description | Product Description element selector (Details tab or block). |
Additional Attributes Selector
| Config | Additional Attributes Selector |
| Admin path | VCT Product Info Switcher General |
| Type | jQuery Selector |
| Default | #additional |
| Description | Product Additional attributes element selector (More Information tab or block). |
Reviews Selector
| Config | Reviews Selector |
| Admin path | VCT Product Info Switcher General |
| Type | jQuery Selector |
| Default | .review-list |
| Description | Product Reviews element selector (Reviews tab or block). |
Review Form Selector
Reviews are allowed for all child products, even if they are Not Visible Individually.
| Config | Review Form Selector |
| Admin path | VCT Product Info Switcher General |
| Type | jQuery Selector |
| Default | .review-add |
| Description | Product Submit review form element selector (Reviews tab or block). |
Update status for reviews to see reviews in the frontend.
Related Selector
| Config | Related Selector |
| Admin path | VCT Product Info Switcher General |
| Type | jQuery Selector |
| Default | .related |
| Description | Related products element selector. |
Up-Sell Selector
| Config | Up-Sell Selector |
| Admin path | VCT Product Info Switcher General |
| Type | jQuery Selector |
| Default | .upsell |
| Description | Up-Sell products element selector. |
Debug
Enable
| Config | Enable |
| Admin path | VCT Product Info Switcher Debug |
| Type | Yes No |
| Default | No |
| Description | Yes to show or No to hide the module configuration and data of product variants in the browser console, and highlight elements with selectors from the configuration. |
For example:
Debug Enable config should be set to No in production and used only for debugging!
Configure product layout
Choose the design that you want to use for product pages.
Depending on the product layout, tab or block will be empty or not be displayed if the product has no data for: Description, Additional Attributes, Reviews, Related, Up-Sell products.
Default Product Layout
Default Product Layout config in Stores Configuration GENERAL Web Default Layouts determines the layout used by default for product pages.
Configure default product layout in the Adobe Commerce Documentation.
Product Design
Design section in Catalog Products <Product> allows you to apply a different layout to the product page.
Product settings - Design in the Adobe Commerce Documentation.
Examples
Page Title
Name, SKU, Availability etc.
Description
Additional Attributes
Reviews, Review Form
Related
Up-Sell
