Tiny Storage Cart - Documentation

List and Detailview

The HTML-Markup can be fully adapted to your own template.
Within every product, there's a button with class attribute addtocart ,which contains the setup of the product as data-attribute.

Example:

<button
class="addtocart"
data-productid="1"
data-productimage="yourimage.png"
data-productprice="17.96"
data-productname="Product 1"
data-productdata="add here all other productdata"
data-productproperties="Size:S;Color:Red;">add to cart</button>

The following data-attributes can be configured:

It's possible to add a selectfield with ID qtyadd with numbers, so it's easier to add more than one product to the cart. If the button "add to cart" is clicked, the selected amount will be added to the existing products of the cart.

Checkout

The checkout list must have the ID ordercartlist. Here also the decimalmark can be configured per data-attribute (decimalmark=",").

The layout of the checkout list can be easily adapted.
The element with ID orderlistitemskeleton must persist, but can be fully adapted. It's the HTML-Markup for every single checkout list element and will be duplicated automatically per javascript.
Here the following data-attributes are replaced in the localStorage (in the example the data from the above shown button code are used.):

data-cartcheckoutimageskeleton
<i data-cartcheckoutimageskeleton="<img style='width: 150px' src='{image}' />"></i>
changes to
<img style='width: 150px' src='yourimage.png' />
data-cartcheckoutdataskeleton
<i data-cartcheckoutdataskeleton="{data}"></i>
changes to
add here all other productdata
data-cartcheckoutsinglepriceskeleton
<i data-cartcheckoutsinglepriceskeleton="$ {singleprice}"></i>
changes to
$ 17.96
data-cartcheckouttotalpriceskeleton
<span class="totalprice" data-cartcheckouttotalpriceskeleton="$ {total}"></span>
changes to
<span class="totalprice" data-cartcheckouttotalpriceskeleton="$ {total}">$ the calculated price</span>
data-cartcheckoutpropertiesskeleton
<i data-cartcheckoutpropertiesskeleton="<p><table class='technicaltable'><tbody>{propertyeach}<tr><td>{propertykey}:</td><td>{propertyvalue}</td></tr>{propertyeach}</tbody></table></p>"></i>
changes to
<p><table class='technicaltable'><tbody><tr><td>Color:</td><td>red</td></tr></tbody></table></p>

Change Item in Checkout

With the event "addItemToStorage" you can add your own function to adapt the output of the checkout for every single product.

main.js

document.addEventListener('addItemToStorage', function(e) {
	var totalItem = e.detail.product.qty;
	var productPrice = e.detail.product.price;
	var productCalcPrice;
	var percent = 0;

	if (totalItem >= 10 && totalItem <= 19) {
		percent = 0.1; // 10%
	} else if (totalItem >= 20) {
		percent = 0.2; // 20%
	}
	productCalcPrice = parseFloat(productPrice - (productPrice * percent)).toFixed(2);
	e.detail.product.calcprice = productCalcPrice;
});

Selection for different shipping costs

With the following code it is possible to add a selection for different shipping costs.

checkout.html

<select id="shippingselect">
  <option disabled selected value>Select</option>
  <option value="2" data-shippingselect="15">Europe Shipping ($ 15.00)</option>
  <option value="3" data-shippingselect="35">International Shiping ($ 35.00)</option>
</select>

main.js

var $cartcheckoutshippingselection = document.getElementById('shippingselect');
$cartcheckoutshippingselection.addEventListener('change', function(e) {
	$singleShipping.dataset.shippingcost = e.target.selectedOptions[0].dataset.shippingselect;
	requirejs(['cart/cart'], function(cart) {
		document.dispatchEvent(
			new CustomEvent('calculateCartSum', {
				detail: {
					cart: cart.getStorageCart(),
					cartTotal: cart.calculateTotal(),
					cartObject: cart
				}
			})
		);
	});
});
Information