Bs Quick View Plugin

A NopCommerce Professional Plugin

Live Demo

created: 09/05/2014
latest update: 09/05/2014
by: NopStation-23
nop-station.com/
email: nopstation@nop-station.com

To install this plugin you must first have nopcommerce. Here's the official nopcommerce website http://www.nopcommerce.com/

Then you have to download the plugin. Here is the download link of QuickView plugin http://www.demo_link_QuickView_Plugin

Now, before you can use the BS Quick View plugin you need to install it in nopCommerce.

After you download the Plugin, you have to extract the .zip folder. Use your favourite extractor to unzip the folder and there you will get a file named BrainStation.QuickView. This is the plugin folder.
Then copy the BrainStation.QuickView folder to the Plugin folder of your nopCommerce.
Go to admin panel and select Configuration>Plugins. Hit "Reload list of plugins" button. Find the Quick View plugin from there. Hit Install.

You will see that two submenu named 'Settings' & 'Help' has been adden on a menu named 'Bs Quick View'. Here is a screen shot for your ease.

In settings submenu there are few settings that will configuare the behavior of 'BS Quick View' plugin. They are-

Enable QuickView Widget

If you check this opton you will enable the widget of the Bs Quick View plugin. Disabling the checking will make the all settings of Bs Quick View inactive.
Enable Enlarging Product Pictures

If you check this opton you will have a splendid view of enlarged picture on each product box items .After checking & saving it reload your main store page and hover on the product pictures in product box and see the awosomeness.
Show Also Purchased Products

This Option will activate showing the Products which was also purchased with the clicked product on Modal named "Customers who bought this item also bought".
Show Related Products

This Option will activate showing the related Products on Modal.
Button Container Class

Provide the class name in which the button "Quick View" will appear. Remember add a '.' before class name . eg(.buttons)

Here is the screenshot of the settings page of 'Bs Quick View' Plugin-

Here is the ultimate view that will be added or popped up in the store website :

The 'Bs Quick View' plugin mostly supports 'E-Shopper Bootstrap theme (Free)' and other Bootstrap themes. Plugin Views and the 'Quick View' Button can be changed by customizing style.css file.

Here is styles.css :

/*-------------------------------------------------*\
    Product Details modal css start
\*--------------------------------------------------*/
#quick-view-product-details-modal > .modal-dialog { width: 900px; }

#quick-view-product-details-modal .modal-content { position: relative; background-color: #ffffff; border: none; border-radius: 0px; }

#quick-view-product-details-modal .quick-view-product-details-carousal-controller-container > span { /*background: #00abe4;*/ height: 40px; width: 80px; position: absolute; z-index: 1; }

    #quick-view-product-details-modal .quick-view-product-details-carousal-controller-container > span > a.left-controller { background: #00abe4; height: 40px; width: 40px; position: absolute; border-right: 1px solid rgba(255,255,255,0); padding: 6px 15px; color: #2B2b2B; }

        #quick-view-product-details-modal .quick-view-product-details-carousal-controller-container > span > a.left-controller:hover { color: #FFFFFF; background-color: #2B2B2B; }

    #quick-view-product-details-modal .quick-view-product-details-carousal-controller-container > span > a.right-controller { background: #00abe4; position: absolute; left: 40px; padding: 6px 16px; color: #2B2b2B; }

        #quick-view-product-details-modal .quick-view-product-details-carousal-controller-container > span > a.right-controller:hover { color: #FFFFFF; background-color: #2B2B2B; }


.quick-view-product-details-slide-image { width: 100%; height: 400px; border: 1px solid #e1e4e6; }

    .quick-view-product-details-slide-image img { width: 100%; height: 400px; }

#quick-view-product-details-modal .old-product-price span { text-decoration: line-through; }

#quick-view-product-details-modal .product-price span { font-size: 1.6em; }

.quick-view-product-modals .form-control { border-radius: 0; }

.quick-view-product-modals .btn.btn-default { color: #fff; background-color: #00abe4; border-color: #FFFFFF; border-radius: 0px; }

    .quick-view-product-modals .btn.btn-default:hover { color: #fff; background-color: #2B2b2B; border-color: #FFFFFF; }

.quick-view-product-modals .nav-tabs li a { border-radius: 0px; color: #2B2B2B; text-decoration: none; background-size: 100% 200%; background-image: linear-gradient(to top, #5b6064 50%, #ffffff 50%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; -ms-transition: all .3s; }

    .quick-view-product-modals .nav-tabs li a:hover { color: #FFFFFF; text-decoration: none; background-position: 0 -100%; }

.quick-view-product-modals .nav-tabs li.active a { color: #FFFFFF; text-decoration: none; background-position: 0 -100%; }

.quick-view-product-modals .tab-pane { border: 1px solid #eee; clear: both; color: #555; margin-bottom: .3em; padding: 10px; }

.quick-view-variant-picture img { height: 100%; width: 100%; }

.quick-view-square-box { border-radius: 0px; }

#modal-product-picture-carousal .item { padding-left: 0px; }
.bs-add-to-cart-panel button.btn.btn-primary { margin-top: 0px; }
.quick-view-menu-product-details-nav { margin-bottom: 30px; }
/*-------------------------------------------------*\
    Product Details modal css end
\*--------------------------------------------------*/

/*-------------------------------------------------*\
    Product Details Loading modal css start
\*--------------------------------------------------*/
.align-in-center { margin: auto; }

#quick-view-loading-modal > .modal-dialog { width: 900px; }

#quick-view-loading-modal .modal-content { box-shadow: none; position: relative; background: none; border: none; border-radius: 0px; text-align: center; margin-top: 30%; }


/*-------------------------------------------------*\
    Product Details Loading modal css end
\*--------------------------------------------------*/


/*-------------------------------------------------*\
    Product List button css start
\*--------------------------------------------------*/

.product-list .productinfo .buttons { position: absolute; right: 0px; }
.productinfo .buttons a.btn-default:hover { background: #FE980F; }
.product-list .productinfo a { position: relative; }
    .product-list .productinfo a.image-a { position: absolute; max-width: 200px; left: 0px; top: 0px; height: 240px; }
/*-------------------------------------------------*\
    Product List button css end
\*--------------------------------------------------*/

For any Help please contact us or geft our support here www.nop-station.com

Bs Quick View Plugin

A NopCommerce Professional Plugin

Installation

Settings

Views

Customization

Help