405 lines
13 KiB
Vue
405 lines
13 KiB
Vue
<script>
|
|
import Layout from "../../layouts/main";
|
|
import PageHeader from "../../components/page-header";
|
|
|
|
/**
|
|
* Product-cart component
|
|
*/
|
|
export default {
|
|
components: {
|
|
Layout,
|
|
PageHeader,
|
|
},
|
|
data() {
|
|
return {
|
|
title: "Cart",
|
|
items: [
|
|
{
|
|
text: "Ecommerce",
|
|
href: "/",
|
|
},
|
|
{
|
|
text: "Cart",
|
|
active: true,
|
|
},
|
|
],
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Layout>
|
|
<PageHeader :title="title" :items="items" />
|
|
<div class="row">
|
|
<div class="col-xl-8">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table
|
|
class="table table-centered mb-0 table-nowrap align-middle"
|
|
>
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Product</th>
|
|
<th>Product Desc</th>
|
|
<th>Price</th>
|
|
<th>Quantity</th>
|
|
<th colspan="2">Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<img
|
|
src="/images/product/img-1.png"
|
|
alt="product-img"
|
|
title="product-img"
|
|
class="avatar-md"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">
|
|
<a href="/ecommerce/product-detail" class="text-dark"
|
|
>Half sleeve T-shirt</a
|
|
>
|
|
</h5>
|
|
<p class="mb-0">
|
|
Color :
|
|
<span class="fw-medium">Maroon</span>
|
|
</p>
|
|
</td>
|
|
<td>$ 450</td>
|
|
<td>
|
|
<input
|
|
type="number"
|
|
value="2"
|
|
name="demo_vertical"
|
|
class="form-control"
|
|
style="width: 120px"
|
|
/>
|
|
</td>
|
|
<td>$ 900</td>
|
|
<td>
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="action-icon text-danger"
|
|
>
|
|
<i class="mdi mdi-trash-can font-size-18"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<img
|
|
src="/images/product/img-2.png"
|
|
alt="product-img"
|
|
title="product-img"
|
|
class="avatar-md"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">
|
|
<a href="/ecommerce/product-detail" class="text-dark"
|
|
>Light blue T-shirt</a
|
|
>
|
|
</h5>
|
|
<p class="mb-0">
|
|
Color :
|
|
<span class="fw-medium">Light blue</span>
|
|
</p>
|
|
</td>
|
|
<td>$ 225</td>
|
|
<td>
|
|
<input
|
|
type="number"
|
|
value="1"
|
|
name="demo_vertical"
|
|
class="form-control"
|
|
style="width: 120px"
|
|
/>
|
|
</td>
|
|
<td>$ 225</td>
|
|
<td>
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="action-icon text-danger"
|
|
>
|
|
<i class="mdi mdi-trash-can font-size-18"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<img
|
|
src="/images/product/img-3.png"
|
|
alt="product-img"
|
|
title="product-img"
|
|
class="avatar-md"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">
|
|
<a href="/ecommerce/product-detail" class="text-dark"
|
|
>Black Color T-shirt</a
|
|
>
|
|
</h5>
|
|
<p class="mb-0">
|
|
Color :
|
|
<span class="fw-medium">Black</span>
|
|
</p>
|
|
</td>
|
|
<td>$ 152</td>
|
|
<td>
|
|
<input
|
|
type="number"
|
|
value="2"
|
|
name="demo_vertical"
|
|
class="form-control"
|
|
style="width: 120px"
|
|
/>
|
|
</td>
|
|
<td>$ 304</td>
|
|
<td>
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="action-icon text-danger"
|
|
>
|
|
<i class="mdi mdi-trash-can font-size-18"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<img
|
|
src="/images/product/img-4.png"
|
|
alt="product-img"
|
|
title="product-img"
|
|
class="avatar-md"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">
|
|
<a href="/ecommerce/product-detail" class="text-dark"
|
|
>Hoodie (Blue)</a
|
|
>
|
|
</h5>
|
|
<p class="mb-0">
|
|
Color :
|
|
<span class="fw-medium">Blue</span>
|
|
</p>
|
|
</td>
|
|
<td>$ 145</td>
|
|
<td>
|
|
<input
|
|
type="number"
|
|
value="2"
|
|
name="demo_vertical"
|
|
class="form-control"
|
|
style="width: 120px"
|
|
/>
|
|
</td>
|
|
<td>$ 290</td>
|
|
<td>
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="action-icon text-danger"
|
|
>
|
|
<i class="mdi mdi-trash-can font-size-18"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<img
|
|
src="/images/product/img-5.png"
|
|
alt="product-img"
|
|
title="product-img"
|
|
class="avatar-md"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">
|
|
<a href="/ecommerce/product-detail" class="text-dark"
|
|
>Half sleeve T-Shirt</a
|
|
>
|
|
</h5>
|
|
<p class="mb-0">
|
|
Color :
|
|
<span class="fw-medium">Light orange</span>
|
|
</p>
|
|
</td>
|
|
<td>$ 138</td>
|
|
<td>
|
|
<input
|
|
type="number"
|
|
value="1"
|
|
name="demo_vertical"
|
|
class="form-control"
|
|
style="width: 120px"
|
|
/>
|
|
</td>
|
|
<td>$ 138</td>
|
|
<td>
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="action-icon text-danger"
|
|
>
|
|
<i class="mdi mdi-trash-can font-size-18"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<img
|
|
src="/images/product/img-6.png"
|
|
alt="product-img"
|
|
title="product-img"
|
|
class="avatar-md"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">
|
|
<a href="/ecommerce/product-detail" class="text-dark"
|
|
>Green color T-shirt</a
|
|
>
|
|
</h5>
|
|
<p class="mb-0">
|
|
Color :
|
|
<span class="fw-medium">Green</span>
|
|
</p>
|
|
</td>
|
|
<td>$ 152</td>
|
|
<td>
|
|
<input
|
|
type="number"
|
|
value="2"
|
|
name="demo_vertical"
|
|
class="form-control"
|
|
style="width: 120px"
|
|
/>
|
|
</td>
|
|
<td>$ 304</td>
|
|
<td>
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="action-icon text-danger"
|
|
>
|
|
<i class="mdi mdi-trash-can font-size-18"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="col-sm-6">
|
|
<a href="/ecommerce/product-detail" class="btn btn-secondary">
|
|
<i class="mdi mdi-arrow-left me-1"></i> Continue Shopping
|
|
</a>
|
|
</div>
|
|
<!-- end col -->
|
|
<div class="col-sm-6">
|
|
<div class="text-sm-end mt-2 mt-sm-0">
|
|
<a href="/ecommerce/checkout" class="btn btn-success">
|
|
<i class="mdi mdi-cart-arrow-right me-1"></i> Checkout
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- end col -->
|
|
</div>
|
|
<!-- end row-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-4">Card Details</h5>
|
|
|
|
<div class="card bg-primary text-white visa-card mb-0">
|
|
<div class="card-body">
|
|
<div>
|
|
<i class="bx bxl-visa visa-pattern"></i>
|
|
|
|
<div class="float-end">
|
|
<i class="bx bxl-visa visa-logo display-3"></i>
|
|
</div>
|
|
|
|
<div>
|
|
<i class="bx bx-chip h1 text-warning"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-5">
|
|
<div class="col-4">
|
|
<p>
|
|
<i class="fas fa-star-of-life m-1"></i>
|
|
<i class="fas fa-star-of-life m-1"></i>
|
|
<i class="fas fa-star-of-life m-1"></i>
|
|
</p>
|
|
</div>
|
|
<div class="col-4">
|
|
<p>
|
|
<i class="fas fa-star-of-life m-1"></i>
|
|
<i class="fas fa-star-of-life m-1"></i>
|
|
<i class="fas fa-star-of-life m-1"></i>
|
|
</p>
|
|
</div>
|
|
<div class="col-4">
|
|
<p>
|
|
<i class="fas fa-star-of-life m-1"></i>
|
|
<i class="fas fa-star-of-life m-1"></i>
|
|
<i class="fas fa-star-of-life m-1"></i>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<h5 class="text-white float-end mb-0">12/22</h5>
|
|
<h5 class="text-white mb-0">Fredrick Taylor</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title mb-3">Order Summary</h4>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td>Grand Total :</td>
|
|
<td>$ 1,857</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Discount :</td>
|
|
<td>- $ 157</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Shipping Charge :</td>
|
|
<td>$ 25</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Estimated Tax :</td>
|
|
<td>$ 19.22</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Total :</th>
|
|
<th>$ 1744.22</th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- end table-responsive -->
|
|
</div>
|
|
</div>
|
|
<!-- end card -->
|
|
</div>
|
|
</div>
|
|
<!-- end row -->
|
|
</Layout>
|
|
</template>
|