262 lines
21 KiB
PHP
262 lines
21 KiB
PHP
@extends('web.themes.shella.layouts.app')
|
|
|
|
@push('header-css')
|
|
<style>
|
|
.rimage__img {
|
|
object-fit: contain;
|
|
position: inherit !important;
|
|
}
|
|
.cart__sidebar .h6 {
|
|
font-size: 18px !important;
|
|
}
|
|
.shipping-method-text {
|
|
color: #041323;
|
|
margin-bottom: 5px;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('header-javascript')
|
|
<script>
|
|
window.Lara.orderTime = @json($orderTime);
|
|
</script>
|
|
@endpush
|
|
|
|
@push('footer-javascript')
|
|
<script src="/web/shella/scripts/cs/cart-page-container.js"></script>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<main id="MainContent">
|
|
<div class="breadcrumbs mt-15">
|
|
<div class="container">
|
|
<ul class="list-unstyled d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
|
|
<li style="font-size: 1.6em;"><a href="/">{{ __('Home') }}</a></li>
|
|
<li style="font-size: 1.6em;"><span>{{ __('My Cart') }}</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{{-- <h1 class="h3 mt-20 mb-30 text-center">{{ __('Shopping Bag') }}</h1> --}}
|
|
<br><br>
|
|
|
|
<div class="cart mb-60 mb-lg-70" id="cart-container">
|
|
<div class="container">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-8 col-xl-9">
|
|
<div class="cart__items">
|
|
<div class="cart__head pb-10 border-bottom">
|
|
<div class="row">
|
|
<div class="d-none d-sm-block col-sm-5 col-lg-4 col-xl-5">
|
|
<label class="m-0 text-uppercase">{{ __('Products') }}</label>
|
|
</div>
|
|
<div class="col-sm-7 col-lg-8 col-xl-7">
|
|
<div class="row">
|
|
<div class="col col-sm-3 col-lg-4">
|
|
<label class="m-0 text-uppercase text-lg-right">{{ __('Price') }}</label>
|
|
</div>
|
|
<div class="col col-sm-3 col-lg-4 text-center text-lg-left">
|
|
<label class="m-0 text-uppercase text-lg-right">{{ __('Quantity') }}</label>
|
|
</div>
|
|
<div class="col col-sm-3 col-lg-4 text-lg-left">
|
|
<label class="m-0">{{ __('Total') }}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Vue products --}}
|
|
<div class="py-20 border-bottom" v-for="(product, index) in products" :key="product.id">
|
|
<div class="row d-flex align-items-center flex-column flex-sm-row">
|
|
<div class="col-sm-5 col-lg-4 col-xl-5 d-flex align-items-center mb-20 mb-sm-0">
|
|
<a href="#" class="mr-20" @click="removeCartItem(product.id)">
|
|
@{{ index + 1 }}
|
|
</a>
|
|
<div class="d-flex align-items-center align-items-sm-start align-items-xl-center flex-sm-column flex-xl-row w-100">
|
|
<a :href="routeFor(product.slug)" class="cart__image mb-sm-15 mb-xl-0 mr-20 mr-sm-0 mr-xl-20">
|
|
<div class="rimage">
|
|
<img :src="product.image" class="rimage__img"
|
|
{{-- data-aspect-ratio="0.7798440311937612" --}}
|
|
{{-- :data-srcset="imageFor(product.image)" --}}
|
|
:alt="product.slug">
|
|
</div>
|
|
</a>
|
|
<div class="d-flex flex-column">
|
|
<a
|
|
v-html="product.name"
|
|
:href="routeFor(product.slug)"
|
|
></a>
|
|
{{-- <p class="mb-0">Pink / 34</p> --}}
|
|
<p class="mt-10 mb-0">@{{ product.brand?.name }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-7 col-lg-8 col-xl-7">
|
|
<div class="row d-flex align-items-center">
|
|
<div class="col col-sm-3 text-right">
|
|
<span class="price" data-js-product-price>
|
|
<span>
|
|
<span class=money>
|
|
@{{ product.price_amount }}
|
|
</span>
|
|
</span>
|
|
</span> TMT
|
|
</div>
|
|
<div class="col col-sm-3">
|
|
<input type="number"
|
|
class="mb-0 text-center text-sm-left"
|
|
:id="product.id"
|
|
:value="product.quantity"
|
|
@input="productQuantityChanged($event, product)"
|
|
min="1"
|
|
>
|
|
</div>
|
|
<div class="col col-sm-3 text-right">
|
|
<span class="price" data-js-product-price>
|
|
<span>
|
|
<span class=money :id="productTotalPriceId(product.id)">
|
|
@{{ priceFor(product) }}
|
|
</span>
|
|
</span>
|
|
</span> TMT
|
|
</div>
|
|
<div class="col col-sm-3 text-right">
|
|
<a href="#" class="mr-20" @click="removeCartItem(product.id)">
|
|
<i>
|
|
<svg
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
role="presentation"
|
|
class="icon icon-theme-165"
|
|
viewBox="0 0 24 24"
|
|
style="fill: #F44336;"
|
|
>
|
|
<path d="M4.741 21.654a.601.601 0 0 1-.186-.439v-15h-1.25a.598.598 0 0 1-.439-.186.597.597 0 0 1-.186-.439.6.6 0 0 1 .186-.439.604.604 0 0 1 .439-.186h5v-2.5a.6.6 0 0 1 .186-.439.598.598 0 0 1 .439-.186h6.25c.169 0 .315.063.439.186a.601.601 0 0 1 .186.439v2.5h5c.169 0 .315.063.439.186a.601.601 0 0 1 .186.439c0 .17-.062.316-.186.439a.601.601 0 0 1-.439.186h-1.25v15a.6.6 0 0 1-.186.439.601.601 0 0 1-.439.186H5.18a.598.598 0 0 1-.439-.186zM18.305 6.215h-12.5V20.59h12.5V6.215zM9.37 9.525a.601.601 0 0 1 .186.439v6.875c0 .17-.062.316-.186.439a.601.601 0 0 1-.439.186.598.598 0 0 1-.439-.186.598.598 0 0 1-.186-.439V9.965a.6.6 0 0 1 .186-.439.594.594 0 0 1 .438-.186c.169 0 .316.062.44.185zm.185-4.56h5V3.09h-5v1.875zm2.94 4.56a.601.601 0 0 1 .186.439v6.875c0 .17-.062.316-.186.439a.601.601 0 0 1-.439.186.598.598 0 0 1-.439-.186.598.598 0 0 1-.186-.439V9.965a.6.6 0 0 1 .186-.439.604.604 0 0 1 .439-.186c.168 0 .315.062.439.185zm2.246 0a.604.604 0 0 1 .439-.186c.169 0 .315.063.439.186a.601.601 0 0 1 .186.439v6.875c0 .17-.062.316-.186.439a.601.601 0 0 1-.439.186.598.598 0 0 1-.439-.186.598.598 0 0 1-.186-.439V9.965c0-.169.062-.316.186-.44z"/>
|
|
</svg>
|
|
</i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{{-- <div class="pt-20">
|
|
<div class="free-shipping position-relative px-6 py-3 text-lg-left js-free-shipping" data-value="90000">
|
|
<div class="free-shipping__progress position-absolute top-0 left-0 h-100" data-js-progress style="width: 100%;"></div>
|
|
<div class="free-shipping__text position-relative">
|
|
<i class="mr-3">
|
|
<svg aria-hidden="true" focusable="false" role="presentation"
|
|
class="icon icon-theme-127" viewBox="0 0 24 24">
|
|
<path d="M21.648 12.672c.104.052.188.13.254.234a.62.62 0 0 1 .098.332v5a.602.602 0 0 1-.186.439.601.601 0 0 1-.439.186h-2.559a3.043 3.043 0 0 1-1.074 1.787 3.03 3.03 0 0 1-1.992.713c-.756 0-1.42-.238-1.992-.713a3.028 3.028 0 0 1-1.074-1.787h-1.309a.597.597 0 0 1-.439-.186.6.6 0 0 1-.186-.439V4.488H2.625a.597.597 0 0 1-.439-.186A.597.597 0 0 1 2 3.863a.6.6 0 0 1 .186-.439.597.597 0 0 1 .439-.186h8.75a.6.6 0 0 1 .439.186c.123.124.186.27.186.439v2.5h5a.614.614 0 0 1 .586.41l1.797 4.766 2.265 1.133zM9.314 9.674c.123.124.186.27.186.439a.602.602 0 0 1-.186.439.601.601 0 0 1-.439.186h-3.75a.597.597 0 0 1-.439-.186.597.597 0 0 1-.186-.439.6.6 0 0 1 .186-.439.598.598 0 0 1 .439-.186h3.75a.6.6 0 0 1 .439.186zm0 3.125c.123.124.186.27.186.439a.602.602 0 0 1-.186.439.601.601 0 0 1-.439.186h-2.5a.597.597 0 0 1-.439-.186.6.6 0 0 1-.186-.439.6.6 0 0 1 .186-.439.598.598 0 0 1 .439-.186h2.5a.6.6 0 0 1 .439.186zm11.436 4.814v-3.984l-2.148-1.074a.635.635 0 0 1-.195-.146.557.557 0 0 1-.117-.205l-1.719-4.59H12v10h.684a3.033 3.033 0 0 1 1.074-1.787 3.026 3.026 0 0 1 1.992-.713 3.03 3.03 0 0 1 1.992.713 3.041 3.041 0 0 1 1.074 1.787h1.934zm-3.936-6.064c.123.124.186.27.186.439a.602.602 0 0 1-.186.439.601.601 0 0 1-.439.186h-2.5a.597.597 0 0 1-.439-.186.6.6 0 0 1-.186-.439v-2.5a.6.6 0 0 1 .186-.439.598.598 0 0 1 .439-.186.6.6 0 0 1 .439.186c.123.124.186.27.186.439v1.875h1.875a.6.6 0 0 1 .439.186zm.264 8.017a1.81 1.81 0 0 0 .547-1.328 1.81 1.81 0 0 0-.547-1.328 1.812 1.812 0 0 0-1.328-.547 1.81 1.81 0 0 0-1.328.547 1.808 1.808 0 0 0-.547 1.328c0 .521.182.964.547 1.328.364.365.807.547 1.328.547s.963-.182 1.328-.547z"/>
|
|
</svg>
|
|
</i>
|
|
<span data-js-text>Free Shipping</span>
|
|
</div>
|
|
</div>
|
|
</div> --}}
|
|
|
|
<div class="d-flex pt-25">
|
|
<a href="/" class="btn btn--text">
|
|
<i class="mb-4 mr-4">
|
|
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-012" viewBox="0 0 24 24">
|
|
<path d="M21.036 12.569a.601.601 0 0 1-.439.186H4.601l4.57 4.551c.117.13.176.28.176.449a.652.652 0 0 1-.176.449.877.877 0 0 1-.215.127.596.596 0 0 1-.468 0 .877.877 0 0 1-.215-.127l-5.625-5.625a2.48 2.48 0 0 1-.068-.107c-.02-.032-.042-.068-.068-.107a.736.736 0 0 1 0-.468 2.48 2.48 0 0 0 .068-.107c.02-.032.042-.068.068-.107l5.625-5.625a.652.652 0 0 1 .449-.176c.169 0 .319.059.449.176.117.13.176.28.176.449a.652.652 0 0 1-.176.449l-4.57 4.551h15.996a.6.6 0 0 1 .439.186.601.601 0 0 1 .186.439.599.599 0 0 1-.186.437z"/>
|
|
</svg>
|
|
</i>
|
|
<span class="text-uppercase">{{ __('Continue shopping') }}</span>
|
|
</a>
|
|
<button type="submit" class="btn btn--text ml-auto" @click="getCarts()">
|
|
<i class="mb-4 mr-4">
|
|
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-010" viewBox="0 0 24 24">
|
|
<path d="M19.769 3.417c.169.026.306.107.41.244s.144.29.117.459l-.645 4.824c-.013.156-.078.283-.195.381s-.254.146-.41.146h-.078l-4.824-.645c-.169-.026-.306-.107-.41-.244s-.144-.29-.117-.459a.547.547 0 0 1 .225-.41.616.616 0 0 1 .479-.117l3.594.469a7.853 7.853 0 0 0-2.705-2.48 7.327 7.327 0 0 0-3.584-.918c-1.028 0-1.999.195-2.91.586s-1.711.927-2.394 1.611S5.101 8.345 4.71 9.257a7.306 7.306 0 0 0-.586 2.91.598.598 0 0 1-.186.439c-.124.124-.271.186-.439.186s-.315-.062-.439-.186a.6.6 0 0 1-.186-.439c0-1.211.231-2.347.693-3.408a8.922 8.922 0 0 1 1.876-2.774A8.909 8.909 0 0 1 8.216 4.11a8.446 8.446 0 0 1 3.408-.693c.703 0 1.387.082 2.051.244a8.912 8.912 0 0 1 1.904.703 8.584 8.584 0 0 1 1.689 1.123c.521.443.983.938 1.387 1.484l.41-3.008a.652.652 0 0 1 .244-.42.57.57 0 0 1 .46-.126zM9.632 16.21a.547.547 0 0 1-.225.41.612.612 0 0 1-.479.117l-3.594-.469a7.818 7.818 0 0 0 2.705 2.48c.54.3 1.113.527 1.719.684s1.228.234 1.865.234c1.028 0 1.999-.195 2.91-.586s1.709-.928 2.393-1.611 1.221-1.481 1.611-2.393a7.3 7.3 0 0 0 .586-2.91.6.6 0 0 1 .186-.439c.124-.124.271-.186.439-.186s.315.062.439.186a.601.601 0 0 1 .186.439 8.443 8.443 0 0 1-.693 3.408 8.886 8.886 0 0 1-1.875 2.773 8.909 8.909 0 0 1-2.773 1.875 8.446 8.446 0 0 1-3.408.693 8.573 8.573 0 0 1-2.051-.244 8.912 8.912 0 0 1-1.904-.703 8.54 8.54 0 0 1-1.689-1.123 8.818 8.818 0 0 1-1.387-1.484l-.41 3.008a.653.653 0 0 1-.215.391.598.598 0 0 1-.41.156H3.48c-.169-.026-.306-.107-.41-.244s-.144-.29-.117-.459l.645-4.824a.547.547 0 0 1 .225-.41.584.584 0 0 1 .459-.117l4.824.645c.169.026.306.107.41.244s.143.29.116.459z"/>
|
|
</svg>
|
|
</i>
|
|
{{ __('Update bag') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-xl-3 mt-25 mt-lg-0">
|
|
<aside class="cart__sidebar p-20 border" v-if="products.length > 0">
|
|
<div v-if="orderShippingRegion != 'ag'" class="border-bottom border--dashed">
|
|
<div id="shipping-calculator" v-if="orderShippingRegion != 'ag'">
|
|
<h3 class="h6 mb-10">@{{ regionDeliveryMessage }}</h3>
|
|
{{-- <p class="mb-10">Enter your destination to get a shipping estimate.</p> --}}
|
|
<p class="shipping-calculator-info d-none mb-10"></p>
|
|
<div id="wrapper-response"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div :class="{'border-bottom': true, 'border--dashed': true, 'mt-15': orderShippingRegion != 'ag'}">
|
|
<p class="text-left h6 mb-5">@{{ translations.deliveryType }}</p>
|
|
<select class="swal2-select h6 m-0 rounded w-100 h-100 mb-10" id="order-shipping-method" v-model="orderShippingMethod">
|
|
<option value="standart">@{{ translations.delivery.standart }}</option>
|
|
<option value="express">@{{ translations.delivery.express }}</option>
|
|
<option value="on_own">@{{ translations.delivery.onOwn }}</option>
|
|
</select>
|
|
|
|
<p class="text-left h6 mb-5">@{{ translations.region }}</p>
|
|
<select class="swal2-select h6 m-0 rounded w-100 h-100 mb-10" id="order-shipping-region" v-model="orderShippingRegion">
|
|
<option v-for="(region, index) in translations.regions" :value="index" v-text="region"></option>
|
|
</select>
|
|
|
|
<div v-if="orderShippingRegion != 'ag'">
|
|
<p class="text-left h6 mb-5">@{{ translations.province }}</p>
|
|
<select class="swal2-select h6 m-0 rounded w-100 h-100 mb-10" v-model="orderShippingProvince">
|
|
<option v-for="(region, index) in regionsProvinces" :value="region.id">@{{ region.name.tk }}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div v-if="orderShippingRegion != 'ag' && orderShippingMethod === 'on_own'">
|
|
<p class="text-left h6 mb-5">@{{ translations.branch }}</p>
|
|
<select class="swal2-select h6 m-0 rounded w-100 h-100 mb-10" v-model="orderShippingBranch">
|
|
<option v-for="(branch, index) in regionsBranches" :value="branch.id">@{{ branch.name.tk }}</option>
|
|
</select>
|
|
</div>
|
|
<div v-show="orderShippingRegion == 'ag'">
|
|
<div v-if="orderShippingMethod == 'standart'">
|
|
<p class="text-left h6 mt-1 mb-5">@{{ translations.time }}</p>
|
|
<select class="swal2-select h6 m-0 mb-5 rounded w-100 h-100" id="order-client-time">
|
|
<optgroup :label="orderTime['dates']['today']">
|
|
<template v-for="time in orderTime['hours']['today']">
|
|
<option :value="time.hour + ', ' + time.date">@{{ time.hour }}</option>
|
|
</template>
|
|
</optgroup>
|
|
|
|
<optgroup :label="orderTime['dates']['tomorrow']">
|
|
<template v-for="time in orderTime['hours']['tomorrow']">
|
|
<option :value="time.hour + ', ' + time.date">@{{ time.hour }}</option>
|
|
</template>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- <div>
|
|
<label class="mb-10" for="CartSpecialInstructions">{{ __('Special Instructions For Seller') }}</label>
|
|
</div> --}}
|
|
{{-- <div>
|
|
<label class="mb-15" for="CartSpecialInstructions"><span class="mb-0">Add special
|
|
instructions for your order...</span></label>
|
|
</div> --}}
|
|
{{-- <textarea id="CartSpecialInstructions" rows="4"></textarea> --}}
|
|
</div>
|
|
<div class="pt-15">
|
|
<p class="shipping-method-text">{{ __('Shipping') }}: @{{ shippingTotal }} TMT</p>
|
|
|
|
<h5 class="mb-5">{{ __('Cart total') }}:</h5>
|
|
<h3 class="mb-5"><span class=money>@{{ totalPayment }} TMT</span></h3>
|
|
|
|
<input type="button" class="btn btn--full btn--secondary" name="checkout" value="{{ __('PROCEED TO CHECKOUT') }}" @click="openOrderModal()">
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
@stop
|