Cara Mengonfigurasi Halaman Keranjang
Table of Contents
How to Install a Cart Page
Put this code in Blogger Page menu.
<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>Cart Page URL Configuration
-
Go to Blogger Dashboard > select the Layout menu .
-
Look for the section titled Settings .
-
Click the edit button (pencil icon) in Template Code (HTML/JavaScript Gadget) .
-
The Widget configuration pop up will appear.
-
In the Title column leave the settings at the default values.
-
In the Content column, find the code
var linkToCartPage. Set it to the value, for example like this URL:/p/cart.html. -
Once everything is configured, click the SAVE button at the bottom.
- Finished
If you want to report some bugs, you can write them in the comments section on the page.Bug Reportand if you want to request a new feature or want to give feedback, please write it in the comments section on the pageRequest and Feedback.