A highly configurable QuickView module for Magento 2 that allows customers to quickly preview product details without leaving the current page. Engineered for performance and strict adherence to modern Magento coding standards.
- Performance Optimized: Implements
IntersectionObserverfor lazy loading of QuickView buttons, reducing initial DOM impact. - Modern Architecture: Built on PHP 8.3 using strict typing, constructor promotion, and readonly properties.
- Broad Compatibility: Supports all product types (Simple, Configurable, Grouped, Bundle, Downloadable, Virtual).
- AJAX-Powered: Fast loading of modal content.
- Fully Responsive: Adapts seamlessly to mobile and desktop viewports.
- Theme Friendly: Extensive configuration options to target specific CSS selectors.
- Seamless Integration: "Add to Cart" functionality without page reload.
- Magento: 2.4.6+ (Tested on 2.4.8)
- PHP: 8.3 (Strict Requirement)
- jQuery: (Included in Magento)
composer require amadeco/module-quickview
bin/magento module:enable Amadeco_QuickView
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy
- Create directory
app/code/Amadeco/QuickViewin your Magento installation. - Clone or download this repository into that directory.
- Enable the module and update the database:
bin/magento module:enable Amadeco_QuickView
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy
Navigate to Stores > Configuration > Amadeco > Quick View.
- General Settings:
- Enable/Disable the module.
- Elements Selector: Define which product container triggers the button initialization (default:
.product-item). - Button Container: Specify where to inject the button (default:
.product-item-info). - Button Label: Customize the text (e.g., "Quick View").
- Modal Settings:
- Set Modal Title.
- Toggle visibility for Product Details, Reviews, and Downloadable Samples.
- Enable/Disable "Go to Product" button.
- Theme Selectors:
- Customize CSS selectors for Tabs and Review links to match your theme's structure.
- HTML Identifiers Replacement:
- Advanced configuration to swap HTML IDs or Classes dynamically within the modal to prevent conflicts with the main page.
The module is designed to be highly customizable. You can configure almost all behavior via Magento's Layout XML system, avoiding the need to write custom JavaScript for simple configuration changes.
To change options like selectors, labels, or disable lazy loading, extend the layout in your theme (e.g., app/design/frontend/Vendor/Theme/Amadeco_QuickView/layout/default.xml).
Target the amadeco.quickview.init block and define arguments in jsLayout:
<?xml version="1.0"?>
<page xmlns:xsi="[http://www.w3.org/2001/XMLSchema-instance](http://www.w3.org/2001/XMLSchema-instance)" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="amadeco.quickview.init">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="lazy" xsi:type="boolean">false</item>
<item name="modalTitle" xsi:type="string" translate="true">Fast Preview</item>
<item name="selectors" xsi:type="array">
<item name="btnContainer" xsi:type="string">.custom-photo-container</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>The module includes minimal styling. You can extend the styling in your theme by targeting these classes: CSS
.quickview-button /* The trigger button */
.quickview-wrapper /* The main modal wrapper */
.quickview-media /* Left column (Images) */
.quickview-main /* Right column (Details) */Contributions are welcome! Please read our Contributing Guidelines.
For issues or feature requests, please create an issue on our GitHub repository.
This module is licensed under the Open Software License ("OSL") v3.0. See the LICENSE.txt file for details.