First of all install dependencies.
run commands yarn build & npm publish to publish the package to npm.
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
Embeddable cart and checkout using Shopemaa to add checkout to any website.
<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/[email protected]/shopemaa.js"></script>Install the npm package running command
npm install shopemaa-checkout or yard add shopemaa-checkout
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");- 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.
Copyright © 2023 Shopemaa LLC