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:
- Page Title, Name, SKU, Availability.
- Description, Short Description.
- Additional Attributes.
- Add To Wishlist, Add To Compare button.
- Review Summary, Reviews, Submit Review Form.
- Related, Up-Sell products.
Show the relevant data of a configurable product when a selected variant has no data for:
- Description, Short Description.
- Reviews.
- Related, Up-Sell products.
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:

Add or update your Access Keys i.e. <Public Key> and <Private Key> for Adobe Commerce Marketplace repository in auth.json using 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/vct directory.

Info

Optional execute in production mode:

bin/magento setup:di:compile # Recompile the code in production mode

Tip

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

Important

Flush Magento Cache in System Cache Management after configuration change to see the changes!

Clean and flush cache types in the Adobe Commerce Documentation.

Tip

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`
Default	`None`
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`
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.

Tip

Use CTRL+a to select all elements or hold CTRL to unselect an element in Admin.

`Element Fallbacks`

Info

Element fallbacks are optional and can be selected for each element separately.


Config	`Element Fallbacks`
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.
Admin path	`VCT` `Product Info Switcher` `General`
Type	`None` `Review Summary` `Short Description` `Description` `Related` `Up-Sell`
Default	`None`

Tip

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:

Frontend selector devtools

Warning

By default, SKU selector is specified for the default Luma theme.

Tip

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:

Selector validation in Admin

where ..value is an invalid jQuery selector. Use .value instead of ..value.

Tip

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`
Description	Product Name element selector.
Admin path	`VCT` `Product Info Switcher` `General`
Type	`jQuery Selector`
Default	`.page-title .base`

`Review Summary Selector`


Config	`Review Summary Selector`
Description	Product Review summary element selector.
Admin path	`VCT` `Product Info Switcher` `General`
Type	`jQuery Selector`
Default	`.product-reviews-summary`

`SKU Selector`


Config	`SKU Selector`
Description	Product SKU element selector.
Admin path	`VCT` `Product Info Switcher` `General`
Type	`jQuery Selector`
Default	`.product.attribute.sku .value`

`Availability Selector`


Config	`Availability Selector`
Description	Product Availability element selector.
Admin path	`VCT` `Product Info Switcher` `General`
Type	`jQuery Selector`
Default	`.product-info-main .stock.available span`

`Short Description Selector`


Config	`Short Description Selector`
Description	Product Short description element selector.
Admin path	`VCT` `Product Info Switcher` `General`
Type	`jQuery Selector`
Default	`.product.attribute.overview .value`

`Add To Wishlist Selector`

Info

Only products with visibility other than Not visible individually can be added to a wishlist.


Config	`Add To Wishlist Selector`
Description	Add to wishlist button element selector.
Admin path	`VCT` `Product Info Switcher` `General`
Type	`jQuery Selector`
Default	`.towishlist`

`Add To Compare Selector`

Info

Only products with visibility other than Not visible individually can be added to a comparison.


Config	`Add To Compare Selector`
Description	Add to compare button element selector.
Admin path	`VCT` `Product Info Switcher` `General`
Type	`jQuery Selector`
Default	`.tocompare`

`Description Selector`


Config	`Description Selector`
Description	Product Description element selector (Details tab or block).
Admin path	`VCT` `Product Info Switcher` `General`
Type	`jQuery Selector`
Default	`#description .description .value`

`Additional Attributes Selector`


Config	`Additional Attributes Selector`
Description	Product Additional attributes element selector (More Information tab or block).
Admin path	`VCT` `Product Info Switcher` `General`
Type	`jQuery Selector`
Default	`#additional`

`Reviews Selector`


Config	`Reviews Selector`
Description	Product Reviews element selector (Reviews tab or block).
Admin path	`VCT` `Product Info Switcher` `General`
Type	`jQuery Selector`
Default	`.review-list`

`Review Form Selector`

Info

Reviews are allowed for all child products, even if they are Not Visible Individually.


Config	`Review Form Selector`
Description	Product Submit review form element selector (Reviews tab or block).
Admin path	`VCT` `Product Info Switcher` `General`
Type	`jQuery Selector`
Default	`.review-add`

Warning

Update status for reviews to see reviews in the frontend.


Config	`Related Selector`
Description	Related products element selector.
Admin path	`VCT` `Product Info Switcher` `General`
Type	`jQuery Selector`
Default	`.related`

`Up-Sell Selector`


Config	`Up-Sell Selector`
Description	Up-Sell products element selector.
Admin path	`VCT` `Product Info Switcher` `General`
Type	`jQuery Selector`
Default	`.upsell`

`Debug`

`Enable`


Config	`Enable`
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.
Admin path	`VCT` `Product Info Switcher` `Debug`
Type	`Yes` `No`
Default	`No`

For example:

Log

Warning

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.

Info

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 Info Switcher

Overview

Tasks performed

Features

Install

Update

Uninstall

Configure

`Switchable Elements`

`Element Fallbacks`

Element selectors

Selector validation in Admin

`Name Selector`

`Review Summary Selector`

`SKU Selector`

`Availability Selector`

`Short Description Selector`

`Add To Wishlist Selector`

`Add To Compare Selector`

`Description Selector`

`Additional Attributes Selector`

`Reviews Selector`

`Review Form Selector`

`Up-Sell Selector`

`Debug`

`Enable`

Configure product layout

`Default Product Layout`

`Product` `Design`

Examples

Page Title

Name, SKU, Availability etc

Description

Additional Attributes

Reviews, Review Form

Up-Sell

Overview​

Tasks performed​

Features​

Install​

Update​

Uninstall​

Configure​

Switchable Elements​

Element Fallbacks​

Element selectors​

Selector validation in Admin​

Name Selector​

Review Summary Selector​

SKU Selector​

Availability Selector​

Short Description Selector​

Add To Wishlist Selector​

Add To Compare Selector​

Description Selector​

Additional Attributes Selector​

Reviews Selector​

Review Form Selector​

Related Selector​

Up-Sell Selector​

Debug​

Enable​

Configure product layout​

Default Product Layout​

Product Design​

Examples​

Page Title​

Name, SKU, Availability etc​

Description​

Additional Attributes​

Reviews, Review Form​

Related​

Up-Sell​

Overview

Tasks performed

Features

Install

Update

Uninstall

Configure

`Switchable Elements`

`Element Fallbacks`

Element selectors

Selector validation in Admin

`Name Selector`

`Review Summary Selector`

`SKU Selector`

`Availability Selector`

`Short Description Selector`

`Add To Wishlist Selector`

`Add To Compare Selector`

`Description Selector`

`Additional Attributes Selector`

`Reviews Selector`

`Review Form Selector`

`Related Selector`

`Up-Sell Selector`

`Debug`

`Enable`

Configure product layout

`Default Product Layout`

`Product` `Design`

Examples

Page Title

Name, SKU, Availability etc

Description

Additional Attributes

Reviews, Review Form

Related

Up-Sell