Tiny Storage Cart - Documentation

List and Detailed View

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-product-id="1"
data-product-image="yourimage.png"
data-product-price="17.96"
data-product-name="Product 1"
data-product-data="add here all other productdata"
data-product-properties="Size:S;Color:Red;"
data-product-minimumquantity="5">add to cart</button>

The following data-attributes can be configured:

data-attribute description
data-product-id article id of the product
data-product-image set the url to the product image
data-product-price the product price
data-product-name the name of the product
data-product-data all your data of the product, which can be shown in the order message
data-product-properties properties of the product, like color, size, etc. Key and value have to be separated through a colon. Properties have to be separated through a semicolon.
data-product-minimumquantity the minimum order quantity for checkout

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 code of the button is used.):

data-attribute demo change to
data-cartcheckoutimageskeleton <i data-cartcheckoutimageskeleton="<img style='width: 150px' src='{image}' />"></i> <img style='width: 150px' src='yourimage.png' />
data-cartcheckoutdataskeleton <i data-cartcheckoutdataskeleton="{data}"></i> add here all other product data
data-cartcheckoutsinglepriceskeleton <i data-cartcheckoutsinglepriceskeleton="$ {singleprice}"></i> $ 17.96
data-cartcheckouttotalpriceskeleton <span class="totalprice" data-cartcheckouttotalpriceskeleton="$ {total}"></span> <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> <p><table class='technicaltable'><tbody><tr><td>Color:</td><td>red</td></tr></tbody></table></p>

Paypal

Search <script src="https://www.paypal.com/sdk/js?currency=EUR&client-id=AXN9yCsMU1yYyxmUiYvJec5Idj4aL1mZZc8Nn8CgaeNbADYhkD0odNL_xfzlRJoP2uKv0HDvxnugjS1e"></script> and replace the clientid with your id.

Where do I get PayPal credentials (username, client ID and secret)?

With the following steps you create an access to the so-called PayPal REST Api, which can be used in the software:

Minimum Order Value

On the ordercartlist it is also possible to enter the minimum order value (data-minimumordervalue="10.00") and, if desired, the form (data-checkoutform="#checkoutform"), which is deactivated if the minimum order value is not exceeded.
Furthermore it is possible to add the information text on the minimum order value at various places on the ordercartlist page.
This is structured as follows.<i data-cartcheckoutminimumordermessageskeleton="<div class='alert alert-danger' role='alert'><span>A minimum of ${minimumordervalue} is required in order to checkout the cart.</span></div>"></i>

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 of Different Shipping Costs

With the following code it is possible to add a selection of 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');
  if ($cartcheckoutshippingselection) {
      $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
                      }
                  })
              );
          });
      });
  }

Pages in a Subdirectory

If your page is in a subdirectory, for example: www.domain.com/de/ you can write the following code before embedding requireJs to keep the shop working.

<script>
var requireJsBasePath = '../public/javascripts';
</script>