Berikut adalah contoh XML untuk membuat tombol check out dengan menggunakan WhatsApp pada platform Blogspot:
xml<b:if cond='data:blog.pageType == "item"'>
<div class='checkout-button'>
<a expr:href='"https://api.whatsapp.com/send?phone=123456789&text=Halo%20Saya%20Ingin%20Membeli%20" + data:post.title + "%20dengan%20harga%20" + data:post.price' target='_blank'>
<button>Beli melalui WhatsApp</button>
</a>
</div>
</b:if>
Penjelasan:
- Tag
<b:if cond='data:blog.pageType == "item"'>digunakan untuk memeriksa apakah halaman saat ini merupakan halaman item atau produk pada toko online. <div class='checkout-button'>adalah wadah untuk tombol check out.<a expr:href='...' target='_blank'>adalah tautan yang akan membuka WhatsApp dengan nomor tujuan dan pesan yang sudah ditentukan.- Pada atribut
expr:href, Anda dapat mengganti nomor telepon tujuan pada bagianphone=123456789dengan nomor WhatsApp yang sesuai. - Pada bagian
text=Halo%20Saya%20Ingin%20Membeli%20, Anda dapat mengubah teks pesan yang ingin ditampilkan pada saat pengguna mengklik tombol. - Pada bagian
+ data:post.title +dan+ data:post.price, di sini diasumsikan bahwa Anda menggunakan variabelpost.titledanpost.priceuntuk mengambil judul dan harga dari produk yang sedang ditampilkan. <button>adalah tombol yang akan menampilkan teks "Beli melalui WhatsApp". Anda dapat mengubah teks tombol sesuai kebutuhan Anda.
Pastikan untuk menempatkan kode XML ini di tempat yang tepat pada template Blogspot Anda, tergantung pada tata letak dan desain yang diinginkan. Selain itu, sesuaikan nomor WhatsApp dan pesan sesuai kebutuhan Anda.
xml<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr="http://www.google.com/2005/gml/expr">
<head>
<title>Toko Online</title>
<style type="text/css">
/* Style your online store here */
/* Add your CSS styles */
</style>
</head>
<body>
<h1>Toko Online</h1>
<!-- Add your product details and images here -->
<div class="product">
<h2>Product 1</h2>
<p>Product description goes here.</p>
<img src="product1.jpg" alt="Product 1" />
<p>Price: $10</p>
<button onclick="addToCart('Product 1', 10)">Add to Cart</button>
</div>
<div class="product">
<h2>Product 2</h2>
<p>Product description goes here.</p>
<img src="product2.jpg" alt="Product 2" />
<p>Price: $20</p>
<button onclick="addToCart('Product 2', 20)">Add to Cart</button>
</div>
<div id="cart">
<h2>Cart</h2>
<ul id="cartItems"></ul>
<button onclick="checkout()">Checkout with WhatsApp</button>
</div>
<script type="text/javascript">
// JavaScript functions for adding to cart and checkout
var cartItems = [];
function addToCart(productName, price) {
var item = {
productName: productName,
price: price,
};
cartItems.push(item);
updateCart();
}
function updateCart() {
var cartList = document.getElementById("cartItems");
cartList.innerHTML = "";
cartItems.forEach(function (item) {
var listItem = document.createElement("li");
listItem.textContent =
item.productName + " - $" + item.price;
cartList.appendChild(listItem);
});
}
function checkout() {
var orderDetails = "";
cartItems.forEach(function (item) {
orderDetails +=
item.productName + " - $" + item.price + "%0A";
});
var whatsappLink =
"https://wa.me/1234567890?text=Order:%0A" + orderDetails;
window.open(whatsappLink, "_blank");
}
</script>
</body>
</html>
Pada contoh XML di atas, terdapat beberapa elemen penting:
<div class="product">- Elemen ini digunakan untuk menampilkan detail produk seperti nama produk, deskripsi, gambar, dan harga. Setiap produk memiliki tombol "Add to Cart" yang memanggil fungsiaddToCartuntuk menambahkan produk ke dalam keranjang.<div id="cart">- Elemen ini menampilkan keranjang belanja. Setiap kali produk ditambahkan ke keranjang, daftar produk yang ada dalam keranjang akan diperbarui dan ditampilkan dalam elemen<ul>dengan id "cartItems". Terdapat juga tombol "Checkout with WhatsApp" yang memanggil fungsi
