mixin catalog.twig

Add a JavaScript library to implement the shopping cart functionality in a directory.

Script Options

Key	Default	Description
storage	'catalog-cart'	The key under which the basket data is stored in localStorage
init.listeners	true	Whether to initialize event listeners automatically
init.handlers	true	Whether to initialize handlers automatically
cart.group_header	false	Displaying product group headers
cart.columns	[...]	Customizing cart columns
cart.style	'table'	Based on which tags to generate a table 1. table, 2. div
cart.class	''	Additional cart class
cart.url	''	Cart handler address
item_type	'product'	Default element type
format	{}	Sets the format of numbers and prices
selectors	{}	Selectors for labels, properties, blocks, and buttons
events	{}	Additional event handlers

item defaults

{
    "uuid": "",
    "url": "", // product url
    "thumb": "", // picture url 
    "title": "",
    "price": 0,
    "vendorcode": "",
    "group": "", // use to group items in the cart table
    "quantity": 1, // this attribute can be specified in the input tag
    "quantity_step": 1 // e.g. product is liquid, you can specify 0.1 as 100ml
}

cart.columns

Cart Column Options:

{
    "label": "", // заголовок
    "attr": "thumb", // тип колонки
    "view": null, // html содержимое
    "class": null, // имя класса колонки
    "style": null // стили колонки
}

cart.columns.attr Value options: title, thumb, decrement, increment, quantity, price, total, remove

cart.style

The cart table can be generated from table or div blocks, depending on your needs.

format

Sets the format of numbers and prices

"format": {
    "count": ['{{ _language }}', {minimumFractionDigits: 0, maximumFractionDigits: 2}], // in item counts
    "price": ['{{ _language }}', {style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 2}], // in item prices and totals
},

selectors

Default selector list, values can be changed to suit your needs.

"selectors": {
  "item": "data-catalog-item", // item (e.g. product or service in catalog)
  "item-attr": "data-catalog-item-attr", // item attr (price, color, etc)
  "item-attr-value": "data-catalog-item-attr-value", // item attr value
  "item-add": "data-catalog-item-add", // button add to cart
  "cart": "data-catalog-cart", // cart place
  "cart-data": "data-catalog-cart-data", // cart data (client field: name, phone, etc)
  "cart-checkout": "data-catalog-cart-checkout", // button cart checkout
  "count-items": "data-catalog-cart-count", // counter place (count items in cart)
  "count-total": "data-catalog-cart-total", // counter place (count total price of items)
},

Selectors are used to simplify the search for a product and its parameters.

events

"events": {
    'on:ready': function (data, cart) { /* ... */ },
    'on:cart': null,
    'on:cart:add': null,
    'on:cart:update': null,
    'on:cart:remove': null,
    'on:cart:remove:all': null,
    'on:cart:checkout:before': null,
    'on:cart:checkout:after': null,
}

These events will be fired at the right time.

In addition, these events can be listened to via $(window):

$(window).on('event:catalog:ready', (data, cart, window_catalog) => { ... });

Usage example

<div class="row">
    <div class="col-md-12">
        In cart <span data-catalog-cart-count>0</span><br>
        For the amount <span data-catalog-cart-total>0</span>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <section data-catalog-item>
            <h2>Product 1</h2>
            <h3>300.00</h3>
            
            <input type="number" data-catalog-item-attr="quantity" min="1" value="1">
            <a href="#" data-catalog-item-add>Add to cart</a>
            
            <div style="display: none;">
                <span data-catalog-item-attr="uuid">1</span>
                <span data-catalog-item-attr="url">/catalog/example/product</span>
                <span data-catalog-item-attr="title">Product 1</span>
                <span data-catalog-item-attr="price">300.00</span>
            </div>
        </section>
        
        <section data-catalog-item>
            <h2>Product 2</h2>
            <h3>250.00</h3>
            
            <input type="number" data-catalog-item-attr="quantity" min="1" value="1">
            <a href="#" data-catalog-item-add>Add to cart</a>
            
            <div style="display: none;">
                <span data-catalog-item-attr="uuid">2</span>
                <span data-catalog-item-attr="url">/catalog/example/other-product</span>
                <span data-catalog-item-attr="title">Product 2</span>
                <span data-catalog-item-attr="price">250.00</span>
            </div>
        </section>
    </div>
</div>

<div class="row">
    <div class="col-md-12" data-catalog-cart></div>
</div>

<script>
    window.catalog = {
        cart: {
            columns: [
                {label: 'Title', attr: 'title', view: null, class: null, style: 'text-align: center;'},
                {label: 'Code', attr: 'vendorcode', view: null, class: null, style: 'text-align: center;'},
                {label: '-', attr: 'decrement', view: null, class: null, style: 'width: 10%; text-align: center;'},
                {label: 'Quantity', attr: 'quantity', view: null, class: null, style: 'width: 15%;'},
                {label: '+', attr: 'increment', view: null, class: null, style: 'width: 10%; text-align: center;'},
                {label: 'Cost', attr: 'price', view: null, class: null, style: 'text-align: center;'},
                {label: 'Total', attr: 'total', view: null, class: null, style: 'text-align: center;'},
                {label: 'Remove', attr: 'remove', view: null, class: null, style: 'text-align: center;'},
            ],
            style: 'table'
        },
        events: {
            'on:cart:update': (data, cart, obj) => {
                alert('Cart updated' + data.title + ' (x' + data.quantity + ').');
            },
            'on:cart:add': (data) => {
                alert('Product added ' + data.title + ' (x' + data.quantity + ').');
            }
        }
    }
</script>

{% include 'mixin/catalog.twig' %}