This repository was archived by the owner on Feb 4, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
Expand file tree
/
Copy pathcart.html
More file actions
71 lines (70 loc) · 7.01 KB
/
cart.html
File metadata and controls
71 lines (70 loc) · 7.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
---
layout: cart-page
title: Keranjang Belanja
value: cart
permalink: /p=p62s_cart.html
---
<style>
.keranjang.dekstop{position:relative;width:60px;text-align:left;padding:5px 0;-webkit-box-ordinal-group:3;-ms-flex-order:3;order:3;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.notif-tambah-product{width:255px;position:absolute;z-index:99;font-size:14px;right:-10px;background:#00b35e;padding:10px 20px;opacity:1;display:none;color:#fff;top:65px;border-radius:15px;-webkit-box-shadow:0 2px 5px 0 rgba(56,56,56,.49);box-shadow:0 2px 5px 0 rgba(56,56,56,.49);}
.keranjang .simpleCart_quantity{width:20px;height:20px;background:#ff0000;position:absolute;border-radius:100%;color:#ffffff;text-align:center;line-height:20px;font-size:12px;z-index:3}
.keranjang.dekstop .simpleCart_quantity{top:3px;left:30px;}
.keranjang-box{overflow-x:hidden;overflow-y:auto}
.keranjang-box .close-keranjang{position:absolute;right:15px;padding:5px;border:1px solid #ddd;border-radius:15px;font-size:10px;font-weight:600}
.keranjang-box .close-keranjang a.tombol-bukatutup{width:auto;background:transparent;color:#444444;padding:0 2px}
.background-transparent-box{position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);display:none;}
.keranjang.dekstop .keranjang-icon{display:inline-block;padding:7px;margin:3px 0 3px 5px;border-radius:20px;width:24px;height:24px;cursor:pointer;-webkit-transition:all .2s;transition:all .2s}
.keranjang.dekstop .keranjang-icon svg{height:22px;width:22px;display:inline-block;}
.keranjang.dekstop .keranjang-icon path{fill:#ffffff;}
@media only screen and (max-width:727px){.is-post .keranjang.mobile,.keranjang.dekstop{display:none;}.is-post .keranjang.dekstop{display:block;}.keranjang.mobile{position:relative;display:block;width:100%;text-align:center;}.keranjang.mobile .keranjang-icon{display:block;width:100%;height:100%;text-align:center;margin:0 auto;border-ridius:0;}.keranjang.mobile .keranjang-icon svg{position:relative;display:block;margin:0 auto;width:36px;height:36px;}.keranjang.mobile .keranjang-icon path{fill:#444444;}.keranjang.mobile .simpleCart_quantity{top:-5px;left:50%;}}
/* Tabel Daftar Belanja*/
.keranjang-box .simpleCart_items::-webkit-scrollbar{width:2px;background-color:transparent}
.keranjang-box:hover .simpleCart_items::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:5px}
.keranjang-box .headerRow,.keranjang-box .item-price{display:none}
.keranjang-box .simpleCart_items{max-height: 253px;overflow-y:auto;margin-bottom:20px;padding: 10px 10px 0 10px;box-shadow: inset #000 0px -5px 8px -6px, inset #000 0 5px 8px -6px;border-radius: 3px;}
.keranjang-box .itemRow{overflow:hidden;font-size:12px;line-height:1.5;width:100%;font-weight:700;display:inline-block;margin-bottom: 10px;}
.keranjang-box .simpleCart_items::after {content: "";text-align: center;z-index: 0;position: absolute;top: 50px;left: 50%;padding: 10px;transform: translate(-50%,-45%);max-width: 500px;width: 90%;overflow: hidden;margin: auto;}
.keranjang-box .item-thumb{float:left}
.keranjang-box .item-thumb img{width:95px;height:auto;border-radius:.3rem;float:left;margin:0 10px 0 0}
.keranjang-box .item-decrement,.item-quantity,.keranjang-box .item-increment{font-size:12px;display:table-cell}
.keranjang-box .item-berat {display: none;}
.keranjang-box .item-totalberat {display: none;}
.keranjang-box .item-name{font-size:13px;display:inline-block}
.keranjang-box .item-pilihan1,.keranjang-box .item-pilihan2,.keranjang-box .item-varian1,.keranjang-box .item-varian2,.item-total{font-size:10px}
.keranjang-box .item-pilihan1,.keranjang-box .item-pilihan2{float:left;margin-right:5px}
.keranjang-box .item-quantity{padding:0 10px;font-size:14px;vertical-align:middle}
.keranjang-box .item-total{color:#ff460c;font-weight:600;font-size:14px}
.keranjang-box sp.sub-total{display:inline-block;color:#333}
.keranjang-box .item-remove,.simpleCart_items .item-remove{float:right;display:block;position:relative;}
.keranjang-box .item-link {margin: 3px -5px -5px;padding: 3px 5px;}
.keranjang-box .simpleCart_increment{background-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z' fill='%23a6a6ad'/></svg>")!important}
.keranjang-box .simpleCart_increment,.keranjang-box .simpleCart_decrement{width:20px;height:20px;cursor:pointer;display:inline-block;background-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,13H17V11H7' fill='%23a6a6ad'/></svg>");background-size:20px 20px;background-position:center center;background-repeat:no-repeat;vertical-align:middle;text-indent:-9999px}
.keranjang-box .item-remove a.simpleCart_remove,.simpleCart_items .item-remove a.simpleCart_remove{display:block;width:20px;height:20px;background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19M8.46,11.88L9.87,10.47L12,12.59L14.12,10.47L15.53,11.88L13.41,14L15.53,16.12L14.12,17.53L12,15.41L9.88,17.53L8.47,16.12L10.59,14L8.46,11.88M15.5,4L14.5,3H9.5L8.5,4H5V6H19V4H15.5Z' fill='%23a6a6ad'/></svg>") no-repeat;text-indent:-9999px;background-size:20px}
.keranjang-box a.view-cart,.keranjang-box a.tombol-bukatutup{position:relative;display:inline-block;color:#ffffff;padding:5px 10px;border-radius:15px;text-align:center;width:40%}
.keranjang-box a.view-cart{background:#20d374}
.keranjang-box a.tombol-bukatutup{background:#ff5621}
.keranjang-box a.view-cart:after{content: "Bayar Sekarang";}
.keranjang-box a.view-cart.active:after{content: "Tutup";}
.keranjang-box .ck-btn{margin-bottom:10px;text-align:center}
.keranjang-box .harga-total{margin:0 0 10px;padding:10px;font-size:14px;font-weight:500}
.keranjang-box span.simpleCart_total{font-size:16px;font-weight:600;color:#ff460c}
#jam, #menit, #detik{display:inline-block;}
#jam-digital,#hasil,.wrapper-footer,.fab{display:none;}
.produk-page {margin:0px!important;}
span.simpleCart_shipping, span.simpleCart_grandTotal {font-weight: 600;color:#ff460c;}
</style>
<ion-card class="cart-page">
<ion-list>
<ion-list-header> Keranjang Belanja <ion-note color="primary" class="simpleCart_quantity" slot="end"></ion-note></ion-list-header>
<ion-item-sliding>
<div class="keranjang-box simplecart-cart">
<div class="simpleCart_items"></div>
</ion-item-sliding>
<div class="harga-total">
<span>Grand Total: </span><span class="simpleCart_quantity"></span> items = <span class="simpleCart_total"></span>
<ion-button class="co-btn item_add" style="float: right;" onclick="checkOut()">CheckOut</ion-button><br />
<span style="font-size:10px;">( *Belum Termasuk Ongkir )</span>
</div>
</div>
</ion-list>
</ion-card>