senangwebs-buy
Version:
Lightweight JavaScript library that that enables easy implementation of e-commerce functionality through HTML attributes
85 lines (77 loc) • 4.02 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SenangWebs Buy Demo - Modern E-commerce</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="../../dist/swb.js" defer></script>
<link rel="stylesheet" href="../../dist/swb.css">
</head>
<body class="min-h-screen bg-gray-100">
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<h4 class="text-xl lg:text-2xl capitalize font-bold mb-4">TechGear Store</h4>
<!-- Store Catalog -->
<div data-swb-catalog data-swb-store-id="techgear-store" data-swb-store="TechGear Store"
data-swb-whatsapp="+601016646234" data-swb-color-primary="#0D9488" data-swb-color-secondary="#DC2626"
data-swb-currency="MYR" data-swb-cart="true" data-swb-cart-floating="false"
data-swb-checkout-title="Shopping Cart" data-swb-billing-title="Your Information"
data-swb-submit-text="Place Order" data-swb-enable-billing="false"
data-swb-custom-fields='[
{"name": "notes", "type": "textarea", "placeholder": "Order Notes", "required": true},
{"name": "size", "type": "select", "placeholder": "Size", "required": true}
]'
class="space-y-8">
<!-- Product Grid -->
<div class="swb-grid senangwebs-buy-products">
<!-- Product 1 -->
<div data-swb-product data-swb-product-sku="TECH001" data-swb-product-name="Premium Wireless Headphones"
data-swb-product-price="299.99" data-swb-product-add-cart-title="Add">
<div data-swb-product-image>
<img src="https://placehold.co/600x400" alt="Wireless Headphones">
</div>
<div data-swb-product-details>
<div data-swb-product-name>
<h4>Premium Wireless Headphones</h4>
</div>
<div data-swb-product-description>
<p>Experience premium sound quality with active noise cancellation and 40-hour battery life.
</p>
</div>
<div data-swb-product-price>
<p>RM 299.99</p>
</div>
<div data-swb-product-buttons></div>
</div>
</div>
<!-- Product 2 -->
<div data-swb-product data-swb-product-sku="TECH002" data-swb-product-name="Ultra HD Webcam"
data-swb-product-price="129.99" data-swb-product-link="https://example.com/product-details"
data-swb-product-link-title="Buy Now">
<div data-swb-product-image>
<img src="https://placehold.co/600x400" alt="HD Webcam">
</div>
<div data-swb-product-details>
<div data-swb-product-name>
<h4>Ultra HD Webcam</h4>
</div>
<div data-swb-product-description>
<p>Crystal clear 4K video with auto-focus and low-light
correction. Crystal clear 4K video with auto-focus and low-light
correction.</p>
</div>
<div data-swb-product-price>
<p>
RM 129.99
</p>
</div>
<div data-swb-product-buttons></div>
</div>
</div>
<!-- More products... -->
</div>
</div>
</main>
</body>
</html>