jQuery.ListaDeCompras

jQuery plugin of the Lista de Compras platform

NPM - Node Package Manager

Este repositório está disponível no NPM com o nome jquerylistadecompras.

npm i jquerylistadecompras

NuGet - Package Manager for .NET

dotnet add package jquery.listadecompras

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:

And in the Canal do Artesanato:

Usage

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)
});

Options

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 |

Methods

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

init: Initializes the plugin

$("#target").listaDeCompras("init");

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

$("#target").listaDeCompras("destroy");

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

$("#target").listaDeCompras("clearCart");

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

$("#target").listaDeCompras("addEventListeners");

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

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

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

$("#target").listaDeCompras("updateCartTotal");

set: Sets an option after the plugin has been initialized

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

get: Gets the current value for a option

$("#target").listaDeCompras("get", "optionName");

debug: Debugs the current plugin to the console.log

$("#target").listaDeCompras("debug");

Developed by Guilherme Branco Stracini for Editora Inovação

© 2016 ~ 2018 All rights reserved.