Bs Quick View Plugin

A NopCommerce Professional Plugin


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.

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-

  1. 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.

     
  2. 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.

     
  3. 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".

     
  4. Show Related Products 

    This Option will activate showing the related Products on Modal.

     
  5. 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