Quick View & Product Compare for Magento 2

What you get

Panth Quick View & Product Compare for Magento 2 | AJAX Preview Modal, Recently Viewed & View Analytics

Quick View & Product Compare for Magento 2 — an AJAX-powered product preview modal on category listings, a side-by-side product comparison experience, a recently viewed products widget, and a full admin view analytics dashboard so merchants can see which products shoppers preview most. Ships with native templates for Hyva (Alpine.js) and Luma.

Panth Quick View lets shoppers preview products directly from category, search, and home-page listings without a full page reload. A lightweight AJAX product view modal renders the product image gallery, price, short description, configurable swatches, qty input, and "Add to Cart" button inline — dramatically reducing friction between browsing and buying. The module also adds product comparison (side-by-side attribute table), a recently viewed products block, and a merchant-facing view analytics tracking dashboard in the Magento admin that records preview counts, timestamps, and top-viewed products so you can make data-driven merchandising decisions. Built natively for Hyva with Alpine.js (no RequireJS, no jQuery) and for Luma via standard Magento UI components.

Key Features

Quick View Modal on Product Listings

• AJAX product preview — click the "Quick View" button on any product card to open a full product modal without leaving the listing page
• Configurable swatches, qty input, Add to Cart — shoppers can add to cart directly from the modal
• Image gallery — main image plus thumbnails, zoom support on Luma, Alpine-powered gallery on Hyva
• Short description, SKU, stock status, price — all the information shoppers need to decide
• Keyboard accessible — ESC to close, focus trap, ARIA attributes
• Mobile-first responsive design — full-screen modal on small viewports

Product Comparison

• Side-by-side comparison table — compare attributes, price, stock, ratings across up to 4 products
• Persistent across sessions — customer's compare list is stored server-side
• Add to compare from the Quick View modal — one-click add without leaving the category page
• Native Magento compare integration — no conflict with core compare functionality

Recently Viewed Products

• Storefront widget — show "Recently Viewed" on product, category, and CMS pages
• Per-customer tracking — logged-in customers see their history across devices
• Session-based for guests — guests see their in-session view history
• Configurable item count — show 4, 6, 8, or 12 recent products

View Analytics with Admin Dashboard

• Quick View tracking — every modal open is recorded with product ID, timestamp, store view
• Top viewed products report — rank products by preview count over any date range
• Conversion insight — see which quick-viewed products actually get added to cart
• Admin dashboard widget — at-a-glance summary on the Magento admin home screen
• CSV export — download raw analytics for BI tools

Hyva + Luma Ready

• Native Hyva templates — Alpine.js only, no jQuery, no RequireJS, no KnockoutJS
• Native Luma templates — standard Magento UI components and RequireJS
• Auto theme detection via Panth\Core\Helper\Theme
• Works on Adobe Commerce, Magento Open Source, and Adobe Commerce Cloud

Performance & Quality

• MEQP-compliant code (passes Adobe's Magento Extension Quality Program)
• FPC-friendly — Varnish/FPC compatible, blocks render via AJAX
• Lazy-loaded modal assets — JS and CSS loaded only when needed
• Translation-ready — all strings use Magento's __() function

How It Works

1. A Quick View button is injected onto each product card via layout XML.
2. On click, an Alpine.js (Hyva) or RequireJS (Luma) handler fires an AJAX request to the Panth Quick View controller.
3. The controller returns a rendered block with the product image gallery, price, swatches, qty input, and Add to Cart form.
4. The modal opens with a focus trap, body-scroll lock, and ESC/click-outside close handlers.
5. Each open is recorded in the panth_quickview_log table (if analytics is enabled) with product ID, customer ID (if logged in), store view, and timestamp.
6. The admin dashboard aggregates this data for reporting.

View Analytics Dashboard

Navigate to Admin → Panth Infotech → Quick View → Analytics.

The dashboard provides:

• Total Quick Views (today, 7 days, 30 days, all time)
• Top 10 Most Previewed Products with thumbnail, SKU, and view count
• Views by Store View breakdown
• Preview-to-Cart Conversion Rate
• CSV Export for any date range

Use this data to:

• Identify popular products that deserve better positioning
• Spot products with high preview counts but low cart conversion (possible pricing or imagery issues)
• Measure the impact of category merchandising changes

Quick Links

• Website: kishansavaliya.com
• Get a Quote: kishansavaliya.com/get-quote
• Upwork Profile (Top Rated Plus): upwork.com/freelancers/~016dd1767321100e21
• Upwork Agency: upwork.com/agencies/1881421506131960778
• Packagist: packagist.org/packages/mage2kishan/module-quickview
• GitHub: github.com/mage2sk/module-quickview
• Adobe Marketplace: commercemarketplace.adobe.com
• Email: kishansavaliyakb@gmail.com
• WhatsApp: +91 84012 70422

Ready to upgrade your Magento 2 store?

SEO Keywords: magento 2 quick view, product compare, recently viewed, product preview modal, ajax product view, magento 2 quick view modal, magento 2 product comparison, magento 2 recently viewed products widget, magento 2 hyva quick view, magento 2 luma quick view, alpine.js quick view, magento 2 view analytics, magento 2 product preview, magento 2 quick view dashboard, magento 2 ajax add to cart modal, magento 2 category page quick view, magento 2 quickview extension, magento 2 preview popup, magento 2 product insights, magento 2 top viewed products report, magento 2.4.8 quick view, php 8.4 quick view, mage2kishan quickview, panth quick view, panth infotech, hire magento developer, top rated plus upwork, kishan savaliya magento, custom magento development

Compatibility

Installation

Composer Installation (Recommended)

composer require mage2kishan/module-quickview
bin/magento module:enable Panth_Core Panth_QuickView
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Manual Installation via ZIP

1. Download the latest release from Packagist or the Adobe Commerce Marketplace.
2. Extract to app/code/Panth/QuickView/ in your Magento installation.
3. Ensure Panth_Core is also installed (required dependency).
4. Run the commands above starting from bin/magento module:enable.

Verify Installation

bin/magento module:status Panth_QuickView
# Expected: Module is enabled

After installation, navigate to:

Admin → Stores → Configuration → Panth Extensions → Quick View

Configuration

Go to Stores → Configuration → Panth Extensions → Quick View.