Magento 2 is a powerful e-commerce platform available 100% free for merchants. It has multiple advancements in terms of User Interface, features, and functionalities from Magneto 1. However, before discussing how to implement Quick View functionality on Magento 2, we want to let you know that by default, Magento 2 provides the facility to add products from the listing pages where you can select options like size or color from the product listing page and then add the product to cart without visiting the product page.
When clicked:
But still, there is a lot of information missing from the category page, and customers want to quickly learn essential details about the product before purchasing them. So, if you want to preview a product directly from the category page, this tutorial will help you add this functionality to your Magento store.
The basic idea is to add the “Quick View” button to the product box on the category listing, which will open a modal/ pop-up window, showing the product with all its components usually available only on the product detail page.
Step 1: Declare the module by creating etc/module.xml file
“app/code/Bizspice/QuickView/etc/module.xml”
<?xml version="1.0"?>< <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Bizspice_QuickView" setup_version="1.0.0"> <sequence> <module name="Magento_Catalog"/> <module name="Magento_Customer"/> </sequence> </module> </config>
Step 2: To register your module create registration.php file.
“app/code/Bizspice/QuickView/registration.php”
<?php /** * @category Bizspice * @package Bizspice_QuickView * @author Your Name <[email protected]> * @copyright www.www.bizspice.com */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Bizspice_QuickView', __DIR__ );
These are the basic files for a module and now we can enable this module by running the following command from terminal
php bin/magento module:enable BIzspice_QuickView
Or you can upgrade your database
php bin/magento setup:upgrade
This will register your module and now you can add functionality in your module
Step 3: To add Quick View button on each product on the Category Page
Create app/code/Bizspice/QuickView/view/frontend/layout/catalog_category_view.xml
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <referenceBlock name="category.product.addto"> <block class="Magento\Catalog\Block\Product\ProductList\Item\Block" name="category.product.quickview" as="quickview" template="Bizspice_QuickView::product/productlist/item/quickview.phtml"/> </referenceBlock> </referenceContainer> </body> </page>
Note: You can add a quick view button on other pages similarly via XML.
And Create app/code/Bizspice/QuickView/view/frontend/templates/product/productlist/item/quickview.phtml
<?php
/** @var Magento\Catalog\Block\Product\ProductList\Item\Block $block */
?>
<button type="button" id="quickViewButton<?php /* @noEscape */ echo $block->getProduct()->getId() ?>" class="button-quickview" data-mage-init='{ "Bizspice_QuickView/js/product/productlist/item/quickview": { } }' data-id="<?php /* @noEscape */ echo $block->getProduct()->getId() ?>" data-url="<?php /* @noEscape */ echo $block->getProductUrl($block->getProduct()) ?>"> <?php /* @noEscape */ echo __('Quick view') ?> </button>
<div id="quickViewContainer<?php /* @noEscape */ echo $block->getProduct()->getId() ?>"></div> This will add a button to every product on the category page. The id of the button “quickViewButton” and the id of “quickViewContainer” which we are going to use in our js file to load the Quick View pop-up in which we will show the product view page (yes, in the pop-up, we will display the product details and that’s why we call product in a container).
Step 4: So now, here is the main part of this work which is JS. This is where we need to do most of the work. Here we will get the Product Id and Product URL from our template. We will get product details here and append them to our quickViewContainer.
Create app/code/Bizspice/QuickView/view/frontend/web/js/product/productlist/item/quickview.js
define([ 'jquery', 'Magento_Ui/js/modal/modal', 'mage/loader', 'Magento_Customer/js/customer-data' ], function ($, modal, loader, customerData) { 'use strict'; return function(config, node) { var product_id = jQuery(node).data('id'); var product_url = jQuery(node).data('url'); var options = { type: 'popup', responsive: true, innerScroll: false, title: $.mage.__('Quick View'), buttons: [{ text: $.mage.__('Close'), class: 'close-modal', click: function () { this.closeModal(); } }] }; var popup = modal(options, $('#quickViewContainer' + product_id)); $("#quickViewButton" + product_id).on("click", function () { openQuickViewModal(); }); var openQuickViewModal = function () { var modalContainer = $("#quickViewContainer" + product_id); modalContainer.html(createIframe()); var iframearea = "#new_frame" + product_id; $(iframearea).on("load", function () { modalContainer.addClass("product-quickview"); modalContainer.modal('openModal'); observeAddToCart(this); }); }; var observeAddToCart = function (iframe) { var doc = iframe.contentWindow.document; $(doc).contents().find('#product_addtocart_form').submit(function(e) { e.preventDefault(); $.ajax({
data: $(this).serialize(),type: $(this).attr('method'),url: $(this).attr('action'),success: function(response) { $(".close-modal").trigger("click"); $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("open"); }}); });};var createIframe = function () { return $('<iframe />', { id: 'new_frame' + product_id, src: product_url + "?iframe=1" }); } };});That’s it. The Quick View feature is now available on your web-site on all the category pages. Customers will now see the important details about the product before buying it. It will also show a “Add to Cart” button to add products to the cart from that pop-up.
Note: You can make style changes on your own and according to your design need. This will load the whole product page, including the header and the footer. You may also feel some sections are not needed in the modal pop-up. That can be handled via creating a new layout file. You can check this in our next section.
Changing Layout of Modal Window
If you want to change the layout in your pop-up, you can remove extra elements via XML that you don’t want in the modal window. To do this, you have to override Magento\Catalog\Controller\Product\View in your module.
Step 1: Create di.xml
app/code/Bizspice/QuickView/etc/frontend/di.xml
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <preference for="Magento\Catalog\Controller\Product\View" type="Bizspice\QuickView\Controller\Product\View" /> </config>
Step 2: To add a new layout handle we will create
app/code/Bizspice/QuickView/Controller/Product/View.php
<?php namespace Bizspice\QuickView\Controller\Product; /** * Class View * * @package Bizspice\QuickView\Controller\Product * @author XXX XXX <[email protected]> * @copyright www.www.bizspice.com */ class View extends \Magento\Catalog\Controller\Product\View { /** * To add new layout handle when product page is loaded in iframe * * @return \Magento\Framework\Controller\Result\Forward|\Magento\Framework\Controller\Result\Redirect */ public function execute() { if ($this->getRequest()->getParam("iframe")) { $layout = $this->_view->getLayout(); $layout->getUpdate()->addHandle(‘product_quickview'); } return parent::execute(); } }
Step 3: And finally we will create our layout file
app/code/Bizspice/QuickView/view/frontend/layout/product_quickview.xml
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="empty" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <update handle="empty"/> <html> <attribute name="class" value="quickview-scroll"/> </html> <body> <attribute name="class" value="quickview-override"/> <referenceBlock name="reviews.tab" remove="true" /> <referenceBlock name="authentication-popup" remove="true" /> </body> </page>
That’s It. The new layout is updated.