Simple JavaScript Shopping Cart Integration – SWB.js

SWB (SenangWebs Buy) is a simple JavaScript library that adds e-commerce capabilities to web pages using HTML attributes. It manages shopping carts, handles WhatsApp checkouts, and supports product organization – without external dependencies. Supports major currencies including USD, EUR, GBP, MYR, SGD, AUD, CAD, JPY, CNY, and INR.

SWB’s built-in cart system saves items between sessions and tracks quantities. Product management lets users search products by name or SKU and sort them by price or name. The checkout system collects customer details like name, email, phone, and address. It then formats this information with the order details and sends it through WhatsApp.

How to use it:

1. Install & import.

# NPM
$ npm install senangweb-buy

2. Load the SWB’s JavaScript and CSS files in the document.

<link rel="stylesheet" href="/dist/swb.css">
<script src="/dist/swb.js" defer></script>

3. Use data-swb-* attributes within your HTML to define your product catalog and individual items:

<div data-swb-catalog 
  data-swb-store="CSSScript Store" 
  data-swb-whatsapp="+1234567890"
  data-swb-currency="USD">
  <!-- Products -->
  <div data-swb-product
    data-swb-product-sku="PROD001"
    data-swb-product-name="Product 1"
    data-swb-product-price="9.99"
    data-swb-product-add-cart-title="Add to Cart"
    data-swb-product-link="https://www.cssscript.com"
    data-swb-product-link-title="View Details">
    <div data-swb-product-image>
      <img src="product.jpg" alt="Product 1">
    </div>
    <div data-swb-product-name>
      <h3>Product 1</h3>
    </div>
    <div data-swb-product-price>
      $9.99
    </div>
    <div data-swb-product-buttons></div>
  </div>
  ... more products here
</div>

4. Configure the main catalog using these attributes:

• data-swb-catalog: (required) Identifies the main container.
• data-swb-store: (required) Your store’s name.
• data-swb-whatsapp: (required) Your WhatsApp number for checkout.
• data-swb-currency: Currency code (e.g., USD, EUR, MYR). Defaults to USD.
• data-swb-color-primary: Primary theme color (hex). Defaults to #007bff.
• data-swb-color-secondary: Secondary theme color (hex). Defaults to #dc3545.
• data-swb-cart: Enables/disables the cart. Defaults to true.
• data-swb-cart-floating: Shows a floating cart button. Defaults to false.

5. Configure individual products using these attributes:

• data-swb-product: (required) Identifies a product container.
• data-swb-product-sku: (required) Product SKU or ID.
• data-swb-product-name: (required) Product name.
• data-swb-product-price: (required) Product price.
• data-swb-product-link: External product link.
• data-swb-product-link-title: External link button text. Defaults to “View Details”.
• data-swb-product-add-cart-title: Add to cart button text. Defaults to “Add to Cart”.
• data-swb-product-buttons: (required) Container for product buttons.

Changelog:

11/04/2024

• Update style css