Back to Documentation list

UB Quickview for Magento 2

Last Updated: Apr 22, 2021

Disclaimer: Please always backup your Magento installation (files and database) before installing any of our extension so you can roll back in the event of issues. We recommend to install our extension in a testing environment before deploying it to your production environment. All Ubertheme extensions were tested in clean Magento installations without 3rd party extensions and we can’t guarantee for compatibility with 3rd extensions.

I. Installation Prerequisites

UB Quick View is native with Magento 2.x. Please make sure your system meets the Magento 2 System requirements: here.

II. Download Packages

The download package includes: UB Quick View extension

DOWNLOAD NOW

III. Manual Installation

  • Step 1. (Required) Install PHP Mobile Detect Resource APIs

    You have to install the PHP Mobile Detect Resource APIs using Composer by requiring the mobiledetect/mobiledetectlib in your project. You can check out How to install PHP Mobile Detect Resource APIs here.

  • Step 2. Unzip the download package somewhere on your local PC. You should see the app folder structure as follows.
    install 4
  • Step 3. Copy and paste the folder app of the package to your web root. You should see the path …/app/code/Ubertheme/UbQuickView as follows:
    install 3
  • Step 4. Open your terminal and go to the Magento directory. In this directory, run the following commands:
    NOTE: the command php -f bin/magento module:enable -c Ubertheme_Base is required for UB Quick View v1.0.4 and above.
    • php -f bin/magento module:enable -c Ubertheme_Base
    • php -f bin/magento module:enable Ubertheme_UbQuickView
    • php -f bin/magento setup:upgrade
    • php -f bin/magento setup:di:compile
    • command install
  • Step 5: Run the deploy command to regenerate static files:
      • If your M2 is in a production mode: php -f bin/magento setup:static-content:deploy
      • If your M2 is in a developer mode: php -f bin/magento setup:static-content:deploy -f

    Once you finish the last command to clean cache, you have UB Quick View installed and ready for your use. When you hover a product in your frontend, you should see the ‘UB Quick View’ button enabled.

    quick view frontend

IV. UB Quick View Configuration

NOTE: Since UB Quickview version 1.0.4 and above for Magento 2.3.1+, we implement a new Ubertheme Extension Manager Dashboard as shown in the screenshot below:

Ubertheme Magento 2 Extension Dashboard

In your Magento backend, go to Content | (UB Quick View) Settings, you can see the General settings of UB Quick View:

setting quickview

General Settings: 

setting 1
  • Enable Quick View: If set to Yes, UB Quick View is enabled.
  • Quick View Button Label: Specify your own text for UB Quick View Button.
  • Specify Product Items (class) to show Quick View button: define which products to have Quick view button enabled by specifying (multiple) CSS classes here, separated by coma(,). Default is .product-item.
  • Append Quick View Buttons To: This feature enables you to specify custom CSS class for the container to customise your way. Default class in our demo is .product-item-info

Popup settings

setting quickview 2
  • Transition Effect: Select the type of transition (Fade, Elastic, None).
  • Transition Speed: Set the speed of the transition, in milliseconds.
  • Initial Width: Set the initial width of Quick View popup window when Quick View opens.
  • Initial Height: Set the initial height of Quick View popup window when Quick View opens.
  • Show Popup Title: Show/Hide the product pagination text in the Quick view popup window.
  • Show Product Pagination Text: Show/Hide the product pagination text in the Quick view popup window.
  • Show Product’s Details Information: Show/Hide the product’s detail information
  • Show Product’s Review Information: Show/Hide the product review tab.
  • Show Product Downloadable Samples: This feature applies for Downloadable Product. Switch to Yes to show product samples, such as an excerpt from a book or a clip from an audio file, that you want the customer to try from the product page.
  • Show Button Go To Product: Show/Hide the Go to products button.
  • Extra Class: Define custom CSS class to customise your way.

V. UB Quick View extension examples

UB Quick View supports all product types: Simple Products, Configurable Products, Download Products, Bundle Products, Virtual Products, Grouped Products.

We can see a few examples as follows:

demo quick view01

An example of a hover block with UB Quick View button

Below are some examples of Popup preview window when users click on the UB Quick View button:

UB Quick View - Simple product

UB Quick View -- Simple product

UB Quick View - Configurable product

UB Quick View -- Configurable product

UB Quick View - Downloadable product

UB Quick View -- Downloadable product

Group Product

UB Quick View -- Group Product

UB Quick View - Bundle Product

UB Quick View -- Bundle Product

V. Manual Un-Installation

If you want to have UB Quick View extension uninstalled, please follow steps below:

  • Step 1: Disable UB Quick View module and clean associated database tables

-- Open your terminal, go to your Magento2 folder <your magento installation path> and run the following CLI commands:

php -f bin/magento maintenance:enable
php -f bin/magento deploy:mode:set developer
php -f bin/magento module:disable -c Ubertheme_UbQuickView
rm -rf /app/code/Ubertheme/UbQuickView

-- Open your Mysql cpanel (eg. PHPMyAdmin), and run the following SQL syntax:
NOTE: Make sure you replace with your own <table_prefix>:
DELETE FROM `<table_prefix>setup_module` WHERE `module` = 'Ubertheme_UbQuickView';

  • Step 2: Once done, run the following commands:

NOTE: You can still keep the developer mode if you continue development process. Otherwise, run the following commands to switch to production mode:
php bin/magento deploy:mode:set production
php bin/magento maintenance:disable