weltpixel

Ajax Cart and Quick View FOR MAGENTO 2.

About the Magento 2 Ajax Cart and Quick View.

Quick View allows users to get a quick look of products without opening the product page.

Add quick view functionality to any button, image, or product from a category listing page, product widget, recommended products or upsell. You can even embed your products on CMS pages or even create lookbook hotspots.

You can easily add to cart any product without leaving the current page by using the Quick View functionality. A popup window, with product details, will appear for each element that is defined to use this functionality: button, image, listing page product, product widget, recommended products or upsell. Easy to configure from settings. You can enable visibility for many elements/sections from quick view. Product zoom available on product page can also be enabled or disabled in quick view pop-up.

You can make this extension your own by configuring all the available options in admin: easily change the looks of the quickview box by using Custom CSS area from admin, control "Continue shopping" and "Go to Checkout" buttons, control where quick view pop-up opens (center, left or right), define number of seconds after the quick view box is closed, other useful settings.

Raise your advertising game to new heights with the Custom Global and Custom Dynamic Messages for the Quick View Popup. You can add messages that showcase promos, discounts or other important information about your products at the top of the Quick View Popup window. The messages can even be Dynamic, meaning they only show up on specfic products defined by Magento Conditions.

Main features

  • Hide/Display product image, product thumbnail image, short description, qty selector, product availability, SKU
  • Select Quick view button style
  • Enable/Disable 'Go to product' button in quickview frame
  • Close quickview in X seconds after adding product to cart
  • Enable/Disable to Auto scroll to top and open Quickcart
  • Enable/Disable the pop-up with Continue shopping/Go to Checkout buttons displayed after Add to cart is clicked
  • Enable/Disable zoom on product image from Quick view pop-up
  • Add Quick view functionality to any button in your website and link specific product.
  • SEO Optimization features (PRO version only)
  • Display Quick View on Search Results Page (PRO version only)
  • Control the position where Quick View is displayed (center/left side/right side) DEMO CENTRED, DEMO RIGHT, DEMO LEFT (PRO version only)
  • Choose to Close when background is clicked (PRO version only)
  • Hotspot functionality, insert hotspots with quickview functionality and create awesome lookbooks, SEE HOTSPOT DEMO (PRO version only)
  • Add a Global Custom Message to the Quick View Popup to showcase discounts and other promos on your site (PRO version only)
  • Add multiple Dynamic Custom Message to the Quick View Popup to showcase discounts and other promos for products, based on easy to configure Magento Conditions (PRO version only)
  • Display Quick View on mobile (PRO version only)
  • Allow users to easily cycle between products on the Category Page in the Quick View window with the Prev/Next functionality (PRO version only)

HOW TO INSTALL VIA COMPOSER CLI COMMANDS

  • Step 1:
    Before installing please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.3.X. - 2.4.2. It is recommended to install the extension first on a testing server before you install it on a live (production) server.
  • Step 2:
    Make sure you have your Magento Marketplace Authentication Keys configured on the Magento instance. If your keys are not added, check the Magento Documentation for more information about how to add those.
  • Step 3:
    Access the root of your magento 2 project from command line and run the following commands:
    composer require weltpixel/m2-weltpixel-quickview
    php bin/magento setup:upgrade
    php bin/magento setup:di:compile
    php bin/magento setup:static-content:deploy -f

HOW TO INSTALL MANUALLY VIA SSH.

weltpixel

Configure everything in less than 1 minute.

  • Go to Admin > WeltPixel > Quickview and Ajax Cart > General
  • You can customize the extension by completing the fields listed in the left image:
  • General
    • Enable on product listing [ Yes / No ] Enable / Disable quick view on product listing
    • Enable on search result [ Yes / No ] Enable / Disable quick view on the Search Results page
    • Enable on mobile view [ Yes / No ] Enable / Disable quick view on mobile (PRO version only)
    • Quickview Type (PRO version only)
      • [Default] - Quickview pop-up displayed in the center of the page
      • [Right side] - Quickview Slides in the right side of page
      • [Left side] - Quickview Slides in the left side of page
    • Close on Background Click (PRO version only) [ Yes / No ] Enable / Disable to close Quickview pop-up when page background is clicked
    • Remove product image [ Yes / No ] Show / Hide main product image
    • Remove product image thumb [ Yes / No ] Show / Hide thumbnails below main product picture
    • Remove short description [ Yes / No ] Show / Hide short description of products
    • Remove qty selector [ Yes / No ] Show / Hide product quantity selector in quick view
    • Enable go to product button [ Yes / No ] Show / hide “go to product” button in quick view
    • Remove availability [ Yes / No ] Show / hide product availability in quick view
    • Remove sku [ Yes / No ] Show / Hide product sku in quick view
    • Remove Estimated Arrival [ Yes / No ] Show / Hide the Estimated Arrival date (requires the WeSupply Integration) in the QuickView popup
    • Button style [ Version 1 / Version 2] Select between 2 types of quick view buttons on product listing page
    • After adding product to cart, close quick view in X seconds [ Number ] Number of seconds after quick view closes automatically. If you enter 0, it will remain open until you close it.
    • Auto scroll to top and open mini cart [ Yes / No ] Enable / Disable auto scroll to top of the page and open mini cart
    • Enable continue shopping / go to checkout buttons [ Yes / No ] After add to cart, Show / Hide navigation buttons “Continue Shopping / Go to Checkout”
    • Custom CSS [ CSS code ] Enter custom CSS code and easily change the way quick view looks
    • Enable Zoom [ Yes / No ] Enable / Disable zoom on product picture shown in quick view
    • Loading Overlay Background Color - Choose the Overlay Background Color for the Quickview loading effect. (PRO version only)
    • Loading Overlay Opacity - Choose the Overlay Opacity for the Quickview loading effect. Use values between 0 and 1. For example, 0.8. (PRO version only)
    • Loading Placeholder [ Yes / No ] Set to yes to be able to upload your own loading placeholder. (PRO version only)
    • Loading Icon - Upload your custom Loading Icon. (PRO version only)
    • Enable Previous / Next products - [ Yes / No ] Set to yes to allow customers to cycle between products on the Category Page within the Quick View window. (PRO version only)
    weltpixel
    weltpixel

    SEO OPTIMIZATION.

    • Add no follow for the quickview link (PRO version only) [ Yes / No ] Add / Remove rel="nofollow" to / from the Quickview links
    • Add no index (PRO version only) [ Yes / No ] Add / Remove <meta name="robots" content"NOINDEX,FOLLOW"> to / from the head tag of the Quickview pop-up
    • Add canonical link (PRO version only) [ Yes / No ] Add / Remove canonical link for / from Quickview pop-up

    ADVANCED SETTINGS.

    Besides listing pages, quick view functionality can also be used in lookbooks, cms pages, blocks or anywhere in your magento2 store.

    Check live quick view functionality on Pearl Theme presentation page.
    You can see quick view in action by clicking "Buy Now" button.
    weltpixel
    weltpixel
    How to configure quick view on cms pages or blocks:
    • 1. You can add the quick view functionality using the following code:

      <a href="javascript: void(0);" data-quickview-url="{{config path="web/unsecure/base_url"}}
      weltpixel_quickview/catalog_product/view/id/11"
      class="weltpixel-quickview"> <div class="title">
      Your text here</div> </a>
      

    • 2. ...but be sure to replace "id/11" from example with your product ID from your store , in order to find your ID, in admin go to Products > Catalog to the specific product.

    • 3. Put your final code in the content of your specific page or block.
    How to configure quick view as hotspots on lookbooks:

    You can add the quick view hotspot functionality by following next steps:

      1. Go to your CMS page which is the lookbook

      2. Click Insert Widget button

      3. Select Widget Type to be WeltPixel - Quickview Hotspot

      4. Complete the hotspot configuration

      5. Click Insert Widget button to insert the hotspot widget in your CMS page

    weltpixel
    weltpixel



      Please make sure to add the widget into a div with the class name "wp-hotspot-quickview" that contains the image tag and the hotspot quickview widget..

      You can add the quick view hotspot functionality using the following code:

      <div class="wp-hotspot-quickview">
      <img src="my_image.jpg" style="width: 100%" alt="my image">
      {{widget insert here}}
      </div>
      

    Multiple hotspots can be inserted in one image.

    weltpixel
    weltpixel

    Custom Global Message. (PRO version only)

    • Enable Custom Global Message [ Yes / No ] - Enable/disable the Custom Global Message functionality, displayed above the Quick View popup.
    • Enable Dynamic Custom Message [ Yes / No ] - If set to Yes, you can use Custom Dynamic Messages based on rules. Dynamic messages have priority over Global messages.
    • Custom Global - Add your Custom Global Message to be displayed in this text box.
    • Custom Global Background Color - Select the background color of the Custom Global Message container.
    • Custom Global Font Color - Select the font color for the Custom Global Message text.
    • Custom Global Font Size - Select the font size for the Custom Global Message text.
    • Custom CSS - Add your own Custom CSS to the Custom Global Message container and text, by targeting them with the IDs provided.

    Dynamic Quick View Custom Messages. (PRO version only)

    If you've enabled the Dynamic Custom Message functionality, you can add Dynamic Custom Messages based on Magento Conditions to advertise specific discounts, promotions or to let your customers know important information regarding specific products. To add a Dynamic Message, click the Add New Custom Message button.

    weltpixel
    weltpixel

    Edit Dynamic Custom Message.

    • Title - Choose the title of your Dynamic Custom Message.
    • Priority - Set the priority of your Dynamic Custom Message. Use "0" for the highest priority and larger values for lower priorities.
    • Status [ Active / Inactive ] - Activate or deactivate your Dynamic Custom Message.
    • Valid From/Valid To - Choose specific dates from and to which the validity of the Dynamic Custom Message is applied.
    • Store View - Choose the Store Views on which you want to apply the Dynamic Custom Message.
    • Customer Group - Choose specific Customer Groups to which to display the Dynamic Custom Message.
    • Text - Add the text you want to display for your Dynamic Custom Message.
    • Text Background Color - Set the background color for the Dynamic Custom Message container.
    • Text Font Color - Set the font color for the Dynamic Custom Message text.
    weltpixel
    weltpixel
    • Text Font Size - Set the font size for the Dynamic Custom Message text.
    • Custom CSS - Add your own Custom CSS to the Dynamic Custom Message container and text, by targeting them with the IDs provided.
    • Conditions - Set up Conditions or combinations of Conditions in order to display the Dynamic Custom Message on specific products. For example, you can choose a condition based on Product SKU and choose the SKUs associated with products in your store. Your Dynamic Custom Message will then only display on those products.

    Change Log.

    What’s new in v.1.10.7 - March 26, 2021

    • Excluded Magento 2.0.x - 2.2.x from new features and fixes starting with this release.
    • Adjusted WeltPixel Developer section comments.


    What’s new in v.1.10.5 - February 12, 2021

    • Fixed a bug that caused the Quick View button to lose stying when changing the page via Infinite Scroll (Only when using the Ajax Infinite Scroll extension).
    • Confirmed compatibility with the newly released Magento 2.4.2 version.
    • Added additional backend versioning verifications.
    • Backend module code optimizations.


    What’s new in v.1.10.1 - October 22, 2020

    • Made adjustments to Quick View design in List Mode on the Category Page.
    • Fixed an issue related to the Quick View Hotpot Widget that prevented the position of the Widget from being changed.
    • Confirmed compatibility with the newly released Magento 2.4.1 version.


    What’s new in v.1.10.0 - August 10, 2020

    • Confirmed compatibility with the newly released Magento 2.4.0 version.


    What’s new in v.1.9.8 - July 6, 2020

    • Fixed a bug which prevented the Enable/Disable Zoom option from working correctly.
    • Whitelisted domain for Content Security Policies introduced in Magento 2.3.5.


    What’s new in v.1.9.7 - May 7, 2020

    • New feature (PRO version only) - Added Next/Prev buttons to the Quick View window which allow for cycling through products on Category Pages without closing Quick view.
    • New feature (PRO version only) - Introduced the possibility of adding the Quick View functionality to the Search Results Page.
    • Confirmed compatibility with Magento 2.3.5.
    • Implemented small Backend performance optimizations.
    • Added nxcli.net (Nexcess temporary URL) as a valid domain in the licensing process.
    • Added an option in the Developer section to allow for switching Magento's CSP between "report-only" and "restrict"


    What’s new in v.1.9.6 - April 9, 2020

    • New feature (PRO version only) - You can now add a Custom Global Message/Custom Dynamic Message to your Quick View Popup, in which you can advertise discounts, promotions and display relevant information about your products to users.
    • New feature (PRO version only) - Added the possibility of displaying the Quick View on mobile as well.
    • Added an option which allows the Estimated Delivery Date (requires the WeSupply Integration) to be hidden from the Quick View Popup.
    • Fixed a backend issue on Magento Commerce whereby the Category Schedule functionality was not working properly.


    What’s new in v.1.9.5 - March 10, 2020

    • Fixed an issue related to the Zoom Action setting via the Magento Admin.
    • Added backend Google reCaptcha compatibility for Magento 2.3.x


    What’s new in v.1.9.4 - February 5, 2020

    • Fixed an bug which caused a 404 error in the console when the module was disabled via the Magento Admin.
    • Code enhancements for increased security. Changed User Group info collection method.
    • Confirmed compatibility for Magento 2.3.4.


    What’s new in v.1.9.2 - November 27, 2019

    • Added Magento and PHP version in the WeltPixel Developer section.


    What’s new in v.1.9.1 - October 16, 2019

    • Fixed an issue related to a deprecated live jQuery event.
    • Confirmed compatibility with the latst Magento 2.3.3 version.
    • Included the WeSupply Toolbox integration extension - Proactive Notifications Email & SMS, Returns & RMA, Store Locator, Delivery Date Estimate, Logistics Analytics, NPS & CSAT score. Get Free on-boarding and launch within 24 hours.


    What’s new in v.1.9.0 - July 18, 2019

    • Added some CSS improvments on mobile Quick View popup.
    • Confirmed compatibility with Magento 2.3.2.
    • Added HTTPS endpoint for licensing process.


    What’s new in v.1.8.5 - June 7, 2019

    • Small performance improvements.


    What’s new in v.1.8.4 - April 25, 2019

    • Added PHP version in the WeltPixel Developer Section.


    What’s new in v.1.8.3 - April 3rd, 2019

    • Added Quick View functionality for List View mode on Category Pages.
    • Fixed Quick View Hotspot URL which can now be fetched with https.
    • Confirmed compatibility for Magento 2.3.1.


    What’s new in v.1.8.2 - January 24, 2019

    • Helpcenter adjustment, removed Zendesk iframe and added a simple link to our Support Center in order to avoid any potential conflicts with other admin js added by 3rd party extensions.
    • Fix for multiple rewritten ImageFactory classes, rewrite check validity, rewrite checks optimizations.


    What’s new in v.1.8.0 - December 8, 2018

    • Compatibility adjustments for Magento 2.1.16/2.2.7/2.3.0.
    • PHP 7.2 compatibility added.
    • As Magento 2.3 comes with major core changes, we have provided a different set of files in order to achieve the best performance on each version.


    What’s new in v.1.7.5 - October 24, 2018

    • Fixed image position in quickview when using small images on product page, the image is now centered and not alligned right anymore.
    • Added detailed error messages for invalid licenses for an easier identification of the cause.
    • License improvements, added *.magento.cloud as a valid test domain for Enterprise Cloud environments. Now both ‘magentosite.cloud’ and ‘magneto.cloud’ can be used for testing purpose with the production domain license.


    What’s new in v.1.7.4 - September 25, 2018

    • Optimization - Added admin dependancy options, css added only if enabled.
    • Admin menu styling to fit screen size 1366px.
    • Fix for production mode with merged JS - missing color pallet display now fixed.


    What’s new in v.1.7.3 - August 23, 2018

    • License improvements, adding *.magento.cloud as a valid test domain.


    What’s new in v.1.7.2 - August 2, 2018

    • Default hover value added, avoiding errors when this value is not set.
    • Fixed admin random logout issue.
    • Licensing improvements, allowing 3 letter domain as valid domain.


    What’s new in v.1.7.1 - July 12, 2018

    • Compatibility with Magento 2.2.5 both Open Source & Commerce Cloud B2B.
    • Added domain.test & [any_subdomain].domain.test to the list of valid urls for staging/development environments. Added domain validation with port number included for licensing purpose.
    • Added licensing compatibility with Magento B2B.


    What’s new in v.1.7.0 - July 5, 2018

    • Fixed Image Zoom hover out, not closing the magnifier.
    • Added option to enable/disable WeltPixel admin notifications.
    • Show store and server related information under debugging tab: Magento Mode, Magento Edition, Server User, Magento Installation Path, Current server time, Latest cron jobs.
    • Added licensing, license key needs to be generated under weltpixel.com account for purchased product, based on domain name and added under your magento installation.


    What’s new in version 1.6.4 - May 16, 2018

    • Compatibility with Magento 2.2.4, logger broken reference fix, changed to rewrite from plugin.
    • Quick View PRO: Hotspot functionality, added detailed comment on how it should be used.
    • Remove main quantity box for grouped product type.


    What’s new in version 1.6.3 - April 10, 2018

    • Quick View PRO: SEO Optimized (no index/follow, canonical url options).
    • Quick View PRO: Added Quick view design #2 (for mobile as well).
    • Quick View PRO: Added Hotspot widget with product quick view functionality.
    • Removed duplicated Gallery Plugin and merge into 1 the functionality. (FREE and PRO)


    What’s new in version 1.6.0 - March 1st, 2018

    • Remove fullscreen zoom option as it is deprecated.
    • Compatibility adjustments with WeltPixel Ajax Catalog and Infinite Scroll.
    • Remove duplicate plugin declaration.

    What’s new in version 1.5.8 - January 12, 2018

    • Added version control for installed WeltPixel modules, including latest version check.
    • Allowing error message to be displayed in quickview
    • Removed default magento messages from popup.
    • Fix for redirect after when out of stock, quick cart module conflict issue fix when both have show cart option enabled.


    What’s new in version 1.5.7 - December 14, 2017

    • Added Support Center functionality in Magento Admin.
    • Added Debugger functionality, checks for rewrites and points potential issues.
    • Redirect to cart after add to cart quickview issue fix.

    What’s new in version 1.5.3 - September 20, 2017

    • Adjusting the downloadable information, moved the product info right side and css common media query.
    • Added compatibility with Magento 2.2, missing product options fix.

    What’s new in version 1.3.4 - May 16, 2017

    • Added translations files under /i18n/en_US.csv.

    What’s new in version.1.3.1 - March 11, 2017

    • Changed product image position, fix for bundled products not showing up ok in quick view.

    What’s new in version.1.0.8 - 02/02/2017

    • Changed composer PHP dependency versions to meet latest magneto release requirements

    What’s new in version.1.0.7 - 01/02/2017

    • Fixed loading error when Google Tag Manager Enabled in Magento Enterprise 2.1.3
    • Refactored documentation in HTML format

    What’s new in version.1.0.6 - 22/12/2016

    • Small design adjustments

    What’s new in version.1.0.4 - 22/11/2016

    • Position middle to gallery

    What’s new in version.1.0.3 - 10/10/2016

    • Composer dependency version changes

    What’s new in version.1.0.2 - 02/07/2016

    • Compatibility with Magento 2.1

    What’s new in version.1.0.1 - 05/06/2016

    • New feature: After adding product to cart close quick view in X seconds
    • New feature: Auto scroll to top and open quick
    • New feature: Enable continue shopping/go to checkout buttons
    • New feature: Enable / Disable zoom and magnifier options
    • Fixed: vertical thumbnails white space issue on left side, whitespace removed
    weltpixel