Basket for product catalog (minibasket.js)

Recently, once again there was a problem to improve the usability of the product catalog. The customer did not need the full functionality of the online store, but the ability for users to put the goods in the basket turned out to be extremely necessary. Still, the customer sells spare parts for cars and the user is extremely inconvenient by phone to list the entire list, even by articles.

It was decided to introduce an intermediate stage of the order - a basket. We will do it, naturally, on scripts in order not to become attached to cms (look where it is still useful).

The output was a library that allows you to tie such a basket to any site.

Immediately link to the repository .
')
In general, the basket works as soon as you connect it, the only thing you need is to specify the selectors:
The layout is different for everyone, so you need to specify which button initiates the addition to the basket, where the price is, where the name and quantity are:

$(function(){ var minibasket = { selector: { item: '.mb-item', articul: '.art', price: '.mb-price .value', name: '.mb-name', count: '.mb-num', toBasketButton: '#tobasket span' }, ...... 

At once I will make a reservation that all selectors (except item) should be nested in the block with this item selector, because there can be several items on the page (for example, we deal with a price list).

You can also override the messages:

 ....... msg: { success: "  .<br>      !", invalidTel: '  ', re: ' ?', wrongOrder: '          .', empty: '  :(' }, ...... 

For more customization, you can add your own script that will initiate adding to the basket (add () method):

  add: function(articul,price,name,num){ ..... 

If such a product is already in the basket, then the quantity and price increase. A double with the same name is not created.

Accordingly, the remove () method removes the item from the basket. The DOM item in the basket is taken as a parameter:

  remove: function(obj){ obj.fadeOut('slow', function(){ obj.remove(); minibasket.calc(); if (!minibasket.items.html()) minibasket.items.html(minibasket.msg.empty); localStorage['accept'] = ''; minibasket.save(); }); }, 

Clear the basket with the clear () method:

  clear: function(){ this.items.html(this.msg.empty); this.calc(); this.save(); }, 

Well, just in case there is a save () method, which you can use if you need to save the changes you made to the contents of the basket with third-party scripts:

  var save = { tel: minibasket.tel.val(), items: minibasket.items.html() } localStorage['minibasket'] = JSON.stringify(save); 

The init () method is called by default by itself.