VtexMinicart.js
DOM Binding minicart for Vtex stores.
Table of contents
Main
dist/├── vtex-minicart.js (uncompressed)└── vtex-minicart.min.js (compressed)
Getting started
Direct download
Download the script here and include it.
Install
You will need Rivets.js, VtexUtils and VtexCatalog
For minimal dependencies, use v0.3.0
instead.
Include files:
<!-- With Rivets.js CDNJS (recommended) --> <!-- With Rivets.js file -->
Package Managers
VtexMinicart.js supports npm under the name vtex-minicart
.
npm install vtex-minicart --save
Usage
;
All elements inside #myMinicart
are able to listen all DOM changes.
Options
vtexUtils (required)
- Type:
Constructor
- Default:
null
- Required
You will need pass VtexUtils
as a constructor:
;
vtexCatalog (required)
- Type:
Class
- Default:
null
- Required
You will need pass entire VtexCatalog
;
debug (optional)
- Type:
Boolean
- Default:
false
When true
, you may access a object of every items on minicart with all options that you can use on Rivets template. There are merged all information of Product API and SKU API
bodyClass (optional)
- Type:
String
- Default:
null
If provided, VtexMinicart.js will automatically apply this class to the body element while an Ajax request is ongoing.
Useful for displaying a loading animation while an Ajax request is waiting to complete - for example:
showGifts (optional)
- Type:
Boolean
- Default:
false
Show product gift on cart
Cart Data
You can access original data from Order Form Vtex API. With these data, there are 3 new objects:
- productFullInfo (from
/api/catalog_system/pub/products/search
endpoint) - productSkuSearch (filtered SKU info from
/api/catalog_system/pub/products/search
endpoint) - productSkuVariations (filtered SKU info from
/api/catalog_system/pub/products/variations
endpoint)
Data API
These data-atribute can be set in any place.
data-minicart-amount
Sum of all items on minicart.
data-minicart-subtotal
R$ 0,00
Render minicart total items price.
Methods
fillCart
Rendering minicart. Useful to call after AJAX asynchronus add to cart button - for example:
Add to Cart
Events
Events are triggered on the document and prefixed with the vtexMinicart namespace.
update.vtexMinicart [orderForm, itemIndex, item]
Triggered when item are updated.
;
delete.vtexMinicart [orderForm]
Triggered when item are deleted. Useful to do actions when minicart are cleared.
;
requestStart.vtexMinicart
Triggered whenever VtexMinicart.js begins to process the request queue.
;
requestEnd.vtexMinicart [orderForm]
Triggered whenever VtexMinicart.js completes processing the current request queue.
;
DOM Binding
Cart container
Init markup
<!-- Your cart properties goes here -->
Cart conditional
With Rivets.js, you can show content based on cart's item with directive rv-show
or rv-if
with conditional filters gt
(greater than) or lt
(less than).
<!-- This element will show only if have items on cart --> <!-- Cart content --> <!-- If there's no item on cart, this element will be show --> Você não possui produtos no seu carrinho
Cart loop
Renders your items on a cart with rv-each-{objName}
.
<!-- While have items on 'cart.items' object, this loop will be rendering -->
Cart properties
{objName}
is your object with all cart properties. With example above, each cart item is on item
object.
You can see all properties changing debug option to true
and check your console.
Cart filters
There are two Vtex Custom Filters you can use to format images and prices:
- productImgSize: following by
width
andheight
values - formatPrice: formats
int
value price provided by Vtex API
<!-- Rendering product image with 110x110 size --> <!-- Only shows old price if exists --> <!-- Best price -->
Cart tips markup
Show product selected variants
-
Show installments
ou X de
Remove item
X
Set item quantity
<!-- Uses this markup to properly functionality --> - +
See complete example markup on /example/
dir.
For advanced Rivets.js use, check full documentation here
License
VtexMinicart.js is open-sourced software licensed under the MIT license.
Dependencies
jQuery 1.8.3+
Rivets.js 0.9.6+
VtexUtils.js
VtexCatalog.js