Skip to content

Latest commit

 

History

History
110 lines (74 loc) · 2.64 KB

README.md

File metadata and controls

110 lines (74 loc) · 2.64 KB
Raw

Packagin

For npm

First of all install dependencies. run commands yarn build & npm publish to publish the package to npm.

For browser

Make sure you have browserify installed. npm install -g browserify

  • Then run the command to generate bundle supported in browsers. browserify lib/main.js -o browser/shopemaa.js

Shopemaa Checkout

Embeddable cart and checkout using Shopemaa to add checkout to any website.

Add below code snippet to head block of HTML of your site.

<link
  rel="stylesheet"
  href="https://shopemaa.link/themes/monalisa/css/tailwind/tailwind.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://shopemaa.link/themes/monalisa/js/main.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<script src="https://cdn.jsdelivr.net/gh/shopemaa/shopemaa-checkout@v0.0.6/shopemaa.js"></script>
OR

Install the npm package running command npm install shopemaa-checkout or yard add shopemaa-checkout

Initialize

Add the snippet In your HTML page befor the <body> end tag, with your Store App key & Store App secret.

<script>
  window.onload = function () {
    shopemaa.initShopemaa("YOUR_STORE_APP_KEY", "YOUR_STORE_APP_SECRET");
  };
</script>

Or call initShopemaa with your Store App key & Store App secret

import { initShopemaa } from "shopemaa-checkout";

initShopemaa("YOUR_STORE_APP_KEY", "YOUR_STORE_APP_SECRET");

Example

  • Add to cart button using class shopemaa-buy-btn
<a class="shopemaa-buy-btn" data-product-id="{{ PRODUCT_ID }}">Add to Cart</a>
  • Show cart button using class shopemaa-cart-btn
<a class="shopemaa-cart-btn">Show Cart</a>
  • Track order button using class shopemaa-order-track-btn
<a class="shopemaa-order-track-btn">Track Order</a>
  • Show cart items count using class shopemaa-cart-items-count
<span class="shopemaa-cart-items-count">0</span>
  • Increment stock using class shopemaa-stock-up
<button class="shopemaa-stock-up" data-product-id="{{ PRODUCT_ID }}">-</button>
  • Decrement stock using class shopemaa-stock-down
<button class="shopemaa-stock-down" data-product-id="{{ PRODUCT_ID }}">
  -
</button>
  • Show specific product items count using class shopemaa-cart-item-qty
<span class="shopemaa-cart-item-qty" data-product-id="{{ PRODUCT_ID }}">0</span>

Check index.html from examples directory.

Integration Demo

Copyright © 2023 Shopemaa LLC