Cara Mengonfigurasi Fitur Halaman Keranjang

Masuk ke Dashboard Blogger > pilih menu Halaman.

Klik tombol HALAMAN BARU.

Di kolom Judul, masukkan teks judul halaman, misalnya: Keranjang/Cart.

Pilih mode Tampilan HTML.

Salin dan tempel kode berikut:

<div class="cart_page hidden">
  <div class="cart_page__content">
    <div class="cart_page__main">
      <div class="cart_page__list"></div>
    </div>
    <div class="cart_page__sidebar">
      <div class="cart_page__summary">
        <div class="elementskit_alert alert_warning" style="margin:0 0 15px;">
          <div class="alert_message">Harga belum termasuk ongkos kirim.</div>
        </div>
        <div class="checkout_page__sub_heading">Ringkasan Belanja</div>
        <div class="cart_page__summary_item">
          <div>Total</div>
          <div class="cart_page__total_price" data-price="0">0</div>
        </div>
        <div class="cart_page__cta">
          <button class="cart_page__checkout_button elementskit_button small unelevated font_bold" type="button">Checkout</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="checkout_page hidden">
  <h2 class="c">Checkout</h2>
  <div class="checkout_page__content">
    <div class="checkout_page__main">
      <!--[ Start: Shipping Address ]-->
      <div class="checkout_page__shipping_address">
        <div class="checkout_page__sub_heading">Alamat Pengiriman</div>
        <div class="checkout_page__form">
          <div class="checkout_page__form_group">
            <label>Nama<span>*</span></label>
            <input aria-label="Nama" autocomplete="off" class="elementskit_input input_name" placeholder="Masukkan nama lengkap Anda" type="text"/>
          </div>
          <div class="checkout_page__form_group">
            <label>Email<span>*</span></label>
            <input aria-label="Email" autocomplete="off" class="elementskit_input input_email" placeholder="Masukkan alamat email Anda" type="email"/>
          </div>
          <div class="checkout_page__form_group">
            <label>Alamat Lengkap<span>*</span></label>
            <textarea class="input_address" placeholder="Masukkan alamat pengiriman lengkap (termasuk RT/RW, kelurahan, kecamatan, kota, dan kode pos)"></textarea>
          </div>
        </div>
        <div class="checkout_page__switch_button">
          <div>Saya membeli produk digital</div>
          <div>
            <span></span>
          </div>
        </div>
      </div>
      <!--[ End: Shipping Address ]-->

      <!--[ Start: Purchased Products ]-->
      <div class="checkout_page__purchased_products">
        <div class="checkout_page__sub_heading">Keranjang</div>
        <div class="checkout_page__purchased_products_list"></div>
      </div>
      <!--[ End: Purchased Products ]-->
    </div>
    <div class="checkout_page__sidebar">
      <div class="checkout_page__summary">
        <div class="checkout_page__summary_start">
          <div class="elementskit_alert alert_warning" style="margin:0 0 15px;">
            <div class="alert_message">Harga belum termasuk ongkos kirim.</div>
          </div>
          <div class="checkout_page__sub_heading">Metode Pembayaran</div>
          <button class="checkout_page__add_payment_button elementskit_button outlined fab extended font_bold" type="button">Tambahkan metode pembayaran <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path></svg></button>
        </div>
        <div class="checkout_page__summary_end">
          <div class="checkout_page__sub_heading">Ringkasan Belanja</div>
          <div class="checkout_page__total_price">
            <div>Total Harga (<span class="checkout_page__total_qty">0</span> Barang)</div>
            <div data-price="0">0</div>
          </div>
          <div class="checkout_page__total_shipping_cost hidden">
            <div>Total Ongkos Kirim</div>
            <div data-price="0">0</div>
          </div>
          <div class="checkout_page__total_admin_fee">
            <div>Total Biaya Admin</div>
            <div data-price="0">0</div>
          </div>
          <div class="checkout_page__total_billed">
            <div>Total Tagihan</div>
            <div data-price="0">0</div>
          </div>
          <div class="checkout_page__cta">
            <button class="checkout_page__pay_button elementskit_button unelevated fab extended font_bold disabled" type="button"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M21,11C21,16.55 17.16,21.74 12,23C6.84,21.74 3,16.55 3,11V5L12,1L21,5V11M12,21C15.75,20 19,15.54 19,11.22V6.3L12,3.18L5,6.3V11.22C5,15.54 8.25,20 12,21M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9"></path></svg> Bayar Sekarang</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="invoice_page hidden">
  <div class="invoice_page__container">
    <div class="invoice_page__header">
      <div class="invoice_page__title">Selesaikan pembayaran dalam</div>
      <div class="invoice_page__timer">00:00:00</div>
      <div class="invoice_page__subtitle">Batas Akhir Pembayaran</div>
      <div class="invoice_page__deadline">Jumat, 22 April 2022 00:00</div>
    </div>
    <div class="invoice_page__body">
      <div class="invoice_page__payment_info">
        <div class="invoice_page__payment_header">
          <div class="invoice_page__bank_name">Nama Bank</div>
          <div class="invoice_page__bank_logo">
            <img alt="Bank Logo" src="https://blogger.googleusercontent.com/img/a/AVvXsEgnFnDWDClL2c7mr5Dns19svBACuUkljqhGNiQZ8dbuAPuQoa17QdFjLukiBf_z0Sa3usqKW3fZakQ92Ua89B2P-s2TgPHp331qf56T9JOURFai1OKa2j_7OPbYFwqo4jNUtjtmxL8thz83xjWn_XK4dcrUoDN8C8gtC0MxM9mT0WSiWfameP6bXNBVqPNS=s614"/>
          </div>
        </div>
        <div class="invoice_page__payment_body">
          <div class="invoice_page__payment_row">
            <div class="invoice_page__payment_column">
              <div class="invoice_page__payment_info_group">
                <div class="invoice_page__label">Nomor Rekening / Email</div>
                <div class="invoice_page__value a">0</div>
              </div>
              <div class="invoice_page__copy_button" data-message="Nomor Rekening / Email berhasil disalin">Salin <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg></div>
            </div>
            <div class="invoice_page__payment_column">
              <div class="invoice_page__payment_info_group">
                <div class="invoice_page__label">Total Tagihan</div>
                <div class="invoice_page__value b" data-price="0">0</div>
              </div>
              <div class="invoice_page__copy_button" data-message="Total pembayaran berhasil disalin">Salin <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="invoice_page__footer">
      <div class="invoice_page__confirmation">
        <a class="elementskit_button button_large unelevated fab extended font_bold" href="#" target="_blank">
          <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z"></path></svg> Konfirmasi pembayaran
        </a>
      </div>
      <div class="invoice_page__guide">
        <h2 class="c">Cara Pembayaran</h2>
        <ol>
          <li><b>Lakukan Pembayaran</b>: Silakan lakukan pembayaran menggunakan metode yang tersedia (QRIS, transfer bank, e-wallet, atau gerai retail) ke rekening atau tujuan yang tertera.</li>
          <li><b>Bayar Sesuai Nominal</b>: Pastikan jumlah yang dibayarkan sesuai dengan total tagihan Anda.</li>
          <li><b>Konfirmasi Pembayaran</b>: Setelah pembayaran berhasil, klik tombol <b>Konfirmasi Pembayaran</b>, lalu ikuti langkah selanjutnya hingga terkirim melalui WhatsApp. Mohon lampirkan bukti transfer saat mengirimkan konfirmasi tersebut.</li>
        </ol>
        <div class="elementskit_alert alert_warning" style="margin:15px 0 0;">
          <div class="alert_message">Catatan: Mohon selesaikan pembayaran sebelum batas waktu yang ditentukan untuk menghindari pembatalan.</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="cart_page__empty">
  <h2 class="c">Wah, keranjang belanjamu kosong</h2>
  <p>Yuk, isi dengan barang-barang impianmu!</p>
  <a class="elementskit_button button_large small unelevated rounded font_bold" href="/">Mulai Belanja</a>
</div>

<div class="payment_method_modal">
  <div class="payment_method_modal__dialog">
    <div class="payment_method_modal__header">
      <button class="payment_method_modal__close_button elementskit_button small button_dark fab" type="button">
        <svg aria-hidden="true" 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>
      <div class="payment_method_modal__title">Tambahkan Metode Pembayaran</div>
    </div>
    <div class="payment_method_modal__body"></div>
  </div>
</div>

<style>
body {
  background:var(--color-surface-bg-4);
}
.post_card {
  max-width:896px;
  margin:0 auto;
}
h1.post_entry_title {
  font-size:24px;
  margin-bottom:15px;
}
</style>

Setelah semua dikonfigurasi klik tombol PUBLIKASIKAN.

Masuk ke Dashboard Blogger > pilih menu Tata Letak.

Cari bagian yang berjudul Settings.

Klik tombol edit (ikon pensil) di Template Code (HTML/JavaScript gadget).

Akan muncul pop up konfigurasi Widget.

Di kolom Judul, biarkan pengaturan tetap pada nilai default.

Di kolom Konten, atur URL pada variabel linkToCartPage, misalnya: https://gmp.gilatemax.com/p/cart.html.

Setelah semua dikonfigurasi klik tombol SIMPAN.