🛒 Cartless (@bangron-work/cartless)

Cartless adalah library JavaScript ringan untuk membuat keranjang belanja (shopping cart) tanpa backend, tanpa framework berat, dan tanpa ribet.

Cocok untuk:

• Toko online sederhana
• MVP / prototype
• Landing page jualan
• Integrasi custom checkout (API / WhatsApp / payment gateway)

⚡ Fokus: ringan, modular, dan mudah diintegrasikan.

✨ Fitur Utama

• ➕ Add / update / remove item
• 🔢 Quantity & stok maksimum
• 💰 Subtotal & total
• ⚖️ Total berat cart (siap ongkir / RajaOngkir)
• 🚚 Ongkir dinamis
• 🧾 Pajak
• 🎟️ Voucher / diskon
• 🔢 Unique code pembayaran
• 💾 Persist cart (LocalStorage)
• 🔔 Event system
• 🧩 Auto DOM binding (opsional)

📦 Instalasi

Via CDN

<script src="https://unpkg.com/@bangron-work/cartless"></script>

Global object tersedia:

window.Cartless;

Via NPM

npm install @bangron-work/cartless

import Cartless from "@bangron-work/cartless";

🚀 Quick Start

HTML

<div class="cartless-item" data-id="P001" data-weight="500">
  <h4 class="item_name">Kaos Polos</h4>
  <b class="item_price">75000</b>
  <input class="item_qty" type="number" value="1" />
  <button class="item_add">Tambah</button>
</div>

<p>Total: <b data-cartless-total></b></p>
<p>Berat: <b data-cartless-weight data-unit="kg"></b> kg</p>

JavaScript

Cartless.config({
  tax: { enabled: true, rate: 11 },
  shipping: { enabled: true },
  features: {
    uniqueNumber: { enabled: true, digits: 3 },
  },
});

Cartless.DOM.init();

// Ongkir contoh: 10.000 per kg
Cartless.on("cart:change", () => {
  const kg = Cartless.weight() / 1000;
  Cartless.setShipping(Math.ceil(kg) * 10000);
});

🧩 DOM Auto Binding

Gunakan atribut berikut untuk update otomatis:

| Atribut | Keterangan | | ------------------------ | ----------- | | data-cartless-total | Total bayar | | data-cartless-subtotal | Subtotal | | data-cartless-tax | Pajak | | data-cartless-shipping | Ongkir | | data-cartless-weight | Total berat | | data-cartless-items | Jumlah item |

Contoh:

<span data-cartless-total></span>
<span data-cartless-weight data-unit="kg"></span>

⚙️ Konfigurasi

Cartless.config({
  currency: {
    symbol: "Rp",
    decimals: 0,
  },
  tax: {
    enabled: true,
    rate: 11,
  },
  shipping: {
    enabled: true,
  },
  features: {
    uniqueNumber: {
      enabled: true,
      digits: 3,
    },
  },
});

📦 Produk & Berat

<div
  class="cartless-item"
  data-id="SKU01"
  data-weight="1200"
  data-stock="10"
></div>

Berat menggunakan gram.

Total berat:

Cartless.weight(); // gram

🎟️ Voucher

Cartless.applyVoucher({
  type: "percentage", // atau 'fixed'
  value: 10,
  max: 50000,
});

🧾 Checkout

const payload = Cartless.checkout(
  {
    name: "Budi",
    phone: "08123xxxx",
  },
  { mode: "full" }
);

console.log(payload);

🔔 Event Listeners

Cartless.on("cart:add", (items) => {});
Cartless.on("cart:update", (items) => {});
Cartless.on("cart:remove", (items) => {});
Cartless.on("cart:change", (pricing) => {});
Cartless.on("shipping:change", (cost) => {});

Wildcard:

Cartless.on("*", (event, data) => {});

🧹 Clear Cart

Cartless.clear();

🧠 Arsitektur Singkat

• cart.js → state & kalkulasi
• dom.js → DOM binding (opsional)
• events.js → event bus
• core.js → config, currency, tax
• index.js → public API

Tidak ada circular dependency ✔

📜 Lisensi

MIT License

⭐ Penutup

Cartless dibuat untuk developer yang ingin:

• cepat
• bersih
• fleksibel

Tanpa framework berat.

🚀 Selamat membangun toko online!