Javascript-eCommerce-Module
A super fast Webshop built with Vanila-Javascript(everything is loaded with Ajax). This module is there for handling the common components that are needed for runing a Webshop(Products, Services, Filter, Cart, Checkout, Pagination etc..).
Install
Import the script demo/bundle.min.js to your files project.
or
-
run in the command line:
npm install turbo-ecommerce
-
run
./node_modules/.bin/turbo-ecommerce publish
This will copy the browserified file into your project. All that left to do is to embed it. Use the --help flag for further information.P.S - of course another option is to require the module using
const shop = require('turbo-ecommerce').minified
into your project and then browserify it yourself.
Configuration
Configure the eCommerce:
- debug_level - the level of debuging('info', 'warning', 'error').
- element - what DOM element should it be bound to.
- inject_libraries - inject a specific external library from a list of libraries(atm only bootstrap, to be extended).
- components - define the components you will need.
var shop = debug_level: 'info' element: 'body' inject_libraries: 'bootstrap' components: 'Products' 'Services' 'Filter' 'Pagination' 'Cart';
Configure the Products:
- element - what DOM element should it be bound to.
- class - the class name for each product element.
- item_class - the class to apply on each product frame.
- add_button_class - the class to apply on the add to cart button.
- favorite_button_class - the class to apply on the favorite button.
- width - the fixed width of each product item.
- height - the fixed height of each product item.
- attributes - to be explicit, only attributes names you specify will be showen inside of each product frame.
- url - the server side url to fetch the products from.
shopProducts;
Configure the Pagination:
- element - what DOM element should it be bound to.
- class - the class name for each product element.
- per_page - the amount of items you would like to display per page.
- total_items - the total amount of items.
shopPagination;
Configure the Filter:
- element - what DOM element should it be bound to.
- class - the class name for each product element.
shopFilter;
Configure the Cart:
- element - what DOM element should it be bound to.
- cookie_name - the name of the cookie.
- class - the class to apply to the preview cart icon.
- width - the width to apply to the preview cart icon.
- height - the height to apply to the preview cart icon.
- preview_class - the class to apply to the preview cart box.
- loader - the source/path to the loader you wish to be used.
- placement - the place where you want to cart icon to apear(available options: 'left-top', 'right-top').
- hover_color - the color when going over the cart icon with the mouse.
- page - the page where you want to display your cart.
shopCart;
Configure the Checkout:
upcomming...
shopCheckout;
Configure the Services:
upcomming...will be slightly different from Products
shopServices;
Configure the Filter:
upcomming...
shopFilter;
Events
You can also subscribe to events that will be published at certain point and time.
When products are loading your callback will be executed with a product object:
shopEvents
When products are loaded your callback will be executed with a products object:
shopEvents
When product has been added to the cart your callback will be executed with the attributes of the product:
shopEvents