A highly configurable QuickView module for Magento 2 that allows customers to quickly preview product details without leaving the current page.
- Compatible with Magento 2.4.x (tested up to 2.4.7)
- Supports all product types (simple, configurable, grouped, bundle, downloadable, virtual)
- AJAX-powered for fast loading
- Fully responsive design
- Easy to customize with extensive configuration options
- Compatible with custom themes
- Optimized for performance with proper caching
- Add to cart functionality without page reload
- Magento 2.4.x
- PHP 8.3
- 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/QuickView
in 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
- Go to Stores > Configuration > Amadeco > Quick View
- Set the basic settings:
- Enable/disable the module
- Configure selectors for product items
- Customize button label and appearance
- Configure the modal settings:
- Set modal title
- Enable/disable product details tab
- Enable/disable "Go to Product" button
- Customize selectors for theme compatibility
- Configure HTML identifiers replacement for advanced theme integration
The module is designed to be highly customizable to work with any Magento theme. All selectors and HTML identifiers are configurable in the admin panel without needing to modify code.
The module includes minimal styling. You can extend the styling in your theme by targeting these classes:
.quickview-button
.quickview-btn-container
.quickview-wrapper
.quickview-media
.quickview-main
For advanced customization, you can override the JavaScript options in your theme:
define([
'jquery',
'Amadeco_QuickView/js/amadeco-quickview'
], function ($) {
'use strict';
// Override options
$.widget('amadeco.amadecoQuickView').prototype.options = $.extend(
{},
$.amadeco.amadecoQuickView.prototype.options,
{
// Your custom options here
}
);
});
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.