CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

23 February, 2022

How to add Quick View feature in Magento 2

 Programing Coderfunda     February 23, 2022     Magento 2, MAGENTO TUTORIALS     No comments   

 

How to add Quick View feature in Magento 2

In some situations, you would want to preview the product right on the category page. In those cases, you can add the Quick view button on the product box on category listing. Whenever you clicked on it, a modal window that shows the product with all its functionality will be opened. However, the default setting does not allow you to do that. Therefore, in today’s post, I will guide you on how to add Quick View feature in Magento 2.

3 Steps to add Quick View feature:

  • Step 1: Create and enable a Magento 2 module
  • Step 2: Add some funcitionality
  • Step 3: Edit JavaScript

Step 1: Create and enable a Magento 2 module

Firstly, you need to create app/code/Mageplaza/QuickView/registration.php. Once it has been created, add the following code:

<?php
/**
 * @category    Mageplaza
 * @package     Mageplaza_QuickView
 */
 
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Mageplaza_QuickView',
    __DIR__
);

The above code is very important to register your new module.

Besides, you need to create app/code/Mageplaza/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="Mageplaza_QuickView" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
            <module name="Magento_Customer"/>
        </sequence>
    </module>
</config>

and also app/code/Mageplaza/QuickView/composer.json

{
  "name": "mageplaza/module-quickview",
  "description": "Simple Quick View",
  "require": {
    "php": "~5.6.0|~7.0.0",
    "magento/framework": "100.1.*"
  },
  "type": "magento2-module",
  "version": "1.0.0",
  "license": [
    "proprietary"
  ],
  "autoload": {
    "files": [
      "registration.php"
    ],
    "psr-4": {
      "Mageplaza\\QuickView\\": ""
    }
  }
}

Finally, you will be able to activate this extension when you run the following command:

php bin/magento module:enable Mageplaza_QuickView

Step 2: Add some funcitionality

To add quick view button on every products box in the category page, app/code/Mageplaza/QuickView/view/frontend/layout/catalog_category_view.xml need to be created inside your project. And once you have created it, please add this:

<?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="Mageplaza_QuickView::product/productlist/item/quickview.phtml"/>
            </referenceBlock>
        </referenceContainer>
    </body>
</page>

The above code will allow you to add the button which is near the Add to cart button. You can style this button as your wish.

You should notice that you might probably need to remove several elements through XML so the product page in the modal window looks similar with the page on the product view page.

To do that, override Magento\Catalog\Controller\Product\View and add new handle in case the product is called via iframe.

But before that, you need to create app/code/Mageplaza/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="Mageplaza\QuickView\Controller\Product\View" />
</config>

Then, you need app/code/Mageplaza/QuickView/Controller/Product/View.php

<?php
 
namespace Mageplaza\QuickView\Controller\Product;
 
use Magento\Catalog\Controller\Product\View as CatalogView;
 
/**
 * Class View
 *
 * @package Mageplaza\QuickView\Controller\Product
 */
class View extends CatalogView
{
    /**
     * Overriden in order to add new layout handle in case 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('quickview_product_view');
        }
        return parent::execute();
    }
}

In other words, when product’s URL with iframe is called as GET parameter, its layout can be modify. Here is how you do it: app/code/Mageplaza/QuickView/view/frontend/layout/quickview_product_view.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"/>
 
        <referenceContainer name="product.page.products.wrapper" remove="true" />
        <referenceContainer name="product.info.details" remove="true" />
        <referenceBlock name="reviews.tab" remove="true" />
        <referenceBlock name="product.info.details" remove="true" />
        <referenceBlock name="product.info.description" remove="true" />
        <referenceBlock name="product.info.overview" remove="true" />
        <referenceBlock name="authentication-popup" remove="true" />
    </body>
</page>

The page layout can be edited as you want. For example, you can remove several elements.

Step 3: Edit JavaScript

This is the place where the magic will happen app/code/Mageplaza/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 iframe_selector = "#iFrame" + product_id;
 
            $(iframe_selector).on("load", function () {
                modalContainer.addClass("product-quickview");
                modalContainer.modal('openModal');
                this.style.height = this.contentWindow.document.body.scrollHeight+10 + 'px';
                this.style.border = '0';
                this.style.width = '100%';
                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) {
                        customerData.reload("cart");
                        customerData.reload("messages");
                        $(".close-modal").trigger("click");
                        $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("open");
                    }
                });
            });
        };
 
        var createIframe = function () {
            return $('<iframe />', {
                id: 'iFrame' + product_id,
                src: product_url + "?iframe=1"
            });
        }
    };
});

In here, you can find most of the bugs and fix it. It would be ideal if you use the default modal window of Magento, then open it using the button that you have just added in few steps earlier, create an iframe, load the product page in an iframe, and observe submit event on add to cart form. By doing that, when the product is added, you can close the window.

Conclusion

In conclusion, Quick View is a very useful tool, especially when you want to preview the product right on the category page. I hope that after reading this guide, you would have an idea about how to add Quick View feature in Magento 2.

Thanks for reading!

  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Writing and debugging Eloquent queries with Tinkerwell
    In this article, let's look into the options that you can use with Tinkerwell to write and debug Eloquent queries easier. The post Wr...
  • Sitaare Zameen Par Full Movie Review
     Here’s a  complete Vue.js tutorial for beginners to master level , structured in a progressive and simple way. It covers all essential topi...
  • The token request was rejected by the remote server
    error:invalid_granterror_description:The token request was rejected by the remote server.error_uri: https://documentation.openiddict.com/err...
  • Laravel Search String
      Laravel Search String is a package by   Loris Leiva   that generates database queries based on one unique string using a simple and custom...
  • Vue.js Tutorial
      Vue.js Installation Compatibility Check Before going to install and use Vue.js in your project, you should check the compatibility issues....

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (69)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • July (4)
  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

Loading...

Laravel News

Loading...

Copyright © CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda