Magento 2 Smart Quick View

A lightweight and developer-friendly Smart Quick View extension for Magento 2.

The module provides a modern AJAX-based Quick View experience without requiring a full product page reload.

Features

• AJAX-based product Quick View
• Responsive drawer interface
• Product prefetching
• Fast product data loading
• No full-page reload
• Keyboard-friendly close interaction
• Backdrop click support
• Magento 2 native architecture
• Composer compatible
• Store / website configuration support
• Lightweight frontend implementation
• Easy to customize
• Works with Magento 2 themes
• PSR-4 autoloading
• MIT licensed

Requirements

• Magento 2.4.x
• PHP 8.1+
• Magento Open Source or Adobe Commerce

Installation

Composer

From your Magento root directory:

composer require kumar/module-smart-quick-view

Enable the module:

php bin/magento module:enable Kumar_SmartQuickView

Run setup upgrade:

php bin/magento setup:upgrade

Compile Magento:

php bin/magento setup:di:compile

Deploy static content if required:

php bin/magento setup:static-content:deploy -f

Clean cache:

php bin/magento cache:flush

Manual Installation

Clone or download the repository into:

app/code/Kumar/SmartQuickView

The resulting structure should be:

app/code/Kumar/SmartQuickView/

Then run:

php bin/magento module:enable Kumar_SmartQuickView
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:flush

Configuration

Navigate to:

Stores
    → Configuration
        → Kumar
            → Smart Quick View

General Configuration

Enable Smart Quick View

Enable or disable the extension.

Enable Product Prefetch

When enabled, product information can be prefetched before the customer opens Quick View.

This can reduce perceived loading time.

How It Works

The extension adds a lightweight Quick View UI to the frontend.

When a customer triggers Quick View:

Product Listing
      ↓
Quick View Trigger
      ↓
AJAX Request
      ↓
Magento Controller
      ↓
Product Data
      ↓
Quick View Drawer

No complete product page navigation is required.

AJAX Endpoint

The default endpoint is:

/smartquickview/quickview/product

The endpoint is generated using Magento's URL builder, so installations under subdirectories or custom base URLs are supported.

Frontend Integration

The Quick View frontend configuration is initialized using Magento's native:

text/x-magento-init

Example:

{
    "*": {
        "Kumar_SmartQuickView/js/quickview": {
            "endpoint": "...",
            "enabled": true,
            "prefetch": true
        }
    }
}

Customization

The main frontend template is:

view/frontend/templates/quickview/ui.phtml

JavaScript:

view/frontend/web/js/quickview.js

Styles:

view/frontend/web/css/source/_quickview.less

The extension is designed so that the frontend UI can be customized without modifying Magento core files.

Module Structure

Kumar/SmartQuickView/
│
├── Block/
│   └── QuickView.php
│
├── Controller/
│   └── Quickview/
│       └── Product.php
│
├── etc/
│   ├── adminhtml/
│   │   ├── acl.xml
│   │   ├── menu.xml
│   │   └── system.xml
│   ├── frontend/
│   │   └── routes.xml
│   ├── config.xml
│   └── module.xml
│
├── view/
│   └── frontend/
│       ├── layout/
│       │   └── default.xml
│       ├── templates/
│       │   └── quickview/
│       │       └── ui.phtml
│       └── web/
│           ├── css/
│           │   └── source/
│           │       └── _quickview.less
│           └── js/
│               └── quickview.js
│
├── composer.json
├── registration.php
├── README.md
├── CHANGELOG.md
├── LICENSE
└── .gitignore

Development

Clone the repository:

git clone https://github.com/mekkumar/module-smart-quick-view.git

Install dependencies:

composer install

Copy the module into:

app/code/Kumar/SmartQuickView

Then run:

php bin/magento setup:upgrade
php bin/magento cache:flush

Production Deployment

For production mode:

php bin/magento deploy:mode:set production
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Troubleshooting

Quick View is not loading

Check:

php bin/magento module:status Kumar_SmartQuickView

The module should be enabled.

Clear generated code:

rm -rf generated/code/* generated/metadata/*

Then:

php bin/magento setup:di:compile
php bin/magento cache:flush

JavaScript is not updated

Run:

rm -rf pub/static/frontend/*
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

For developer mode, also check browser DevTools:

Console
Network
Sources

AJAX request returns an error

Check Magento logs:

var/log/system.log
var/log/exception.log

Also verify the endpoint:

/smartquickview/quickview/product

Compatibility

The module is intended for Magento 2.4.x installations.

Compatibility may vary depending on:

• Magento version
• Theme
• Custom product list templates
• Third-party catalog extensions
• Custom checkout implementations

Contributing

Contributions are welcome.

1. Fork the repository.
2. Create a feature branch.

git checkout -b feature/my-feature

3. Make your changes.
4. Test the module.
5. Commit your changes.

git commit -m "Add my feature"

6. Push the branch.

git push origin feature/my-feature

7. Open a Pull Request.

License

This project is licensed under the MIT License.

See LICENSE for details.

Author

Kunal Kumar

GitHub:

https://github.com/mekkumar