Description

Allows a product to be added to the users basket.

  • Displays a product price/offer price.
  • In/Out Stock label
  • Variation selection options.
  • Extra info selection options
 

Properties

  • IncludeTax
    • Adds tax to the display price, if the product has been marked as non "TaxExlusive" within the CMS
    • Default: true
 

Code Example

<ngage:StockAddToBasket ID="StockAddToBasket" runat="server" />
 

Basic CSS

/*add-to-basket-wrapper*/
.product-item .add-to-basket-wrapper { float: left; margin-bottom: 20px; border: solid 1px #536283; padding: 20px 20px 5px 20px; width: 100%; }
.product-item .add-to-basket-wrapper .item-cost { padding: 5px 0 0 0; display: inline-block; font-size: 1.2em; }
.product-item .add-to-basket-wrapper > div { padding: 0; }
.product-item .add-to-basket-wrapper .btn.add-to-basket { height: 80px; margin: 10px 0 20px 0; width: 135px; white-space: normal; padding: 0 20px; font-size: 1.2em; }
.product-item .add-to-basket-wrapper .btn.add-to-basket + .action-spinner { margin-top:18px; }
.product-item .add-to-basket-wrapper .btn:focus, .product-item .add-to-basket-wrapper .btn:active:focus, .product-item .add-to-basket-wrapper .btn.active:focus { background-color: #8CC045; color: #fff; }
.extra-info-modal .alert ul { padding-left: 20px; }
.extra-info-modal .form-group { padding: 0 5px; }
.product-item .add-to-basket-wrapper .in-stock-icon { float: left; display: inline-block; width: 30px; height: 25px; font-size: 1.4em; }
.product-item .add-to-basket-wrapper .in-stock-icon.glyphicon-ok { color: #8AC540; }
.product-item .add-to-basket-wrapper .in-stock-icon.glyphicon-ban-circle { color: rgb(149, 21, 21); }
.product-item .add-to-basket-wrapper .in-stock-icon + p { float: left; display: inline-block; padding-top: 2px; }
.product-item .add-to-basket-wrapper .add-to-basket { background-color: #8CC045; color: #fff; }
.product-item .add-to-basket-wrapper .item-added { display:none; width:100%; background-color:#8CC045; color:#fff; padding:12px 15px 13px; position:absolute; top:0; left:0; z-index:2000; }
.product-item .add-to-basket-wrapper .item-added p { margin:0; padding:0; }

/*mobile-adjustments*/
@media screen and (max-width:759px) {
    .product-item > .row { margin: 0; }
    .product-item > .row > div { padding: 0; margin-bottom: 20px; }
    .product-item .add-to-basket-wrapper { text-align: center; }
    .product-item .left-col-wrapper { padding-right: 0 !important; }
    .product-item .add-to-basket-wrapper .in-stock-icon { text-align: center; float: none; }
    .product-item .add-to-basket-wrapper .in-stock-icon + p { text-align: center; float: none; }
}
 

Add Feedback