Nonsense Placement Mandatory
    Wondering what’s next for npm?Check out our public roadmap! »


    1.0.1 • Public • Published


    jQuery plugin of the Lista de Compras platform

    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


    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



    npm i jquerylistadecompras

    DownloadsWeekly Downloads






    Last publish


    • avatar