Lista de Compras platform jQuery plugin
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


jQuery plugin of the Lista de Compras platform

NPM jQuery.ListaDeCompras NuGet Version jQuery.ListaDeCompras NuGet Downloads Github All Releases

Lista de Compras (Editora Inovação) is a application that allows you create a list of available products selling in Vitrine do Artesanto or Tania Silva store and show it on any website with a link to the cart of the store.

With this plugin you can manage your lists, [TODO] account preferences and get the available products for building new lists.

Lista de Compras platform

Lista de Compras API documentation

Lista de Compras .NET SDK

The plugin working on Programa Arte Brasil:

Lista de Compras no Programa Arte Brasil

And in the Canal do Artesanato:

Lista de Compras no Canal do Artesanato


To simple show a list in your page, creates a simple HTML element and call the plugin:

<div id="showListaDeCompras"></div>

Now call the plugin:

var listaDeCompras = $("#showListaDeCompras").listaDeCompras({
	readKey : "your-read-key",
	listId : 1, //The list ID
	theme: "oliveDrab" //The list theme (availables: red, orange, green, blue, oliveDrab and default)


You can pass options by the constructor or by the options method (see * Methods * above for more info)

Option Description Default value Values
useProduction Sets the platform environment true boolean:true|false
readKey The platform API key null string:your api key
type The display type (use table or ul/li elements) table string:table|list
showPrices Flag to show products prices or not true boolean:true|false
listLoadSuccesfullyCallback A callback function to trigger when the lists load succesfully null function
listLoadErrorCallback A callback function to trigger when cannot load the list (error | list dosen't exists) null function
debug A flag to enable or disable debugging false boolean:true|false
maxProducts Limit the maximum number of products displayed in the list -1 integer: -1 show all | N shows N
theme The plugin CSS theme default string: red, orange, blue, green, oliveDrab, default
customCampaign The utm_campaign string for the buy link null string
headerText The plugin header text null string
css This option allows you set custom CSS classes for some items of the plugin ** default plugin classes ** object: see table below

** The CSS classes ** can be overrrinding by setting the CSS option with the following object:

| Property | Description | Default value | |:-:|:-:|:-:|:-:| | itemQuantity | The item quantity field | quantity | | itemQuantityPlus | The item quantity increase button | plus | | itemQuantityLess | The item quantity decrease button | less | | itemAvailability | The item availability class to enable|disable the quantity field & buttons | availability | | itemAvailabilityIcon | The item availability icon | stockIcon | | buyButton | The buy button | buy | | cartTotal | The cart total descriptor | amount |


There are a few methods that can be called to operate the plugin programmatically

init: Initializes the plugin


destroy: Destroys the plugin (the list itself is also removed from the page)


load: Loads a specific list by it's id

$("#target").listaDeCompras("load", 1234); //try to load the list 1234

updateQuantity: Updates the selected quantity for a specified SKU in the list

$("#target").listaDeCompras("updateQuantity", 1, 10); //updates the quantity of SKU 1 to 10 units

addToCart: adds a sku to the cart, this is the same of adding 1 item of the product

$("#target").listaDeCompras("addToCart", new { SalesChannelId: 1000001, Stock: 10, Quantity: 1, Price: 10.9});//You should pass the sales channel id, available quantity, desired quantity and the price of the SKU

clearCart: Removes all products from the cart


addEventListeners: Add event listeners to the plugin increase & decrease buttons, quantity fields and buy button


getBuyLink: Gets the link to the store cart (with all sku & quantity) selecteds and the SEO params

var link = $("#target").listaDeCompras("getBuyLink");;

getCartTotal: Gets the current cart total

var total = $("#target").listaDeCompras("getCartTotal");
window.alert("Current cart is R$ " + total);

updateCartTotal: Updates the cart total (only if showPrices option is set to true), usefull when you add products or change the quantity of a product via JS


set: Sets an option after the plugin has been initialized

$("#target").listaDeCompras("set", "optionName", "optionValue");

get: Gets the current value for a option


debug: Debugs the current plugin to the console.log