快速加入购物车

app/code/Sparsh/QuickView/Controller/Catalog/Product/View.php

+<?php
+/**
+ * Class View
+ *
+ * PHP version 7
+ *
+ * @category Sparsh
+ * @package  Sparsh_QuickView
+ * @author   Sparsh <magento@sparsh-technologies.com>
+ * @license  https://www.sparsh-technologies.com  Open Software License (OSL 3.0)
+ * @link     https://www.sparsh-technologies.com
+ */
+namespace Sparsh\QuickView\Controller\Catalog\Product;
+
+use Magento\Framework\App\Action\Context;
+use Magento\Framework\View\Result\PageFactory;
+
+/**
+ * Class View
+ *
+ * @category Sparsh
+ * @package  Sparsh_QuickView
+ * @author   Sparsh <magento@sparsh-technologies.com>
+ * @license  https://www.sparsh-technologies.com  Open Software License (OSL 3.0)
+ * @link     https://www.sparsh-technologies.com
+ */
+class View extends \Magento\Catalog\Controller\Product
+{
+    /**
+     * @var \Magento\Catalog\Helper\Product\View
+     */
+    public $viewHelper;
+    /**
+     * @var \Magento\Framework\Controller\Result\ForwardFactory
+     */
+    public $resultForwardFactory;
+    /**
+     * @var PageFactory
+     */
+    public $resultPageFactory;
+    /**
+     * @var
+     */
+    public $template;
+    /**
+     * @var \Magento\Framework\Json\Helper\Data
+     */
+    public $data;
+
+    /**
+     * View constructor.
+     * @param Context $context
+     * @param \Magento\Catalog\Helper\Product\View $viewHelper
+     * @param \Magento\Framework\Controller\Result\ForwardFactory $resultForwardFactory
+     * @param \Magento\Framework\Json\Helper\Data $data
+     * @param PageFactory $resultPageFactory
+     */
+    public function __construct(
+        Context $context,
+        \Magento\Catalog\Helper\Product\View $viewHelper,
+        \Magento\Framework\Controller\Result\ForwardFactory $resultForwardFactory,
+        \Magento\Framework\Json\Helper\Data $data,
+        PageFactory $resultPageFactory
+    ) {
+        $this->viewHelper = $viewHelper;
+        $this->resultForwardFactory = $resultForwardFactory;
+        $this->resultPageFactory = $resultPageFactory;
+        $this->data = $data;
+        parent::__construct($context);
+    }
+
+    /**
+     * Excecute for View Action
+     *
+     * @return \Magento\Framework\Controller\Result\ForwardFactory
+     */
+    public function execute()
+    {
+        $categoryId = (int) $this->getRequest()->getParam('category', false);
+        $productId = (int) $this->getRequest()->getParam('id');
+        $specifyOptions = $this->getRequest()->getParam('options');
+
+        if ($this->getRequest()->isPost() && $this->getRequest()->getParam(self::PARAM_NAME_URL_ENCODED)) {
+            $product = $this->_initProduct();
+            if (!$product) {
+                return $this->noProductRedirect();
+            }
+            if ($specifyOptions) {
+                $notice = $product->getTypeInstance()->getSpecifyOptionMessage();
+                $this->messageManager->addNotice($notice);
+            }
+            if ($this->getRequest()->isAjax()) {
+                $this->getResponse()->representJson(
+                    $this->data->get()->jsonEncode(
+                        [
+                            'backUrl' => $this->_redirect->getRedirectUrl()
+                        ]
+                    )
+                );
+                return;
+            }
+            $resultRedirect = $this->resultRedirectFactory->create();
+            $resultRedirect->setRefererOrBaseUrl();
+            return $resultRedirect;
+        }
+
+        $params = new \Magento\Framework\DataObject();
+        $params->setCategoryId($categoryId);
+        $params->setSpecifyOptions($specifyOptions);
+
+        try {
+            $page = $this->resultPageFactory->create(
+                false,
+                [
+                    'isIsolated' => true,
+                    'template' => 'Sparsh_QuickView::product_template.phtml'
+                ]
+            );
+            $page->addDefaultHandle();
+            $page->getLayout()->getUpdate()->addHandle('catalog_product_view');
+            $page->getLayout()->getUpdate()->addHandle('quickview_catalog_product_view');
+
+            $this->viewHelper->prepareAndRender($page, $productId, $this, $params);
+            return $page;
+        } catch (\Magento\Framework\Exception\NoSuchEntityException $e) {
+            return $this->noProductRedirect();
+        } catch (\Exception $e) {
+            $resultForward = $this->resultForwardFactory->create();
+            $resultForward->forward('noroute');
+            return $resultForward;
+        }
+    }
+
+    /**
+     * Redirect for no product
+     *
+     * @return \Magento\Framework\Controller\Result\ForwardFactory
+     */
+    public function noProductRedirect()
+    {
+        $store = $this->getRequest()->getQuery('store');
+        if (isset($store) && !$this->getResponse()->isRedirect()) {
+            $resultRedirect = $this->resultRedirectFactory->create();
+            return $resultRedirect->setPath('');
+        } elseif (!$this->getResponse()->isRedirect()) {
+            $resultForward = $this->resultForwardFactory->create();
+            $resultForward->forward('noroute');
+            return $resultForward;
+        }
+    }
+}

app/code/Sparsh/QuickView/Helper/Data.php

+<?php
+/**
+ * Class Data
+ *
+ * PHP version 7
+ *
+ * @category Sparsh
+ * @package  Sparsh_QuickView
+ * @author   Sparsh <magento@sparsh-technologies.com>
+ * @license  https://www.sparsh-technologies.com  Open Software License (OSL 3.0)
+ * @link     https://www.sparsh-technologies.com
+ */
+namespace Sparsh\QuickView\Helper;
+
+/**
+ * Class Data
+ *
+ * @category Sparsh
+ * @package  Sparsh_QuickView
+ * @author   Sparsh <magento@sparsh-technologies.com>
+ * @license  https://www.sparsh-technologies.com  Open Software License (OSL 3.0)
+ * @link     https://www.sparsh-technologies.com
+ */
+class Data extends \Magento\Framework\App\Helper\AbstractHelper
+{
+    /**
+     * Return config value
+     *
+     * @param string $configPath configPath
+     *
+     * @return mixed
+     */
+    public function getConfig($configPath)
+    {
+        return $this->scopeConfig->getValue(
+            $configPath,
+            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
+        );
+    }
+}

app/code/Sparsh/QuickView/Plugin/Compare.php

+<?php
+/**
+ * Class Compare
+ *
+ * PHP version 7
+ *
+ * @category Sparsh
+ * @package  Sparsh_QuickView
+ * @author   Sparsh <magento@sparsh-technologies.com>
+ * @license  https://www.sparsh-technologies.com  Open Software License (OSL 3.0)
+ * @link     https://www.sparsh-technologies.com
+ */
+namespace Sparsh\QuickView\Plugin;
+
+use Magento\Framework\Exception\NoSuchEntityException;
+
+/**
+ * Class Compare
+ *
+ * @category Sparsh
+ * @package  Sparsh_QuickView
+ * @author   Sparsh <magento@sparsh-technologies.com>
+ * @license  https://www.sparsh-technologies.com  Open Software License (OSL 3.0)
+ * @link     https://www.sparsh-technologies.com
+ */
+class Compare
+{
+    /**
+     * Compare constructor.
+     * @param \Magento\Framework\App\Response\RedirectInterface $redirect
+     * @param \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory
+     * @param \Magento\Catalog\Api\ProductRepositoryInterface $productRepository
+     * @param \Magento\Framework\App\RequestInterface $request
+     */
+    public function __construct(
+        \Magento\Framework\App\Response\RedirectInterface $redirect,
+        \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory,
+        \Magento\Catalog\Api\ProductRepositoryInterface $productRepository,
+        \Magento\Framework\App\RequestInterface $request
+    ) {
+        $this->redirect = $redirect;
+        $this->resultJsonFactory = $resultJsonFactory;
+        $this->productRepository = $productRepository;
+        $this->request = $request;
+    }
+
+    /**
+     * @param \Magento\Catalog\Controller\Product\Compare\Add $subject
+     * @param \Closure $proceed
+     * @return \Magento\Framework\Controller\Result\Json|mixed
+     */
+    public function aroundExecute(
+        \Magento\Catalog\Controller\Product\Compare\Add $subject,
+        \Closure $proceed
+    ) {
+        $resultProceed = $proceed();
+        $requestParams = $this->request->getParams();
+        
+        $productId = isset($requestParams['product']) ? (int)$requestParams['product'] : null;
+        if (!$productId) {
+            return $resultProceed;
+        }
+
+        try {
+            $product = $this->productRepository->getById($productId);
+        } catch (NoSuchEntityException $e) {
+            $product = null;
+        }
+
+        if ($product && $product->isSalable()) {
+            if (strpos($this->redirect->getRefererUrl(), 'quickview') !== false) {
+                $result = $this->resultJsonFactory->create();
+                $response = [
+                    'success' => 'true',
+                    'message' => 'You added product '. $product->getName() .' to the Comparison List.'
+                ];
+                return $result->setData($response);
+            }
+        }
+        return $resultProceed;
+    }
+}

app/code/Sparsh/QuickView/Plugin/Wishlist.php

+<?php
+/**
+ * Class Wishlist
+ *
+ * PHP version 7
+ *
+ * @category Sparsh
+ * @package  Sparsh_QuickView
+ * @author   Sparsh <magento@sparsh-technologies.com>
+ * @license  https://www.sparsh-technologies.com  Open Software License (OSL 3.0)
+ * @link     https://www.sparsh-technologies.com
+ */
+namespace Sparsh\QuickView\Plugin;
+
+use Magento\Framework\Exception\NoSuchEntityException;
+
+/**
+ * Class Wishlist
+ *
+ * @category Sparsh
+ * @package  Sparsh_QuickView
+ * @author   Sparsh <magento@sparsh-technologies.com>
+ * @license  https://www.sparsh-technologies.com  Open Software License (OSL 3.0)
+ * @link     https://www.sparsh-technologies.com
+ */
+class Wishlist
+{
+    /**
+     * Wishlist constructor.
+     * @param \Magento\Framework\App\Response\RedirectInterface $redirect
+     * @param \Magento\Framework\UrlInterface $urlInterface
+     * @param \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory
+     * @param \Magento\Catalog\Api\ProductRepositoryInterface $productRepository
+     * @param \Magento\Framework\App\RequestInterface $request
+     */
+    public function __construct(
+        \Magento\Framework\App\Response\RedirectInterface $redirect,
+        \Magento\Framework\UrlInterface $urlInterface,
+        \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory,
+        \Magento\Catalog\Api\ProductRepositoryInterface $productRepository,
+        \Magento\Framework\App\RequestInterface $request
+    ) {
+        $this->redirect = $redirect;
+        $this->urlInterface = $urlInterface;
+        $this->resultJsonFactory = $resultJsonFactory;
+        $this->productRepository = $productRepository;
+        $this->request = $request;
+    }
+
+    /**
+     * @param \Magento\Wishlist\Controller\Index\Add $subject
+     * @param \Closure $proceed
+     * @return \Magento\Framework\Controller\Result\Json|mixed
+     */
+    public function aroundExecute(\Magento\Wishlist\Controller\Index\Add $subject, \Closure $proceed)
+    {
+        $resultProceed = $proceed();
+        $requestParams = $this->request->getParams();
+        
+        $productId = isset($requestParams['product']) ? (int)$requestParams['product'] : null;
+        if (!$productId) {
+            return $resultProceed;
+        }
+
+        try {
+            $product = $this->productRepository->getById($productId);
+        } catch (NoSuchEntityException $e) {
+            $product = null;
+        }
+
+        if (strpos($this->redirect->getRefererUrl(), 'quickview') !== false) {
+            if (strpos($this->urlInterface->getCurrentUrl(), 'loginPost') !== false ||
+                strpos($this->urlInterface->getCurrentUrl(), 'createpost') !== false) {
+                return $resultProceed;
+            }
+            $result = $this->resultJsonFactory->create();
+            $response = [
+                'success' => 'true',
+                'message' => $product->getName() . ' has been added to your Wish List.'
+            ];
+            return $result->setData($response);
+        } else {
+            return $resultProceed;
+        }
+    }
+}

app/code/Sparsh/QuickView/README.md

+#Quick View Module
+
+This extension brings a convenient experience to the customers by allowing a single click to get the product info and add to the cart immediately without any need of the loading page for product detail and come back and forth.
+
+##Support: 
+version - 2.3.x, 2.4.x
+
+##How to install Extension
+
+1. Download the archive file.
+2. Unzip the file
+3. Create a folder [Magento_Root]/app/code/Sparsh/QuickView
+4. Drop/move the unzipped files to directory '[Magento_Root]/app/code/Sparsh/QuickView'
+
+#Enable Extension:
+- php bin/magento module:enable Sparsh_QuickView
+- php bin/magento setup:upgrade
+- php bin/magento setup:di:compile
+- php bin/magento setup:static-content:deploy
+- php bin/magento cache:flush
+
+#Disable Extension:
+- php bin/magento module:disable Sparsh_QuickView
+- php bin/magento setup:upgrade
+- php bin/magento setup:di:compile
+- php bin/magento setup:static-content:deploy
+- php bin/magento cache:flush
\ No newline at end of file

app/code/Sparsh/QuickView/composer.json

+{
+    "name": "sparsh/quick-view-magento-2-extension",
+    "description": "Sparsh Product Quick View Extension for Magento 2",
+    "type": "magento2-module",
+    "version": "1.3.0",
+    "license": "OSL-3.0",
+    "require": {
+        "php": "~7.1.0|~7.2.0|~7.3.0|~7.4.0|^8.0"
+    },
+    "autoload": {
+        "files": [
+            "registration.php"
+        ],
+        "psr-4": {
+            "Sparsh\\QuickView\\": ""
+        }
+    }
+}

app/code/Sparsh/QuickView/etc/acl.xml

+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
+     <acl>
+        <resources>
+            <resource id="Magento_Backend::admin">
+                <resource id="Magento_Backend::stores">
+                    <resource id="Magento_Backend::stores_settings">
+                        <resource id="Magento_Config::config">
+                            <resource id="Sparsh_QuickView::config_quick_view" title="Quick View Setting" translate="title" sortOrder="80" />
+                        </resource>
+                    </resource>
+                </resource>
+            </resource>
+        </resources>
+    </acl>
+</config>
\ No newline at end of file

app/code/Sparsh/QuickView/etc/adminhtml/system.xml

+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
+    <system>
+        <tab id="sparsh" translate="label" sortOrder="500">
+            <label>Sparsh Extensions</label>
+        </tab>
+        <section id="sparsh_quick_view" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
+            <label>Add To Cart</label>
+            <!-- Assign section to tab -->
+            <tab>sparsh</tab>
+            <resource>Sparsh_QuickView::config_quick_view</resource>
+            <!-- create group for fields in section -->
+            <group id="general" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>General Configuration</label>
+                <!-- create text type field -->
+                <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Quick View Button</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+            </group>
+        </section>
+    </system>
+</config>
\ No newline at end of file

app/code/Sparsh/QuickView/etc/config.xml

+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
+    <default>
+        <sparsh_quick_view>
+            <general>
+                <enable>1</enable>
+            </general>
+        </sparsh_quick_view>
+    </default>
+</config>
\ No newline at end of file

app/code/Sparsh/QuickView/etc/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">
+    <type name="\Magento\Wishlist\Controller\Index\Add">
+	    <plugin name="sparsh_quick_view_wishlist" type="Sparsh\QuickView\Plugin\Wishlist"/>
+	</type>
+	<type name="\Magento\Catalog\Controller\Product\Compare\Add">
+	    <plugin name="sparsh_quick_view_compare" type="Sparsh\QuickView\Plugin\Compare"/>
+	</type>
+</config>
\ No newline at end of file

app/code/Sparsh/QuickView/etc/frontend/routes.xml

+<?xml version="1.0" ?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
+	<router id="standard">
+		<route frontName="quickview" id="quickview">
+			<module name="Sparsh_QuickView"/>
+		</route>
+	</router>
+</config>

app/code/Sparsh/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="Sparsh_QuickView" setup_version="1.3.0">
+		<sequence>
+            <module name="Magento_CatalogWidget" />
+            <module name="Magento_Wishlist" />
+            <module name="Magento_CatalogSearch" />
+            <module name="Magento_Cms" />
+        </sequence>
+	</module>
+</config>

app/code/Sparsh/QuickView/registration.php

+<?php
+/**
+ * Sparsh QuickView Extension
+ *
+ * PHP version 7
+ *
+ * @category Sparsh
+ * @package  Sparsh_QuickView
+ * @author   Sparsh <magento@sparsh-technologies.com>
+ * @license  https://www.sparsh-technologies.com  Open Software License (OSL 3.0)
+ * @link     https://www.sparsh-technologies.com
+ */
+\Magento\Framework\Component\ComponentRegistrar::register(
+    \Magento\Framework\Component\ComponentRegistrar::MODULE,
+    'Sparsh_QuickView',
+    __DIR__
+);

app/code/Sparsh/QuickView/view/frontend/layout/default.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">
+    <head>
+        <css src="mage/gallery/gallery.css"/>
+        <css src="Sparsh_QuickView::css/quickview.css" />
+    </head>
+    <body>
+        <referenceContainer name="before.body.end">
+            <block class="Magento\Framework\View\Element\Template" name="sparsh.quickview.initialize"
+                   template="Sparsh_QuickView::initialize.phtml"/>
+        </referenceContainer>
+    </body>
+</page>
\ No newline at end of file

app/code/Sparsh/QuickView/view/frontend/layout/quickview_catalog_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">
+    <body>
+        <referenceBlock name="sparsh.free-shipping.bar.top" remove="true" />
+        <referenceBlock name="header.container" remove="true" />
+        <referenceBlock name="page.top" remove="true" />
+        <referenceBlock name="footer-container" remove="true" />
+        <referenceBlock name="copyright" remove="true"/>
+        <referenceBlock name="catalog.product.related" remove="true"/>
+        <referenceBlock name="product.info.upsell" remove="true"/>
+        <referenceBlock name="product.info.review" remove="true" />
+        <referenceBlock name="reviews.tab" remove="true" />
+        <referenceBlock name="form.subscribe" remove="true" />
+    </body>
+</page>
\ No newline at end of file

app/code/Sparsh/QuickView/view/frontend/layout/quickview_catalog_product_view_type_bundle.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">
+    <update handle="catalog_product_view_type_bundle"/>
+</page>

app/code/Sparsh/QuickView/view/frontend/layout/quickview_catalog_product_view_type_configurable.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>
+        <attribute name="class" value="page-product-configurable"/>
+        <referenceBlock name="head.components">
+            <block class="Magento\Framework\View\Element\Js\Components" name="configurableproduct_product_view_head_components" template="Magento_ConfigurableProduct::js/components.phtml"/>
+        </referenceBlock>
+        <referenceContainer name="product.info.type">
+            <block class="Magento\ConfigurableProduct\Block\Product\View\Type\Configurable" name="product.info.configurable" as="product_type_data" template="Magento_Catalog::product/view/type/default.phtml"/>
+            <container name="product.info.configurable.extra" after="product.info.configurable" as="product_type_data_extra" label="Product Extra Info">
+                <block class="Magento\ConfigurableProduct\Block\Stockqty\Type\Configurable" template="Magento_CatalogInventory::stockqty/composite.phtml"/>
+            </container>
+        </referenceContainer>
+        <referenceBlock name="product.info.options.wrapper">
+            <block class="Magento\Swatches\Block\Product\Renderer\Configurable" name="product.info.options.swatches"
+                   as="swatch_options" before="-">
+                <arguments>
+                    <argument name="configurable_view_model"
+                              xsi:type="object">Magento\Swatches\ViewModel\Product\Renderer\Configurable</argument>
+                </arguments>
+            </block>
+        </referenceBlock>
+    </body>
+</page>

app/code/Sparsh/QuickView/view/frontend/layout/quickview_catalog_product_view_type_downloadable.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">
+    <update handle="catalog_product_view_type_downloadable"/>
+</page>

app/code/Sparsh/QuickView/view/frontend/layout/quickview_catalog_product_view_type_grouped.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">
+    <update handle="catalog_product_view_type_grouped"/>
+</page>

app/code/Sparsh/QuickView/view/frontend/layout/quickview_catalog_product_view_type_simple.xml

+<?xml version="1.0"?>
+<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <update handle="catalog_product_view_type_simple" />
+</page>

app/code/Sparsh/QuickView/view/frontend/layout/quickview_catalog_product_view_type_virtual.xml

+<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <update handle="catalog_product_view_type_virtual" />
+</page>

app/code/Sparsh/QuickView/view/frontend/requirejs-config.js

+var config = {
+    map: {
+        '*': {
+            magnificPopup: 'Sparsh_QuickView/js/lib/jquery.magnific-popup',
+            quickView: 'Sparsh_QuickView/js/quickview',
+            compare: 'Sparsh_QuickView/js/compare',
+            ajaxWishlist: 'Sparsh_QuickView/js/wishlist'
+        }
+    },
+    shim: {
+        magnificPopup: {
+            deps: ['jquery']
+        }
+    }
+};

app/code/Sparsh/QuickView/view/frontend/templates/initialize.phtml

+<?php /** @var \Magento\Framework\View\Element\Template $block */?>
+<?php
+$helper = $this->helper(\Sparsh\QuickView\Helper\Data::class);
+$isActive = $helper->getConfig('sparsh_quick_view/general/enable');
+if ($isActive == 1): ?>
+<script type="text/x-magento-init">
+{
+    "*": {
+        "quickView":  { "baseUrl": "<?= /* @noEscape */ $block->getBaseUrl() ?>" },
+        "compare":{},
+        "ajaxWishlist":{
+            "loginUrl":"<?= /* @noEscape */ $block->getUrl('customer/account/login'); ?>"
+        }
+    }
+}
+</script>
+<?php endif; ?>
+<script>
+    var sparsh_mfp_wrap =  document.getElementsByClassName('sparsh-mfp-wrap');
+    sparsh_mfp_wrap[0].removeAttribute("style");
+</script>

app/code/Sparsh/QuickView/view/frontend/templates/product_template.phtml

+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+?><?= /* @noEscape */ $layoutContent; ?>

app/code/Sparsh/QuickView/view/frontend/web/css/quickview.css

+/* Magnific Popup CSS */
+/* Main image in popup */
+/* The shadow behind the image */
+/**
+       * Remove all paddings around the image on small screen
+       */
+.sparsh-mfp-bg {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1042;
+  overflow: hidden;
+  position: fixed;
+  background: #0b0b0b;
+  opacity: 0.6;
+  z-index: 998 !important;
+}
+.sparsh-mfp-wrap {
+  top: 10%;
+  left: 15%;
+  width: 70%;
+  height: 80%;
+  z-index: 1043;
+  position: fixed;
+  outline: none !important;
+  overflow: hidden hidden !important;
+  background-color: #f5f4f4;
+  -webkit-backface-visibility: hidden;
+  z-index: 998 !important;
+}
+.sparsh-mfp-container {
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.sparsh-mfp-container:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+.sparsh-mfp-container .page-layout-2columns-left .column.main {
+  width: 100%;
+}
+.sparsh-mfp-align-top .sparsh-mfp-container:before {
+  display: none;
+}
+.sparsh-mfp-content {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 auto;
+  text-align: left;
+  z-index: 1045;
+}
+.sparsh-mfp-inline-holder .sparsh-mfp-content {
+  width: 100%;
+  cursor: auto;
+}
+.sparsh-mfp-ajax-holder .sparsh-mfp-content {
+  width: 100%;
+  cursor: auto;
+}
+.sparsh-mfp-ajax-cur {
+  cursor: progress;
+}
+.sparsh-mfp-zoom-out-cur {
+  cursor: -moz-zoom-out;
+  cursor: -webkit-zoom-out;
+  cursor: zoom-out;
+}
+.sparsh-mfp-zoom-out-cur .sparsh-mfp-image-holder .sparsh-mfp-close {
+  cursor: -moz-zoom-out;
+  cursor: -webkit-zoom-out;
+  cursor: zoom-out;
+}
+.sparsh-mfp-zoom {
+  cursor: pointer;
+  cursor: -webkit-zoom-in;
+  cursor: -moz-zoom-in;
+  cursor: zoom-in;
+}
+.sparsh-mfp-auto-cursor .sparsh-mfp-content {
+  cursor: auto;
+}
+.sparsh-mfp-close {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  width: 44px;
+  height: 44px;
+  line-height: 44px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  text-decoration: none;
+  text-align: center;
+  opacity: 0.65;
+  padding: 0 0 18px 10px;
+  color: #333;
+  font-style: normal;
+  font-size: 28px;
+  font-family: Arial, Baskerville, monospace;
+}
+.sparsh-mfp-close:hover {
+  opacity: 1;
+}
+.sparsh-mfp-close:focus {
+  opacity: 1;
+}
+.sparsh-mfp-close:active {
+  top: 1px;
+}
+.sparsh-mfp-close:after {
+  content: '\00d7';
+}
+.sparsh-mfp-arrow {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  position: absolute;
+  opacity: 0.65;
+  margin: 0;
+  top: 50%;
+  margin-top: -55px;
+  padding: 0;
+  width: 90px;
+  height: 110px;
+  -webkit-tap-highlight-color: transparent;
+}
+.sparsh-mfp-arrow:active {
+  margin-top: -54px;
+}
+.sparsh-mfp-arrow:hover {
+  opacity: 1;
+}
+.sparsh-mfp-arrow:focus {
+  opacity: 1;
+}
+.sparsh-mfp-arrow:before {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  margin-top: 35px;
+  margin-left: 35px;
+  border: medium inset transparent;
+  border-top-width: 21px;
+  border-bottom-width: 21px;
+  opacity: 0.7;
+}
+.sparsh-mfp-arrow:after {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  margin-top: 35px;
+  margin-left: 35px;
+  border: medium inset transparent;
+  border-top-width: 13px;
+  border-bottom-width: 13px;
+  top: 8px;
+}
+.sparsh-mfp-preloader {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  color: #CCC;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  text-align: center;
+  margin-top: -0.8em;
+  left: 8px;
+  right: 8px;
+  z-index: 1044;
+}
+.sparsh-mfp-preloader a {
+  color: #CCC;
+}
+.sparsh-mfp-preloader a:hover {
+  color: #FFF;
+}
+.sparsh-mfp-counter {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: #CCC;
+  font-size: 12px;
+  line-height: 18px;
+  white-space: nowrap;
+}
+.sparsh-mfp-loading.sparsh-mfp-figure {
+  display: none;
+}
+.sparsh-mfp-hide {
+  display: none !important;
+}
+.sparsh-mfp-s-ready .sparsh-mfp-preloader {
+  display: none;
+}
+.sparsh-mfp-s-error .sparsh-mfp-content {
+  display: none;
+}
+button.sparsh-mfp-close {
+  overflow: visible;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  display: block;
+  outline: none;
+  padding: 0;
+  z-index: 100;
+  box-shadow: none;
+  touch-action: manipulation;
+}
+button.sparsh-mfp-arrow {
+  overflow: visible;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  display: block;
+  outline: none;
+  padding: 0;
+  z-index: 100;
+  box-shadow: none;
+  touch-action: manipulation;
+}
+button::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+.sparsh-mfp-close-btn-in .sparsh-mfp-close {
+  color: #333 !important;
+}
+.sparsh-mfp-image-holder .sparsh-mfp-close {
+  color: #333;
+  right: -6px;
+  text-align: right;
+  padding-right: 6px;
+  width: 100%;
+}
+.sparsh-mfp-image-holder .sparsh-mfp-content {
+  max-width: 100%;
+}
+.sparsh-mfp-iframe-holder {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+.sparsh-mfp-iframe-holder .sparsh-mfp-close {
+  color: #333;
+  right: -6px;
+  text-align: right;
+  padding-right: 6px;
+  width: 100%;
+  top: -40px;
+}
+.sparsh-mfp-iframe-holder .sparsh-mfp-content {
+  line-height: 0;
+  width: 100%;
+  max-width: 900px;
+}
+.sparsh-mfp-arrow-left {
+  left: 0;
+}
+.sparsh-mfp-arrow-left:after {
+  border-right: 17px solid #FFF;
+  margin-left: 31px;
+}
+.sparsh-mfp-arrow-left:before {
+  margin-left: 25px;
+  border-right: 27px solid #3F3F3F;
+}
+.sparsh-mfp-arrow-right {
+  right: 0;
+}
+.sparsh-mfp-arrow-right:after {
+  border-left: 17px solid #FFF;
+  margin-left: 39px;
+}
+.sparsh-mfp-arrow-right:before {
+  border-left: 27px solid #3F3F3F;
+}
+.sparsh-mfp-iframe-scaler {
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  padding-top: 56.25%;
+}
+.sparsh-mfp-iframe-scaler iframe {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  background: #000;
+}
+img.sparsh-mfp-img {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  display: block;
+  line-height: 0;
+  box-sizing: border-box;
+  padding: 40px 0 40px;
+  margin: 0 auto;
+}
+.sparsh-mfp-figure {
+  line-height: 0;
+}
+.sparsh-mfp-figure:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 40px;
+  bottom: 40px;
+  display: block;
+  right: 0;
+  width: auto;
+  height: auto;
+  z-index: -1;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  background: #444;
+}
+.sparsh-mfp-figure small {
+  color: #BDBDBD;
+  display: block;
+  font-size: 12px;
+  line-height: 14px;
+}
+.sparsh-mfp-figure figure {
+  margin: 0;
+}
+.sparsh-mfp-bottom-bar {
+  margin-top: -36px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  cursor: auto;
+}
+.sparsh-mfp-title {
+  text-align: left;
+  line-height: 18px;
+  color: #F3F3F3;
+  word-wrap: break-word;
+  padding-right: 36px;
+}
+.sparsh-mfp-gallery .sparsh-mfp-image-holder .sparsh-mfp-figure {
+  cursor: pointer;
+}
+#sparsh-mfp-quickview {
+  position: relative;
+  background: #FFF;
+  padding: 0;
+  width: 100%;
+  margin: 0 auto;
+  max-height: 100%;
+  overflow: hidden;
+  overflow-y: auto;
+  min-height: 400px;
+}
+#sparsh-mfp-quickview #maincontent {
+  padding-top: 20px;
+}
+.page-layout-2columns-left .sparsh-mfp-container .column.main {
+  width: 100%;
+}
+.sparsh-mfp-quickview-message {
+  text-align: center;
+}
+#sparsh-mfp-quickview .message.success > *:first-child:before {
+  vertical-align: middle;
+  position: inherit;
+  padding-top: 10px;
+}
+.sparsh-quickview-actions-secondary {
+  width: 50%;
+}
+.sparsh-quickview {
+  display: none;
+}
+.cms-index-index #sparsh-mfp-quickview .page-title {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding-bottom: 15px;
+}
+.product-social-links .action.sparsh-quickview-action:before {
+  content: '\e615';
+}
+.block-bundle-summary .action.sparsh-quickview-action:before {
+  content: '\e615';
+}
+.product-item .action.sparsh-quickview-action:before {
+  content: '\e615';
+}
+.table-comparison .action.sparsh-quickview-action:before {
+  content: '\e615';
+}
+.product-item-info {
+  position: relative;
+}
+.product-item-info .sparsh-quick-view-btn-container {
+  -webkit-transform: translate(-50%, 0);
+  -moz-transform: translate(-50%, 0);
+  transform: translate(-50%, 0);
+  white-space: nowrap;
+  position: absolute;
+  text-align: center;
+  z-index: 10;
+}
+.products-grid .product-item-info .sparsh-quick-view-btn-container {
+  left: 50%;
+  top: 60%;
+}
+.products-list .product-item-info .sparsh-quick-view-btn-container {
+  margin-left: 8em;
+  margin-top: 10em;
+}
+.products-grid a.sparsh-quick-view-button,
+.products-list a.sparsh-quick-view-button {
+  opacity: 0;
+  visibility: hidden;
+  padding: 10px 15px 10px 15px;
+  font-size: 1.3rem;
+  line-height: 1;
+  border-radius: 0;
+  -webkit-box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.3);
+}
+.products-grid a.sparsh-quick-view-button:before,
+.products-list a.sparsh-quick-view-button:before {
+  /*content: '\e615';*/
+  font-size: 1.3rem;
+  font-family: 'luma-icons';
+  font-weight: normal;
+  vertical-align: middle;
+  display: inline-block;
+  margin-right: 5px;
+  text-align: center;
+  overflow: hidden;
+}
+
+.products-grid .product-item.sparsh-quick-view-item:hover a.sparsh-quick-view-button,
+.products-list .product-item.sparsh-quick-view-item:hover a.sparsh-quick-view-button {
+  opacity: 0.7;
+  visibility: visible;
+}
+
+.products-grid .product-item.sparsh-quick-view-item:hover .product-image-container,
+.products-list .product-item.sparsh-quick-view-item:hover .product-image-container {
+  opacity: 0.3;
+}
+@media screen and (max-width: 800px) and (orientation: landscape) {
+  .sparsh-mfp-img-mobile .sparsh-mfp-image-holder {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .sparsh-mfp-img-mobile img.sparsh-mfp-img {
+    padding: 0;
+  }
+  .sparsh-mfp-img-mobile .sparsh-mfp-figure:after {
+    top: 0;
+    bottom: 0;
+  }
+  .sparsh-mfp-img-mobile .sparsh-mfp-figure small {
+    display: inline;
+    margin-left: 5px;
+  }
+  .sparsh-mfp-img-mobile .sparsh-mfp-bottom-bar {
+    background: rgba(0, 0, 0, 0.6);
+    bottom: 0;
+    margin: 0;
+    top: auto;
+    padding: 3px 5px;
+    position: fixed;
+    box-sizing: border-box;
+  }
+  .sparsh-mfp-img-mobile .sparsh-mfp-bottom-bar:empty {
+    padding: 0;
+  }
+  .sparsh-mfp-img-mobile .sparsh-mfp-counter {
+    right: 5px;
+    top: 3px;
+  }
+  .sparsh-mfp-img-mobile .sparsh-mfp-close {
+    top: 0;
+    right: 0;
+    width: 35px;
+    height: 35px;
+    line-height: 35px;
+    background: rgba(0, 0, 0, 0.6);
+    position: fixed;
+    text-align: center;
+    padding: 0;
+  }
+}
+@media screen and (max-height: 300px) {
+  .sparsh-mfp-img-mobile .sparsh-mfp-image-holder {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .sparsh-mfp-img-mobile img.sparsh-mfp-img {
+    padding: 0;
+  }
+  .sparsh-mfp-img-mobile .sparsh-mfp-figure:after {
+    top: 0;
+    bottom: 0;
+  }
+  .sparsh-mfp-img-mobile .sparsh-mfp-figure small {
+    display: inline;
+    margin-left: 5px;
+  }
+  .sparsh-mfp-img-mobile .sparsh-mfp-bottom-bar {
+    background: rgba(0, 0, 0, 0.6);
+    bottom: 0;
+    margin: 0;
+    top: auto;
+    padding: 3px 5px;
+    position: fixed;
+    box-sizing: border-box;
+  }
+  .sparsh-mfp-img-mobile .sparsh-mfp-bottom-bar:empty {
+    padding: 0;
+  }
+  .sparsh-mfp-img-mobile .sparsh-mfp-counter {
+    right: 5px;
+    top: 3px;
+  }
+  .sparsh-mfp-img-mobile .sparsh-mfp-close {
+    top: 0;
+    right: 0;
+    width: 35px;
+    height: 35px;
+    line-height: 35px;
+    background: rgba(0, 0, 0, 0.6);
+    position: fixed;
+    text-align: center;
+    padding: 0;
+  }
+}
+@media all and (max-width: 900px) {
+  .sparsh-mfp-arrow {
+    -webkit-transform: scale(0.75);
+    transform: scale(0.75);
+  }
+  .sparsh-mfp-arrow-left {
+    -webkit-transform-origin: 0;
+    transform-origin: 0;
+  }
+  .sparsh-mfp-arrow-right {
+    -webkit-transform-origin: 100%;
+    transform-origin: 100%;
+  }
+}
+@media (min-width: 768px) and (max-width: 1024px) {
+  #sparsh-mfp-quickview .box-tocart .action.tocart {
+    width: auto;
+  }
+}
+@media (min-width: 768px) {
+  #sparsh-mfp-quickview.sparsh-quickview-custom-options .product-options-wrapper {
+    width: 45%;
+  }
+  #sparsh-mfp-quickview.sparsh-quickview-custom-options .product-options-bottom {
+    width: 48%;
+  }
+}
+@media screen and (max-width: 767px) {
+  .checkout-cart-index #sparsh-mfp-quickview .product.info.detailed {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  .checkout-cart-index #sparsh-mfp-quickview .product-info-main {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  .checkout-cart-index #sparsh-mfp-quickview .page-title-wrapper {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+#sparsh-mfp-quickview .page-wrapper .columns{
+  grid-template-columns: 1fr !important;
+  grid-template-areas: "main" "sidebar" "additional" !important;
+}
+
+
+a.sparsh-quick-view-button{
+  opacity: 0;
+}
+
+
+.add-product-shop-car:hover a.sparsh-quick-view-button {
+  opacity: 0.7;
+  visibility: visible ;
+}
+
+#sparsh-quick-view-button-phone{
+  display: none;
+}
+
+.sparsh-mfp-wrap .joshine-desction{
+  display: none;
+}
+
+.sparsh-quick-view-btn-container{
+  left: 50%;
+  top: 65%;
+}
+
+.quick-view-icon-view{
+  height: 100%;
+  width: 10%;
+}
+
+.sparsh-quick-view-btn-container .sparsh-quick-view-button.sparsh-quick-view-button-pc{
+  width: 100%;
+  background: #0a0a0a;
+}
+
+.sparsh-quick-view-btn-container{
+  height: 8%;
+  width: 85%;
+}
+
+.page-wrapper .product-intro__freeshipping.product-intro__bg-none{
+  width: 120%;
+}
+
+@media (max-width: 768px) {
+  #sparsh-quick-view-button-phone{
+    opacity: 1;
+    visibility: visible;
+    display: inline-block;
+    width: 35%;
+    background-color:transparent;
+    padding: 0;
+    border:1px solid #ffffff;
+    border-radius: 10px;
+  }
+
+
+  .products-grid .product-item-info .sparsh-quick-view-btn-container{
+    left: 85%;
+    top: 50%;
+  }
+
+  .sparsh-quick-view-btn-container  .sparsh-quick-view-button-pc {
+    display: none!important;
+  }
+
+
+
+  .sparsh-mfp-wrap {
+    top: 10% ;
+    height: 80% ;
+    position: fixed ;
+  }
+
+  .sparsh-mfp-wrap .product-info-price{
+    display: table;
+  }
+  .sparsh-mfp-wrap .product-info-price .product-info-stock-sku{
+    display: inline-block;
+    float: right;
+  }
+
+  .sparsh-mfp-wrap .product-info-price .price-final_price{
+    display: inline-block;
+    float: left;
+    margin-top: 7%;
+  }
+  .sparsh-mfp-wrap .product-addto-links{
+    left: 5%;
+  }
+
+  .sparsh-mfp-wrap {
+    position: fixed!important;
+    top: 40%!important;
+    left: 0!important;
+    width: 100%!important;
+    height: 60%!important;
+  }
+
+  .sparsh-mfp-wrap .product-social-links{
+    display: none!important;
+  }
+
+  .sparsh-mfp-wrap .primary{
+    margin-left:0!important;
+  }
+
+  .sparsh-mfp-wrap .sparsh-mfp-container{
+    height: 60% !important;
+    top: 35%!important;
+  }
+
+  .sparsh-mfp-wrap .actions{
+    padding-top: 0!important;
+  }
+
+  .products-grid .product-item.sparsh-quick-view-item:hover a.sparsh-quick-view-button,
+  .products-list .product-item.sparsh-quick-view-item:hover a.sparsh-quick-view-button {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .sparsh-mfp-container {
+    position: fixed;
+  }
+
+  .sparsh-quick-view-btn-container {
+    width: 50%;
+  }
+
+  .quick-view-icon-shop-car{
+    width: 80%;
+    height: auto;
+  }
+
+  .add-product-shop-car .sparsh-quick-view-btn-container{
+    left: 85%;
+    top:60%;
+  }
+}
\ No newline at end of file

app/code/Sparsh/QuickView/view/frontend/web/css/source/_module.less

+@color_1: #CCC;
+@color_2: #FFF;
+@color_3: #333;
+@color_4: #BDBDBD;
+@color_5: #F3F3F3;
+@color_6: #006400;
+@font_family_1: Arial, Baskerville, monospace;
+@background_color_1: #f5f4f4;
+
+/* Magnific Popup CSS */
+/* Main image in popup */
+/* The shadow behind the image */
+/**
+       * Remove all paddings around the image on small screen
+       */
+.sparsh-mfp-bg {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1042;
+    overflow: hidden;
+    position: fixed;
+    background: #0b0b0b;
+    opacity: 0.8;
+    z-index: 998 !important;
+}
+.sparsh-mfp-wrap {
+    top: 10%;
+    left: 15%;
+    width: 70%;
+    height: 80%;
+    z-index: 1043;
+    position: fixed;
+    outline: none !important;
+    overflow: hidden hidden !important;
+    background-color: #f5f4f4;
+    -webkit-backface-visibility: hidden;
+    z-index: 998 !important;
+}
+.sparsh-mfp-container {
+    text-align: center;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    padding: 0;
+    box-sizing: border-box;
+    &:before {
+        content: '';
+        display: inline-block;
+        height: 100%;
+        vertical-align: middle;
+    }
+    .page-layout-2columns-left {
+        .column.main {
+            width: 100%;
+        }
+    }
+}
+.sparsh-mfp-align-top {
+    .sparsh-mfp-container {
+        &:before {
+            display: none;
+        }
+    }
+}
+.sparsh-mfp-content {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 auto;
+    text-align: left;
+    z-index: 1045;
+}
+.sparsh-mfp-inline-holder {
+    .sparsh-mfp-content {
+        width: 100%;
+        cursor: auto;
+    }
+}
+.sparsh-mfp-ajax-holder {
+    .sparsh-mfp-content {
+        width: 100%;
+        cursor: auto;
+    }
+}
+.sparsh-mfp-ajax-cur {
+    cursor: progress;
+}
+.sparsh-mfp-zoom-out-cur {
+    cursor: -moz-zoom-out;
+    cursor: -webkit-zoom-out;
+    cursor: zoom-out;
+    .sparsh-mfp-image-holder {
+        .sparsh-mfp-close {
+            cursor: -moz-zoom-out;
+            cursor: -webkit-zoom-out;
+            cursor: zoom-out;
+        }
+    }
+}
+.sparsh-mfp-zoom {
+    cursor: pointer;
+    cursor: -webkit-zoom-in;
+    cursor: -moz-zoom-in;
+    cursor: zoom-in;
+}
+.sparsh-mfp-auto-cursor {
+    .sparsh-mfp-content {
+        cursor: auto;
+    }
+}
+.sparsh-mfp-close {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    width: 44px;
+    height: 44px;
+    line-height: 44px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    text-decoration: none;
+    text-align: center;
+    opacity: 0.65;
+    padding: 0 0 18px 10px;
+    color: @color_3;
+    font-style: normal;
+    font-size: 28px;
+    font-family: Arial, Baskerville, monospace;
+    &:hover {
+        opacity: 1;
+    }
+    &:focus {
+        opacity: 1;
+    }
+    &:active {
+        top: 1px;
+    }
+    &:after {
+        content: '\00d7';
+    }
+}
+.sparsh-mfp-arrow {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    position: absolute;
+    opacity: 0.65;
+    margin: 0;
+    top: 50%;
+    margin-top: -55px;
+    padding: 0;
+    width: 90px;
+    height: 110px;
+    -webkit-tap-highlight-color: transparent;
+    &:active {
+        margin-top: -54px;
+    }
+    &:hover {
+        opacity: 1;
+    }
+    &:focus {
+        opacity: 1;
+    }
+    &:before {
+        content: '';
+        display: block;
+        width: 0;
+        height: 0;
+        position: absolute;
+        left: 0;
+        top: 0;
+        margin-top: 35px;
+        margin-left: 35px;
+        border: medium inset transparent;
+        border-top-width: 21px;
+        border-bottom-width: 21px;
+        opacity: 0.7;
+    }
+    &:after {
+        content: '';
+        display: block;
+        width: 0;
+        height: 0;
+        position: absolute;
+        left: 0;
+        top: 0;
+        margin-top: 35px;
+        margin-left: 35px;
+        border: medium inset transparent;
+        border-top-width: 13px;
+        border-bottom-width: 13px;
+        top: 8px;
+    }
+}
+.sparsh-mfp-preloader {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    color: @color_1;
+    position: absolute;
+    top: 50%;
+    width: auto;
+    text-align: center;
+    margin-top: -0.8em;
+    left: 8px;
+    right: 8px;
+    z-index: 1044;
+    a {
+        color: @color_1;
+        &:hover {
+            color: @color_2;
+        }
+    }
+}
+.sparsh-mfp-counter {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: @color_1;
+    font-size: 12px;
+    line-height: 18px;
+    white-space: nowrap;
+}
+.sparsh-mfp-loading.sparsh-mfp-figure {
+    display: none;
+}
+.sparsh-mfp-hide {
+    display: none !important;
+}
+.sparsh-mfp-s-ready {
+    .sparsh-mfp-preloader {
+        display: none;
+    }
+}
+.sparsh-mfp-s-error {
+    .sparsh-mfp-content {
+        display: none;
+    }
+}
+button.sparsh-mfp-close {
+    overflow: visible;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    -webkit-appearance: none;
+    display: block;
+    outline: none;
+    padding: 0;
+    z-index: 1046;
+    box-shadow: none;
+    touch-action: manipulation;
+}
+button.sparsh-mfp-arrow {
+    overflow: visible;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    -webkit-appearance: none;
+    display: block;
+    outline: none;
+    padding: 0;
+    z-index: 1046;
+    box-shadow: none;
+    touch-action: manipulation;
+}
+button {
+    &::-moz-focus-inner {
+        padding: 0;
+        border: 0;
+    }
+}
+.sparsh-mfp-close-btn-in {
+    .sparsh-mfp-close {
+        color: #333 !important;
+    }
+}
+.sparsh-mfp-image-holder {
+    .sparsh-mfp-close {
+        color: @color_3;
+        right: -6px;
+        text-align: right;
+        padding-right: 6px;
+        width: 100%;
+    }
+    .sparsh-mfp-content {
+        max-width: 100%;
+    }
+}
+.sparsh-mfp-iframe-holder {
+    .sparsh-mfp-close {
+        color: @color_3;
+        right: -6px;
+        text-align: right;
+        padding-right: 6px;
+        width: 100%;
+        top: -40px;
+    }
+    padding-top: 40px;
+    padding-bottom: 40px;
+    .sparsh-mfp-content {
+        line-height: 0;
+        width: 100%;
+        max-width: 900px;
+    }
+}
+.sparsh-mfp-arrow-left {
+    left: 0;
+    &:after {
+        border-right: 17px solid #FFF;
+        margin-left: 31px;
+    }
+    &:before {
+        margin-left: 25px;
+        border-right: 27px solid #3F3F3F;
+    }
+}
+.sparsh-mfp-arrow-right {
+    right: 0;
+    &:after {
+        border-left: 17px solid #FFF;
+        margin-left: 39px;
+    }
+    &:before {
+        border-left: 27px solid #3F3F3F;
+    }
+}
+.sparsh-mfp-iframe-scaler {
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    padding-top: 56.25%;
+    iframe {
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+        background: #000;
+    }
+}
+img.sparsh-mfp-img {
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    display: block;
+    line-height: 0;
+    box-sizing: border-box;
+    padding: 40px 0 40px;
+    margin: 0 auto;
+}
+.sparsh-mfp-figure {
+    line-height: 0;
+    &:after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 40px;
+        bottom: 40px;
+        display: block;
+        right: 0;
+        width: auto;
+        height: auto;
+        z-index: -1;
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+        background: #444;
+    }
+    small {
+        color: @color_4;
+        display: block;
+        font-size: 12px;
+        line-height: 14px;
+    }
+    figure {
+        margin: 0;
+    }
+}
+.sparsh-mfp-bottom-bar {
+    margin-top: -36px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    cursor: auto;
+}
+.sparsh-mfp-title {
+    text-align: left;
+    line-height: 18px;
+    color: @color_5;
+    word-wrap: break-word;
+    padding-right: 36px;
+}
+.sparsh-mfp-gallery {
+    .sparsh-mfp-image-holder {
+        .sparsh-mfp-figure {
+            cursor: pointer;
+        }
+    }
+}
+#sparsh-mfp-quickview {
+    position: relative;
+    background: #FFF;
+    padding: 0;
+    width: 100%;
+    margin: 0 auto;
+    max-height: 100%;
+    overflow: hidden;
+    overflow-y: auto;
+    min-height: 400px;
+}
+#sparsh-mfp-quickview #maincontent {
+    padding-top: 20px;
+}
+.page-layout-2columns-left {
+    .sparsh-mfp-container {
+        .column.main {
+            width: 100%;
+        }
+    }
+}
+.sparsh-mfp-quickview-message {
+    text-align: center;
+}
+#sparsh-mfp-quickview{
+    .message.success>*:first-child:before {
+        vertical-align: middle;
+        position: inherit;
+        padding-top: 10px;
+    }
+}
+.sparsh-quickview-actions-secondary {
+    width: 50%;
+}
+.sparsh-quickview{
+    display: none;
+}
+.cms-index-index {
+    #sparsh-mfp-quickview {
+        .page-title {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            padding-bottom: 15px;
+        }
+    }
+}
+.product-social-links {
+    .action.sparsh-quickview-action {
+        &:before {
+            content: '\e615';
+        }
+    }
+}
+.block-bundle-summary {
+    .action.sparsh-quickview-action {
+        &:before {
+            content: '\e615';
+        }
+    }
+}
+.product-item {
+    .action.sparsh-quickview-action {
+        &:before {
+            content: '\e615';
+        }
+    }
+}
+.table-comparison {
+    .action.sparsh-quickview-action {
+        &:before {
+            content: '\e615';
+        }
+    }
+}
+// sparsh-quick-view-button css
+.product-item-info {
+    position: relative;
+    .sparsh-quick-view-btn-container {   
+        -webkit-transform: translate(-50%, 0);
+        -moz-transform: translate(-50%, 0);
+        transform: translate(-50%, 0);
+        white-space: nowrap;
+        position: absolute;
+        text-align: center;
+        z-index: 999;
+    }
+}
+.products-grid{
+    .product-item-info {
+        .sparsh-quick-view-btn-container {
+            left: 50%;
+            top: 30%;
+        }
+    }
+}
+.products-list{
+    .product-item-info {
+        .sparsh-quick-view-btn-container {
+            margin-left: 8em;
+            margin-top: 10em;
+        }
+    }
+}
+.products-grid, .products-list {
+    a.sparsh-quick-view-button {
+        opacity: 0;
+        visibility: hidden;
+        padding: 10px 15px 10px 15px;
+        font-size: 1.3rem;
+        line-height: 1;
+        border-radius: 0;
+        -webkit-box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.3);
+        -moz-box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.3);
+        box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.3);
+    }
+    a.sparsh-quick-view-button:before {
+        content: '\e615';
+        font-size: 1.3rem;
+        font-family: 'luma-icons'; 
+        font-weight: normal;
+        vertical-align: middle; 
+        display: inline-block;  
+        margin-right: 5px;
+        text-align: center;
+        overflow: hidden;
+      }
+    .product-item.sparsh-quick-view-item{
+        &:hover {
+            a.sparsh-quick-view-button {
+                opacity: 1 !important;
+                visibility: visible !important;
+            }
+            .product-image-container {
+                opacity: 0.3;
+            }
+        }
+    }
+}
+@media screen and (max-width: 800px) and (orientation: landscape) {
+    .sparsh-mfp-img-mobile {
+        .sparsh-mfp-image-holder {
+            padding-left: 0;
+            padding-right: 0;
+        }
+        img.sparsh-mfp-img {
+            padding: 0;
+        }
+        .sparsh-mfp-figure {
+            &:after {
+                top: 0;
+                bottom: 0;
+            }
+            small {
+                display: inline;
+                margin-left: 5px;
+            }
+        }
+        .sparsh-mfp-bottom-bar {
+            background: rgba(0, 0, 0, 0.6);
+            bottom: 0;
+            margin: 0;
+            top: auto;
+            padding: 3px 5px;
+            position: fixed;
+            box-sizing: border-box;
+            &:empty {
+                padding: 0;
+            }
+        }
+        .sparsh-mfp-counter {
+            right: 5px;
+            top: 3px;
+        }
+        .sparsh-mfp-close {
+            top: 0;
+            right: 0;
+            width: 35px;
+            height: 35px;
+            line-height: 35px;
+            background: rgba(0, 0, 0, 0.6);
+            position: fixed;
+            text-align: center;
+            padding: 0;
+        }
+    }
+}
+@media screen and (max-height: 300px) {
+    .sparsh-mfp-img-mobile {
+        .sparsh-mfp-image-holder {
+            padding-left: 0;
+            padding-right: 0;
+        }
+        img.sparsh-mfp-img {
+            padding: 0;
+        }
+        .sparsh-mfp-figure {
+            &:after {
+                top: 0;
+                bottom: 0;
+            }
+            small {
+                display: inline;
+                margin-left: 5px;
+            }
+        }
+        .sparsh-mfp-bottom-bar {
+            background: rgba(0, 0, 0, 0.6);
+            bottom: 0;
+            margin: 0;
+            top: auto;
+            padding: 3px 5px;
+            position: fixed;
+            box-sizing: border-box;
+            &:empty {
+                padding: 0;
+            }
+        }
+        .sparsh-mfp-counter {
+            right: 5px;
+            top: 3px;
+        }
+        .sparsh-mfp-close {
+            top: 0;
+            right: 0;
+            width: 35px;
+            height: 35px;
+            line-height: 35px;
+            background: rgba(0, 0, 0, 0.6);
+            position: fixed;
+            text-align: center;
+            padding: 0;
+        }
+    }
+}
+@media all and (max-width: 900px) {
+    .sparsh-mfp-arrow {
+        -webkit-transform: scale(0.75);
+        transform: scale(0.75);
+    }
+    .sparsh-mfp-arrow-left {
+        -webkit-transform-origin: 0;
+        transform-origin: 0;
+    }
+    .sparsh-mfp-arrow-right {
+        -webkit-transform-origin: 100%;
+        transform-origin: 100%;
+    }
+}
+@media (min-width: 768px) and (max-width:1024px) {
+    #sparsh-mfp-quickview {
+        .box-tocart {
+            .action.tocart {
+                width: auto;
+            }
+        }
+    }
+}
+@media (min-width: 768px) {
+    #sparsh-mfp-quickview.sparsh-quickview-custom-options{
+        .product-options-wrapper {
+            width: 45%;
+        }
+        .product-options-bottom {
+            width: 48%;
+        }
+    }
+}
+@media screen and (max-width: 767px) {
+    .checkout-cart-index {
+        #sparsh-mfp-quickview {
+            .product.info.detailed {
+                padding-left: 15px;
+                padding-right: 15px;
+            }
+            .product-info-main {
+                padding-left: 15px;
+                padding-right: 15px;
+            }
+            .page-title-wrapper {
+                padding-left: 0;
+                padding-right: 0;
+            }
+        }
+    }
+}
+
+
+
+

app/code/Sparsh/QuickView/view/frontend/web/js/compare.js

+define(
+    [
+        'jquery'
+    ], function ($) {
+        'use strict';
+
+        $.widget(
+            'sparsh.compare', {
+                _create: function () {
+                    this.action();
+                },
+
+                action: function () {
+                    var self = this;
+
+                    $('#sparsh-mfp-quickview').delegate(
+                        '.action.tocompare', 'click', function (e) {
+                            console.log(e);
+                            var element = $(this),
+                                dataPost = element.data('post'),
+                                key = $('input[name="form_key"]').val();
+
+                            if (key) {
+                                dataPost.data.form_key = key;
+                            }
+
+                            var parameter = $.param(dataPost.data),
+                                url = dataPost.action + (parameter.length ? '?' + parameter : '');
+
+                            e.stopPropagation();
+
+                            $.ajax(
+                                {
+                                    url: url,
+                                    type: 'post',
+                                    dataType: 'json',
+                                    showLoader: true,
+                                    success: function (res) {
+                                        var popup = $('#sparsh-mfp-quickview');
+                                        $('.sparsh-mfp-quickview-message').addClass('message-success success message').html('<div>' + res.message + '</div>');
+                                        popup.animate({scrollTop: 0}, "slow");
+                                        var checkExist = setInterval(function () {
+                                            alert('save success');
+                                            if ($('div.page.messages').find('.message-success').length) {
+                                                clearInterval(checkExist);
+                                                $('div.page.messages').find('.message-success').remove();
+                                            }
+                                        }, 50);
+                                    }
+                                }
+                            );
+                        }
+                    );
+                }
+            }
+        );
+
+        return $.sparsh.compare;
+    }
+);
+

app/code/Sparsh/QuickView/view/frontend/web/js/lib/jquery.magnific-popup.js

+;(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['jquery'], factory);
+    } else if (typeof exports === 'object') {
+        // Node/CommonJS
+        factory(require('jquery'));
+    } else {
+        // Browser globals
+        factory(window.jQuery || window.Zepto);
+    }
+}(
+    function ($) {
+
+
+            /**
+             * Private static constants
+             */
+            var CLOSE_EVENT = 'Close',
+            BEFORE_CLOSE_EVENT = 'BeforeClose',
+            AFTER_CLOSE_EVENT = 'AfterClose',
+            BEFORE_APPEND_EVENT = 'BeforeAppend',
+            MARKUP_PARSE_EVENT = 'MarkupParse',
+            OPEN_EVENT = 'Open',
+            CHANGE_EVENT = 'Change',
+            NS = 'mfp',
+            EVENT_NS = '.' + NS,
+            READY_CLASS = 'sparsh-mfp-ready',
+            REMOVING_CLASS = 'sparsh-mfp-removing',
+            PREVENT_CLOSE_CLASS = 'sparsh-mfp-prevent-close';
+
+
+            /**
+             * Private vars
+             */
+            /*jshint -W079 */
+            var mfp, // As we have only one instance of MagnificPopup object, we define it locally to not to use 'this'
+            MagnificPopup = function (){},
+            _isJQ = !!(window.jQuery),
+            _prevStatus,
+            _window = $(window),
+            _document,
+            _prevContentType,
+            _wrapClasses,
+            _currPopupType;
+
+
+            /**
+             * Private functions
+             */
+            var _mfpOn = function (name, f) {
+                mfp.ev.on(NS + name + EVENT_NS, f);
+            },
+            _getEl = function (className, appendTo, html, raw) {
+                var el = document.createElement('div');
+                el.className = 'sparsh-mfp-'+className;
+                if(html) {
+                    el.innerHTML = html;
+                }
+                if(!raw) {
+                    el = $(el);
+                    if(appendTo) {
+                        el.appendTo(appendTo);
+                    }
+                } else if(appendTo) {
+                    appendTo.appendChild(el);
+                }
+                return el;
+            },
+            _mfpTrigger = function (e, data) {
+                mfp.ev.triggerHandler(NS + e, data);
+
+                if(mfp.st.callbacks) {
+                    // converts "mfpEventName" to "eventName" callback and triggers it if it's present
+                    e = e.charAt(0).toLowerCase() + e.slice(1);
+                    if(mfp.st.callbacks[e]) {
+                        mfp.st.callbacks[e].apply(mfp, $.isArray(data) ? data : [data]);
+                    }
+                }
+            },
+            _getCloseBtn = function (type) {
+                if(type !== _currPopupType || !mfp.currTemplate.closeBtn) {
+                    mfp.currTemplate.closeBtn = $(mfp.st.closeMarkup.replace('%title%', mfp.st.tClose));
+                    _currPopupType = type;
+                }
+                return mfp.currTemplate.closeBtn;
+            },
+            // Initialize Magnific Popup only when called at least once
+            _checkInstance = function () {
+                if(!$.magnificPopup.instance) {
+                    /*jshint -W020 */
+                    mfp = new MagnificPopup();
+                    mfp.init();
+                    $.magnificPopup.instance = mfp;
+                }
+            },
+            // CSS transition detection, http://stackoverflow.com/questions/7264899/detect-css-transitions-using-javascript-and-without-modernizr
+            supportsTransitions = function () {
+                var s = document.createElement('p').style, // 's' for style. better to create an element if body yet to exist
+                v = ['ms','O','Moz','Webkit']; // 'v' for vendor
+
+                if(s['transition'] !== undefined ) {
+                    return true;
+                }
+
+                while( v.length ) {
+                    if(v.pop() + 'Transition' in s ) {
+                        return true;
+                    }
+                }
+
+                return false;
+            };
+
+
+
+            /**
+             * Public functions
+             */
+            MagnificPopup.prototype = {
+
+                constructor: MagnificPopup,
+
+                /**
+                 * Initializes Magnific Popup plugin.
+                 * This function is triggered only once when $.fn.magnificPopup or $.magnificPopup is executed
+                 */
+                init: function () {
+                    var appVersion = navigator.appVersion;
+                    mfp.isLowIE = mfp.isIE8 = document.all && !document.addEventListener;
+                    mfp.isAndroid = (/android/gi).test(appVersion);
+                    mfp.isIOS = (/iphone|ipad|ipod/gi).test(appVersion);
+                    mfp.supportsTransition = supportsTransitions();
+
+                    // We disable fixed positioned lightbox on devices that don't handle it nicely.
+                    // If you know a better way of detecting this - let me know.
+                    mfp.probablyMobile = (mfp.isAndroid || mfp.isIOS || /(Opera Mini)|Kindle|webOS|BlackBerry|(Opera Mobi)|(Windows Phone)|IEMobile/i.test(navigator.userAgent) );
+                    _document = $(document);
+
+                    mfp.popupsCache = {};
+                },
+
+                /**
+                 * Opens popup
+                 *
+                 * @param data [description]
+                 */
+                open: function (data) {
+
+                    var i;
+
+                    if(data.isObj === false) {
+                        // convert jQuery collection to array to avoid conflicts later
+                        mfp.items = data.items.toArray();
+
+                        mfp.index = 0;
+                        var items = data.items,
+                        item;
+                        for(i = 0; i < items.length; i++) {
+                            item = items[i];
+                            if(item.parsed) {
+                                item = item.el[0];
+                            }
+                            if(item === data.el[0]) {
+                                mfp.index = i;
+                                break;
+                            }
+                        }
+                    } else {
+                        mfp.items = $.isArray(data.items) ? data.items : [data.items];
+                        mfp.index = data.index || 0;
+                    }
+
+                    // if popup is already opened - we just update the content
+                    if(mfp.isOpen) {
+                        mfp.updateItemHTML();
+                        return;
+                    }
+
+                    mfp.types = [];
+                    _wrapClasses = '';
+                    if(data.mainEl && data.mainEl.length) {
+                        mfp.ev = data.mainEl.eq(0);
+                    } else {
+                        mfp.ev = _document;
+                    }
+
+                    if(data.key) {
+                        if(!mfp.popupsCache[data.key]) {
+                            mfp.popupsCache[data.key] = {};
+                        }
+                        mfp.currTemplate = mfp.popupsCache[data.key];
+                    } else {
+                        mfp.currTemplate = {};
+                    }
+
+
+
+                    mfp.st = $.extend(true, {}, $.magnificPopup.defaults, data);
+                    mfp.fixedContentPos = mfp.st.fixedContentPos === 'auto' ? !mfp.probablyMobile : mfp.st.fixedContentPos;
+
+                    if(mfp.st.modal) {
+                        mfp.st.closeOnContentClick = false;
+                        mfp.st.closeOnBgClick = false;
+                        mfp.st.showCloseBtn = false;
+                        mfp.st.enableEscapeKey = false;
+                    }
+
+
+                    // Building markup
+                    // main containers are created only once
+                    if(!mfp.bgOverlay) {
+
+                        // Dark overlay
+                        mfp.bgOverlay = _getEl('bg').on(
+                            'click'+EVENT_NS, function () {
+                                mfp.close();
+                            }
+                        );
+
+                        mfp.wrap = _getEl('wrap').attr('tabindex', -1).on(
+                            'click'+EVENT_NS, function (e) {
+                                if(mfp._checkIfClose(e.target)) {
+                                    mfp.close();
+                                }
+                            }
+                        );
+
+                        mfp.container = _getEl('container', mfp.wrap);
+                    }
+
+                    mfp.contentContainer = _getEl('content');
+                    if(mfp.st.preloader) {
+                        mfp.preloader = _getEl('preloader', mfp.container, mfp.st.tLoading);
+                    }
+
+
+                    // Initializing modules
+                    var modules = $.magnificPopup.modules;
+                    for(i = 0; i < modules.length; i++) {
+                        var n = modules[i];
+                        n = n.charAt(0).toUpperCase() + n.slice(1);
+                        mfp['init'+n].call(mfp);
+                    }
+                    _mfpTrigger('BeforeOpen');
+
+
+                    if(mfp.st.showCloseBtn) {
+                        // Close button
+                        if(!mfp.st.closeBtnInside) {
+                            mfp.wrap.append(_getCloseBtn());
+                        } else {
+                            _mfpOn(
+                                MARKUP_PARSE_EVENT, function (e, template, values, item) {
+                                    values.close_replaceWith = _getCloseBtn(item.type);
+                                }
+                            );
+                            _wrapClasses += ' sparsh-mfp-close-btn-in';
+                        }
+                    }
+
+                    if(mfp.st.alignTop) {
+                        _wrapClasses += ' sparsh-mfp-align-top';
+                    }
+
+
+
+                    if(mfp.fixedContentPos) {
+                        mfp.wrap.css(
+                            {
+                                overflow: mfp.st.overflowY,
+                                overflowX: 'hidden',
+                                overflowY: mfp.st.overflowY
+                            }
+                        );
+                    } else {
+                        mfp.wrap.css(
+                            {
+                                top: _window.scrollTop(),
+                                position: 'absolute'
+                            }
+                        );
+                    }
+                    if(mfp.st.fixedBgPos === false || (mfp.st.fixedBgPos === 'auto' && !mfp.fixedContentPos) ) {
+                        mfp.bgOverlay.css(
+                            {
+                                height: _document.height(),
+                                position: 'absolute'
+                            }
+                        );
+                    }
+
+
+
+                    if(mfp.st.enableEscapeKey) {
+                        // Close on ESC key
+                        _document.on(
+                            'keyup' + EVENT_NS, function (e) {
+                                if(e.keyCode === 27) {
+                                    mfp.close();
+                                }
+                            }
+                        );
+                    }
+
+                    _window.on(
+                        'resize' + EVENT_NS, function () {
+                            mfp.updateSize();
+                        }
+                    );
+
+
+                    if(!mfp.st.closeOnContentClick) {
+                        _wrapClasses += ' sparsh-mfp-auto-cursor';
+                    }
+
+                    if(_wrapClasses) {
+                        mfp.wrap.addClass(_wrapClasses);
+                    }
+
+
+                    // this triggers recalculation of layout, so we get it once to not to trigger twice
+                    var windowHeight = mfp.wH = _window.height();
+
+
+                    var windowStyles = {};
+
+                    if(mfp.fixedContentPos ) {
+                        if(mfp._hasScrollBar(windowHeight)) {
+                            var s = mfp._getScrollbarSize();
+                            if(s) {
+                                windowStyles.marginRight = s;
+                            }
+                        }
+                    }
+
+                    if(mfp.fixedContentPos) {
+                        if(!mfp.isIE7) {
+                            windowStyles.overflow = 'hidden';
+                        } else {
+                            // ie7 double-scroll bug
+                            $('body, html').css('overflow', 'hidden');
+                        }
+                    }
+
+
+
+                    var classesToadd = mfp.st.mainClass;
+                    if(mfp.isIE7) {
+                        classesToadd += ' sparsh-mfp-ie7';
+                    }
+                    if(classesToadd) {
+                        mfp._addClassToMFP(classesToadd);
+                    }
+
+                    // add content
+                    mfp.updateItemHTML();
+
+                    _mfpTrigger('BuildControls');
+
+                    // remove scrollbar, add margin e.t.c
+                    $('html').css(windowStyles);
+
+                    // add everything to DOM
+                    mfp.bgOverlay.add(mfp.wrap).prependTo(mfp.st.prependTo || $(document.body));
+
+                    // Save last focused element
+                    mfp._lastFocusedEl = document.activeElement;
+
+                    // Wait for next cycle to allow CSS transition
+                    setTimeout(
+                        function () {
+
+                            if(mfp.content) {
+                                mfp._addClassToMFP(READY_CLASS);
+                                mfp._setFocus();
+                            } else {
+                                // if content is not defined (not loaded e.t.c) we add class only for BG
+                                mfp.bgOverlay.addClass(READY_CLASS);
+                            }
+
+                            // Trap the focus in popup
+                            _document.on('focusin' + EVENT_NS, mfp._onFocusIn);
+
+                        }, 16
+                    );
+
+                    mfp.isOpen = true;
+                    mfp.updateSize(windowHeight);
+                    _mfpTrigger(OPEN_EVENT);
+
+                    return data;
+                },
+
+                /**
+                 * Closes the popup
+                 */
+                close: function () {
+                    if(!mfp.isOpen) { return;
+                    }
+                    _mfpTrigger(BEFORE_CLOSE_EVENT);
+
+                    mfp.isOpen = false;
+                    // for CSS3 animation
+                    if(mfp.st.removalDelay && !mfp.isLowIE && mfp.supportsTransition ) {
+                        mfp._addClassToMFP(REMOVING_CLASS);
+                        setTimeout(
+                            function () {
+                                mfp._close();
+                            }, mfp.st.removalDelay
+                        );
+                    } else {
+                        mfp._close();
+                    }
+                },
+
+                /**
+                 * Helper for close() function
+                 */
+                _close: function () {
+                    _mfpTrigger(CLOSE_EVENT);
+
+                    var classesToRemove = REMOVING_CLASS + ' ' + READY_CLASS + ' ';
+
+                    mfp.bgOverlay.detach();
+                    mfp.wrap.detach();
+                    mfp.container.empty();
+
+                    if(mfp.st.mainClass) {
+                        classesToRemove += mfp.st.mainClass + ' ';
+                    }
+
+                    mfp._removeClassFromMFP(classesToRemove);
+
+                    if(mfp.fixedContentPos) {
+                        var windowStyles = {marginRight: ''};
+                        if(mfp.isIE7) {
+                            $('body, html').css('overflow', '');
+                        } else {
+                            windowStyles.overflow = '';
+                        }
+                        $('html').css(windowStyles);
+                    }
+
+                    _document.off('keyup' + EVENT_NS + ' focusin' + EVENT_NS);
+                    mfp.ev.off(EVENT_NS);
+
+                    // clean up DOM elements that aren't removed
+                    mfp.wrap.attr('class', 'sparsh-mfp-wrap').removeAttr('style');
+                    mfp.bgOverlay.attr('class', 'sparsh-mfp-bg');
+                    mfp.container.attr('class', 'sparsh-mfp-container');
+
+                    // remove close button from target element
+                    if(mfp.st.showCloseBtn 
+                        && (!mfp.st.closeBtnInside || mfp.currTemplate[mfp.currItem.type] === true)
+                    ) {
+                        if(mfp.currTemplate.closeBtn) {
+                            mfp.currTemplate.closeBtn.detach();
+                        }
+                    }
+
+
+                    if(mfp.st.autoFocusLast && mfp._lastFocusedEl) {
+                        $(mfp._lastFocusedEl).focus(); // put tab focus back
+                    }
+                    mfp.currItem = null;
+                    mfp.content = null;
+                    mfp.currTemplate = null;
+                    mfp.prevHeight = 0;
+
+                    _mfpTrigger(AFTER_CLOSE_EVENT);
+                },
+
+                updateSize: function (winHeight) {
+
+                    if(mfp.isIOS) {
+                        // fixes iOS nav bars https://github.com/dimsemenov/Magnific-Popup/issues/2
+                        var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
+                        var height = window.innerHeight * zoomLevel;
+                        mfp.wrap.css('height', height);
+                        mfp.wH = height;
+                    } else {
+                        mfp.wH = winHeight || _window.height();
+                    }
+                    // Fixes #84: popup incorrectly positioned with position:relative on body
+                    if(!mfp.fixedContentPos) {
+                        mfp.wrap.css('height', mfp.wH);
+                    }
+
+                    _mfpTrigger('Resize');
+
+                },
+
+                /**
+                 * Set content of popup based on current index
+                 */
+                updateItemHTML: function () {
+                    var item = mfp.items[mfp.index];
+
+                    // Detach and perform modifications
+                    mfp.contentContainer.detach();
+
+                    if(mfp.content) {
+                        mfp.content.detach();
+                    }
+
+                    if(!item.parsed) {
+                        item = mfp.parseEl(mfp.index);
+                    }
+
+                    var type = item.type;
+
+                    _mfpTrigger('BeforeChange', [mfp.currItem ? mfp.currItem.type : '', type]);
+                    // BeforeChange event works like so:
+                    // _mfpOn('BeforeChange', function(e, prevType, newType) { });
+
+                    mfp.currItem = item;
+
+                    if(!mfp.currTemplate[type]) {
+                        var markup = mfp.st[type] ? mfp.st[type].markup : false;
+
+                        // allows to modify markup
+                        _mfpTrigger('FirstMarkupParse', markup);
+
+                        if(markup) {
+                            mfp.currTemplate[type] = $(markup);
+                        } else {
+                            // if there is no markup found we just define that template is parsed
+                            mfp.currTemplate[type] = true;
+                        }
+                    }
+
+                    if(_prevContentType && _prevContentType !== item.type) {
+                        mfp.container.removeClass('sparsh-mfp-'+_prevContentType+'-holder');
+                    }
+
+                    var newContent = mfp['get' + type.charAt(0).toUpperCase() + type.slice(1)](item, mfp.currTemplate[type]);
+                    mfp.appendContent(newContent, type);
+
+                    item.preloaded = true;
+
+                    _mfpTrigger(CHANGE_EVENT, item);
+                    _prevContentType = item.type;
+
+                    // Append container back after its content changed
+                    mfp.container.prepend(mfp.contentContainer);
+
+                    _mfpTrigger('AfterChange');
+                },
+
+
+                /**
+                 * Set HTML content of popup
+                 */
+                appendContent: function (newContent, type) {
+                    mfp.content = newContent;
+
+                    if(newContent) {
+                        if(mfp.st.showCloseBtn && mfp.st.closeBtnInside 
+                            && mfp.currTemplate[type] === true
+                        ) {
+                            // if there is no markup, we just append close button element inside
+                            if(!mfp.content.find('.sparsh-mfp-close').length) {
+                                mfp.content.append(_getCloseBtn());
+                            }
+                        } else {
+                            mfp.content = newContent;
+                        }
+                    } else {
+                        mfp.content = '';
+                    }
+
+                    _mfpTrigger(BEFORE_APPEND_EVENT);
+                    mfp.container.addClass('sparsh-mfp-'+type+'-holder');
+
+                    mfp.contentContainer.append(mfp.content);
+                },
+
+
+                /**
+                 * Creates Magnific Popup data object based on given data
+                 *
+                 * @param {int} index Index of item to parse
+                 */
+                parseEl: function (index) {
+                    var item = mfp.items[index],
+                    type;
+
+                    if(item.tagName) {
+                        item = { el: $(item) };
+                    } else {
+                        type = item.type;
+                        item = { data: item, src: item.src };
+                    }
+
+                    if(item.el) {
+                        var types = mfp.types;
+
+                        // check for 'sparsh-mfp-TYPE' class
+                        for(var i = 0; i < types.length; i++) {
+                            if(item.el.hasClass('sparsh-mfp-'+types[i]) ) {
+                                type = types[i];
+                                break;
+                            }
+                        }
+
+                        item.src = item.el.attr('data-sparsh-mfp-src');
+                        if(!item.src) {
+                            item.src = item.el.attr('href');
+                        }
+                    }
+
+                    item.type = type || mfp.st.type || 'inline';
+                    item.index = index;
+                    item.parsed = true;
+                    mfp.items[index] = item;
+                    _mfpTrigger('ElementParse', item);
+
+                    return mfp.items[index];
+                },
+
+
+                /**
+                 * Initializes single popup or a group of popups
+                 */
+                addGroup: function (el, options) {
+                    var eHandler = function (e) {
+                        e.mfpEl = this;
+                        mfp._openClick(e, el, options);
+                    };
+
+                    if(!options) {
+                        options = {};
+                    }
+
+                    var eName = 'click.magnificPopup';
+                    options.mainEl = el;
+
+                    if(options.items) {
+                        options.isObj = true;
+                        el.off(eName).on(eName, eHandler);
+                    } else {
+                        options.isObj = false;
+                        if(options.delegate) {
+                            el.off(eName).on(eName, options.delegate , eHandler);
+                        } else {
+                            options.items = el;
+                            el.off(eName).on(eName, eHandler);
+                        }
+                    }
+                },
+                _openClick: function (e, el, options) {
+                    var midClick = options.midClick !== undefined ? options.midClick : $.magnificPopup.defaults.midClick;
+
+
+                    if(!midClick && ( e.which === 2 || e.ctrlKey || e.metaKey || e.altKey || e.shiftKey ) ) {
+                        return;
+                    }
+
+                    var disableOn = options.disableOn !== undefined ? options.disableOn : $.magnificPopup.defaults.disableOn;
+
+                    if(disableOn) {
+                        if($.isFunction(disableOn)) {
+                            if(!disableOn.call(mfp) ) {
+                                return true;
+                            }
+                        } else { // else it's number
+                            if(_window.width() < disableOn ) {
+                                return true;
+                            }
+                        }
+                    }
+
+                    if(e.type) {
+                        e.preventDefault();
+
+                        // This will prevent popup from closing if element is inside and popup is already opened
+                        if(mfp.isOpen) {
+                            e.stopPropagation();
+                        }
+                    }
+
+                    options.el = $(e.mfpEl);
+                    if(options.delegate) {
+                        options.items = el.find(options.delegate);
+                    }
+                    mfp.open(options);
+                },
+
+
+                /**
+                 * Updates text on preloader
+                 */
+                updateStatus: function (status, text) {
+
+                    if(mfp.preloader) {
+                        if(_prevStatus !== status) {
+                            mfp.container.removeClass('sparsh-mfp-s-'+_prevStatus);
+                        }
+
+                        if(!text && status === 'loading') {
+                            text = mfp.st.tLoading;
+                        }
+
+                        var data = {
+                            status: status,
+                            text: text
+                        };
+                        // allows to modify status
+                        _mfpTrigger('UpdateStatus', data);
+
+                        status = data.status;
+                        text = data.text;
+
+                        mfp.preloader.html(text);
+
+                        mfp.preloader.find('a').on(
+                            'click', function (e) {
+                                e.stopImmediatePropagation();
+                            }
+                        );
+
+                        mfp.container.addClass('sparsh-mfp-s-'+status);
+                        _prevStatus = status;
+                    }
+                },
+
+
+                /*
+                "Private" helpers that aren't private at all
+                */
+                // Check to close popup or not
+                // "target" is an element that was clicked
+                _checkIfClose: function (target) {
+
+                    if($(target).hasClass(PREVENT_CLOSE_CLASS)) {
+                        return;
+                    }
+
+                    var closeOnContent = mfp.st.closeOnContentClick;
+                    var closeOnBg = mfp.st.closeOnBgClick;
+
+                    if(closeOnContent && closeOnBg) {
+                        return true;
+                    } else {
+
+                        // We close the popup if click is on close button or on preloader. Or if there is no content.
+                        if(!mfp.content || $(target).hasClass('sparsh-mfp-close') || (mfp.preloader && target === mfp.preloader[0]) ) {
+                            return true;
+                        }
+
+                        // if click is outside the content
+                        if((target !== mfp.content[0] && !$.contains(mfp.content[0].parentElement, target)) ) {
+                            if(closeOnBg) {
+                                // last check, if the clicked element is in DOM, (in case it's removed onclick)
+                                if($.contains(document, target) ) {
+                                    return true;
+                                }
+                            }
+                        } else if(closeOnContent) {
+                            return true;
+                        }
+
+                    }
+                    return false;
+                },
+                _addClassToMFP: function (cName) {
+                    mfp.bgOverlay.addClass(cName);
+                    mfp.wrap.addClass(cName);
+                },
+                _removeClassFromMFP: function (cName) {
+                    this.bgOverlay.removeClass(cName);
+                    mfp.wrap.removeClass(cName);
+                },
+                _hasScrollBar: function (winHeight) {
+                    return (  (mfp.isIE7 ? _document.height() : document.body.scrollHeight) > (winHeight || _window.height()) );
+                },
+                _setFocus: function () {
+                    (mfp.st.focus ? mfp.content.find(mfp.st.focus).eq(0) : mfp.wrap).focus();
+                },
+                _onFocusIn: function (e) {
+                    if(e.target !== mfp.wrap[0] && !$.contains(mfp.wrap[0], e.target) ) {
+                        mfp._setFocus();
+                        return false;
+                    }
+                },
+                _parseMarkup: function (template, values, item) {
+                    var arr;
+                    if(item.data) {
+                        values = $.extend(item.data, values);
+                    }
+                    _mfpTrigger(MARKUP_PARSE_EVENT, [template, values, item]);
+
+                    $.each(
+                        values, function (key, value) {
+                            if(value === undefined || value === false) {
+                                return true;
+                            }
+                            arr = key.split('_');
+                            if(arr.length > 1) {
+                                var el = template.find(EVENT_NS + '-'+arr[0]);
+
+                                if(el.length > 0) {
+                                    var attr = arr[1];
+                                    if(attr === 'replaceWith') {
+                                        if(el[0] !== value[0]) {
+                                            el.replaceWith(value);
+                                        }
+                                    } else if(attr === 'img') {
+                                        if(el.is('img')) {
+                                            el.attr('src', value);
+                                        } else {
+                                            el.replaceWith($('<img>').attr('src', value).attr('class', el.attr('class')));
+                                        }
+                                    } else {
+                                        el.attr(arr[1], value);
+                                    }
+                                }
+
+                            } else {
+                                template.find(EVENT_NS + '-'+key).html(value);
+                            }
+                        }
+                    );
+                },
+
+                _getScrollbarSize: function () {
+                    // thx David
+                    if(mfp.scrollbarSize === undefined) {
+                        var scrollDiv = document.createElement("div");
+                        scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
+                        document.body.appendChild(scrollDiv);
+                        mfp.scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+                        document.body.removeChild(scrollDiv);
+                    }
+                    return mfp.scrollbarSize;
+                }
+
+        }; /* MagnificPopup core prototype end */
+
+
+
+
+            /**
+             * Public static functions
+             */
+            $.magnificPopup = {
+                instance: null,
+                proto: MagnificPopup.prototype,
+                modules: [],
+
+                open: function (options, index) {
+                    _checkInstance();
+
+                    if(!options) {
+                        options = {};
+                    } else {
+                        options = $.extend(true, {}, options);
+                    }
+
+                    options.isObj = true;
+                    options.index = index || 0;
+                    return this.instance.open(options);
+                },
+
+                close: function () {
+                    return $.magnificPopup.instance && $.magnificPopup.instance.close();
+                },
+
+                registerModule: function (name, module) {
+                    if(module.options) {
+                        $.magnificPopup.defaults[name] = module.options;
+                    }
+                    $.extend(this.proto, module.proto);
+                    this.modules.push(name);
+                },
+
+                defaults: {
+
+                    // Info about options is in docs:
+                    // http://dimsemenov.com/plugins/magnific-popup/documentation.html#options
+
+                    disableOn: 0,
+
+                    key: null,
+
+                    midClick: false,
+
+                    mainClass: '',
+
+                    preloader: true,
+
+                    focus: '', // CSS selector of input to focus after popup is opened
+
+                    closeOnContentClick: false,
+
+                    closeOnBgClick: true,
+
+                    closeBtnInside: true,
+
+                    showCloseBtn: true,
+
+                    enableEscapeKey: true,
+
+                    modal: false,
+
+                    alignTop: false,
+
+                    removalDelay: 0,
+
+                    prependTo: null,
+
+                    fixedContentPos: 'auto',
+
+                    fixedBgPos: 'auto',
+
+                    overflowY: 'auto',
+
+                    closeMarkup: '<button title="%title%" type="button" class="sparsh-mfp-close">&#215;</button>',
+
+                    tClose: 'Close (Esc)',
+
+                    tLoading: 'Loading...',
+
+                    autoFocusLast: true
+
+                }
+        };
+
+
+
+            $.fn.magnificPopup = function (options) {
+                _checkInstance();
+
+                var jqEl = $(this);
+
+                // We call some API method of first param is a string
+                if (typeof options === "string" ) {
+
+                    if(options === 'open') {
+                        var items,
+                        itemOpts = _isJQ ? jqEl.data('magnificPopup') : jqEl[0].magnificPopup,
+                        index = parseInt(arguments[1], 10) || 0;
+
+                        if(itemOpts.items) {
+                            items = itemOpts.items[index];
+                        } else {
+                            items = jqEl;
+                            if(itemOpts.delegate) {
+                                items = items.find(itemOpts.delegate);
+                            }
+                            items = items.eq(index);
+                        }
+                        mfp._openClick({mfpEl:items}, jqEl, itemOpts);
+                    } else {
+                        if(mfp.isOpen) {
+                            mfp[options].apply(mfp, Array.prototype.slice.call(arguments, 1));
+                        }
+                    }
+
+                } else {
+                    // clone options obj
+                    options = $.extend(true, {}, options);
+
+                    /*
+                    * As Zepto doesn't support .data() method for objects
+                    * and it works only in normal browsers
+                    * we assign "options" object directly to the DOM element. FTW!
+                    */
+                    if(_isJQ) {
+                        jqEl.data('magnificPopup', options);
+                    } else {
+                        jqEl[0].magnificPopup = options;
+                    }
+
+                    mfp.addGroup(jqEl, options);
+
+                }
+                return jqEl;
+            };
+
+            /*>>core*/
+
+            /*>>inline*/
+
+            var INLINE_NS = 'inline',
+            _hiddenClass,
+            _inlinePlaceholder,
+            _lastInlineElement,
+            _putInlineElementsBack = function () {
+                if(_lastInlineElement) {
+                    _inlinePlaceholder.after(_lastInlineElement.addClass(_hiddenClass)).detach();
+                    _lastInlineElement = null;
+                }
+            };
+
+            $.magnificPopup.registerModule(
+                INLINE_NS, {
+                    options: {
+                        hiddenClass: 'hide', // will be appended with `sparsh-mfp-` prefix
+                        markup: '',
+                        tNotFound: 'Content not found'
+                    },
+                    proto: {
+
+                        initInline: function () {
+                            mfp.types.push(INLINE_NS);
+
+                            _mfpOn(
+                                CLOSE_EVENT+'.'+INLINE_NS, function () {
+                                    _putInlineElementsBack();
+                                }
+                            );
+                        },
+
+                        getInline: function (item, template) {
+
+                            _putInlineElementsBack();
+
+                            if(item.src) {
+                                var inlineSt = mfp.st.inline,
+                                el = $(item.src);
+
+                                if(el.length) {
+
+                                    // If target element has parent - we replace it with placeholder and put it back after popup is closed
+                                    var parent = el[0].parentNode;
+                                    if(parent && parent.tagName) {
+                                        if(!_inlinePlaceholder) {
+                                            _hiddenClass = inlineSt.hiddenClass;
+                                            _inlinePlaceholder = _getEl(_hiddenClass);
+                                            _hiddenClass = 'sparsh-mfp-'+_hiddenClass;
+                                        }
+                                        // replace target inline element with placeholder
+                                        _lastInlineElement = el.after(_inlinePlaceholder).detach().removeClass(_hiddenClass);
+                                    }
+
+                                    mfp.updateStatus('ready');
+                                } else {
+                                    mfp.updateStatus('error', inlineSt.tNotFound);
+                                    el = $('<div>');
+                                }
+
+                                   item.inlineElement = el;
+                                   return el;
+                            }
+
+                            mfp.updateStatus('ready');
+                            mfp._parseMarkup(template, {}, item);
+                            return template;
+                        }
+                    }
+                }
+            );
+
+            /*>>inline*/
+
+            /*>>ajax*/
+            var AJAX_NS = 'ajax',
+            _ajaxCur,
+            _removeAjaxCursor = function () {
+                if(_ajaxCur) {
+                    $(document.body).removeClass(_ajaxCur);
+                }
+            },
+            _destroyAjaxRequest = function () {
+                _removeAjaxCursor();
+                if(mfp.req) {
+                    mfp.req.abort();
+                }
+            };
+
+            $.magnificPopup.registerModule(
+                AJAX_NS, {
+
+                    options: {
+                        settings: null,
+                        cursor: 'sparsh-mfp-ajax-cur',
+                        tError: '<a href="%url%">The content</a> could not be loaded.'
+                    },
+
+                    proto: {
+                        initAjax: function () {
+                            mfp.types.push(AJAX_NS);
+                            _ajaxCur = mfp.st.ajax.cursor;
+
+                            _mfpOn(CLOSE_EVENT+'.'+AJAX_NS, _destroyAjaxRequest);
+                            _mfpOn('BeforeChange.' + AJAX_NS, _destroyAjaxRequest);
+                        },
+                        getAjax: function (item) {
+
+                            if(_ajaxCur) {
+                                $(document.body).addClass(_ajaxCur);
+                            }
+
+                            mfp.updateStatus('loading');
+
+                            var opts = $.extend(
+                                {
+                                    url: item.src,
+                                    success: function (data, textStatus, jqXHR) {
+                                        var temp = {
+                                            data:data,
+                                            xhr:jqXHR
+                                        };
+
+                                        _mfpTrigger('ParseAjax', temp);
+
+                                        mfp.appendContent($(temp.data), AJAX_NS);
+
+                                        item.finished = true;
+
+                                        _removeAjaxCursor();
+
+                                        mfp._setFocus();
+
+                                        setTimeout(
+                                            function () {
+                                                mfp.wrap.addClass(READY_CLASS);
+                                            }, 16
+                                        );
+
+                                        mfp.updateStatus('ready');
+
+                                        _mfpTrigger('AjaxContentAdded');
+                                    },
+                                    error: function () {
+                                        _removeAjaxCursor();
+                                        item.finished = item.loadError = true;
+                                        mfp.updateStatus('error', mfp.st.ajax.tError.replace('%url%', item.src));
+                                    }
+                                }, mfp.st.ajax.settings
+                            );
+
+                            mfp.req = $.ajax(opts);
+
+                            return '';
+                        }
+                    }
+                }
+            );
+
+            /*>>ajax*/
+
+            /*>>image*/
+            var _imgInterval,
+            _getTitle = function (item) {
+                if(item.data && item.data.title !== undefined) {
+                    return item.data.title;
+                }
+
+                var src = mfp.st.image.titleSrc;
+
+                if(src) {
+                    if($.isFunction(src)) {
+                        return src.call(mfp, item);
+                    } else if(item.el) {
+                        return item.el.attr(src) || '';
+                    }
+                }
+                return '';
+            };
+
+            $.magnificPopup.registerModule(
+                'image', {
+
+                    options: {
+                        markup: '<div class="sparsh-mfp-figure">'+
+                        '<div class="sparsh-mfp-close"></div>'+
+                        '<figure>'+
+                         '<div class="sparsh-mfp-img"></div>'+
+                         '<figcaption>'+
+                          '<div class="sparsh-mfp-bottom-bar">'+
+                        '<div class="sparsh-mfp-title"></div>'+
+                        '<div class="sparsh-mfp-counter"></div>'+
+                          '</div>'+
+                         '</figcaption>'+
+                        '</figure>'+
+                        '</div>',
+                        cursor: 'sparsh-mfp-zoom-out-cur',
+                        titleSrc: 'title',
+                        verticalFit: true,
+                        tError: '<a href="%url%">The image</a> could not be loaded.'
+                    },
+
+                    proto: {
+                        initImage: function () {
+                            var imgSt = mfp.st.image,
+                            ns = '.image';
+
+                            mfp.types.push('image');
+
+                            _mfpOn(
+                                OPEN_EVENT+ns, function () {
+                                    if(mfp.currItem.type === 'image' && imgSt.cursor) {
+                                        $(document.body).addClass(imgSt.cursor);
+                                    }
+                                }
+                            );
+
+                            _mfpOn(
+                                CLOSE_EVENT+ns, function () {
+                                    if(imgSt.cursor) {
+                                        $(document.body).removeClass(imgSt.cursor);
+                                    }
+                                    _window.off('resize' + EVENT_NS);
+                                }
+                            );
+
+                            _mfpOn('Resize'+ns, mfp.resizeImage);
+                            if(mfp.isLowIE) {
+                                _mfpOn('AfterChange', mfp.resizeImage);
+                            }
+                        },
+                        resizeImage: function () {
+                            var item = mfp.currItem;
+                            if(!item || !item.img) { return;
+                            }
+
+                            if(mfp.st.image.verticalFit) {
+                                var decr = 0;
+                                // fix box-sizing in ie7/8
+                                if(mfp.isLowIE) {
+                                    decr = parseInt(item.img.css('padding-top'), 10) + parseInt(item.img.css('padding-bottom'),10);
+                                }
+                                item.img.css('max-height', mfp.wH-decr);
+                            }
+                        },
+                        _onImageHasSize: function (item) {
+                            if(item.img) {
+
+                                item.hasSize = true;
+
+                                if(_imgInterval) {
+                                    clearInterval(_imgInterval);
+                                }
+
+                                item.isCheckingImgSize = false;
+
+                                _mfpTrigger('ImageHasSize', item);
+
+                                if(item.imgHidden) {
+                                    if(mfp.content) {
+                                        mfp.content.removeClass('sparsh-mfp-loading');
+                                    }
+
+                                    item.imgHidden = false;
+                                }
+
+                            }
+                        },
+
+                        /**
+                         * Function that loops until the image has size to display elements that rely on it asap
+                         */
+                        findImageSize: function (item) {
+
+                            var counter = 0,
+                            img = item.img[0],
+                            mfpSetInterval = function (delay) {
+
+                                if(_imgInterval) {
+                                     clearInterval(_imgInterval);
+                                }
+                                // decelerating interval that checks for size of an image
+                                _imgInterval = setInterval(
+                                    function () {
+                                        if(img.naturalWidth > 0) {
+                                            mfp._onImageHasSize(item);
+                                            return;
+                                        }
+
+                                        if(counter > 200) {
+                                            clearInterval(_imgInterval);
+                                        }
+
+                                        counter++;
+                                        if(counter === 3) {
+                                            mfpSetInterval(10);
+                                        } else if(counter === 40) {
+                                            mfpSetInterval(50);
+                                        } else if(counter === 100) {
+                                            mfpSetInterval(500);
+                                        }
+                                    }, delay
+                                );
+                            };
+
+                            mfpSetInterval(1);
+                        },
+
+                        getImage: function (item, template) {
+
+                            var guard = 0,
+
+                            // image load complete handler
+                            onLoadComplete = function () {
+                                if(item) {
+                                    if (item.img[0].complete) {
+                                        item.img.off('.mfploader');
+
+                                        if(item === mfp.currItem) {
+                                            mfp._onImageHasSize(item);
+
+                                            mfp.updateStatus('ready');
+                                        }
+
+                                        item.hasSize = true;
+                                        item.loaded = true;
+
+                                        _mfpTrigger('ImageLoadComplete');
+
+                                    }
+                                    else {
+                                        // if image complete check fails 200 times (20 sec), we assume that there was an error.
+                                        guard++;
+                                        if(guard < 200) {
+                                            setTimeout(onLoadComplete,100);
+                                        } else {
+                                            onLoadError();
+                                        }
+                                    }
+                                }
+                            },
+
+                            // image error handler
+                            onLoadError = function () {
+                                if(item) {
+                                    item.img.off('.mfploader');
+                                    if(item === mfp.currItem) {
+                                        mfp._onImageHasSize(item);
+                                        mfp.updateStatus('error', imgSt.tError.replace('%url%', item.src));
+                                    }
+
+                                    item.hasSize = true;
+                                    item.loaded = true;
+                                    item.loadError = true;
+                                }
+                            },
+                            imgSt = mfp.st.image;
+
+
+                            var el = template.find('.sparsh-mfp-img');
+                            if(el.length) {
+                                var img = document.createElement('img');
+                                img.className = 'sparsh-mfp-img';
+                                if(item.el && item.el.find('img').length) {
+                                    img.alt = item.el.find('img').attr('alt');
+                                }
+                                item.img = $(img).on('load.mfploader', onLoadComplete).on('error.mfploader', onLoadError);
+                                img.src = item.src;
+
+                                // without clone() "error" event is not firing when IMG is replaced by new IMG
+                                // TODO: find a way to avoid such cloning
+                                if(el.is('img')) {
+                                    item.img = item.img.clone();
+                                }
+
+                                img = item.img[0];
+                                if(img.naturalWidth > 0) {
+                                    item.hasSize = true;
+                                } else if(!img.width) {
+                                    item.hasSize = false;
+                                }
+                            }
+
+                            mfp._parseMarkup(
+                                template, {
+                                    title: _getTitle(item),
+                                    img_replaceWith: item.img
+                                }, item
+                            );
+
+                            mfp.resizeImage();
+
+                            if(item.hasSize) {
+                                if(_imgInterval) { clearInterval(_imgInterval);
+                                }
+
+                                if(item.loadError) {
+                                    template.addClass('sparsh-mfp-loading');
+                                    mfp.updateStatus('error', imgSt.tError.replace('%url%', item.src));
+                                } else {
+                                    template.removeClass('sparsh-mfp-loading');
+                                    mfp.updateStatus('ready');
+                                }
+                                   return template;
+                            }
+
+                            mfp.updateStatus('loading');
+                            item.loading = true;
+
+                            if(!item.hasSize) {
+                                item.imgHidden = true;
+                                template.addClass('sparsh-mfp-loading');
+                                mfp.findImageSize(item);
+                            }
+
+                            return template;
+                        }
+                    }
+                }
+            );
+
+            /*>>image*/
+
+            /*>>zoom*/
+            var hasMozTransform,
+            getHasMozTransform = function () {
+                if(hasMozTransform === undefined) {
+                    hasMozTransform = document.createElement('p').style.MozTransform !== undefined;
+                }
+                return hasMozTransform;
+            };
+
+            $.magnificPopup.registerModule(
+                'zoom', {
+
+                    options: {
+                        enabled: false,
+                        easing: 'ease-in-out',
+                        duration: 300,
+                        opener: function (element) {
+                            return element.is('img') ? element : element.find('img');
+                        }
+                    },
+
+                    proto: {
+
+                        initZoom: function () {
+                            var zoomSt = mfp.st.zoom,
+                            ns = '.zoom',
+                            image;
+
+                            if(!zoomSt.enabled || !mfp.supportsTransition) {
+                                return;
+                            }
+
+                            var duration = zoomSt.duration,
+                            getElToAnimate = function (image) {
+                                var newImg = image.clone().removeAttr('style').removeAttr('class').addClass('sparsh-mfp-animated-image'),
+                                transition = 'all '+(zoomSt.duration/1000)+'s ' + zoomSt.easing,
+                                cssObj = {
+                                    position: 'fixed',
+                                    zIndex: 9999,
+                                    left: 0,
+                                    top: 0,
+                                    '-webkit-backface-visibility': 'hidden'
+                                },
+                                t = 'transition';
+
+                                cssObj['-webkit-'+t] = cssObj['-moz-'+t] = cssObj['-o-'+t] = cssObj[t] = transition;
+
+                                newImg.css(cssObj);
+                                return newImg;
+                            },
+                            showMainContent = function () {
+                                mfp.content.css('visibility', 'visible');
+                            },
+                            openTimeout,
+                            animatedImg;
+
+                            _mfpOn(
+                                'BuildControls'+ns, function () {
+                                    if(mfp._allowZoom()) {
+
+                                        clearTimeout(openTimeout);
+                                        mfp.content.css('visibility', 'hidden');
+
+                                        // Basically, all code below does is clones existing image, puts in on top of the current one and animated it
+
+                                        image = mfp._getItemToZoom();
+
+                                        if(!image) {
+                                            showMainContent();
+                                            return;
+                                        }
+
+                                        animatedImg = getElToAnimate(image);
+
+                                        animatedImg.css(mfp._getOffset());
+
+                                        mfp.wrap.append(animatedImg);
+
+                                        openTimeout = setTimeout(
+                                            function () {
+                                                animatedImg.css(mfp._getOffset(true));
+                                                openTimeout = setTimeout(
+                                                    function () {
+
+                                                        showMainContent();
+
+                                                        setTimeout(
+                                                            function () {
+                                                                animatedImg.remove();
+                                                                image = animatedImg = null;
+                                                                _mfpTrigger('ZoomAnimationEnded');
+                                                            }, 16
+                                                        ); // avoid blink when switching images
+
+                                                    }, duration
+                                                ); // this timeout equals animation duration
+
+                                            }, 16
+                                        ); // by adding this timeout we avoid short glitch at the beginning of animation
+
+
+                                        // Lots of timeouts...
+                                    }
+                                }
+                            );
+                            _mfpOn(
+                                BEFORE_CLOSE_EVENT+ns, function () {
+                                    if(mfp._allowZoom()) {
+
+                                        clearTimeout(openTimeout);
+
+                                        mfp.st.removalDelay = duration;
+
+                                        if(!image) {
+                                            image = mfp._getItemToZoom();
+                                            if(!image) {
+                                                return;
+                                            }
+                                            animatedImg = getElToAnimate(image);
+                                        }
+
+                                        animatedImg.css(mfp._getOffset(true));
+                                        mfp.wrap.append(animatedImg);
+                                        mfp.content.css('visibility', 'hidden');
+
+                                        setTimeout(
+                                            function () {
+                                                animatedImg.css(mfp._getOffset());
+                                            }, 16
+                                        );
+                                    }
+
+                                }
+                            );
+
+                            _mfpOn(
+                                CLOSE_EVENT+ns, function () {
+                                    if(mfp._allowZoom()) {
+                                        showMainContent();
+                                        if(animatedImg) {
+                                            animatedImg.remove();
+                                        }
+                                        image = null;
+                                    }
+                                }
+                            );
+                        },
+
+                        _allowZoom: function () {
+                            return mfp.currItem.type === 'image';
+                        },
+
+                        _getItemToZoom: function () {
+                            if(mfp.currItem.hasSize) {
+                                return mfp.currItem.img;
+                            } else {
+                                return false;
+                            }
+                        },
+
+                        // Get element postion relative to viewport
+                        _getOffset: function (isLarge) {
+                            var el;
+                            if(isLarge) {
+                                el = mfp.currItem.img;
+                            } else {
+                                el = mfp.st.zoom.opener(mfp.currItem.el || mfp.currItem);
+                            }
+
+                            var offset = el.offset();
+                            var paddingTop = parseInt(el.css('padding-top'),10);
+                            var paddingBottom = parseInt(el.css('padding-bottom'),10);
+                            offset.top -= ( $(window).scrollTop() - paddingTop );
+
+
+                            /*
+
+                            Animating left + top + width/height looks glitchy in Firefox, but perfect in Chrome. And vice-versa.
+
+                            */
+                            var obj = {
+                                width: el.width(),
+                                // fix Zepto height+padding issue
+                                height: (_isJQ ? el.innerHeight() : el[0].offsetHeight) - paddingBottom - paddingTop
+                            };
+
+                            // I hate to do this, but there is no another option
+                            if(getHasMozTransform() ) {
+                                obj['-moz-transform'] = obj['transform'] = 'translate(' + offset.left + 'px,' + offset.top + 'px)';
+                            } else {
+                                obj.left = offset.left;
+                                obj.top = offset.top;
+                            }
+                            return obj;
+                        }
+
+                    }
+                }
+            );
+
+
+
+            /*>>zoom*/
+
+            /*>>iframe*/
+
+            var IFRAME_NS = 'iframe',
+            _emptyPage = '//about:blank',
+
+            _fixIframeBugs = function (isShowing) {
+                if(mfp.currTemplate[IFRAME_NS]) {
+                    var el = mfp.currTemplate[IFRAME_NS].find('iframe');
+                    if(el.length) {
+                        // reset src after the popup is closed to avoid "video keeps playing after popup is closed" bug
+                        if(!isShowing) {
+                            el[0].src = _emptyPage;
+                        }
+
+                        // IE8 black screen bug fix
+                        if(mfp.isIE8) {
+                            el.css('display', isShowing ? 'block' : 'none');
+                        }
+                    }
+                }
+            };
+
+            $.magnificPopup.registerModule(
+                IFRAME_NS, {
+
+                    options: {
+                        markup: '<div class="sparsh-mfp-iframe-scaler">'+
+                        '<div class="sparsh-mfp-close"></div>'+
+                        '<iframe class="sparsh-mfp-iframe" src="//about:blank" frameborder="0" allowfullscreen></iframe>'+
+                        '</div>',
+
+                        srcAction: 'iframe_src',
+
+                        // we don't care and support only one default type of URL by default
+                        patterns: {
+                            youtube: {
+                                index: 'youtube.com',
+                                id: 'v=',
+                                src: '//www.youtube.com/embed/%id%?autoplay=1'
+                            },
+                            vimeo: {
+                                index: 'vimeo.com/',
+                                id: '/',
+                                src: '//player.vimeo.com/video/%id%?autoplay=1'
+                            },
+                            gmaps: {
+                                index: '//maps.google.',
+                                src: '%id%&output=embed'
+                            }
+                        }
+                    },
+
+                    proto: {
+                        initIframe: function () {
+                            mfp.types.push(IFRAME_NS);
+
+                            _mfpOn(
+                                'BeforeChange', function (e, prevType, newType) {
+                                    if(prevType !== newType) {
+                                        if(prevType === IFRAME_NS) {
+                                            _fixIframeBugs(); // iframe if removed
+                                        } else if(newType === IFRAME_NS) {
+                                            _fixIframeBugs(true); // iframe is showing
+                                        }
+                                    }// else {
+                                    // iframe source is switched, don't do anything
+                                    //}
+                                }
+                            );
+
+                            _mfpOn(
+                                CLOSE_EVENT + '.' + IFRAME_NS, function () {
+                                    _fixIframeBugs();
+                                }
+                            );
+                        },
+
+                        getIframe: function (item, template) {
+                            var embedSrc = item.src;
+                            var iframeSt = mfp.st.iframe;
+
+                            $.each(
+                                iframeSt.patterns, function () {
+                                    if(embedSrc.indexOf(this.index) > -1) {
+                                        if(this.id) {
+                                            if(typeof this.id === 'string') {
+                                                embedSrc = embedSrc.substr(embedSrc.lastIndexOf(this.id)+this.id.length, embedSrc.length);
+                                            } else {
+                                                embedSrc = this.id.call(this, embedSrc);
+                                            }
+                                        }
+                                        embedSrc = this.src.replace('%id%', embedSrc);
+                                        return false; // break;
+                                    }
+                                }
+                            );
+
+                            var dataObj = {};
+                            if(iframeSt.srcAction) {
+                                dataObj[iframeSt.srcAction] = embedSrc;
+                            }
+                            mfp._parseMarkup(template, dataObj, item);
+
+                            mfp.updateStatus('ready');
+
+                            return template;
+                        }
+                    }
+                }
+            );
+
+
+
+            /*>>iframe*/
+
+            /*>>gallery*/
+            /**
+             * Get looped index depending on number of slides
+             */
+            var _getLoopedId = function (index) {
+                var numSlides = mfp.items.length;
+                if(index > numSlides - 1) {
+                    return index - numSlides;
+                } else  if(index < 0) {
+                    return numSlides + index;
+                }
+                return index;
+            },
+            _replaceCurrTotal = function (text, curr, total) {
+                return text.replace(/%curr%/gi, curr + 1).replace(/%total%/gi, total);
+            };
+
+            $.magnificPopup.registerModule(
+                'gallery', {
+
+                    options: {
+                        enabled: false,
+                        arrowMarkup: '<button title="%title%" type="button" class="sparsh-mfp-arrow sparsh-mfp-arrow-%dir%"></button>',
+                        preload: [0,2],
+                        navigateByImgClick: true,
+                        arrows: true,
+
+                        tPrev: 'Previous (Left arrow key)',
+                        tNext: 'Next (Right arrow key)',
+                        tCounter: '%curr% of %total%'
+                    },
+
+                    proto: {
+                        initGallery: function () {
+
+                            var gSt = mfp.st.gallery,
+                            ns = '.sparsh-mfp-gallery';
+
+                            mfp.direction = true; // true - next, false - prev
+
+                            if(!gSt || !gSt.enabled ) { return false;
+                            }
+
+                            _wrapClasses += ' sparsh-mfp-gallery';
+
+                            _mfpOn(
+                                OPEN_EVENT+ns, function () {
+
+                                    if(gSt.navigateByImgClick) {
+                                        mfp.wrap.on(
+                                            'click'+ns, '.sparsh-mfp-img', function () {
+                                                if(mfp.items.length > 1) {
+                                                    mfp.next();
+                                                    return false;
+                                                }
+                                            }
+                                        );
+                                    }
+
+                                    _document.on(
+                                        'keydown'+ns, function (e) {
+                                            if (e.keyCode === 37) {
+                                                mfp.prev();
+                                            } else if (e.keyCode === 39) {
+                                                mfp.next();
+                                            }
+                                        }
+                                    );
+                                }
+                            );
+
+                            _mfpOn(
+                                'UpdateStatus'+ns, function (e, data) {
+                                    if(data.text) {
+                                        data.text = _replaceCurrTotal(data.text, mfp.currItem.index, mfp.items.length);
+                                    }
+                                }
+                            );
+
+                            _mfpOn(
+                                MARKUP_PARSE_EVENT+ns, function (e, element, values, item) {
+                                    var l = mfp.items.length;
+                                    values.counter = l > 1 ? _replaceCurrTotal(gSt.tCounter, item.index, l) : '';
+                                }
+                            );
+
+                            _mfpOn(
+                                'BuildControls' + ns, function () {
+                                    if(mfp.items.length > 1 && gSt.arrows && !mfp.arrowLeft) {
+                                        var markup = gSt.arrowMarkup,
+                                        arrowLeft = mfp.arrowLeft = $(markup.replace(/%title%/gi, gSt.tPrev).replace(/%dir%/gi, 'left')).addClass(PREVENT_CLOSE_CLASS),
+                                        arrowRight = mfp.arrowRight = $(markup.replace(/%title%/gi, gSt.tNext).replace(/%dir%/gi, 'right')).addClass(PREVENT_CLOSE_CLASS);
+
+                                        arrowLeft.click(
+                                            function () {
+                                                mfp.prev();
+                                            }
+                                        );
+                                        arrowRight.click(
+                                            function () {
+                                                mfp.next();
+                                            }
+                                        );
+
+                                        mfp.container.append(arrowLeft.add(arrowRight));
+                                    }
+                                }
+                            );
+
+                            _mfpOn(
+                                CHANGE_EVENT+ns, function () {
+                                    if(mfp._preloadTimeout) { clearTimeout(mfp._preloadTimeout);
+                                    }
+
+                                    mfp._preloadTimeout = setTimeout(
+                                        function () {
+                                            mfp.preloadNearbyImages();
+                                            mfp._preloadTimeout = null;
+                                        }, 16
+                                    );
+                                }
+                            );
+
+
+                            _mfpOn(
+                                CLOSE_EVENT+ns, function () {
+                                    _document.off(ns);
+                                    mfp.wrap.off('click'+ns);
+                                    mfp.arrowRight = mfp.arrowLeft = null;
+                                }
+                            );
+
+                        },
+                        next: function () {
+                            mfp.direction = true;
+                            mfp.index = _getLoopedId(mfp.index + 1);
+                            mfp.updateItemHTML();
+                        },
+                        prev: function () {
+                            mfp.direction = false;
+                            mfp.index = _getLoopedId(mfp.index - 1);
+                            mfp.updateItemHTML();
+                        },
+                        goTo: function (newIndex) {
+                            mfp.direction = (newIndex >= mfp.index);
+                            mfp.index = newIndex;
+                            mfp.updateItemHTML();
+                        },
+                        preloadNearbyImages: function () {
+                            var p = mfp.st.gallery.preload,
+                            preloadBefore = Math.min(p[0], mfp.items.length),
+                            preloadAfter = Math.min(p[1], mfp.items.length),
+                            i;
+
+                            for(i = 1; i <= (mfp.direction ? preloadAfter : preloadBefore); i++) {
+                                mfp._preloadItem(mfp.index+i);
+                            }
+                            for(i = 1; i <= (mfp.direction ? preloadBefore : preloadAfter); i++) {
+                                mfp._preloadItem(mfp.index-i);
+                            }
+                        },
+                        _preloadItem: function (index) {
+                            index = _getLoopedId(index);
+
+                            if(mfp.items[index].preloaded) {
+                                return;
+                            }
+
+                            var item = mfp.items[index];
+                            if(!item.parsed) {
+                                item = mfp.parseEl(index);
+                            }
+
+                            _mfpTrigger('LazyLoad', item);
+
+                            if(item.type === 'image') {
+                                item.img = $('<img class="sparsh-mfp-img" />').on(
+                                    'load.mfploader', function () {
+                                        item.hasSize = true;
+                                    }
+                                ).on(
+                                    'error.mfploader', function () {
+                                        item.hasSize = true;
+                                        item.loadError = true;
+                                        _mfpTrigger('LazyLoadError', item);
+                                    }
+                                ).attr('src', item.src);
+                            }
+
+
+                            item.preloaded = true;
+                        }
+                    }
+                }
+            );
+
+            /*>>gallery*/
+
+            /*>>retina*/
+
+            var RETINA_NS = 'retina';
+
+            $.magnificPopup.registerModule(
+                RETINA_NS, {
+                    options: {
+                        replaceSrc: function (item) {
+                            return item.src.replace(
+                                /\.\w+$/, function (m) {
+                                    return '@2x' + m; }
+                            );
+                        },
+                        ratio: 1 // Function or number.  Set to 1 to disable.
+                    },
+                    proto: {
+                        initRetina: function () {
+                            if(window.devicePixelRatio > 1) {
+
+                                var st = mfp.st.retina,
+                                ratio = st.ratio;
+
+                                ratio = !isNaN(ratio) ? ratio : ratio();
+
+                                if(ratio > 1) {
+                                    _mfpOn(
+                                        'ImageHasSize' + '.' + RETINA_NS, function (e, item) {
+                                            item.img.css(
+                                                {
+                                                    'max-width': item.img[0].naturalWidth / ratio,
+                                                    'width': '100%'
+                                                }
+                                            );
+                                        }
+                                    );
+                                    _mfpOn(
+                                        'ElementParse' + '.' + RETINA_NS, function (e, item) {
+                                            item.src = st.replaceSrc(item, ratio);
+                                        }
+                                    );
+                                }
+                            }
+
+                        }
+                    }
+                }
+            );
+
+            /*>>retina*/
+            _checkInstance(); }
+));
\ No newline at end of file

app/code/Sparsh/QuickView/view/frontend/web/js/quickview.js

+define(
+    [
+        'jquery',
+        'mage/translate',
+        'mage/url',
+        'magnificPopup'
+    ], function ($, $t, url) {
+        "use strict";
+
+        $.widget(
+            'sparsh.QuickView', {
+                options: {
+                    baseUrl: '/',
+                    popupTitle: $t('Add To Cart'),
+                    itemClass: '.products.list .item.product-item, .widget-product-grid .product-item, .add-product-shop-car',
+                    btnLabel: $t('Add To Cart'),
+                    btnContainer: '.product-item-info',
+                    handlerClassName: 'sparsh-quick-view-button',
+                    defaultClassName: 'action primary'
+                },
+                _create: function () {
+                    if (!$('body').hasClass('catalog-product-view')) {
+                        this._initialButtons(this.options);
+                        this._bindPopup(this.options);
+                    }
+                },
+                _initialButtons: function (config) {
+                    $(config.itemClass).each(function () {
+                        if (!$(this).find('.' + config.handlerClassName).length) {
+                            var groupName = $(this).parent().attr('class').replace(' ', '-');
+                            var productId = $(this).find('.price-final_price').data('product-id');
+                            if (typeof productId !== 'undefined' && productId !== undefined && productId !== null) {
+                                var url = config.baseUrl + 'quickview/catalog_product/view/id/' + productId;
+                                var btnQuickView = '<div class="sparsh-quick-view-btn-container">';
+                                btnQuickView += '<a rel="' + groupName + '" class="' + config.defaultClassName + ' ' + config.handlerClassName + ' sparsh-quick-view-button-pc" href="' + url + '"';
+                                btnQuickView += ' title="' + config.popupTitle + '"';
+                                btnQuickView += ' >';
+                                btnQuickView += '<svg t="1677035083997" class="quick-view-icon-view" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3700"><path d="M987.52 367.36c-108.16-146.56-266.88-239.36-444.16-239.36-177.28 0-335.36 92.8-444.16 239.36-48 64.64-48 160.64 0 225.28C208 739.2 366.72 832 543.36 832c177.28 0 335.36-92.8 444.16-239.36C1035.52 528 1035.52 432 987.52 367.36zM939.52 539.52C839.04 684.8 694.4 768 542.72 768c-151.68 0-296.32-83.2-396.8-228.48C121.6 505.6 121.6 455.04 145.92 420.48 246.4 275.2 391.04 192 542.72 192c151.68 0 296.32 83.2 396.8 228.48C963.2 455.04 963.2 505.6 939.52 539.52zM544 256C420.48 256 320 356.48 320 480S420.48 704 544 704 768 603.52 768 480 667.52 256 544 256zM544 640C455.68 640 384 568.32 384 480S455.68 320 544 320C632.32 320 704 391.68 704 480S632.32 640 544 640z" p-id="3701" fill="#ffffff"></path></svg><span>' + config.btnLabel + '</span></a>';
+
+                                btnQuickView += '<a rel="' + groupName + '" class="' + config.defaultClassName + ' ' + config.handlerClassName + ' sparsh-quick-view-button-phone " id="sparsh-quick-view-button-phone" href="' + url + '"';
+                                btnQuickView += ' title="' + config.popupTitle + '"';
+                                btnQuickView += ' >';
+                                btnQuickView += '<svg t="1677047956598" class="quick-view-icon-shop-car" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5146" ><path d="M332.8 790.528q19.456 0 36.864 7.168t30.208 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.208 20.48-36.864 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 37.888-7.168zM758.784 792.576q19.456 0 37.376 7.168t30.72 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.72 20.48-37.376 7.68-36.864-7.68-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 36.864-7.168zM930.816 210.944q28.672 0 44.544 7.68t22.528 18.944 6.144 24.064-3.584 22.016-13.312 37.888-22.016 62.976-23.552 68.096-18.944 53.248q-13.312 40.96-33.28 56.832t-49.664 15.872l-35.84 0-65.536 0-86.016 0-96.256 0-253.952 0 14.336 92.16 517.12 0q49.152 0 49.152 41.984 0 20.48-9.728 35.84t-38.4 14.336l-49.152 0-94.208 0-118.784 0-119.808 0-99.328 0-55.296 0q-20.48 0-34.304-9.216t-23.04-24.064-14.848-32.256-8.704-32.768q-1.024-6.144-5.632-29.696t-11.264-58.88-14.848-78.848-16.384-87.552q-19.456-103.424-44.032-230.4l-76.8 0q-15.36 0-25.6-7.68t-16.896-18.432-9.216-23.04-2.56-22.528q0-20.48 13.824-33.792t37.376-12.288l103.424 0q20.48 0 32.768 6.144t19.456 15.36 10.24 18.944 5.12 16.896q2.048 8.192 4.096 23.04t4.096 30.208q3.072 18.432 6.144 38.912l700.416 0zM892.928 302.08l-641.024-2.048 35.84 185.344 535.552 1.024z" p-id="5147" fill="#ffffff"></path></svg></a>';
+
+                                btnQuickView += '</div>';
+                                $(this).find(config.btnContainer).prepend(btnQuickView);
+                                $(this).addClass('sparsh-quick-view-item');
+                            }
+                        }
+                    });
+                },
+                _bindPopup: function (config) {
+                    var self = this;
+                    $('.' + config.handlerClassName).each(
+                        function () {
+                            $(this).magnificPopup(
+                                {
+                                    type: 'ajax',
+                                    closeOnContentClick: false,
+                                    closeMarkup: '<button title="Close (Esc)" type="button" class="sparsh-mfp-close sparsh-mfp-quick-close"></button>',
+                                    callbacks: {
+                                        ajaxContentAdded: function () {
+                                            $('.sparsh-mfp-content').trigger('contentUpdated');
+                                            $('.sparsh-mfp-content').prop('id', 'sparsh-mfp-quickview');
+                                            $('#sparsh-mfp-quickview').prepend('<div class="sparsh-mfp-quickview-message"></div>');
+                                            if($('#sparsh-mfp-quickview').find('.table-wrapper.grouped').length){
+                                                $('.sparsh-mfp-content').addClass('page-product-grouped');
+                                            }
+                                            if($('#sparsh-mfp-quickview').find('.field.downloads').length){
+                                                $('.sparsh-mfp-content').addClass('page-product-downloadable');
+                                            }
+                                            $('.sparsh-mfp-content').addClass('catalog-product-view');
+                                            if(!$('body').hasClass('page-layout-1column')){
+                                                $('.sparsh-mfp-content').addClass('page-layout-1column');
+                                                if($('.sparsh-mfp-content').hasClass('page-product-downloadable')){
+                                                    $('.sparsh-mfp-content').addClass('sparsh-quickview-custom-options');
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            );
+                        }
+                    );
+
+                    $(document).on(
+                        'ajaxComplete', function (event, xhr, settings) {
+                            if (settings.type.match(/get/i) && _.isObject(xhr.responseJSON)) {
+                                var result = xhr.responseJSON;
+                                if (_.isObject(result.cart) && _.isObject(result.messages)) {
+                                    if(result.messages){
+                                        if($('#sparsh-mfp-quickview').length) {
+                                            var btn=$('.sparsh-mfp-quick-close');
+                                            btn.click();
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    );
+                }
+            }
+        );
+        return $.sparsh.QuickView;
+    }
+);
+

app/code/Sparsh/QuickView/view/frontend/web/js/wishlist.js

+define(
+    [
+        'jquery',
+        'Magento_Ui/js/model/messageList'
+    ], function ($) {
+        'use strict';
+
+        $.widget(
+            'sparsh.wishlist', {
+                _create: function () {
+                    this.action();
+                },
+
+                action: function () {
+                    var self = this,
+                        popup = $('#sparsh-mfp-quickview');
+                    $('#sparsh-mfp-quickview').delegate(
+                        '.action.towishlist', 'click', function (e) {
+                            var element = $(this),
+                                dataPost = $(element).data('post'),
+                                key = $('input[name="form_key"]').val();
+                            console.log(dataPost.data);
+                            if (key) {
+                                dataPost.data.form_key = key;
+                            }
+
+                            var parameter = $.param(dataPost.data),
+                                url = dataPost.action + (parameter.length ? '?' + parameter : '');
+
+                            e.stopPropagation();
+                            e.preventDefault();
+
+                            $.ajax(
+                                {
+                                    url: url,
+                                    type: 'post',
+                                    dataType: 'json',
+                                    showLoader: true,
+                                    success: function (res) {
+                                        popup = $('#sparsh-mfp-quickview');
+                                        $('.sparsh-mfp-quickview-message').addClass('message-success success message').html('<div>' + res.message + '</div>');
+                                        popup.animate({scrollTop: 0}, "slow");
+                                        var checkExist = setInterval(function () {
+                                            if ($('div.page.messages').find('.message-success').length) {
+                                                clearInterval(checkExist);
+                                                $('div.page.messages').find('.message-success').remove();
+                                            }
+                                        }, 50);
+                                    },
+                                    error: function () {
+                                        window.location.href = self.options.loginUrl;
+                                    }
+                                }
+                            );
+                        }
+                    )
+                }
+            }
+        );
+
+        return $.sparsh.wishlist;
+    }
+);
\ No newline at end of file

app/design/frontend/Joshine/breeze/Magento_Cms/templates/default/flashsaleproduct.phtml

@@ -14,7 +14,8 @@ foreach($ids as $pid):
     if(!$product) continue;
     $productImage = $imageHelper->init( $product, 'category_page_list' )  ->getUrl();
     ?>
-    <div class="flash-sale-item">
+<div class="flash-sale-item add-product-shop-car">
+    <div class=" product-item-info">
         <a href="<?php echo $product->getProductUrl()?>" >
             <img src="<?php echo $productImage;?>" loading="lazy" /></a>
         <div class="flash-sale-info">
@@ -23,6 +24,7 @@ foreach($ids as $pid):
             <?= /* @noEscape */ $blocklist->getProductPrice($product) ?>
         </div>
     </div>
+</div>
 <?php
 endforeach;
 ?>
\ No newline at end of file

app/design/frontend/Joshine/breeze/web/css/_custom.less

@@ -2205,7 +2205,7 @@ background-color: #000;
   }
   .scroll-active{
     background: #ffffff;
-    z-index: 1000;
+    z-index: 996;
     width: 100%;
     position: fixed;
     padding-right: 20px;

app/design/frontend/Magento/luma/Magento_Theme/web/css/source/_module.less

@@ -578,7 +578,7 @@
 
         .header.links {
             min-width: 175px;
-            z-index: 1000;
+            z-index: 996;
         }
 
         &.active {