Form Checkout Via Wa & Email v2.0 RawCode
kode ini dapat melakukan redirect dengan cepat dan mudah melalui platform seperti WhatsApp (WA) dan email.
check Demo: Demo v2.0!Code Verion : 2.0
0. Cara Pasang
wajib pasang libary di bawah <head>: <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
1. Code post
untuk code post bisa diletakan saja didalam postingan kamu
<button class="btnbuy" id="clickBuy" onclick="clickPopupProduk()">Beli Via email/WA</button>
<script>
var gmailKamu = "yourEmail@gmail.com"; // Ganti dengan email kamu.
var nomorKamu = "62895xxxxx"; // Ganti dengan nomor WA kamu pastikan 08 diganti jadi 62.
var token_bot_telegram = "6427068077:AAFl1tZ76inr_3KUvasdGBfWp5eB99tv8vE"; // Ganti dengan token bot kamu
var id_grup_telegram = "-1001952238178"; // Ganti dengan id group kamu
var payVia = {
ovo: {
gambar: "link",
html: "Belum tersedia"
},
gopay: {
gambar: "link",
html: "Belum tersedia"
},
dana: {
gambar: "link",
html: "<p>Silakan transfer ke nomor Dana kami: 081234567890</p><p>dan kirimkan invoice pembayarannya Via WA/Email</p>"
},
paypal: {
gambar: "link",
html: "<p>Silakan transfer ke akun PayPal kami: example@example.com</p><p>dan kirimkan invoice pembayarannya Via WA/Email</p>"
},
trakteer: {
gambar: "link",
html: "<p>Silakan kunjungi link Trakteer kami: www.trakteer.com/example</p><p>dan kirimkan invoice pembayarannya Via WA/Email</p>"
},
whatsApp: {
gambar: "link",
html: "<p>Setelah Mengirim Pesan Ke WA kirim juga invoice.</p>"
},
email: {
gambar: "link",
html: "<p>sertakan invoice saat Mengirim Pesan ke email.</p>"
},
telegram: {
gambar: "telegram",
html: "<p>sertakan invoice saat Mengirim Pesan ke Telegram (wajib).</p>"
}
};
// Data array produk dengan kunci unik
var produk = {
"1": {
gambarproduk: {
url: "https://w7.pngwing.com/pngs/624/612/png-transparent-blend-s-anime-manga-anime-child-face-black-hair-thumbnail.png"
},
produk: {
nama: "Sepatu"
},
harga: {
Rp: "30.000",
dollar: "3.00"
}
},
"2": {
gambarproduk: {
url: "https://c4.wallpaperflare.com/wallpaper/757/911/790/women-anime-girls-brunette-cat-wallpaper-preview.jpg"
},
produk: {
nama: "Manga"
},
harga: {
Rp: "70.000",
dollar: "3.99"
}
},
"3": {
gambarproduk: {
url: "https://w7.pngwing.com/pngs/624/612/png-transparent-blend-s-anime-manga-anime-child-face-black-hair-thumbnail.png"
},
produk: {
nama: "Sepatu"
},
harga: {
Rp: "1999",
dollar: "1.5"
}
},
"4": {
gambarproduk: {
url: "https://w7.pngwing.com/pngs/624/612/png-transparent-blend-s-anime-manga-anime-child-face-black-hair-thumbnail.png"
},
produk: {
nama: "Sepatu1"
},
harga: {
Rp: "2999",
dollar: "1.8"
}
}
};
var listProduk = {
html: `<input type="radio" id="produk1" name="produk" value="1" checked>
<label for="produk1">${produk[1].produk.nama}</label>
<input type="radio" id="produk2" name="produk" value="2">
<label for="produk2">${produk[2].produk.nama}</label>
<input type="radio" id="produk3" name="produk" value="3">
<label for="produk3">${produk[3].produk.nama}</label>
<input type="radio" id="produk4" name="produk" value="4">
<label for="produk4">${produk[4].produk.nama}</label>`
};
beliProduk();
var urlproduk = window.location.href;
document.getElementById('urlWebpembeli').value = urlproduk;
</script>
2. Code css
Cari tag </b:skin> di tema kamu dan tempatkan Code css ini di dalam tag khusus Blogspot <b:skin> ..didalam disini.. </b:skin>.
cukup letakan saja diatas </b:skin>
.gambarinvoice2{
display:none;
}
.hiddenBuy {
display:none;
visibility: hidden;
}
.visibleBuy {
visibility: visible;
opacity: 0;
animation: slideUpbuy 0.5s ease 0s 1 normal forwards;
}
@keyframes slideUpbuy {
0% {
opacity: 0;
transform: translateY(250px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.ccpopup_frmProduk {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
z-index: 999;
backdrop-filter: brightness(0.5);
}
.listProduk {
position: relative;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
@media only screen and (min-width: 768px) {
.listProduk {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
form#frmProduk {
width: -webkit-fill-available;
max-width: 600px;
height: 100%;
max-height: 800px;
}
}
@media only screen and (max-width: 480px) {
form#frmProduk {
width: -webkit-fill-available;
max-width: 600px;
height: 100%;
max-height: 500px;
}
}
@media only screen and (max-width: 320px) {
form#frmProduk {
width: -webkit-fill-available;
max-width: 600px;
height: 100%;
max-height: 400px;
}
}
.ovf_frmProduk { margin: 10px;}
form#frmProduk {
padding: 15px;
background: #f1f1f1;
border-radius: 15px;
border: 2px solid #9980ff;
overflow-y: scroll;
overflow-x: hidden;
margin-top: 10px;
-ms-overflow-style: none;
scrollbar-width: none;
}
form#frmProduk::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 30px;
}
form#frmProduk::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
border-radius: 30px;
display: none;
}
form#frmProduk::-webkit-scrollbar-thumb
{
background-color: #9980ff;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent);
border-radius: 30px;
}
.metodeViabuy {
margin: 5px 0;
display: grid;
gap: 5px 0;
}
span.syrtx {
width: 100%;
display: inline-flex;
font-size: 12px;
margin: 10px 0;
gap: 0 10px;
}
img#thumbailProduk {
width: 115px;
height: auto;
border-radius: 5px;
border: 2px solid #9980ff;
max-height: 100px;
object-fit: cover;
}
.headerProduk.one {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
margin-top: 10px;
}
.headerProduk.one label[for="namaProduk"] {
position: absolute;
top: -15px;
left: 0;
font-size: 12px;
font-family: monospace;
}
span#namaProduk {
font-size: 24px;
font-family: sans-serif;
font-weight: 600;
}
.headerharga {
position: relative;
left: 0;
}
label[for="hargaProduk"] {
position: absolute;
top: -20px;
left: 0;
font-size: 12px;
font-family: monospace;
}
span#hargaProduk {
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: 600;
font-family: fantasy;
}
p.rupiah,.dolar {
position: relative;
}
p.rupiah:before {
content: "Rp";
font-size: 14px;
position: relative;
top: -18px;
left: 0;
color: #9980ff;
}
p.dolar:before {
content: "$";
font-size: 14px;
position: relative;
top: -18px;
left: 0;
color: #9980ff;
}
.jumlahProduk.metodeViabuy {
justify-content: end;
}
label[for="quantity"] {
text-align: right;
}
span#quantityValue {
padding: 3px 25px;
background: #222;
color: #eee;
border-radius: 8px;
font-size: 14px;
}
#decreaseQuantity,#increaseQuantity{
border-radius: 50%;
background: #0000;
border: 2px solid #ccc;
color: inherit;
width: 15px;
height: 15px;
text-align: center;
display: inline-flex;
justify-content: center;
align-items: center;
}
#etalaseproduk {
display: block;
position: relative;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
padding: 3px 0 10px 0;
width: -webkit-fill-available;
}
#etalaseproduk input {
display: none;
}
#etalaseproduk label {
padding: 3px 7px;
display: inline-block;
text-align: center;
border: 1px solid #999999;
border-radius: 5px;
margin: 0 10px;
}
#etalaseproduk input[type="radio"]:checked + label {
background-color: #9980ff;
color: #fff;
border-color: #9980ff;
}
label#pilihmetodePembayaran {
font-size: 12px;
font-weight: 600;
}
.metodePembayaran {
display: flex;
flex-wrap: wrap;
gap: 0 10px;
}
.metodePembayaran div {
margin-bottom: 10px;
flex-grow: 1;
}
.metodePembayaran input[type="radio"] {
display: none;
}
.metodePembayaran input[type="radio"] + label {
display: flex;
padding: 5px 20px;
border: 2px solid #ddd;
border-radius: 8px;
line-height: 50px;
cursor: pointer;
justify-content: center;
flex-wrap: wrap;
}
.metodePembayaran input[type="radio"]:checked + label {
background-color: #9980ff;
color: #fff;
border-color: #9980ff;
}
div#opsipembayaran {
display: inline-flex;
}
label#pilihmetodePesan {
font-size: 12px;
font-weight: 600;
}
.metodePesanan input[type="radio"] {
display: none;
}
.metodePesanan label {
display: inline-block;
margin-right: 10px;
padding: 8px 12px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 8px;
cursor: pointer;
}
.metodePesanan input[type="radio"]:checked + label {
background-color: #CB0011;
color: #fff;
border-color: #CB0011;
}
label[for="notes"] {
font-size: 12px;
font-weight: 600;
}
textarea#catatatanPembeli:focus,
#urlWebpembeli:focus,
#namaInput:focus,
#emailInput:focus,
#alamatInput:focus,
#nomorTelpInput:focus{
outline: 2px solid #9980ff;
border: none;
}
textarea#catatatanPembeli,#urlWebpembeli {
background: #0000;
color: #222;
border: 2px solid #ddd;
resize: none;
height: 50px;
max-height: 100px;
width: 100%;
padding: 8px;
margin-top: 5px;
box-sizing: border-box;
border-radius: 5px;
}
#namaInput,#alamatInput,#emailInput,#nomorTelpInput {
background: #0000;
color: #222;
border: 2px solid #ddd;
resize: none;
height: 50px;
max-height: 100px;
width: 100%;
padding: 8px;
margin-top: 5px;
box-sizing: border-box;
border-radius: 5px;
}
#fileInput {
opacity: 0;
position: absolute;
width: 0;
height: 0;
}
#fileInput + label {
font-size: 16px;
border: 2px solid #ddd;
border-radius: 8px;
background-color: #0000;
padding: 10px 20px;
cursor: pointer;
display: inline-block;
}
#fileInput + label:hover {
background-color: #9980ff;
color: #fff;
border-color: #9980ff;
}
#imagePreview {
width: 100%;
height: auto;
max-height: 300px;
max-width: 360px;
overflow: hidden;
border-radius: 5px;
margin: 10px 0;
}
#videoPreview {
width: 100%;
height: auto;
max-height: 300px;
max-width: 360px;
overflow: hidden;
border-radius: 5px;
margin: 10px 0;
}
#imagePreview img {
width: 100%;
height: auto;
}
#videoPreview video {
width: 100%;
height: auto;
}
button#kirimPesanan {
width: 100%;
border-radius: 5px;
padding: 10px 0;
border: none;
cursor: pointer;
margin-top: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
}
button#kirimPesanan:before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Cpath d='m4 7l.867 12.143a2 2 0 0 0 2 1.857h10.276a2 2 0 0 0 2-1.857L20.01 7h-16zm4.5 0c0-1.653 1.5-4 3.5-4s3.5 2.347 3.5 4'/%3E%3Cpath d='M9.5 17c.413.462 1 1 2.5 1s2.5-.897 2.5-2s-1-1.5-2.5-2s-2-1.47-2-2c0-1.104 1-2 2-2s1.5 0 2.5 1'/%3E%3C/g%3E%3C/svg%3E");
}
button#kirimPesanan:hover {
background-color: #45a049;
}
button#kirimPesanan:disabled {
background-color: #ccc;
color: #666;
cursor: not-allowed;
}
button#kirimPesanan:not(:disabled) {
background-color: #236e25;
color: #fff;
cursor: pointer;
}
.btnbuy {
width: -webkit-fill-available;
padding: 6px 0;
margin: 0.5em;
background: black;
color: white;
border: none;
border-radius: 0.5rem;
font-size: 14px;
font-weight: 400;
cursor: pointer;
position: relative;
z-index: 1;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
}
.btnbuy:before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 32 32'%3E%3Cpath fill='white' d='M4 7a1 1 0 0 0 0 2h2.22l2.624 10.5c.223.89 1.02 1.5 1.937 1.5h12.47c.903 0 1.67-.6 1.907-1.47L27.75 10h-2.094l-2.406 9H10.78L8.157 8.5A1.984 1.984 0 0 0 6.22 7zm18 14c-1.645 0-3 1.355-3 3s1.355 3 3 3s3-1.355 3-3s-1.355-3-3-3m-9 0c-1.645 0-3 1.355-3 3s1.355 3 3 3s3-1.355 3-3s-1.355-3-3-3m3-14v5h-3l4 4l4-4h-3V7zm-3 16c.564 0 1 .436 1 1c0 .564-.436 1-1 1c-.564 0-1-.436-1-1c0-.564.436-1 1-1m9 0c.564 0 1 .436 1 1c0 .564-.436 1-1 1c-.564 0-1-.436-1-1c0-.564.436-1 1-1'/%3E%3C/svg%3E");
}
.btnbuy:hover {
color: black;
}
.btnbuy:after {
content: "";
background: white;
position: absolute;
z-index: -1;
left: -20%;
right: -20%;
top: 0;
bottom: 0;
transform: skewX(-45deg) scale(0, 1);
transition: all 0.5s;
}
.btnbuy:hover:after {
transform: skewX(-45deg) scale(1, 1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.closepopup_produk {
width: -webkit-fill-available;
margin: 0 30px;
}
.closeBuy {
width: -webkit-fill-available;
padding: 6px 0;
margin: 0.5em;
background: black;
color: white;
border: none;
border-radius: 0.5rem;
font-size: 14px;
font-weight: 400;
cursor: pointer;
position: relative;
z-index: 1;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
}
.closeBuy:before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 32 32'%3E%3Ccircle cx='10' cy='28' r='2' fill='white'/%3E%3Ccircle cx='24' cy='28' r='2' fill='white'/%3E%3Cpath fill='white' d='M4.98 2.804A1 1 0 0 0 4 2H0v2h3.18l3.84 19.196A1 1 0 0 0 8 24h18v-2H8.82l-.8-4H26a1 1 0 0 0 .976-.783L29.244 7h-2.047l-1.999 9H7.62Z'/%3E%3Cpath fill='white' d='M21.586 9.414L18 5.828V14h-2V5.828l-3.586 3.586L11 8l6-6l6 6z'/%3E%3C/svg%3E");
}
.closeBuy:hover {
color: black;
}
.closeBuy:after {
content: "";
background: white;
position: absolute;
z-index: -1;
left: -20%;
right: -20%;
top: 0;
bottom: 0;
transform: skewX(-45deg) scale(0, 1);
transition: all 0.5s;
}
.closeBuy:hover:after {
transform: skewX(-45deg) scale(1, 1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
3. Code mainscript
JavaScript di Blogspot biasanya ditempatkan tepat di atas tag penutup </body> tapi untuk kode Form Checkout lebih baik letakan diatas </head> untuk menghindari masalah dalam error beliProduk is not defined.
Langkah-langkah:
- Cari tag </head> di tema kamu kalau sudah ketemu.
- Tambahkan kode JS sebelum </head>.
<script>
/*<![CDATA[*/
document.addEventListener('click', function(event) {
var tCb = document.querySelector('.tataCaraBayar');
var tEmBeli = event.target;
if (tCb && tEmBeli && !tCb.contains(tEmBeli)) {
tCb.remove();
}
});
function clickPopupProduk() {
var ktbuy = document.getElementById("ktbuy");
if (ktbuy.classList.contains("hiddenBuy")) {
ktbuy.classList.remove("hiddenBuy");
ktbuy.classList.add("visibleBuy");
} else {
ktbuy.classList.remove("visibleBuy");
ktbuy.classList.add("hiddenBuy");
}
}
var tataCaraHtml = '';
var gambarUrl = '';
function getTataCaraBayar(metodePembayaran) {
switch (metodePembayaran) {
case 'Ovo':
gambarUrl = payVia.ovo.gambar;
tataCaraHtml = payVia.ovo.html;
break;
case 'Gopay':
gambarUrl = payVia.gopay.gambar;
tataCaraHtml = payVia.gopay.html;
break;
case 'Dana':
gambarUrl = payVia.dana.gambar;
tataCaraHtml = payVia.dana.html;
break;
case 'Paypal':
gambarUrl = payVia.paypal.gambar;
tataCaraHtml = payVia.paypal.html;
break;
case 'Trakteer':
gambarUrl = payVia.trakteer.gambar;
tataCaraHtml = payVia.trakteer.html;
break;
case 'WhatsApp':
gambarUrl = payVia.whatsApp.gambar;
tataCaraHtml = payVia.whatsApp.html;
break;
case 'Email':
gambarUrl = payVia.email.gambar;
tataCaraHtml = payVia.email.html;
break;
default:
return '';
}
return tataCaraHtml;
}
function showTataCaraBayar(metodePembayaran) {
var tataCaraBayar = getTataCaraBayar(metodePembayaran);
var htmlContent = `
<div class="tataCaraBayar">
<b>Cara bayar</b>
<p>${tataCaraBayar}</p>
<img class="gambarinvoice1" src="${gambarUrl}" alt="${metodePembayaran}"/>
</div>`;
document.getElementById("informasiTataCaraBayar").innerHTML = htmlContent;
}
var tataCaraHtmlv = '';
var gambarUrlv = '';
function getTataCaraBayarv(metodePembayaranv) {
switch (metodePembayaranv) {
case 'WhatsApp':
gambarUrlv = payVia.whatsApp.gambar;
tataCaraHtmlv = payVia.whatsApp.html;
break;
case 'Email':
gambarUrlv = payVia.email.gambar;
tataCaraHtmlv = payVia.email.html;
break;
case 'Telegram':
gambarUrlv = payVia.telegram.gambar;
tataCaraHtmlv = payVia.telegram.html;
break;
default:
return '';
}
return tataCaraHtmlv;
}
function showTataCaraBayarv(metodePembayaranv) {
var tataCaraBayarv = getTataCaraBayarv(metodePembayaranv);
var htmlContentv = `
<div class="tataCaraBayar">
<b>Guide</b>
<p>${tataCaraBayarv}</p>
<img class="gambarinvoice2" src="${gambarUrlv}" alt="${metodePembayaranv}"/>
</div>`;
document.getElementById("informasiTataCaraBayarv").innerHTML = htmlContentv;
}
function runmetodePembayaran(){
var metodePembayaranRadios = document.querySelectorAll('input[name="metodePembayaran"]');
metodePembayaranRadios.forEach(radio => {
radio.addEventListener('change', function() {
var selectedValue = this.value;
showTataCaraBayar(selectedValue);
});
});
var metodePembayaranRadiosx = document.querySelectorAll('input[name="deliveryMethod"]');
metodePembayaranRadiosx.forEach(radiox => {
radiox.addEventListener('change', function() {
var selectedValuex = this.value;
showTataCaraBayarv(selectedValuex);
if (selectedValuex !== "Telegram") {
var datatelegram = document.getElementById("datatelegram");
datatelegram.innerHTML = '';
} else {
var divinput = `
<div class="metodeViabuy">
<label for="namaInput">Nama:</label>
<input type="text" placeholder="Nama" id="namaInput" required="required"/>
</div>
<div class="metodeViabuy">
<label for="alamatInput">Alamat Lengkap:</label>
<input type="text" placeholder="Alamat" id="alamatInput" required="required"/>
</div>
<div class="metodeViabuy">
<label for="emailInput">Email:</label>
<input type="email" placeholder="Email" id="emailInput" required="required"/>
</div>
<div class="metodeViabuy">
<label for="nomorTelpInput">No. Telp:</label>
<input type="tel" placeholder="Nomor Telp" id="nomorTelpInput" required="required"/>
</div>
<div class="metodeViabuy">
<input type="file" id="fileInput"/>
<label for="fileInput">Upload bukti transfer (ss/pdf):</label>
<div id="filePreview">
<img id="imagePreview" src="#" alt="Preview" style="display: none;">
<video id="videoPreview" src="#" controls style="display: none;"></video>
<div id="fileNamePreview" style="display: none;"></div>
<div id="fileMessagePreview" style="display: none;"></div>
</div>
</div>
`;
var datatelegram = document.getElementById("datatelegram");
datatelegram.innerHTML = divinput;
document.getElementById('fileInput').addEventListener('change', function() {
const fileType = this.files[0].type.split('/')[0];
if (fileType === 'image' || fileType === 'video' || (fileType === 'application' && this.files[0].type === 'application/pdf')) {
previewFile();
} else {
const fileNameContainer = document.getElementById('fileNamePreview');
const messageContainer = document.getElementById('fileMessagePreview');
fileNameContainer.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M20 4H8.83A2 2 0 0 0 7 5.17L5.17 7 5 7.17V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM13 18h-2v-2h2zm0-4h-2v-2h2zm4 4h-2v-2h2zm0-4h-2v-2h2zm0-4h-2V8h2z"/>
</svg> ${this.files[0].name}`;
messageContainer.textContent = 'Preview tidak tersedia untuk jenis file ini';
fileNameContainer.style.display = 'block';
messageContainer.style.display = 'block';
document.getElementById('imagePreview').style.display = 'none';
document.getElementById('videoPreview').style.display = 'none';
}
});
}
});
});
}
function previewFile() {
const fileInput = document.getElementById('fileInput');
const previewImageContainer = document.getElementById('imagePreview');
const previewVideoContainer = document.getElementById('videoPreview');
const fileNameContainer = document.getElementById('fileNamePreview');
const messageContainer = document.getElementById('fileMessagePreview');
previewImageContainer.style.display = 'none';
previewVideoContainer.style.display = 'none';
fileNameContainer.style.display = 'none';
messageContainer.style.display = 'none';
const file = fileInput.files[0];
if (file) {
const fileType = file.type.split('/')[0];
if (fileType === 'image') {
const url = URL.createObjectURL(file);
previewImageContainer.src = removeBlobFromURL(url);
previewImageContainer.style.display = 'block';
} else if (fileType === 'video') {
const url = URL.createObjectURL(file);
previewVideoContainer.src = removeBlobFromURL(url);
previewVideoContainer.style.display = 'block';
} else {
fileNameContainer.innerHTML = `${file.name}`;
messageContainer.textContent = 'Preview tidak tersedia untuk jenis file ini';
fileNameContainer.style.display = 'block';
messageContainer.style.display = 'block';
}
}
}
function removeBlobFromURL(url) {
return url.replace(/^blob:/, 'blob:');
}
function beliProduk() {
var modalHtml = `
<div class="ccpopup_frmProduk hiddenBuy" id="ktbuy">
<div class="listProduk">
<div class="closepopup_produk">
<button class="closeBuy" onclick="clickPopupProduk()">Close Produk</button>
</div>
<div class="ovf_frmProduk">
<form id="frmProduk">
<div class="headerProduk">
<img id="thumbailProduk" src="${produk[1].gambarproduk.url}"/>
<div class="headerProduk one">
<label for="namaProduk">Produk:</label>
<span data-title-produk="${produk[1].produk.nama}" id="namaProduk">${produk[1].produk.nama}</span>
<div class="headerharga">
<label for="hargaProduk">Harga:</label>
<span data-harga-produk="Rp${formatRupiah(produk[1].harga.Rp)}/$${formatDollar(produk[1].harga.dollar)}" id="hargaProduk">
<p class="rupiah">${produk[1].harga.Rp}</p>/
<p class="dolar">${produk[1].harga.dollar}</p>
</span>
</div>
</div>
</div>
<div class="metodeViabuy">
<div id="etalaseproduk" class="produkOptions"> </div>
</div>
<div class="jumlahProduk metodeViabuy">
<label for="quantity">Jumlah:</label>
<div id="quantityControls">
<a id="decreaseQuantity">-</a>
<span id="quantityValue">1</span>
<a id="increaseQuantity">+</a>
</div>
</div>
<div class="metodeViabuy">
<label id="pilihmetodePesan">Pilih Metode via:</label>
<div class="metodePesanan" id="opsipembayaran">
<input type="radio" id="whatsappMethod" name="deliveryMethod" value="WhatsApp"/>
<label for="whatsappMethod">WhatsApp</label>
<input type="radio" id="emailMethod" name="deliveryMethod" value="Email">
<label for="emailMethod"/>Email</label>
<input type="radio" id="telegramMethod" name="deliveryMethod" value="Telegram">
<label for="telegramMethod"/>Telegram</label>
</div>
<div id="informasiTataCaraBayarv"></div>
</div>
<div class="metodeViabuy">
<label id="pilihmetodePembayaran">Pilih Metode Pembayaran:</label>
<div class="metodePembayaran">
<div>
<input type="radio" id="Id_Ovo" name="metodePembayaran" value="Ovo"/>
<label for="Id_Ovo">Ovo</label>
</div>
<div>
<input type="radio" id="Id_Gopay" name="metodePembayaran" value="Gopay"/>
<label for="Id_Gopay">Gopay</label>
</div>
<div>
<input type="radio" id="id_Dana" name="metodePembayaran" value="Dana"/>
<label for="id_Dana">Dana</label>
</div>
<div>
<input type="radio" id="Id_Paypal" name="metodePembayaran" value="Paypal"/>
<label for="Id_Paypal">Paypal</label>
</div>
<div>
<input type="radio" id="Id_Trakteer" name="metodePembayaran" value="Trakteer"/>
<label for="Id_Trakteer">Trakteer</label>
</div>
</div>
<div id="informasiTataCaraBayar"></div>
</div>
<div class="metodeViabuy">
<label for="urlWebpembeli">Link Web:</label>
<input type="text" placeholder="masukan urlweb kamu" id="urlWebpembeli" name="urlWebpembeli" required='required'/>
</div>
<div id="datatelegram" class="metodeViabuy">
</div>
<div class="metodeViabuy">
<label for="notes">Catatan Tambahan:</label>
<textarea id="catatatanPembeli" name="catatatanPembeli"></textarea>
</div>
<span class="syrtx">
<input type="checkbox" id="kebijakan" name="kebijakan"/><span class="ruleKebijakan">Saya sudah membaca,Mengerti, dan Setuju dengan <a class="syrt" href="#">syarat dan ketentuan</a> (wajib)</span>
</span>
<button id="kirimPesanan" type="button" onclick="pesananProduk()" disabled>Beli Produk</button>
</form>
</div>
</div>
</div>`;
document.body.insertAdjacentHTML('beforeend', modalHtml);
var eproduk = listProduk;
document.getElementById("etalaseproduk").innerHTML = eproduk.html;
runKebijakan();
runmetodePembayaran();
document.querySelectorAll('input[name="produk"]').forEach(radio => {
radio.addEventListener('change', function() {
var selectedProduct = this.value;
updateProductInfo(selectedProduct);
});
});
document.getElementById('decreaseQuantity').addEventListener('click', function() {
decreaseQuantity();
var selectedProduct = document.querySelector('input[name="produk"]:checked').value;
updateProductInfo(selectedProduct);
});
document.getElementById('increaseQuantity').addEventListener('click', function() {
increaseQuantity();
var selectedProduct = document.querySelector('input[name="produk"]:checked').value;
updateProductInfo(selectedProduct);
});
}
function decreaseQuantity() {
var quantityElement = document.getElementById('quantityValue');
var quantity = parseInt(quantityElement.textContent);
if (quantity > 1) {
quantityElement.textContent = quantity - 1;
}
}
function increaseQuantity() {
var quantityElement = document.getElementById('quantityValue');
var quantity = parseInt(quantityElement.textContent);
quantityElement.textContent = quantity + 1;
}
function updateProductInfo(selectedProduct) {
var quantityElement = document.getElementById('quantityValue');
var quantity = parseInt(quantityElement.textContent);
var product = produk[selectedProduct];
var hargaRp = parseFloat(product.harga.Rp.replace(/\./g, '').replace(',', '.'));
var hargaDollar = parseFloat(product.harga.dollar);
var totalRp = hargaRp * quantity;
var totalDollar = hargaDollar * quantity;
document.getElementById('hargaProduk').setAttribute('data-harga-produk', `Rp${formatRupiah(product.harga.Rp)}/$${formatDollar(product.harga.dollar)}`);
document.getElementById('namaProduk').setAttribute('data-title-produk', product.produk.nama);
document.getElementById('thumbailProduk').src = product.gambarproduk.url;
document.getElementById('namaProduk').innerText = product.produk.nama;
document.getElementById('hargaProduk').innerHTML = `<p class="rupiah">${formatRupiah(totalRp)}</p>/<p class="dolar">${formatDollar(totalDollar)}</p>`;
}
function formatDollar(amount) {
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2
});
return formatter.format(amount).replace('$', '');
}
function formatRupiah(angka) {
var number_string = angka.toString().replace(/\./g, '');
var split = number_string.split(',');
var sisa = split[0].length % 3;
var rupiah = split[0].substr(0, sisa);
var ribuan = split[0].substr(sisa).match(/\d{3}/gi);
if (ribuan) {
var separator = sisa ? '.' : '';
rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
return rupiah;
}
function runKebijakan(){
document.querySelector('#kebijakan').addEventListener("change", function() {
var kebijakanChecked = this.checked;
var kirimPesanan = document.querySelector("#kirimPesanan");
if (kebijakanChecked) {
kirimPesanan.removeAttribute("disabled");
} else {
kirimPesanan.setAttribute("disabled", "disabled");
}
});
}
function pesananProduk() {
var kebijakanChecked = document.getElementById("kebijakan").checked;
if (kebijakanChecked) {
var productName = document.getElementById("namaProduk").getAttribute("data-title-produk");
var productImage = document.getElementById("thumbailProduk").getAttribute("src");
var paymentMethod = document.querySelector('input[name="metodePembayaran"]:checked').value;
var notes = document.getElementById("catatatanPembeli").value;
var opsiMetode = document.querySelector('input[name="deliveryMethod"]:checked').value;
if (opsiMetode === "Telegram" || opsiMetode === "WhatsApp" || opsiMetode === "Email") {
var urlWebpembeli = document.getElementById("urlWebpembeli").value;
if (urlWebpembeli.trim() === '') {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Silakan lengkapi semua input sebelum mengirim pesan!',
});
return;
}
}
if (opsiMetode === "Telegram") {
var namaInput = document.getElementById("namaInput").value;
var alamatInput = document.getElementById("alamatInput").value;
var emailInput = document.getElementById("emailInput").value;
var nomorTelpInput = document.getElementById("nomorTelpInput").value;
if (namaInput.trim() === '' || alamatInput.trim() === '' || emailInput.trim() === '' || nomorTelpInput.trim() === '') {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Silakan lengkapi semua input sebelum mengirim pesan!',
});
return;
}
}
var hargaProduk = document.getElementById("hargaProduk").getAttribute("data-harga-produk");
var totalhargaProduk = document.getElementById("hargaProduk").innerText;
var hargaArray = totalhargaProduk.split('/');
var rupiah = hargaArray[0].trim();
var dolar = hargaArray[1].trim();
var totalHarga = "Rp"+rupiah + "/" +"$"+ dolar;
var quantity = parseInt(document.getElementById("quantityValue").innerText);
var message = "";
if (opsiMetode === "WhatsApp") {
message = "Saya ingin membeli ini:\n\n" +
"-------------------------------------\n\n" +
"Nama Produk: " + productName + "\n\n" +
"Jumlah: " + quantity + "\n\n" +
"Harga per Produk: " + hargaProduk + "\n\n" +
"Total Harga: " + totalHarga + "\n\n" +
"Metode Pembayaran: " + paymentMethod + "\n\n" +
"Web: " + urlWebpembeli+ "\n\n" +
"Catatan Tambahan:\n\n" + notes + "\n\n" + "\n\n" +
"Thumbnail Produk: " + productImage + "\n\n" +
"-------------------------------------" + "\n\n" + "Mohon sertakan invoice";
} else if (opsiMetode === "Email") {
var subject = "Pesanan " + productName;
message = "Saya ingin membeli ini:\n\n" +
"-------------------------------------\n\n" +
"Nama Produk: " + productName + "\n\n" +
"Jumlah: " + quantity + "\n\n" +
"Harga per Produk: " + hargaProduk + "\n\n" +
"Total Harga: " + totalHarga + "\n\n" +
"Metode Pembayaran: " + paymentMethod + "\n\n" +
"Web: " + urlWebpembeli+ "\n\n" +
"Catatan Tambahan:\n\n" + notes + "\n\n" + "\n\n" +
"Thumbnail Produk: " + productImage + "\n\n" +
"-------------------------------------" + "\n\n" + "Mohon sertakan invoice";
} else if (opsiMetode === "Telegram") {
message =
"Nama : " + namaInput+ "\n\n" +
"Alamat : " + alamatInput+ "\n\n" +
"Email : " + emailInput+ "\n\n" +
"No.Telp : " + nomorTelpInput+ "\n\n" +
"#Saya_ingin_membeli_ini:\n\n" +
"-------------------------------------\n\n" +
"Nama Produk : " + productName + "\n\n" +
"Jumlah : " + quantity + "\n\n" +
"Harga per Produk : " + hargaProduk + "\n\n" +
"Total Harga : " + totalHarga + "\n\n" +
"Metode Pembayaran : " + paymentMethod + "\n\n" +
"Web: " + urlWebpembeli+ "\n\n" +
"Catatan Tambahan :\n\n" + notes + "\n\n" + "\n\n" +
"Thumbnail Produk : " + productImage + "\n\n" +
"-------------------------------------";
}
var linkRedirect = "";
var tgbtoken = token_bot_telegram;
var tbGroup = id_grup_telegram;
var gmailmu = gmailKamu;
var nomormu = nomorKamu;
if (opsiMetode === "WhatsApp") {
linkRedirect = `https://wa.me/${nomormu}?text=` + encodeURIComponent(message);
window.open(linkRedirect);
} else if (opsiMetode === "Email") {
linkRedirect = `mailto:${gmailmu}?subject=` + encodeURIComponent(subject) + "&body=" + encodeURIComponent(message);
window.open(linkRedirect);
} else if (opsiMetode === "Telegram") {
var file = document.getElementById("fileInput").files[0];
var pesan = message;
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append("chat_id", tbGroup);
formData.append("caption", pesan);
if (file) {
formData.append("document", file);
} else {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Silakan masukan ss/file bukti pembayaran terlebih dahulu!',
});
return;
}
Swal.fire({
title: 'Mengirim pesan...',
allowOutsideClick: false,
showConfirmButton: false,
willOpen: () => {
Swal.showLoading();
}
});
var url = `https://api.telegram.org/bot${tgbtoken}/sendDocument`;
xhr.open("POST", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
Swal.close();
Swal.fire({
icon: 'success',
title: 'Pesanan berhasil terkirim!, silahkan tunggu sampai admin mengkonfirmasi pesanan kamu',
showConfirmButton: true,
allowOutsideClick: false
});
console.log("Pesan dengan file berhasil dikirim ke grup Telegram!");
}
};
xhr.send(formData);
}
}
}
/*]]>*/
</script>
If you want to make it so that it doesn't display a popup, then delete the CSS, and if you want to display the checkout form where you want, then look for this line of code:
document.body.insertAdjacentHTML('beforeend', modalHtml);
Change to innerHTML like this
document.querySelector('.htmlcheckout').innerHTML = modalHtml;
Then place the .htmlcheckout element in your post or somewhere else.
<div class="htmlcheckout"></div>
lunapgr01@gmail.com
but there is a problem with telegram button and close button don't show up in pc
And for the unresponsive close button, you have to set the CSS yourself, I don't have a laptop so I can't measure it exactly.
Find the media query size for your laptop size and insert this CSS in it and set the max height section..
form#frmProduk {
width: -webkit-fill-available;
max-width: 600px;
height: 100%;
max-height: 800px;
}