senangwebs-buy
Version:
Lightweight JavaScript library that that enables easy implementation of e-commerce functionality through HTML attributes
47 lines (39 loc) • 2.26 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">
<div class="flex justify-between items-center">
<h4 class="text-xl lg:text-2xl capitalize font-bold">TechGear Store</h4>
<!-- Independent Cart View Button -->
<button data-swb-cart 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"
class="border-teal-600 border-2 text-teal-600 rounded-lg text-base font-semibold px-4 w-full lg:max-w-max h-8 flex items-center justify-center hover:opacity-80">
Cart (<span data-swb-cart-count></span>)
</button>
</div>
<div class="flex flex-col gap-8 mt-8">
<img src="https://placehold.co/600x400" alt="Wireless Headphones"
class="w-full h-full max-w-4xl object-center object-cover rounded-lg lg:rounded-2xl">
<h2 class="text-3xl lg:text-6xl capitalize font-bold">Premium Wireless Headphones</h2>
<p class="text-gray-500">Experience premium sound quality with active noise
cancellation and 40-hour battery life.</p>
<!-- Independent Add to Cart Button -->
<button data-swb-store-id="techgear-store" data-swb-product-sku="TECH001"
data-swb-product-name="Premium Wireless Headphones" data-swb-product-price="99.99"
class="bg-teal-600 text-white rounded-lg text-lg font-semibold px-6 w-full lg:max-w-max h-12 flex items-center justify-center hover:opacity-80">
Add to Cart
</button>
</div>
</main>
</body>
</html>