Cara Mengonfigurasi Halaman Keranjang
Table of Contents
Cara Memasang Halaman Keranjang
Pasang kode ini di menu Halaman Blogger.
<div class="pdp_cart hidden">
<div class="pdp_continue_shopping"><a href="/">Continue shopping</a></div>
<div class="pdp_cart_inner">
<div class="pdp_cart_left">
<ul></ul>
</div>
<div class="pdp_cart_right">
<div class="pdp_cart_summary">
<h2>Order summary</h2>
<div class="pdp_cart_total_item">
<span>Subtotal (<span class="pdp_cart_amount">0</span> items)</span>
<span class="pdp_cart_estimated_total" data-price="0">0</span>
</div>
<div class="pdp_cart_total_shipping">
<span>Shipping</span>
<span data-price="0">0</span>
</div>
<div class="pdp_cart_total_admin_fee">
<span>Admin Fee</span>
<span data-price="0">Calculated at checkout</span>
</div>
<div class="pdp_cart_total_price">
<span>Estimated total</span>
<span class="pdp_cart_estimated_total" data-price="0">0</span>
</div>
<div class="pdp_checkout_button">
<div class="pdp_cart_payment">
<h2>Choose how to pay</h2>
<ul>
<li class="selected"><div class="pdp_cart_option_left"></div><div class="pdp_cart_option_right">Pay <span class="pdp_cart_estimated_total" data-price="0">0</span> today</div></li>
</ul>
</div>
<button class="checkout_button gmp_button small filled fwm" type="button">Proceed to Checkout</button>
</div>
</div>
</div>
</div>
</div>
<div class="pdp_checkout">
<div class="pdp_go_back">
<button aria-label="Go Back Button" class="gmp_button fab small c" title="Go back" type="button"><svg fill="currentColor" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></button>
</div>
<div class="pdp_checkout_order">
<div class="pdp_checkout_order_left">
<h3>Your order</h3>
<div class="fieldset shipping" data-text="SHIPPING">
<div class="fa">
<span class="a"><i>Add shipping address</i><i></i></span> <span class="b"><svg fill="currentColor" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path></svg></span>
<span class="c hidden"></span>
</div>
<div class="fb hidden">
<span class="d"><i></i> (<i data-price="0">0</i>)</span>
<span class="e"></span>
</div>
</div>
<div class="disable_shipping_address">
<span>I do not require a shipping address</span>
<span><i></i></span>
</div>
<div class="fieldset payment" data-text="PAYMENT METHOD">
<span class="a">Add payment method</span> <span class="b"><svg fill="currentColor" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path></svg></span>
<span class="c hidden"></span> <span class="d hidden"></span>
</div>
<div class="pdp_checkout_modal m1">
<div class="pdp_checkout_modal_inner">
<div class="pdp_checkout_modal_title">
<button aria-label="Go Back Button" class="close_button gmp_button fab small c" title="Go back" type="button"><svg fill="currentColor" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></button>
<span>Add shipping address</span>
</div>
<div class="pdp_checkout_modal_field">
<div class="text_field outlined full_name">
<label>
<input placeholder=" "/>
<span>Full name</span>
</label>
<i>Full name required</i>
</div>
<div class="text_field outlined street_address">
<label>
<input placeholder=" "/>
<span>Street address</span>
</label>
<i>Street address required</i>
</div>
<div class="text_field outlined courier_note">
<label>
<input placeholder=" "/>
<span>Note to courier (optional)</span>
</label>
<i>House colors, benchmarks, special messages, etc.</i>
</div>
<div class="text_field outlined city">
<label>
<input placeholder=" "/>
<span>City</span>
</label>
<i>City required</i>
</div>
<div class="text_field outlined phone_number">
<label>
<input placeholder=" " type="number"/>
<span>Phone number</span>
</label>
<i>Phone number required</i>
</div>
<div class="menus" data-text="Shipping method">
<label>
<span>Choose shipping</span>
<svg fill="currentColor" viewBox="0 0 24 24"><path d="M7,10L12,15L17,10H7Z"></path></svg>
</label>
<i>Shipping method required</i>
<div class="menus_list"></div>
</div>
</div>
<div class="pdp_checkout_modal_save"><button class="gmp_button small filled fwm" type="button">Save and continue</button></div>
</div>
</div>
<div class="pdp_checkout_modal m2">
<div class="pdp_checkout_modal_inner">
<div class="pdp_checkout_modal_title">
<button aria-label="Close Button" class="close_button gmp_button fab small c" title="Close" type="button"><svg fill="currentColor" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg></button>
<span>Add payment method</span>
</div>
<div class="pdp_checkout_modal_list"></div>
</div>
</div>
<div class="pdp_purchased" data-text="CART">
<ul></ul>
<div class="load_more_items">Load more (+<span class="count">0</span>)</div>
</div>
</div>
<div class="pdp_checkout_order_right">
<div class="pdp_checkout_summary">
<h3>Order summary</h3>
<div class="pdp_checkout_total_item">
<span>Subtotal (<span class="pdp_checkout_amount">0</span> items)</span>
<span class="pdp_checkout_cart_total" data-price="0">0</span>
</div>
<div class="pdp_checkout_total_shipping">
<span>Shipping</span>
<span data-price="0">0</span>
</div>
<div class="pdp_checkout_total_admin_fee">
<span>Admin Fee</span>
<span data-price="0">0</span>
</div>
<div class="pdp_checkout_total_price">
<span>Total</span>
<span class="pdp_checkout_cart_total" data-price="0">0</span>
</div>
<div class="confirm_purchase_button">
<a class="whatsapp gmp_button small filled fwm disabled" href="javascript:;" rel="nofollow noopener" target="_blank">Confirm purchase via WhatsApp</a>
<div class="break"><span>or</span></div>
<a class="email gmp_button small outlined fwm c disabled" href="javascript:;" rel="nofollow noopener" target="_blank">Confirm purchase via Email</a>
</div>
</div>
</div>
</div>
</div>
<div class="pdp_cart_empty">
<h2>Your cart is empty</h2>
<a class="gmp_button small outlined fwm c" href="/">Continue shopping</a>
<div class="pdp_cart_empty_logo"><img alt="Empty Cart Logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHAieK0E9h1Cyiee4_8pULwRGne2ppuClPWD2-8SJ2X2gtwwfeVPvMlGyH2jMvraw0qniCR0hGTeI7h9MeSlWXY3trgQ7OEQs7y1YZKZaLwIe7cWdPRaCx7LGXbwLfAQeiKx5-YgQKIQlcVnM289Tji0AO-gONEGVhsZI4lLSoaN5Yn7uzcyQ8Wb-j1_2j/s1600/Empty%20Cart%20Logo.png"/></div>
</div>
<style>
.gmp_main:not(.gmp.ch .gmp_main) {
background-color:var(--color-surface-bg-10);
}
.gmp_main.c {
padding:15px 15px 60px;
}
.gmp.ch .gmp_main {
padding:30px 15px 60px;
}
.bottom_header_notification_bar, h1.post_entry_title {
display:none!important;
}
.header_title_bar {
display:block;
}
.header_left .menu_button, .main_navigation, .header_right .notify_button, .header_right .cart_button {
display:none!important;
}
@media screen and (max-width:800px) {
.gmp_header {
padding:0 5px 0 15px;
}
html[dir="rtl"] .gmp_header {
padding:0 15px 0 5px;
}
}
</style>Konfigurasi URL Halaman Keranjang
-
Masuk ke Dashboard Blogger > pilih menu Tata Letak.
-
Cari bagian yang berjudul Settings.
-
Klik tombol edit (ikon pensil) di Template Code (Gadget HTML/JavaScript).
-
Akan muncul pop up konfigurasi Widget.
-
Pada kolom Judul biarkan pengaturan tetap pada nilai default.
-
Pada kolom Konten cari kode
var linkToCartPage. Atur pada bagian nilainya, contohnya seperti URL ini:/p/cart.html. -
Setelah semuanya dikonfigurasi, klik tombol SIMPAN di bagian bawah.
- Selesai
Jika Anda ingin melaporkan beberapa bug, Anda dapat menuliskannya di bagian komentar pada halaman Bug Report dan jika Anda ingin meminta fitur baru atau ingin memberikan umpan balik, silakan tuliskan di bagian komentar pada halaman Request dan Feedback.