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
III. Manual Installation
Step 1. Unzip the download package somewhere on your local PC. You should see the app folder structure as follows.
Step 2. Copy and paste the folder app of the package to your web root. You should see the path …/app/code/Ubertheme/UbQuickView as follows:
Step 3. Open your terminal and go to the Magento directory. In this directory, run the following commands:
- php -f bin/magento module:enable --clear-static-content Ubertheme_UbQuickView
- php -f bin/magento setup:upgrade
- (optiom)php -f bin/magento cache:clean
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.
IV. UB Quick View Configuration
In your Magento backend, go to Content | (UB Quick View) Settings, you can see the General settings of UB Quick View:
- 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
- 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:
Below are some examples of Popup preview window when users click on the UB Quick View button:
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