¨4.0.1¨
This commit is contained in:
¨NW¨
@@ -19,3 +19,12 @@
|
||||
{!! $tabs->render(compact('settings')) !!}
|
||||
</form>
|
||||
@endsection
|
||||
|
||||
@push('globals')
|
||||
@vite([
|
||||
'Themes/Storefront/resources/assets/admin/sass/main.scss',
|
||||
'Themes/Storefront/resources/assets/admin/js/main.js',
|
||||
'Modules/Media/Resources/assets/admin/sass/main.scss',
|
||||
'Modules/Media/Resources/assets/admin/js/main.js'
|
||||
])
|
||||
@endpush
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
justify-content: center;
|
||||
margin: auto;"
|
||||
>
|
||||
<img src="{{ $logo }}" style="max-height: 100%; max-width: 100%;" alt="logo">
|
||||
<img src="{{ $logo }}" style="max-height: 100%; max-width: 100%;" alt="Logo">
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
@@ -373,6 +373,34 @@
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@if ($product->hasAnyVariation())
|
||||
<tr>
|
||||
<td style="padding: 0;">
|
||||
<table style="border-collapse: collapse; width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
padding: 0 0 8px;"
|
||||
>
|
||||
@foreach ($product->variations as $variation)
|
||||
<span style="display: block;">
|
||||
{{ $variation->name }}:
|
||||
</span>
|
||||
|
||||
<span style="color: #9a9a9a; margin-left: 5px;">
|
||||
{{ $variation->values()->first()?->label }}{{ $loop->last ? "" : "," }}
|
||||
</span>
|
||||
@endforeach
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
@endif
|
||||
|
||||
@if ($product->hasAnyOption())
|
||||
<tr>
|
||||
<td style="padding: 0;">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -46,7 +46,7 @@
|
||||
margin: auto;
|
||||
padding: 16px 15px;"
|
||||
>
|
||||
<img src="{{ $logo }}" style="max-height: 100%; max-width: 100%;" alt="logo">
|
||||
<img src="{{ $logo }}" style="max-height: 100%; max-width: 100%;" alt="Logo">
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
margin: auto;
|
||||
padding: 16px 15px;"
|
||||
>
|
||||
<img src="{{ $logo }}" style="max-height: 100%; max-width: 100%;" alt="logo">
|
||||
<img src="{{ $logo }}" style="max-height: 100%; max-width: 100%;" alt="Logo">
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
margin: auto;
|
||||
padding: 16px 15px;"
|
||||
>
|
||||
<img src="{{ $logo }}" style="max-height: 100%; max-width: 100%;" alt="logo">
|
||||
<img src="{{ $logo }}" style="max-height: 100%; max-width: 100%;" alt="Logo">
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
margin: auto;
|
||||
padding: 16px 15px;"
|
||||
>
|
||||
<img src="{{ $logo }}" style="max-height: 100%; max-width: 100%;" alt="logo">
|
||||
<img src="{{ $logo }}" style="max-height: 100%; max-width: 100%;" alt="Logo">
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
margin: auto;
|
||||
padding: 16px 15px;"
|
||||
>
|
||||
<img src="{{ $logo }}" style="max-height: 100%; max-width: 100%;" alt="logo">
|
||||
<img src="{{ $logo }}" style="max-height: 100%; max-width: 100%;" alt="Logo">
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
margin: auto;
|
||||
padding: 16px 15px;"
|
||||
>
|
||||
<img src="{{ $logo }}" style="max-height: 100%; max-width: 100%;" alt="logo">
|
||||
<img src="{{ $logo }}" style="max-height: 100%; max-width: 100%;" alt="Logo">
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6 col-lg-7 col-md-18 error-page-right">
|
||||
<img src="{{ Theme::url('public/images/404.svg') }}" class="error-image" alt="error image">
|
||||
<img src="{{ asset('build/assets/404.svg') }}" class="error-image" alt="Error image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,8 +9,12 @@
|
||||
@endpush
|
||||
|
||||
@section('panel')
|
||||
<my-addresses :initial-addresses="{{ $addresses }}" :initial-default-address="{{ $defaultAddress }}"
|
||||
:countries="{{ json_encode($countries) }}" inline-template>
|
||||
<my-addresses
|
||||
:initial-addresses="{{ $addresses }}"
|
||||
:initial-default-address="{{ $defaultAddress }}"
|
||||
:countries="{{ json_encode($countries) }}"
|
||||
inline-template
|
||||
>
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h4>{{ trans('storefront::account.pages.my_addresses') }}</h4>
|
||||
@@ -21,14 +25,20 @@
|
||||
<div class="address-card-wrap" v-if="hasAddress && ! formOpen">
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-9 d-flex" v-for="address in addresses" :key="address.id">
|
||||
<address class="address-card" :class="{ active: defaultAddress.address_id === address.id }"
|
||||
@click="changeDefaultAddress(address)">
|
||||
<address
|
||||
class="address-card"
|
||||
:class="{ active: defaultAddress.address_id === address.id }"
|
||||
@click="changeDefaultAddress(address)"
|
||||
>
|
||||
<span class="badge" v-if="defaultAddress.address_id === address.id">
|
||||
{{ trans('storefront::account.addresses.default') }}
|
||||
</span>
|
||||
|
||||
<div class="address-card-data">
|
||||
<span v-text="address.full_name"></span>
|
||||
<span v-text="address.address_1"></span>
|
||||
<span v-if="address.address_2" v-text="address.address_2"></span>
|
||||
<span>@{{ address.city }}, @{{ address.state_name }}
|
||||
@{{ address.zip }}</span>
|
||||
<span>@{{ address.city }}, @{{ address.state_name }} @{{ address.zip }}</span>
|
||||
<span v-text="address.country_name"></span>
|
||||
</div>
|
||||
|
||||
@@ -46,8 +56,11 @@
|
||||
</div>
|
||||
|
||||
<div class="col-md-18">
|
||||
<button type="button" class="btn btn-lg btn-default btn-add-new-address"
|
||||
@click="formOpen = true">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-lg btn-default btn-add-new-address"
|
||||
@click="formOpen = true"
|
||||
>
|
||||
{{ trans('storefront::account.addresses.add_new_address') }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -147,10 +160,14 @@
|
||||
{{ trans('storefront::account.addresses.country') }}<span>*</span>
|
||||
</label>
|
||||
|
||||
<select :value="form.country" name="country" id="country"
|
||||
class="form-control arrow-black" @change="changeCountry($event.target.value)">
|
||||
<option v-for="(name, code) in countries" :value="code"
|
||||
v-text="name">
|
||||
<select
|
||||
:value="form.country"
|
||||
name="country"
|
||||
id="country"
|
||||
class="form-control arrow-black"
|
||||
@change="changeCountry($event.target.value)"
|
||||
>
|
||||
<option v-for="(name, code) in countries" :value="code" v-text="name">
|
||||
</option>
|
||||
</select>
|
||||
|
||||
@@ -186,13 +203,20 @@
|
||||
</div>
|
||||
|
||||
<div class="col-md-18">
|
||||
<button type="button" class="btn btn-lg btn-default btn-cancel" v-if="hasAddress"
|
||||
@click="cancel">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-lg btn-default btn-cancel"
|
||||
v-if="hasAddress"
|
||||
@click="cancel"
|
||||
>
|
||||
{{ trans('storefront::account.addresses.cancel') }}
|
||||
</button>
|
||||
|
||||
<button type="submit" class="btn btn-lg btn-primary btn-save-address"
|
||||
:class="{ 'btn-loading': loading }">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-lg btn-primary btn-save-address"
|
||||
:class="{ 'btn-loading': loading }"
|
||||
>
|
||||
{{ trans('storefront::account.addresses.save_address') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -18,6 +18,17 @@
|
||||
{{ $product->name }}
|
||||
</a>
|
||||
|
||||
@if ($product->hasAnyVariation())
|
||||
<ul class="list-inline product-options">
|
||||
@foreach ($product->variations as $variation)
|
||||
<li>
|
||||
<label>{{ $variation->name }}:</label>
|
||||
{{ $variation->values()->first()?->label }}{{ $loop->last ? "" : "," }}
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
|
||||
@if ($product->hasAnyOption())
|
||||
<ul class="list-inline product-options">
|
||||
@foreach ($product->options as $option)
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<li>
|
||||
<label>{{ trans('storefront::account.view_order.subtotal') }}</label>
|
||||
|
||||
<span class="price-amount">
|
||||
<span>
|
||||
{{ $order->sub_total->convert($order->currency, $order->currency_rate)->format($order->currency) }}
|
||||
</span>
|
||||
</li>
|
||||
@@ -12,7 +12,7 @@
|
||||
<li>
|
||||
<label>{{ $order->shipping_method }}</label>
|
||||
|
||||
<span class="price-amount">
|
||||
<span>
|
||||
{{ $order->shipping_cost->convert($order->currency, $order->currency_rate)->format($order->currency) }}
|
||||
</span>
|
||||
</li>
|
||||
@@ -22,7 +22,7 @@
|
||||
<li>
|
||||
<label>{{ $tax->name }}</label>
|
||||
|
||||
<span class="price-amount">
|
||||
<span>
|
||||
{{ $tax->order_tax->amount->convert($order->currency, $order->currency_rate)->format($order->currency) }}
|
||||
</span>
|
||||
</li>
|
||||
@@ -32,10 +32,10 @@
|
||||
<li>
|
||||
<label>
|
||||
{{ trans('storefront::account.view_order.coupon') }}
|
||||
<span class="coupon-code">[{{ $order->coupon->code }}]</span>
|
||||
<span class="coupon-code">({{ $order->coupon->code }})</span>
|
||||
</label>
|
||||
|
||||
<span class="price-amount">
|
||||
<span>
|
||||
-{{ $order->discount->convert($order->currency, $order->currency_rate)->format($order->currency) }}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
@@ -7,18 +7,20 @@
|
||||
@endsection
|
||||
|
||||
@section('panel')
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h4>{{ trans('storefront::account.pages.my_reviews') }}</h4>
|
||||
</div>
|
||||
<my-reviews inline-template>
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h4>{{ trans('storefront::account.pages.my_reviews') }}</h4>
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
@if ($reviews->isEmpty())
|
||||
<div class="empty-message">
|
||||
<h3>{{ trans('storefront::account.reviews.no_reviews') }}</h3>
|
||||
<div class="panel-body" :class="{ loading: fetchingReviews }" v-cloak>
|
||||
<div class="empty-message" v-if="reviewIsEmpty">
|
||||
<h3 v-if="!fetchingReviews">
|
||||
{{ trans('storefront::account.reviews.no_reviews') }}
|
||||
</h3>
|
||||
</div>
|
||||
@else
|
||||
<div class="table-responsive">
|
||||
|
||||
<div class="table-responsive" v-else>
|
||||
<table class="table table-borderless my-reviews-table">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -31,47 +33,57 @@
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
@foreach ($reviews as $review)
|
||||
<tr>
|
||||
<td>
|
||||
<div class="product-image">
|
||||
@if ($review->product->base_image->exists)
|
||||
<img src="{{ $review->product->base_image->path }}" alt="{{ $review->product->name }}">
|
||||
@else
|
||||
<img src="{{ asset('themes/storefront/public/images/image-placeholder.png') }}" class="image-placeholder">
|
||||
@endif
|
||||
</div>
|
||||
</td>
|
||||
<tr v-for="review in reviews.data" :key="review.id">
|
||||
<td>
|
||||
<div class="product-image">
|
||||
<img
|
||||
:src="baseImage(review.product)"
|
||||
:class="{ 'image-placeholder': ! hasBaseImage(review.product) }"
|
||||
:alt="review.product.name"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<a href="{{ route('products.show', ['slug' => $review->product->slug]) }}" class="product-name">
|
||||
{{ $review->product->name }}
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a :href="productUrl(review.product)" class="product-name">
|
||||
@{{ review.product.name }}
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge {{ $review->is_approved ? 'badge-success' : 'badge-secondary' }}">
|
||||
{{ $review->status() }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
class="badge"
|
||||
:class="review.is_approved ? 'badge-success' : 'badge-warning'"
|
||||
>
|
||||
@{{ review.status }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{{ $review->created_at->toFormattedDateString() }}
|
||||
</td>
|
||||
<td>
|
||||
@{{ review.created_at_formatted }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@include('public.account.reviews.partials.product_rating')
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
<td>
|
||||
<product-rating
|
||||
:rating-percent="review.rating_percent"
|
||||
>
|
||||
</product-rating>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-footer">
|
||||
{!! $reviews->links() !!}
|
||||
<div class="panel-footer">
|
||||
<v-pagination
|
||||
:total-page="totalPage"
|
||||
:current-page="currentPage"
|
||||
@page-changed="changePage"
|
||||
v-if="reviews.total > 10"
|
||||
>
|
||||
</v-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</my-reviews>
|
||||
@endsection
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
<div class="panel-body" :class="{ loading: fetchingWishlist }" v-cloak>
|
||||
<div class="empty-message" v-if="wishlistIsEmpty">
|
||||
<h3 v-if="! fetchingWishlist">
|
||||
<h3 v-if="!fetchingWishlist">
|
||||
{{ trans('storefront::account.wishlist.empty_wishlist') }}
|
||||
</h3>
|
||||
</div>
|
||||
@@ -36,7 +36,11 @@
|
||||
<tr v-for="product in products.data" :key="product.id">
|
||||
<td>
|
||||
<div class="product-image">
|
||||
<img :src="baseImage(product)" :class="{ 'image-placeholder': ! hasBaseImage(product) }" alt="product-image">
|
||||
<img
|
||||
:src="baseImage(product)"
|
||||
:class="{ 'image-placeholder': ! hasBaseImage(product) }"
|
||||
:alt="product.name"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@@ -47,11 +51,11 @@
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="product-price" v-html="product.formatted_price"></span>
|
||||
<span class="product-price" v-html="productPrice(product)"></span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-success" v-if="product.is_in_stock">
|
||||
<span class="badge badge-success" v-if="productIsInStock(product)">
|
||||
{{ trans('storefront::account.wishlist.in_stock') }}
|
||||
</span>
|
||||
|
||||
@@ -76,8 +80,8 @@
|
||||
<v-pagination
|
||||
:total-page="totalPage"
|
||||
:current-page="currentPage"
|
||||
@page-changed="fetchProducts"
|
||||
v-if="products.total > 20"
|
||||
@page-changed="changePage"
|
||||
v-if="products.total > 10"
|
||||
>
|
||||
</v-pagination>
|
||||
</div>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<ul class="list-inline social-login">
|
||||
@if (setting('facebook_login_enabled'))
|
||||
<li>
|
||||
<a href="{{ route('login.redirect', ['provider' => 'facebook']) }}" class="facebook" data-toggle="tooltip" data-placement="top" title="{{ trans('user::auth.facebook') }}">
|
||||
<a href="{{ route('login.redirect', ['provider' => 'facebook']) }}" class="facebook" title="{{ trans('user::auth.facebook') }}">
|
||||
<i class="lab la-facebook-f"></i>
|
||||
</a>
|
||||
</li>
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
@if (setting('google_login_enabled'))
|
||||
<li>
|
||||
<a href="{{ route('login.redirect', ['provider' => 'google']) }}" class="google" data-toggle="tooltip" data-placement="top" title="{{ trans('user::auth.google') }}">
|
||||
<a href="{{ route('login.redirect', ['provider' => 'google']) }}" class="google" title="{{ trans('user::auth.google') }}">
|
||||
<i class="lab la-google"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -84,9 +84,10 @@
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="form-group p-t-5">
|
||||
<div class="form-group p-t-5 captcha-field">
|
||||
@captcha
|
||||
<input type="text" name="captcha" id="captcha" class="captcha-input" placeholder="{{ trans('storefront::layout.enter_captcha_code') }}">
|
||||
|
||||
<input type="text" name="captcha" id="captcha" placeholder="{{ trans('storefront::layout.enter_captcha_code') }}">
|
||||
|
||||
@error('captcha')
|
||||
<span class="error-message">{{ $message }}</span>
|
||||
|
||||
@@ -12,9 +12,9 @@
|
||||
<div class="col-lg-3 col-md-6 col-9">
|
||||
<a href="{{ $brand->url() }}" class="brand-image">
|
||||
@if ($brand->logo->exists)
|
||||
<img src="{{ $brand->logo->path }}" alt="brand image">
|
||||
<img src="{{ $brand->logo->path }}" alt="Brand image">
|
||||
@else
|
||||
<img src="{{ asset('themes/storefront/public/images/image-placeholder.png') }}" class="image-placeholder" alt="brand image">
|
||||
<img src="{{ asset('build/assets/image-placeholder.png') }}" class="image-placeholder" alt="Brand image">
|
||||
@endif
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
@section('title', trans('storefront::cart.cart'))
|
||||
|
||||
@section('content')
|
||||
<cart-index inline-template v-cloak>
|
||||
<cart-index inline-template>
|
||||
<div>
|
||||
<section class="shopping-cart-wrap">
|
||||
<div class="container">
|
||||
@@ -13,7 +13,6 @@
|
||||
<div class="shopping-cart">
|
||||
<div class="shopping-cart-inner">
|
||||
@include('public.cart.index.cart_items')
|
||||
@include('public.cart.index.coupon')
|
||||
</div>
|
||||
|
||||
@include('public.cart.index.order_summary')
|
||||
|
||||
@@ -18,24 +18,34 @@
|
||||
<tbody>
|
||||
<tr v-for="cartItem in cart.items" :key="cartItem.id">
|
||||
<td>
|
||||
<div class="product-image">
|
||||
<a :href="productUrl(cartItem)" class="product-image">
|
||||
<img
|
||||
:src="baseImage(cartItem.product)"
|
||||
:class="{ 'image-placeholder': ! hasBaseImage(cartItem.product) }"
|
||||
alt="product image"
|
||||
:src="baseImage(cartItem)"
|
||||
:class="{ 'image-placeholder': !hasBaseImage(cartItem) }"
|
||||
:alt="cartItem.product.name"
|
||||
>
|
||||
</div>
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<a
|
||||
:href="productUrl(cartItem.product)"
|
||||
:href="productUrl(cartItem)"
|
||||
class="product-name"
|
||||
v-text="cartItem.product.name"
|
||||
>
|
||||
</a>
|
||||
|
||||
<ul class="list-inline product-options" v-cloak>
|
||||
<ul v-cloak v-if="Object.values(cartItem.variations).length !== 0" class="list-inline product-options">
|
||||
<li
|
||||
v-for="(variation, key, index) in cartItem.variations"
|
||||
:key="index"
|
||||
>
|
||||
<label>@{{ variation.name }}:</label>
|
||||
@{{ variation.values[0].label }}@{{ index === Object.values(cartItem.variations).length - 1 ? "" : "," }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul v-cloak v-if="Object.values(cartItem.options).length !== 0" class="list-inline product-options">
|
||||
<li v-for="option in cartItem.options">
|
||||
<label>@{{ option.name }}:</label> @{{ optionValues(option) }}
|
||||
</li>
|
||||
@@ -53,23 +63,34 @@
|
||||
|
||||
<div class="number-picker">
|
||||
<div class="input-group-quantity">
|
||||
<button type="button" class="btn btn-number btn-minus" data-type="minus" :disabled="cartItem.qty == 1">
|
||||
<i class="las la-angle-left"></i>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-number btn-minus"
|
||||
:disabled="cartItem.qty <= 1"
|
||||
@click="updateQuantity(cartItem, cartItem.qty - 1)"
|
||||
>
|
||||
-
|
||||
</button>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
:value="cartItem.qty"
|
||||
min="1"
|
||||
:max="cartItem.product.manage_stock ? cartItem.product.qty : ''"
|
||||
:max="maxQuantity(cartItem)"
|
||||
class="form-control input-number input-quantity"
|
||||
@input="updateQuantity(cartItem, $event.target.value)"
|
||||
@focus="$event.target.select()"
|
||||
@input="changeQuantity(cartItem, Number($event.target.value))"
|
||||
@keydown.up="updateQuantity(cartItem, cartItem.qty + 1)"
|
||||
@keydown.down="updateQuantity(cartItem, cartItem.qty - 1)"
|
||||
>
|
||||
|
||||
<button type="button" class="btn btn-number btn-plus" data-type="plus">
|
||||
<i class="las la-angle-right"></i>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-number btn-plus"
|
||||
:disabled="isQtyIncreaseDisabled(cartItem)"
|
||||
@click="updateQuantity(cartItem, cartItem.qty + 1)"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,7 +103,7 @@
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<button class="btn-remove" @click="remove(cartItem)">
|
||||
<button class="btn-remove" @click="removeCartItem(cartItem)">
|
||||
<i class="las la-times"></i>
|
||||
</button>
|
||||
</td>
|
||||
|
||||
@@ -9,68 +9,16 @@
|
||||
<li>
|
||||
<label>{{ trans('storefront::cart.subtotal') }}</label>
|
||||
|
||||
<span
|
||||
class="price-amount"
|
||||
v-html="cart.subTotal.inCurrentCurrency.formatted"
|
||||
>
|
||||
</span>
|
||||
<span v-text="cart.subTotal.inCurrentCurrency.formatted"></span>
|
||||
</li>
|
||||
|
||||
<li v-for="tax in cart.taxes">
|
||||
<label v-text="tax.name"></label>
|
||||
|
||||
<span
|
||||
class="price-amount"
|
||||
v-html="tax.amount.inCurrentCurrency.formatted"
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li v-if="hasCoupon" v-cloak>
|
||||
<label>
|
||||
{{ trans('storefront::cart.coupon') }}
|
||||
|
||||
<span class="coupon-code">
|
||||
[@{{ cart.coupon.code }}]
|
||||
<span class="btn-remove-coupon" @click="removeCoupon">
|
||||
<i class="las la-times"></i>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<span
|
||||
class="price-amount"
|
||||
v-html="'-' + cart.coupon.value.inCurrentCurrency.formatted"
|
||||
>
|
||||
</span>
|
||||
<span v-text="tax.amount.inCurrentCurrency.formatted"></span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="shipping-methods" v-if="hasShippingMethod" v-cloak>
|
||||
<h6>{{ trans('storefront::cart.shipping_method') }}</h6>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-radio" v-for="shippingMethod in cart.availableShippingMethods">
|
||||
<input
|
||||
type="radio"
|
||||
name="shipping_method"
|
||||
v-model="shippingMethodName"
|
||||
:value="shippingMethod.name"
|
||||
:id="shippingMethod.name"
|
||||
@change="updateShippingMethod(shippingMethod.name)"
|
||||
>
|
||||
|
||||
<label :for="shippingMethod.name" v-text="shippingMethod.label"></label>
|
||||
|
||||
<span
|
||||
class="price-amount"
|
||||
v-html="shippingMethod.cost.inCurrentCurrency.formatted"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-summary-total">
|
||||
<label>{{ trans('storefront::cart.total') }}</label>
|
||||
<span class="total-price" v-html="cart.total.inCurrentCurrency.formatted"></span>
|
||||
|
||||
@@ -6,29 +6,29 @@
|
||||
<a href="{{ route('cart.index') }}" class="step-tab-link">
|
||||
<span class="step-tab-text">
|
||||
{{ trans('storefront::cart.shopping_cart') }}
|
||||
<span class="bg-text">01</span>
|
||||
<span class="bg-text">{{ trans('storefront::cart.01') }}</span>
|
||||
</span>
|
||||
</a>
|
||||
@else
|
||||
<span class="step-tab-text">
|
||||
{{ trans('storefront::cart.shopping_cart') }}
|
||||
<span class="bg-text">01</span>
|
||||
<span class="bg-text">{{ trans('storefront::cart.01') }}</span>
|
||||
</span>
|
||||
@endif
|
||||
</li>
|
||||
|
||||
<li class="step-tab {{ request()->routeIs('checkout.create') ? 'active' : '' }}">
|
||||
@if (request()->routeIs('cart.index') && Cart::hasAvailableShippingMethod())
|
||||
@if (request()->routeIs('cart.index'))
|
||||
<a href="{{ route('checkout.create') }}" class="step-tab-link">
|
||||
<span class="step-tab-text">
|
||||
{{ trans('storefront::cart.checkout') }}
|
||||
<span class="bg-text">02</span>
|
||||
<span class="bg-text">{{ trans('storefront::cart.02') }}</span>
|
||||
</span>
|
||||
</a>
|
||||
@else
|
||||
<span class="step-tab-text">
|
||||
{{ trans('storefront::cart.checkout') }}
|
||||
<span class="bg-text">02</span>
|
||||
<span class="bg-text">{{ trans('storefront::cart.02') }}</span>
|
||||
</span>
|
||||
@endif
|
||||
</li>
|
||||
@@ -36,7 +36,7 @@
|
||||
<li class="step-tab {{ request()->routeIs('checkout.complete.show') ? 'active' : '' }}">
|
||||
<span class="step-tab-text">
|
||||
{{ trans('storefront::cart.order_complete') }}
|
||||
<span class="bg-text">03</span>
|
||||
<span class="bg-text">{{ trans('storefront::cart.03') }}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -3,35 +3,36 @@
|
||||
@section('title', trans('storefront::checkout.checkout'))
|
||||
|
||||
@section('content')
|
||||
<checkout-create customer-email="{{ auth()->user()->email ?? null }}"
|
||||
customer-phone="{{ auth()->user()->phone ?? null }}" :addresses="{{ $addresses }}"
|
||||
:default-address="{{ $defaultAddress }}" :gateways="{{ $gateways }}" :countries="{{ json_encode($countries) }}"
|
||||
inline-template>
|
||||
<checkout-create
|
||||
customer-email="{{ auth()->user()->email ?? null }}"
|
||||
customer-phone="{{ auth()->user()->phone ?? null }}"
|
||||
:addresses="{{ $addresses }}"
|
||||
:default-address="{{ $defaultAddress }}"
|
||||
:gateways="{{ $gateways }}"
|
||||
:countries="{{ json_encode($countries) }}"
|
||||
inline-template
|
||||
>
|
||||
<section class="checkout-wrap">
|
||||
<div class="container">
|
||||
<template v-if="cartIsNotEmpty">
|
||||
@include('public.cart.index.steps')
|
||||
|
||||
<form @submit.prevent="placeOrder" @input="errors.clear($event.target.name)">
|
||||
<div class="checkout">
|
||||
<div class="checkout-inner">
|
||||
<div class="checkout-left">
|
||||
<div class="checkout-form">
|
||||
@include('public.checkout.create.form.account_details')
|
||||
@include('public.checkout.create.form.billing_details')
|
||||
@include('public.checkout.create.form.shipping_details')
|
||||
@include('public.checkout.create.form.order_note')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkout-right">
|
||||
@include('public.checkout.create.payment')
|
||||
@include('public.checkout.create.coupon')
|
||||
</div>
|
||||
<form class="checkout-form" @submit.prevent="placeOrder" @input="errors.clear($event.target.name)">
|
||||
<div class="checkout-inner">
|
||||
<div class="checkout-left">
|
||||
@include('public.checkout.create.form.account_details')
|
||||
@include('public.checkout.create.form.billing_details')
|
||||
@include('public.checkout.create.form.shipping_details')
|
||||
@include('public.checkout.create.form.order_note')
|
||||
</div>
|
||||
|
||||
@include('public.checkout.create.order_summary')
|
||||
<div class="checkout-right">
|
||||
@include('public.checkout.create.payment')
|
||||
@include('public.checkout.create.shipping')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('public.checkout.create.order_summary')
|
||||
</form>
|
||||
|
||||
@if (setting('authorizenet_enabled'))
|
||||
|
||||
@@ -1,29 +1,21 @@
|
||||
<div class="coupon-wrap">
|
||||
<div class="form-group">
|
||||
<div class="form-input">
|
||||
<input
|
||||
type="text"
|
||||
v-model="couponCode"
|
||||
placeholder="{{ trans('storefront::cart.enter_coupon_code') }}"
|
||||
class="form-control"
|
||||
@input="couponError = null"
|
||||
>
|
||||
|
||||
<span
|
||||
class="error-message"
|
||||
v-if="couponError"
|
||||
v-text="couponError"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<input
|
||||
type="text"
|
||||
v-model="couponCode"
|
||||
placeholder="{{ trans('storefront::cart.enter_coupon_code') }}"
|
||||
class="form-control"
|
||||
@keyup.enter="applyCoupon"
|
||||
@input="couponError = null"
|
||||
>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-apply-coupon"
|
||||
class="btn btn-default btn-apply-coupon"
|
||||
:class="{ 'btn-loading': applyingCoupon }"
|
||||
@click.prevent="applyCoupon"
|
||||
>
|
||||
{{ trans('storefront::cart.apply_coupon') }}
|
||||
{{ trans('storefront::cart.apply') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,33 +1,40 @@
|
||||
<div class="billing-details">
|
||||
<h4 class="section-title">{{ trans('storefront::checkout.billing_details') }}</h4>
|
||||
|
||||
<div class="select-address" v-if="hasAddress" v-cloak>
|
||||
<div class="form-group">
|
||||
<div class="form-radio" v-for="address in addresses">
|
||||
<input type="radio" v-model="form.billingAddressId" :value="address.id"
|
||||
:id="'billing-address-' + address.id">
|
||||
|
||||
<label :for="'billing-address-' + address.id">
|
||||
<span v-text="address.full_name"></span>
|
||||
<span v-text="address.address_1"></span>
|
||||
<span v-if="address.address_2" v-text="address.address_2"></span>
|
||||
<span>@{{ address.city }}, @{{ address.state_name }} @{{ address.zip }}</span>
|
||||
<span v-text="address.country_name"></span>
|
||||
</label>
|
||||
<div class="address-card-wrap" v-if="hasAddress" v-cloak>
|
||||
<div class="row">
|
||||
<div class="col d-flex" v-for="address in addresses" :key="address.id">
|
||||
<address
|
||||
class="address-card"
|
||||
:class="{ active: form.billingAddressId === address.id }"
|
||||
@click="changeBillingAddress(address)"
|
||||
>
|
||||
<span class="badge" v-if="defaultAddress.address_id === address.id">
|
||||
{{ trans('storefront::checkout.default') }}
|
||||
</span>
|
||||
|
||||
<div class="address-card-data">
|
||||
<span v-text="address.full_name"></span>
|
||||
<span v-text="address.address_1"></span>
|
||||
<span v-if="address.address_2" v-text="address.address_2"></span>
|
||||
<span>@{{ address.city }}, @{{ address.state_name }} @{{ address.zip }}</span>
|
||||
<span v-text="address.country_name"></span>
|
||||
</div>
|
||||
</address>
|
||||
</div>
|
||||
|
||||
<span class="error-message" v-if="! form.newBillingAddress && errors.has('billing.address_1')">
|
||||
{{ trans('storefront::checkout.you_must_select_an_address') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="error-message" v-if="!form.newBillingAddress && errors.has('billing.address_1')">
|
||||
{{ trans('storefront::checkout.you_must_select_an_address') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="add-new-address-wrap" v-cloak>
|
||||
<button v-if="hasAddress" type="button" class="btn btn-add-new-address" @click="addNewBillingAddress">
|
||||
{{ trans('storefront::checkout.add_new_address') }}
|
||||
@{{ form.newBillingAddress ? '-' : '+'}} {{ trans('storefront::checkout.add_new_address') }}
|
||||
</button>
|
||||
|
||||
<div class="add-new-address-form" v-show="! hasAddress || form.newBillingAddress">
|
||||
<div class="add-new-address-form" v-show="!hasAddress || form.newBillingAddress">
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<div class="form-group">
|
||||
@@ -136,7 +143,7 @@
|
||||
</label>
|
||||
|
||||
<input type="text" name="billing[state]" id="billing-state" class="form-control"
|
||||
v-if="! hasBillingStates" v-model="form.billing.state">
|
||||
v-if="!hasBillingStates" v-model="form.billing.state">
|
||||
|
||||
<select name="billing[state]" id="billing-state" class="form-control arrow-black"
|
||||
@change="changeBillingState($event.target.value)" v-else>
|
||||
|
||||
@@ -15,35 +15,41 @@
|
||||
<div class="ship-to-different-address-form" v-show="form.ship_to_a_different_address" v-cloak>
|
||||
<h4 class="section-title">{{ trans('storefront::checkout.shipping_details') }}</h4>
|
||||
|
||||
<div class="select-address" v-if="hasAddress">
|
||||
<div class="form-group">
|
||||
<div class="form-radio" v-for="address in addresses">
|
||||
<input type="radio" v-model="form.shippingAddressId" :value="address.id"
|
||||
:id="'shipping-address-' + address.id">
|
||||
|
||||
<label :for="'shipping-address-' + address.id">
|
||||
<span v-text="address.full_name"></span>
|
||||
<span v-text="address.address_1"></span>
|
||||
<span v-if="address.address_2" v-text="address.address_2"></span>
|
||||
<span>@{{ address.city }}, @{{ address.state_name }} @{{ address.zip }}</span>
|
||||
<span v-text="address.country_name"></span>
|
||||
</label>
|
||||
<div class="address-card-wrap" v-if="hasAddress">
|
||||
<div class="row">
|
||||
<div class="col d-flex" v-for="address in addresses" :key="address.id">
|
||||
<address
|
||||
class="address-card"
|
||||
:class="{ active: form.shippingAddressId === address.id }"
|
||||
@click="changeShippingAddress(address)"
|
||||
>
|
||||
<span class="badge" v-if="defaultAddress.address_id === address.id">
|
||||
{{ trans('storefront::checkout.default') }}
|
||||
</span>
|
||||
|
||||
<div class="address-card-data">
|
||||
<span v-text="address.full_name"></span>
|
||||
<span v-text="address.address_1"></span>
|
||||
<span v-if="address.address_2" v-text="address.address_2"></span>
|
||||
<span>@{{ address.city }}, @{{ address.state_name }} @{{ address.zip }}</span>
|
||||
<span v-text="address.country_name"></span>
|
||||
</div>
|
||||
</address>
|
||||
</div>
|
||||
|
||||
<span class="error-message"
|
||||
v-if="! form.newShippingAddress && errors.has('shipping.address_1')">
|
||||
{{ trans('storefront::checkout.you_must_select_an_address') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="add-new-address-wrap">
|
||||
<button v-if="hasAddress" type="button" class="btn btn-add-new-address"
|
||||
@click="addNewShippingAddress">
|
||||
{{ trans('storefront::checkout.add_new_address') }}
|
||||
<button
|
||||
v-if="hasAddress"
|
||||
type="button"
|
||||
class="btn btn-add-new-address"
|
||||
@click="addNewShippingAddress"
|
||||
>
|
||||
@{{ form.newShippingAddress ? '-' : '+'}} {{ trans('storefront::checkout.add_new_address') }}
|
||||
</button>
|
||||
|
||||
<div class="add-new-address-form" v-show="! hasAddress || form.newShippingAddress">
|
||||
<div class="add-new-address-form" v-show="!hasAddress || form.newShippingAddress">
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<div class="form-group">
|
||||
@@ -159,7 +165,7 @@
|
||||
</label>
|
||||
|
||||
<input type="text" name="shipping[state]" id="shipping-state"
|
||||
class="form-control" v-if="! hasShippingStates"
|
||||
class="form-control" v-if="!hasShippingStates"
|
||||
v-model="form.shipping.state">
|
||||
|
||||
<select name="shipping[state]" id="shipping-state"
|
||||
|
||||
@@ -3,16 +3,97 @@
|
||||
<div class="order-summary-top">
|
||||
<h3 class="section-title">{{ trans('storefront::cart.order_summary') }}</h3>
|
||||
|
||||
<ul class="list-inline cart-item">
|
||||
<li v-for="cartItem in cart.items">
|
||||
<label>
|
||||
<a :href="productUrl(cartItem.product)" class="product-name" v-text="cartItem.product.name"></a>
|
||||
<span class="product-quantity" v-text="'x' + cartItem.qty"></span>
|
||||
</label>
|
||||
<ul class="cart-items list-inline">
|
||||
<li class="cart-item" v-for="cartItem in cart.items" :key="cartItem.id">
|
||||
<a :href="productUrl(cartItem)" class="product-image">
|
||||
<img
|
||||
:src="baseImage(cartItem)"
|
||||
:class="{
|
||||
'image-placeholder': !hasBaseImage(cartItem),
|
||||
}"
|
||||
:alt="cartItem.product.name"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<span class="price-amount" v-html="cartItem.unitPrice.inCurrentCurrency.formatted"></span>
|
||||
<div class="product-info">
|
||||
<a
|
||||
:href="productUrl(cartItem)"
|
||||
class="product-name"
|
||||
:title="cartItem.product.name"
|
||||
v-text="cartItem.product.name"
|
||||
>
|
||||
</a>
|
||||
|
||||
<ul
|
||||
v-if="Object.entries(cartItem.variations).length !== 0"
|
||||
class="list-inline product-options"
|
||||
>
|
||||
<li
|
||||
v-for="(variation, key, index) in cartItem.variations"
|
||||
:key="index"
|
||||
>
|
||||
<label>@{{ variation.name }}:</label>
|
||||
@{{ variation.values[0].label }}@{{ index === Object.values(cartItem.variations).length - 1 ? "" : "," }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul
|
||||
v-if="Object.entries(cartItem.options).length !== 0"
|
||||
class="list-inline product-options"
|
||||
>
|
||||
<li v-for="option in cartItem.options" :key="option.id">
|
||||
<label>@{{ option.name }}:</label> @{{ optionValues(option) }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-between mt-1">
|
||||
<div class="number-picker">
|
||||
<div class="input-group-quantity">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-number btn-minus"
|
||||
:disabled="cartItem.qty <= 1"
|
||||
@click="updateQuantity(cartItem, cartItem.qty - 1)"
|
||||
>
|
||||
-
|
||||
</button>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
:value="cartItem.qty"
|
||||
min="1"
|
||||
:max="maxQuantity(cartItem)"
|
||||
class="form-control input-number input-quantity"
|
||||
@focus="$event.target.select()"
|
||||
@input="changeQuantity(cartItem, Number($event.target.value))"
|
||||
@keydown.up="updateQuantity(cartItem, cartItem.qty + 1)"
|
||||
@keydown.down="updateQuantity(cartItem, cartItem.qty - 1)"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-number btn-plus"
|
||||
:disabled="isQtyIncreaseDisabled(cartItem)"
|
||||
@click="updateQuantity(cartItem, cartItem.qty + 1)"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-price">x @{{ cartItem.unitPrice.inCurrentCurrency.formatted }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="remove-cart-item">
|
||||
<button type="button" class="btn-remove" @click="removeCartItem(cartItem)">
|
||||
<i class="las la-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@include('public.checkout.create.coupon')
|
||||
</div>
|
||||
|
||||
<div class="order-summary-middle" :class="{ loading: loadingOrderSummary }">
|
||||
@@ -20,54 +101,50 @@
|
||||
<li>
|
||||
<label>{{ trans('storefront::cart.subtotal') }}</label>
|
||||
|
||||
<span class="price-amount" v-html="cart.subTotal.inCurrentCurrency.formatted">
|
||||
<span v-html="cart.subTotal.inCurrentCurrency.formatted">
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li v-for="tax in cart.taxes">
|
||||
<label v-text="tax.name"></label>
|
||||
|
||||
<span class="price-amount" v-html="tax.amount.inCurrentCurrency.formatted">
|
||||
<span v-html="tax.amount.inCurrentCurrency.formatted">
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li v-if="hasCoupon" v-cloak>
|
||||
<li v-if="hasCoupon">
|
||||
<label>
|
||||
{{ trans('storefront::cart.coupon') }}
|
||||
|
||||
<span class="coupon-code">
|
||||
[@{{ cart.coupon.code }}]
|
||||
(@{{ cart.coupon.code }})
|
||||
<span class="btn-remove-coupon" @click="removeCoupon">
|
||||
<i class="las la-times"></i>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<span class="price-amount" v-html="'-' + cart.coupon.value.inCurrentCurrency.formatted">
|
||||
<span class="color-primary" v-html="'-' + cart.coupon.value.inCurrentCurrency.formatted">
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li v-if="hasShippingMethod">
|
||||
<label>
|
||||
{{ trans('storefront::cart.shipping_cost') }}
|
||||
</label>
|
||||
|
||||
<span
|
||||
:class="{ 'color-primary': hasFreeShipping }"
|
||||
v-text="hasFreeShipping ? '{{ trans('storefront::cart.free') }}' : cart.shippingCost.inCurrentCurrency.formatted"
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="shipping-methods" v-if="hasShippingMethod" v-cloak>
|
||||
<h6>{{ trans('storefront::cart.shipping_method') }}</h6>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-radio" v-for="shippingMethod in cart.availableShippingMethods">
|
||||
<input type="radio" name="shipping_method" v-model="form.shipping_method"
|
||||
:value="shippingMethod.name" :id="shippingMethod.name"
|
||||
@change="updateShippingMethod(shippingMethod.name)">
|
||||
|
||||
<label :for="shippingMethod.name" v-text="shippingMethod.label"></label>
|
||||
|
||||
<span class="price-amount" v-html="shippingMethod.cost.inCurrentCurrency.formatted">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-summary-total">
|
||||
<label>{{ trans('storefront::cart.total') }}</label>
|
||||
<span class="total-price" v-html="cart.total.inCurrentCurrency.formatted"></span>
|
||||
|
||||
<span v-html="cart.total.inCurrentCurrency.formatted"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -90,8 +167,14 @@
|
||||
|
||||
<div id="paypal-button-container" v-if="form.payment_method === 'paypal'"></div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-place-order" :class="{ 'btn-loading': placingOrder }"
|
||||
:disabled="!form.terms_and_conditions" v-else v-cloak>
|
||||
<button
|
||||
v-cloak
|
||||
type="submit"
|
||||
class="btn btn-primary btn-place-order"
|
||||
:class="{ 'btn-loading': placingOrder }"
|
||||
:disabled="!form.terms_and_conditions"
|
||||
v-else
|
||||
>
|
||||
{{ trans('storefront::checkout.place_order') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
<div class="payment-method" v-cloak>
|
||||
<div class="payment-method">
|
||||
<h4 class="title">{{ trans('storefront::checkout.payment_method') }}</h4>
|
||||
|
||||
<div class="payment-method-form">
|
||||
<div class="form-group">
|
||||
<div class="form-radio" v-for="(gateway, name) in gateways">
|
||||
<div class="form-radio" v-for="(gateway, name, index) in gateways" :key="index">
|
||||
<input
|
||||
type="radio"
|
||||
name="form.payment_method"
|
||||
name="payment_method"
|
||||
v-model="form.payment_method"
|
||||
:value="name"
|
||||
:id="name"
|
||||
>
|
||||
|
||||
<label :for="name" v-text="gateway.label"></label>
|
||||
|
||||
<span class="helper-text" v-text="gateway.description"></span>
|
||||
</div>
|
||||
|
||||
@@ -27,9 +28,9 @@
|
||||
{{-- A Stripe Element will be mounted here dynamically. --}}
|
||||
</div>
|
||||
|
||||
<span class="error-message" v-if="stripeError" v-text="stripeError"></span>
|
||||
<span class="error-message stripe-error-message" v-if="stripeError" v-text="stripeError"></span>
|
||||
|
||||
<div class="payment-instructions" v-if="shouldShowPaymentInstructions" v-cloak>
|
||||
<div class="payment-instructions" v-if="shouldShowPaymentInstructions">
|
||||
<h4 class="title">{{ trans('storefront::checkout.payment_instructions') }}</h4>
|
||||
|
||||
<p v-html="paymentInstructions"></p>
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
<div class="shipping-method" v-if="hasShippingMethod">
|
||||
<h4 class="title">{{ trans('storefront::checkout.shipping_method') }}</h4>
|
||||
|
||||
<div class="shipping-method-form">
|
||||
<div class="form-group">
|
||||
<div class="form-radio" v-for="(shippingMethod, key, index) in cart.availableShippingMethods" :key="index">
|
||||
<input
|
||||
type="radio"
|
||||
name="shipping_method"
|
||||
v-model="form.shipping_method"
|
||||
:value="shippingMethod.name"
|
||||
:id="shippingMethod.name"
|
||||
@change="updateShippingMethod(shippingMethod.name)"
|
||||
>
|
||||
|
||||
<label :for="shippingMethod.name" v-text="shippingMethod.label"></label>
|
||||
|
||||
<span
|
||||
:class="{ 'text-line-through': hasFreeShipping }"
|
||||
v-text="shippingMethod.cost.inCurrentCurrency.formatted"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
<td v-for="product in products">
|
||||
<a :href="productUrl(product)" class="product-image">
|
||||
<img :src="baseImage(product)" :class="{ 'image-placeholder': ! hasBaseImage(product) }" alt="product image">
|
||||
<img :src="baseImage(product)" :class="{ 'image-placeholder': !hasBaseImage(product) }" :alt="product.name">
|
||||
</a>
|
||||
|
||||
<a :href="productUrl(product)" v-text="product.name" class="product-name"></a>
|
||||
@@ -36,7 +36,11 @@
|
||||
<td>{{ trans('storefront::compare.rating') }}</td>
|
||||
|
||||
<td v-for="product in products">
|
||||
<product-rating :rating-percent="product.rating_percent" :review-count="product.reviews.length"></product-rating>
|
||||
<product-rating
|
||||
:rating-percent="product.rating_percent"
|
||||
:review-count="product.reviews.length"
|
||||
>
|
||||
</product-rating>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -44,7 +48,7 @@
|
||||
<td>{{ trans('storefront::compare.price') }}</td>
|
||||
|
||||
<td v-for="product in products">
|
||||
<span class="product-price" v-html="product.formatted_price"></span>
|
||||
<span class="product-price" v-html="productPrice(product)"></span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -52,7 +56,7 @@
|
||||
<td>{{ trans('storefront::compare.availability') }}</td>
|
||||
|
||||
<td v-for="product in products">
|
||||
<span class="badge badge-success" v-if="product.is_in_stock">
|
||||
<span class="badge badge-success" v-if="productIsInStock(product)">
|
||||
{{ trans('storefront::compare.in_stock') }}
|
||||
</span>
|
||||
|
||||
@@ -92,7 +96,7 @@
|
||||
<button
|
||||
title="{{ trans('storefront::compare.add_to_cart') }}"
|
||||
class="btn btn-add-to-cart"
|
||||
:disabled="product.is_out_of_stock"
|
||||
:disabled="!productIsInStock(product)"
|
||||
@click="addToCart(product)"
|
||||
>
|
||||
<i class="las la-shopping-cart"></i>
|
||||
|
||||
@@ -26,20 +26,31 @@
|
||||
@if (setting('store_phone') && ! setting('store_phone_hide'))
|
||||
<li>
|
||||
<i class="las la-phone"></i>
|
||||
<span>{{ setting('store_phone') }}</span>
|
||||
|
||||
<a href="tel:+1 206 555 0100" class="store-phone">
|
||||
<span>{{ substr(setting('store_phone'), 0 , strlen(setting('store_phone')) / 2) }}</span>
|
||||
<span class="d-none">JUNK LOAD</span>
|
||||
<span>{{ substr(setting('store_phone'), strlen(setting('store_phone')) / 2) }}</span>
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@if(! setting('store_email_hide'))
|
||||
<li>
|
||||
<i class="las la-envelope"></i>
|
||||
<span>{{ setting('store_email') }}</span>
|
||||
|
||||
<a href="mailto:user@email.com" class="store-email">
|
||||
<span>{{ substr(setting('store_email'), 0 , strlen(setting('store_email')) / 2) }}</span>
|
||||
<span class="d-none">JUNK LOAD</span>
|
||||
<span>{{ substr(setting('store_email'), strlen(setting('store_email')) / 2) }}</span>
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@if (setting('storefront_address'))
|
||||
<li>
|
||||
<i class="las la-map"></i>
|
||||
|
||||
<span>{{ setting('storefront_address') }}</span>
|
||||
</li>
|
||||
@endif
|
||||
@@ -58,10 +69,10 @@
|
||||
@endif
|
||||
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#ffffff" stroke="none">
|
||||
fill="#ffffff" stroke="none">
|
||||
<path d="M2521 5003 c-7 -3 -118 -81 -245 -174 l-231 -169 -457 0 c-266 0
|
||||
-467 -4 -482 -10 -14 -5 -33 -21 -43 -37 -16 -24 -19 -61 -23 -357 l-5 -330
|
||||
-410 -297 c-226 -164 -420 -310 -432 -324 l-23 -26 0 -1551 0 -1550 34 -34 34
|
||||
@@ -103,10 +114,11 @@
|
||||
{{ trans('contact::attributes.email') }}<span>*</span>
|
||||
</label>
|
||||
|
||||
<input type="text" name="email" value="{{ old('email') }}" id="email" class="form-control">
|
||||
<input type="text" name="email" value="{{ old('email') }}" id="email"
|
||||
class="form-control">
|
||||
|
||||
@error('email')
|
||||
<span class="error-message">{{ $message }}</span>
|
||||
<span class="error-message">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
@@ -117,10 +129,11 @@
|
||||
{{ trans('contact::attributes.subject') }}<span>*</span>
|
||||
</label>
|
||||
|
||||
<input type="text" name="subject" value="{{ old('subject') }}" id="subject" class="form-control">
|
||||
<input type="text" name="subject" value="{{ old('subject') }}" id="subject"
|
||||
class="form-control">
|
||||
|
||||
@error('subject')
|
||||
<span class="error-message">{{ $message }}</span>
|
||||
<span class="error-message">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
@@ -131,18 +144,20 @@
|
||||
{{ trans('contact::attributes.message') }}<span>*</span>
|
||||
</label>
|
||||
|
||||
<textarea rows="5" name="message" id="message" class="form-control">{{ old('message') }}</textarea>
|
||||
<textarea rows="5" name="message" id="message"
|
||||
class="form-control">{{ old('message') }}</textarea>
|
||||
|
||||
@error('message')
|
||||
<span class="error-message">{{ $message }}</span>
|
||||
<span class="error-message">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-18">
|
||||
<div class="form-group p-t-5">
|
||||
<div class="form-group p-t-5 captcha-field">
|
||||
@captcha
|
||||
<input type="text" name="captcha" class="captcha-input" placeholder="{{ trans('storefront::layout.enter_captcha_code') }}">
|
||||
|
||||
<input type="text" name="captcha" placeholder="{{ trans('storefront::layout.enter_captcha_code') }}">
|
||||
|
||||
@error('captcha')
|
||||
<span class="error-message">{{ $message }}</span>
|
||||
@@ -164,3 +179,12 @@
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script type="module">
|
||||
$('.store-phone').attr('href', `tel:{{ setting('store_phone') }}`);
|
||||
$('.store-email').attr('href', `mailto:{{ setting('store_email') }}`);
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
|
||||
|
||||
@@ -25,9 +25,12 @@
|
||||
@if (setting('storefront_top_brands_section_enabled') && $topBrands->isNotEmpty())
|
||||
<top-brands :top-brands="{{ json_encode($topBrands) }}"></top-brands>
|
||||
@endif
|
||||
|
||||
|
||||
@if (setting('storefront_flash_sale_and_vertical_products_section_enabled'))
|
||||
<flash-sale-and-vertical-products :data="{{ json_encode($flashSaleAndVerticalProducts) }}">
|
||||
<flash-sale-and-vertical-products
|
||||
:data="{{ json_encode($flashSaleAndVerticalProducts) }}"
|
||||
:flash-sale-enabled="{{ setting('storefront_active_flash_sale_campaign') ? 'true' : 'false' }}"
|
||||
>
|
||||
</flash-sale-and-vertical-products>
|
||||
@endif
|
||||
|
||||
|
||||
@@ -4,17 +4,21 @@
|
||||
<div class="home-section-inner">
|
||||
<div class="home-slider-wrap">
|
||||
<div
|
||||
class="home-slider"
|
||||
data-speed="{{ $slider->speed ?? '1000' }}"
|
||||
data-autoplay="{{ $slider->autoplay ?? 'false' }}"
|
||||
data-autoplay-speed="{{ $slider->autoplay_speed ?? '5000' }}"
|
||||
data-fade="{{ $slider->fade ?? 'false' }}"
|
||||
data-dots="{{ $slider->dots ?? 'true' }}"
|
||||
data-arrows="{{ $slider->arrows ?? 'true' }}"
|
||||
class="home-slider overflow-hidden"
|
||||
data-speed="{{ $slider->speed }}"
|
||||
data-autoplay="{{ $slider->autoplay ? 'true' : 'false' }}"
|
||||
data-autoplay-speed="{{ $slider->autoplay_speed }}"
|
||||
data-fade="{{ $slider->fade ? 'true' : 'false' }}"
|
||||
data-dots="{{ $slider->dots ? 'true' : 'false' }}"
|
||||
data-arrows="{{ $slider->arrows ? 'true' : 'false' }}"
|
||||
>
|
||||
@foreach ($slider->slides as $slide)
|
||||
<div class="slide">
|
||||
<img src="{{ $slide->file->path }}" data-animation-in="zoomInImage" class="slider-image animated">
|
||||
@if ($slider->fade)
|
||||
<img src="{{ $slide->file->path }}" class="slider-image">
|
||||
@else
|
||||
<img src="{{ $slide->file->path }}" data-animation-in="zoomInImage" class="slider-image animate_animated">
|
||||
@endif
|
||||
|
||||
<div class="slide-content {{ $slide->isAlignedLeft() ? 'align-left' : 'align-right' }}">
|
||||
<div class="captions">
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
class="banner"
|
||||
target="{{ $sliderBanners['banner_1']->open_in_new_window ? '_blank' : '_self' }}"
|
||||
>
|
||||
<img src="{{ $sliderBanners['banner_1']->image->path }}" alt="banner">
|
||||
<img src="{{ $sliderBanners['banner_1']->image->path }}" alt="Banner">
|
||||
</a>
|
||||
|
||||
<a href="{{ $sliderBanners['banner_2']->call_to_action_url }}"
|
||||
class="banner m-t-30"
|
||||
target="{{ $sliderBanners['banner_2']->open_in_new_window ? '_blank' : '_self' }}"
|
||||
>
|
||||
<img src="{{ $sliderBanners['banner_2']->image->path }}" alt="banner">
|
||||
<img src="{{ $sliderBanners['banner_2']->image->path }}" alt="Banner">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -15,16 +15,21 @@
|
||||
</title>
|
||||
|
||||
@stack('meta')
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap" rel="stylesheet">
|
||||
|
||||
@if (is_rtl())
|
||||
<link rel="stylesheet" href="{{ v(Theme::url('public/css/app.rtl.css')) }}">
|
||||
@else
|
||||
<link rel="stylesheet" href="{{ v(Theme::url('public/css/app.css')) }}">
|
||||
@endif
|
||||
@laravelPWA
|
||||
|
||||
<link rel="shortcut icon" href="{{ $favicon }}" type="image/x-icon">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
|
||||
<script src="{{ v(asset('build/assets/jquery.min.js')) }}"></script>
|
||||
<script src="{{ v(asset('build/assets/bootstrap.min.js')) }}"></script>
|
||||
<script src="{{ v(asset('build/assets/slick.min.js')) }}"></script>
|
||||
|
||||
@vite([
|
||||
'Themes/Storefront/resources/assets/public/sass/main.scss',
|
||||
'Themes/Storefront/resources/assets/public/js/main.js',
|
||||
])
|
||||
|
||||
@stack('styles')
|
||||
|
||||
@@ -49,10 +54,8 @@
|
||||
'storefront::layout.search_for_products': '{{ trans('storefront::layout.search_for_products') }}',
|
||||
'storefront::layout.all_categories': '{{ trans('storefront::layout.all_categories') }}',
|
||||
'storefront::layout.most_searched': '{{ trans('storefront::layout.most_searched') }}',
|
||||
'storefront::layout.search_for_products': '{{ trans('storefront::layout.search_for_products') }}',
|
||||
'storefront::layout.category_suggestions': '{{ trans('storefront::layout.category_suggestions') }}',
|
||||
'storefront::layout.product_suggestions': '{{ trans('storefront::layout.product_suggestions') }}',
|
||||
'storefront::layout.product_suggestions': '{{ trans('storefront::layout.product_suggestions') }}',
|
||||
'storefront::layout.more_results': '{{ trans('storefront::layout.more_results') }}',
|
||||
'storefront::product_card.out_of_stock': '{{ trans('storefront::product_card.out_of_stock') }}',
|
||||
'storefront::product_card.new': '{{ trans('storefront::product_card.new') }}',
|
||||
@@ -62,9 +65,6 @@
|
||||
'storefront::product_card.wishlist': '{{ trans('storefront::product_card.wishlist') }}',
|
||||
'storefront::product_card.available': '{{ trans('storefront::product_card.available') }}',
|
||||
'storefront::product_card.sold': '{{ trans('storefront::product_card.sold') }}',
|
||||
'storefront::product_card.years': '{{ trans('storefront::product_card.years') }}',
|
||||
'storefront::product_card.months': '{{ trans('storefront::product_card.months') }}',
|
||||
'storefront::product_card.weeks': '{{ trans('storefront::product_card.weeks') }}',
|
||||
'storefront::product_card.days': '{{ trans('storefront::product_card.days') }}',
|
||||
'storefront::product_card.hours': '{{ trans('storefront::product_card.hours') }}',
|
||||
'storefront::product_card.minutes': '{{ trans('storefront::product_card.minutes') }}',
|
||||
@@ -80,11 +80,16 @@
|
||||
@routes
|
||||
</head>
|
||||
|
||||
<body class="page-template {{ is_rtl() ? 'rtl' : 'ltr' }}" data-theme-color="#{{ $themeColor->getHex() }}"
|
||||
style="--color-primary: #{{ $themeColor->getHex() }};
|
||||
--color-primary-hover: #{{ $themeColor->darken(8) }};
|
||||
--color-primary-transparent: {{ color2rgba($themeColor, 0.8) }};
|
||||
--color-primary-transparent-lite: {{ color2rgba($themeColor, 0.3) }};">
|
||||
<body
|
||||
class="page-template {{ is_rtl() ? 'rtl' : 'ltr' }}"
|
||||
data-theme-color="#{{ $themeColor->getHex() }}"
|
||||
style="
|
||||
--color-primary: #{{ $themeColor->getHex() }};
|
||||
--color-primary-hover: #{{ $themeColor->darken(8) }};
|
||||
--color-primary-transparent: {{ color2rgba($themeColor, 0.8) }};
|
||||
--color-primary-transparent-lite: {{ color2rgba($themeColor, 0.3) }};
|
||||
"
|
||||
>
|
||||
<div class="wrapper" id="app">
|
||||
@include('public.layout.top_nav')
|
||||
@include('public.layout.header')
|
||||
@@ -106,9 +111,6 @@
|
||||
</div>
|
||||
|
||||
@stack('pre-scripts')
|
||||
|
||||
<script src="{{ v(Theme::url('public/js/app.js')) }}"></script>
|
||||
|
||||
@stack('scripts')
|
||||
|
||||
{!! setting('custom_footer_assets') !!}
|
||||
|
||||
@@ -4,8 +4,6 @@
|
||||
<i class="las la-times"></i>
|
||||
</button>
|
||||
|
||||
<i class="las la-check-circle"></i>
|
||||
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
@@ -16,8 +14,6 @@
|
||||
<i class="las la-times"></i>
|
||||
</button>
|
||||
|
||||
<i class="las la-check-circle"></i>
|
||||
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
<div class="cookie-bar-action">
|
||||
<button class="btn btn-primary btn-accept" @click="accept">
|
||||
{{ trans('storefront::layout.got_it') }}
|
||||
{{ trans('storefront::layout.accept') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,20 +11,31 @@
|
||||
@if (setting('store_phone') && ! setting('store_phone_hide'))
|
||||
<li>
|
||||
<i class="las la-phone"></i>
|
||||
<span>{{ setting('store_phone') }}</span>
|
||||
|
||||
<a href="tel:+1 206 555 0100" class="store-phone">
|
||||
<span>{{ substr(setting('store_phone'), 0 , strlen(setting('store_phone')) / 2) }}</span>
|
||||
<span class="d-none">JUNK LOAD</span>
|
||||
<span>{{ substr(setting('store_phone'), strlen(setting('store_phone')) / 2) }}</span>
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@if (setting('store_email') && ! setting('store_email_hide'))
|
||||
<li>
|
||||
<i class="las la-envelope"></i>
|
||||
<span>{{ setting('store_email') }}</span>
|
||||
|
||||
<a href="mailto:user@email.com" class="store-email">
|
||||
<span>{{ substr(setting('store_email'), 0 , strlen(setting('store_email')) / 2) }}</span>
|
||||
<span class="d-none">JUNK LOAD</span>
|
||||
<span>{{ substr(setting('store_email'), strlen(setting('store_email')) / 2) }}</span>
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@if (setting('storefront_address'))
|
||||
<li>
|
||||
<i class="las la-map"></i>
|
||||
|
||||
<span>{{ setting('storefront_address') }}</span>
|
||||
</li>
|
||||
@endif
|
||||
@@ -151,7 +162,7 @@
|
||||
@if ($acceptedPaymentMethodsImage->exists)
|
||||
<div class="col-md-9 col-sm-18">
|
||||
<div class="footer-payment">
|
||||
<img src="{{ $acceptedPaymentMethodsImage->path }}" alt="accepted payment methods">
|
||||
<img src="{{ $acceptedPaymentMethodsImage->path }}" alt="Accepted payment methods">
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@@ -160,3 +171,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
@push('scripts')
|
||||
<script type="module">
|
||||
$('.store-phone').attr('href', `tel:{{ setting('store_phone') }}`);
|
||||
$('.store-email').attr('href', `mailto:{{ setting('store_email') }}`);
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="header-wrap-inner">
|
||||
<div class="container">
|
||||
<div class="row flex-nowrap justify-content-between position-relative">
|
||||
<div class="header-column-left">
|
||||
<div class="header-column-left align-items-center">
|
||||
<div class="sidebar-menu-icon-wrap">
|
||||
<div class="sidebar-menu-icon">
|
||||
<span></span>
|
||||
@@ -15,27 +15,36 @@
|
||||
@if (is_null($logo))
|
||||
<h3>{{ setting('store_name') }}</h3>
|
||||
@else
|
||||
<img src="{{ $logo }}" alt="logo">
|
||||
<img src="{{ $logo }}" alt="Logo">
|
||||
@endif
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<header-search :categories="{{ $categories }}" :most-searched-keywords="{{ $mostSearchedKeywords }}"
|
||||
<header-search
|
||||
:categories="{{ $categories }}"
|
||||
:most-searched-keywords="{{ $mostSearchedKeywords }}"
|
||||
is-most-searched-keywords-enabled="{{ setting('storefront_most_searched_keywords_enabled') }}"
|
||||
initial-query="{{ request('query') }}" initial-category="{{ request('category') }}">
|
||||
initial-query="{{ request('query') }}"
|
||||
initial-category="{{ request('category') }}"
|
||||
>
|
||||
</header-search>
|
||||
|
||||
<div class="header-column-right d-flex">
|
||||
<a href="{{ route('account.wishlist.index') }}" class="header-wishlist">
|
||||
<a href="{{ route('compare.index') }}" class="header-column-right-item header-compare">
|
||||
<div class="icon-wrap">
|
||||
<i class="las la-random"></i>
|
||||
<div class="count" v-text="compareCount"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('account.wishlist.index') }}" class="header-column-right-item header-wishlist">
|
||||
<div class="icon-wrap">
|
||||
<i class="lar la-heart"></i>
|
||||
<div class="count" v-text="wishlistCount"></div>
|
||||
</div>
|
||||
|
||||
<span>{{ trans('storefront::layout.favorites') }}</span>
|
||||
</a>
|
||||
|
||||
<div class="header-cart">
|
||||
<div class="header-column-right-item header-cart">
|
||||
<div class="icon-wrap">
|
||||
<i class="las la-cart-arrow-down"></i>
|
||||
<div class="count" v-text="cart.quantity"></div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<sidebar-cart inline-template>
|
||||
<aside class="sidebar-cart-wrap">
|
||||
<aside class="sidebar-cart-wrap" @click.stop>
|
||||
<div class="sidebar-cart-top">
|
||||
<h3 class="title">{{ trans('storefront::layout.shopping_cart') }}</h3>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</div>
|
||||
|
||||
<div class="sidebar-cart-middle" :class="{ 'custom-scrollbar': cartIsNotEmpty, empty: cartIsEmpty }">
|
||||
<div class="sidebar-cart-items-wrap">
|
||||
<div class="sidebar-cart-items-wrap" v-if="!cartIsEmpty">
|
||||
<sidebar-cart-item
|
||||
v-for="cartItem in cart.items"
|
||||
:key="cartItem.id"
|
||||
@@ -18,7 +18,7 @@
|
||||
</sidebar-cart-item>
|
||||
</div>
|
||||
|
||||
<div class="empty-message" v-if="cartIsEmpty">
|
||||
<div class="empty-message" v-else>
|
||||
@include('public.layout.sidebar_cart.empty_logo')
|
||||
|
||||
<h4>{{ trans('storefront::cart.your_cart_is_empty') }}</h4>
|
||||
|
||||
@@ -9,25 +9,25 @@
|
||||
|
||||
<ul class="nav nav-tabs sidebar-menu-tab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-toggle="tab" href="#main-menu">
|
||||
{{ trans('storefront::layout.menu') }}
|
||||
<a class="nav-link active" data-toggle="tab" href="#category-menu">
|
||||
{{ trans('storefront::layout.categories') }}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#category-menu">
|
||||
{{ trans('storefront::layout.categories') }}
|
||||
<a class="nav-link" data-toggle="tab" href="#main-menu">
|
||||
{{ trans('storefront::layout.menu') }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content custom-scrollbar">
|
||||
<div id="main-menu" class="tab-pane active">
|
||||
@include('public.layout.sidebar_menu.menu', ['type' => 'primary_menu', 'menu' => $primaryMenu])
|
||||
</div>
|
||||
|
||||
<div id="category-menu" class="tab-pane">
|
||||
<div id="category-menu" class="tab-pane active">
|
||||
@include('public.layout.sidebar_menu.menu', ['type' => 'category_menu', 'menu' => $categoryMenu])
|
||||
</div>
|
||||
|
||||
<div id="main-menu" class="tab-pane">
|
||||
@include('public.layout.sidebar_menu.menu', ['type' => 'primary_menu', 'menu' => $primaryMenu])
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<li class="top-nav-compare">
|
||||
<a href="{{ route('compare.index') }}">
|
||||
<i class="las la-random"></i>
|
||||
{{ trans('storefront::layout.compare') }}
|
||||
|
||||
@@ -11,8 +11,6 @@
|
||||
@push('globals')
|
||||
<script>
|
||||
FleetCart.langs['storefront::products.showing_results'] = '{{ trans("storefront::products.showing_results") }}';
|
||||
FleetCart.langs['storefront::products.show_more'] = '{{ trans("storefront::products.show_more") }}';
|
||||
FleetCart.langs['storefront::products.show_less'] = '{{ trans("storefront::products.show_less") }}';
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@@ -28,6 +26,7 @@
|
||||
initial-tag-name="{{ $tagName ?? '' }}"
|
||||
initial-tag-slug="{{ request('tag') }}"
|
||||
:initial-attribute="{{ json_encode(request('attribute', [])) }}"
|
||||
:min-price="{{ $minPrice }}"
|
||||
:max-price="{{ $maxPrice }}"
|
||||
initial-sort="{{ request('sort', 'latest') }}"
|
||||
:initial-per-page="{{ request('perPage', 30) }}"
|
||||
@@ -141,22 +140,22 @@
|
||||
</div>
|
||||
|
||||
<div class="search-result-middle" :class="{ empty: emptyProducts, loading: fetchingProducts }">
|
||||
<div class="grid-view-products" v-if="viewMode === 'grid'">
|
||||
<div class="grid-view-products" v-if="!emptyProducts && viewMode === 'grid'">
|
||||
<product-card-grid-view v-for="product in products.data" :key="product.id" :product="product"></product-card-grid-view>
|
||||
</div>
|
||||
|
||||
<div class="list-view-products" v-if="viewMode === 'list'">
|
||||
<div class="list-view-products" v-if="!emptyProducts && viewMode === 'list'">
|
||||
<product-card-list-view v-for="product in products.data" :key="product.id" :product="product"></product-card-list-view>
|
||||
</div>
|
||||
|
||||
<div class="empty-message" v-if="! fetchingProducts && emptyProducts">
|
||||
<div class="empty-message" v-if="!fetchingProducts && emptyProducts">
|
||||
@include('public.products.index.empty_results_logo')
|
||||
|
||||
<h2>{{ trans('storefront::products.no_product_found') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-result-bottom" v-if="! emptyProducts">
|
||||
<div class="search-result-bottom" v-if="!emptyProducts">
|
||||
<span class="showing-results" v-text="showingResults"></span>
|
||||
|
||||
<v-pagination
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
<div v-for="attribute in attributeFilters" :key="attribute.id" class="filter-section" v-cloak>
|
||||
<h6 v-text="attribute.name"></h6>
|
||||
|
||||
<div class="filter-checkbox">
|
||||
<div class="filter-checkbox custom-scrollbar">
|
||||
<div v-for="value in attribute.values" :key="value.id" class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
|
||||
@@ -4,12 +4,14 @@
|
||||
<h4 class="section-title">{{ trans('storefront::products.latest_products') }}</h4>
|
||||
</div>
|
||||
|
||||
<div class="vertical-products-slider">
|
||||
<div class="vertical-products-slide">
|
||||
@foreach ($latestProducts as $latestProduct)
|
||||
<product-card-vertical :product="{{ json_encode($latestProduct) }}"></product-card-vertical>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="vertical-products-slider" ref="latestProducts">
|
||||
@foreach ($latestProducts->chunk(5) as $latestProductChunks)
|
||||
<div class="vertical-products-slide">
|
||||
@foreach ($latestProductChunks as $latestProduct)
|
||||
<product-card-vertical :product="{{ json_encode($latestProduct) }}"></product-card-vertical>
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -7,23 +7,28 @@
|
||||
<meta name="description" content="{{ $product->meta->meta_description ?: $product->short_description }}">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta property="og:type" content="product">
|
||||
<meta property="og:url" content="{{ url()->current() }}">
|
||||
<meta property="og:url" content="{{ $product->variant?->url() ?? $product->url() }}">
|
||||
<meta property="og:title" content="{{ $product->meta->meta_title ?: $product->name }}">
|
||||
<meta property="og:description" content="{{ $product->meta->meta_description ?: $product->short_description }}">
|
||||
<meta property="og:image" content="{{ $product->base_image->path }}">
|
||||
<meta property="og:image" content="{{ $product->variant?->base_image->path ?? $product->base_image->path ?? asset('build/assets/image-placeholder.png') }}">
|
||||
<meta property="og:locale" content="{{ locale() }}">
|
||||
|
||||
@foreach (supported_locale_keys() as $code)
|
||||
<meta property="og:locale:alternate" content="{{ $code }}">
|
||||
@endforeach
|
||||
|
||||
<meta property="product:price:amount" content="{{ $product->selling_price->convertToCurrentCurrency()->amount() }}">
|
||||
<meta property="product:price:amount" content="{{ $product->variant?->selling_price->convertToCurrentCurrency()->amount() ?? $product->selling_price->convertToCurrentCurrency()->amount() }}">
|
||||
<meta property="product:price:currency" content="{{ currency() }}">
|
||||
@endpush
|
||||
|
||||
@push('globals')
|
||||
<script>
|
||||
FleetCart.langs['storefront::product.in_stock'] = '{{ trans('storefront::product.in_stock') }}';
|
||||
FleetCart.langs['storefront::product.left_in_stock'] = '{{ trans('storefront::product.left_in_stock') }}';
|
||||
FleetCart.langs['storefront::product.add_to_cart'] = '{{ trans('storefront::product.add_to_cart') }}';
|
||||
FleetCart.langs['storefront::product.unavailable'] = '{{ trans('storefront::product.unavailable') }}';
|
||||
FleetCart.langs['storefront::product.reviews'] = '{{ trans("storefront::product.reviews") }}';
|
||||
FleetCart.langs['storefront::product.review_submitted'] = '{{ trans("storefront::product.review_submitted") }}';
|
||||
FleetCart.langs['storefront::product.related_products'] = '{{ trans("storefront::product.related_products") }}';
|
||||
</script>
|
||||
|
||||
@@ -50,147 +55,14 @@
|
||||
<section class="product-details-wrap">
|
||||
<div class="container">
|
||||
<div class="product-details-top">
|
||||
<div class="product-details-top-inner">
|
||||
@include('public.products.show.images')
|
||||
<div class="row flex-lg-nowrap">
|
||||
@include('public.products.show.images', ['item' => $product->variant ?? $product])
|
||||
@include('public.products.show.details', ['item' => $product->variant ?? $product])
|
||||
|
||||
<div class="product-details-info">
|
||||
<div class="details-info-top">
|
||||
<h1 class="product-name">{{ $product->name }}</h1>
|
||||
|
||||
@if (setting('reviews_enabled'))
|
||||
<product-rating :rating-percent="ratingPercent" :review-count="totalReviews"></product-rating>
|
||||
@endif
|
||||
|
||||
@if ($product->isInStock())
|
||||
@if ($product->manage_stock)
|
||||
<div class="availability in-stock">
|
||||
{{ trans('storefront::product.left_in_stock', ['count' => $product->qty]) }}
|
||||
</div>
|
||||
@else
|
||||
<div class="availability in-stock">
|
||||
{{ trans('storefront::product.in_stock') }}
|
||||
</div>
|
||||
@endif
|
||||
@else
|
||||
<div class="availability out-of-stock">
|
||||
{{ trans('storefront::product.out_of_stock') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="brief-description">
|
||||
{!! $product->short_description !!}
|
||||
</div>
|
||||
|
||||
<div class="details-info-top-actions">
|
||||
<button
|
||||
class="btn btn-wishlist"
|
||||
:class="{ 'added': inWishlist }"
|
||||
@click="syncWishlist"
|
||||
>
|
||||
<i class="la-heart" :class="inWishlist ? 'las' : 'lar'"></i>
|
||||
{{ trans('storefront::product.wishlist') }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn btn-compare"
|
||||
:class="{ 'added': inCompareList }"
|
||||
@click="syncCompareList"
|
||||
>
|
||||
<i class="las la-random"></i>
|
||||
{{ trans('storefront::product.compare') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="details-info-middle">
|
||||
<div class="product-price" v-html="price">
|
||||
{!! $product->formatted_price !!}
|
||||
</div>
|
||||
|
||||
<form
|
||||
@submit.prevent="addToCart"
|
||||
@input="errors.clear($event.target.name)"
|
||||
@change="updatePrice"
|
||||
@nice-select-updated="updatePrice"
|
||||
>
|
||||
<div class="product-variants">
|
||||
@foreach ($product->options as $option)
|
||||
@includeIf("public.products.show.custom_options.{$option->type}")
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="details-info-middle-actions">
|
||||
<div class="number-picker">
|
||||
<label for="qty">{{ trans('storefront::product.quantity') }}</label>
|
||||
|
||||
<div class="input-group-quantity">
|
||||
<input
|
||||
type="text"
|
||||
:value="cartItemForm.qty"
|
||||
min="1"
|
||||
max="{{ $product->manage_stock ? $product->qty : '' }}"
|
||||
id="qty"
|
||||
class="form-control input-number input-quantity"
|
||||
@input="updateQuantity($event.target.value)"
|
||||
@keydown.up="updateQuantity(cartItemForm.qty + 1)"
|
||||
@keydown.down="updateQuantity(cartItemForm.qty - 1)"
|
||||
>
|
||||
|
||||
<span class="btn-wrapper">
|
||||
<button type="button" class="btn btn-number btn-plus" data-type="plus"> + </button>
|
||||
<button type="button" class="btn btn-number btn-minus" data-type="minus" disabled> - </button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary btn-add-to-cart"
|
||||
:class="{'btn-loading': addingToCart }"
|
||||
{{ $product->isOutOfStock() ? 'disabled' : '' }}
|
||||
>
|
||||
<i class="las la-cart-arrow-down"></i>
|
||||
{{ trans('storefront::product.add_to_cart') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="details-info-bottom">
|
||||
<ul class="list-inline additional-info">
|
||||
@unless (is_null($product->sku))
|
||||
<li class="sku">
|
||||
<label>{{ trans('storefront::product.sku') }}</label> {{ $product->sku }}
|
||||
</li>
|
||||
@endunless
|
||||
|
||||
@if ($product->categories->isNotEmpty())
|
||||
<li>
|
||||
<label>{{ trans('storefront::product.categories') }}</label>
|
||||
|
||||
@foreach ($product->categories as $category)
|
||||
<a href="{{ $category->url() }}">{{ $category->name }}</a>{{ $loop->last ? '' : ',' }}
|
||||
@endforeach
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@if ($product->tags->isNotEmpty())
|
||||
<li>
|
||||
<label>{{ trans('storefront::product.tags') }}</label>
|
||||
|
||||
@foreach ($product->tags as $tag)
|
||||
<a href="{{ $tag->url() }}">{{ $tag->name }}</a>{{ $loop->last ? '' : ',' }}
|
||||
@endforeach
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
|
||||
@include('public.products.show.social_share')
|
||||
</div>
|
||||
</div>
|
||||
@if (setting('storefront_features_section_enabled'))
|
||||
@include('public.products.show.right_sidebar')
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@include('public.products.show.right_sidebar')
|
||||
</div>
|
||||
|
||||
<div class="product-details-bottom flex-column-reverse flex-lg-row">
|
||||
@@ -238,5 +110,7 @@
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script src="{{ v(Theme::url('public/js/flatpickr.js')) }}"></script>
|
||||
@vite([
|
||||
'Themes/Storefront/resources/assets/public/js/vendors/flatpickr.js'
|
||||
])
|
||||
@endpush
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="form-group variant-check">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="col-lg-4">
|
||||
<label>
|
||||
{!!
|
||||
$option->name .
|
||||
@@ -9,7 +9,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-10 col-lg-12">
|
||||
<div class="col-lg-14">
|
||||
@foreach ($option->values as $value)
|
||||
<div class="form-check">
|
||||
<input
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="form-group variant-custom-selection">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="col-lg-4">
|
||||
<label>
|
||||
{!!
|
||||
$option->name .
|
||||
@@ -9,7 +9,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-10 col-lg-12">
|
||||
<div class="col-lg-14">
|
||||
<ul class="list-inline form-custom-radio custom-selection">
|
||||
@foreach ($option->values as $value)
|
||||
<li
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="form-group variant-input">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="col-lg-4">
|
||||
<label for="option-{{ $option->id }}">
|
||||
{!!
|
||||
$option->name .
|
||||
@@ -10,7 +10,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-10 col-lg-12">
|
||||
<div class="col-lg-14">
|
||||
<div class="form-input">
|
||||
<input
|
||||
name="options[{{ $option->id }}]"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="form-group variant-radio">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="col-lg-4">
|
||||
<label>
|
||||
{!!
|
||||
$option->name .
|
||||
@@ -9,7 +9,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-10 col-lg-12">
|
||||
<div class="col-lg-14">
|
||||
@foreach ($option->values as $value)
|
||||
<div class="form-radio">
|
||||
<input
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="form-group variant-custom-selection">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="col-lg-4">
|
||||
<label>
|
||||
{!!
|
||||
$option->name .
|
||||
@@ -9,7 +9,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-10 col-lg-12">
|
||||
<div class="col-lg-14">
|
||||
<ul class="list-inline form-custom-radio custom-selection">
|
||||
@foreach ($option->values as $value)
|
||||
<li
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="form-group variant-select">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="col-lg-4">
|
||||
<label for="option-{{ $option->id }}">
|
||||
{!!
|
||||
$option->name .
|
||||
@@ -9,7 +9,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-10 col-lg-12">
|
||||
<div class="col-lg-14">
|
||||
<div class="form-select">
|
||||
@if ($option->type === 'multiple_select')
|
||||
<select
|
||||
@@ -21,6 +21,7 @@
|
||||
>
|
||||
@else
|
||||
<select
|
||||
v-cloak
|
||||
name="options[{{ $option->id }}]"
|
||||
class="form-control custom-select-option arrow-black"
|
||||
id="option-{{ $option->id }}"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="form-group variant-input">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="col-lg-4">
|
||||
<label for="option-{{ $option->id }}">
|
||||
{!!
|
||||
$option->name .
|
||||
@@ -10,7 +10,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-10 col-lg-12">
|
||||
<div class="col-lg-14">
|
||||
<div class="form-input">
|
||||
<textarea
|
||||
class="form-control"
|
||||
|
||||
166
Themes/Storefront/views/public/products/show/details.blade.php
Normal file
166
Themes/Storefront/views/public/products/show/details.blade.php
Normal file
@@ -0,0 +1,166 @@
|
||||
<div class="product-details-info position-relative flex-grow-1">
|
||||
<div class="details-info-top">
|
||||
<h1 class="product-name">{{ $product->name }}</h1>
|
||||
|
||||
@if (setting('reviews_enabled'))
|
||||
<product-rating
|
||||
:rating-percent="ratingPercent"
|
||||
:review-count="totalReviews"
|
||||
>
|
||||
</product-rating>
|
||||
@endif
|
||||
|
||||
<template v-cloak v-if="item.is_in_stock">
|
||||
<div
|
||||
v-if="item.does_manage_stock"
|
||||
class="availability in-stock"
|
||||
>
|
||||
@{{ $trans('storefront::product.left_in_stock', { count: item.qty }) }}
|
||||
</div>
|
||||
|
||||
<div v-else class="availability in-stock">
|
||||
{{ trans('storefront::product.in_stock') }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-cloak
|
||||
v-else-if="item.is_out_of_stock"
|
||||
class="availability out-of-stock"
|
||||
>
|
||||
{{ trans('storefront::product.out_of_stock') }}
|
||||
</div>
|
||||
|
||||
<div class="brief-description">
|
||||
{!! $product->short_description !!}
|
||||
</div>
|
||||
|
||||
<div class="details-info-top-actions">
|
||||
<button
|
||||
class="btn btn-wishlist"
|
||||
:class="{ 'added': inWishlist }"
|
||||
@click="syncWishlist"
|
||||
>
|
||||
<i class="la-heart" :class="inWishlist ? 'las' : 'lar'"></i>
|
||||
{{ trans('storefront::product.wishlist') }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn btn-compare"
|
||||
:class="{ 'added': inCompareList }"
|
||||
@click="syncCompareList"
|
||||
>
|
||||
<i class="las la-random"></i>
|
||||
{{ trans('storefront::product.compare') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="details-info-middle">
|
||||
<div v-if="isActiveItem" class="product-price" v-html="item.formatted_price">
|
||||
{!! $item->formatted_price !!}
|
||||
</div>
|
||||
|
||||
<form
|
||||
@input="errors.clear($event.target.name)"
|
||||
@submit.prevent="addToCart"
|
||||
>
|
||||
@if ($product->variant)
|
||||
<div class="product-variants">
|
||||
@include('public.products.show.variations')
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="product-variants">
|
||||
@foreach ($product->options as $option)
|
||||
@includeIf("public.products.show.custom_options.{$option->type}")
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="details-info-middle-actions">
|
||||
<div class="number-picker-lg">
|
||||
<label for="qty">{{ trans('storefront::product.quantity') }}</label>
|
||||
|
||||
<div class="input-group-quantity">
|
||||
<input
|
||||
type="text"
|
||||
:value="cartItemForm.qty"
|
||||
min="1"
|
||||
:max="maxQuantity"
|
||||
id="qty"
|
||||
class="form-control input-number input-quantity"
|
||||
:disabled="isAddToCartDisabled"
|
||||
@focus="$event.target.select()"
|
||||
@input="updateQuantity(Number($event.target.value))"
|
||||
@keydown.up="updateQuantity(cartItemForm.qty + 1)"
|
||||
@keydown.down="updateQuantity(cartItemForm.qty - 1)"
|
||||
>
|
||||
|
||||
<span class="btn-wrapper">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="quantity"
|
||||
class="btn btn-number btn-plus"
|
||||
:disabled="isQtyIncreaseDisabled"
|
||||
@click="updateQuantity(cartItemForm.qty + 1)"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
aria-label="quantity"
|
||||
class="btn btn-number btn-minus"
|
||||
:disabled="isQtyDecreaseDisabled"
|
||||
@click="updateQuantity(cartItemForm.qty - 1)"
|
||||
>
|
||||
-
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary btn-add-to-cart"
|
||||
:class="{'btn-loading': addingToCart }"
|
||||
:disabled="isAddToCartDisabled"
|
||||
v-text="isActiveItem ? $trans('storefront::product.add_to_cart') : $trans('storefront::product.unavailable')"
|
||||
>
|
||||
{{ trans('storefront::product.add_to_cart') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="details-info-bottom">
|
||||
<ul class="list-inline additional-info">
|
||||
<li v-cloak v-if="item.sku" class="sku">
|
||||
<label>{{ trans('storefront::product.sku') }}</label>
|
||||
<span v-text="item.sku">{{ $item->sku }}</span>
|
||||
</li>
|
||||
|
||||
@if ($product->categories->isNotEmpty())
|
||||
<li>
|
||||
<label>{{ trans('storefront::product.categories') }}</label>
|
||||
|
||||
@foreach ($product->categories as $category)
|
||||
<a href="{{ $category->url() }}">{{ $category->name }}</a>{{ $loop->last ? '' : ',' }}
|
||||
@endforeach
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@if ($product->tags->isNotEmpty())
|
||||
<li>
|
||||
<label>{{ trans('storefront::product.tags') }}</label>
|
||||
|
||||
@foreach ($product->tags as $tag)
|
||||
<a href="{{ $tag->url() }}">{{ $tag->name }}</a>{{ $loop->last ? '' : ',' }}
|
||||
@endforeach
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
|
||||
@include('public.products.show.social_share')
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,75 +1,52 @@
|
||||
<div class="product-image-gallery">
|
||||
<div class="additional-image-wrap">
|
||||
@if (! $product->base_image->exists)
|
||||
<div class="additional-image">
|
||||
<img src="{{ asset('themes/storefront/public/images/image-placeholder.png') }}" alt="Image placeholder" class="image-placeholder">
|
||||
</div>
|
||||
@else
|
||||
<div class="additional-image">
|
||||
<img src="{{ $product->base_image->path }}" alt="Product image">
|
||||
</div>
|
||||
@endif
|
||||
<div class="product-gallery position-relative align-self-start">
|
||||
<div
|
||||
class="product-gallery-preview-wrap position-relative overflow-hidden"
|
||||
:class="{ 'visible-variation-image': hasAnyVariationImage }"
|
||||
>
|
||||
<img v-cloak v-if="hasAnyVariationImage" :src="variationImagePath" class="variation-image" alt="{{ $product->name }}">
|
||||
|
||||
@foreach ($product->additional_images as $additionalImage)
|
||||
@if (! $additionalImage->exists)
|
||||
<div class="additional-image">
|
||||
<img src="{{ asset('themes/storefront/public/images/image-placeholder.png') }}" alt="Image placeholder" class="image-placeholder">
|
||||
</div>
|
||||
@else
|
||||
<div class="additional-image">
|
||||
<img src="{{ $additionalImage->path }}" alt="product-additional-image">
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="product-gallery-preview">
|
||||
@if ($item->media->isNotEmpty())
|
||||
@foreach ($item->media as $media)
|
||||
<div class="gallery-preview-slide">
|
||||
<div class="gallery-preview-item">
|
||||
<img src="{{ $media->path }}" data-zoom="{{ $media->path }}" alt="{{ $product->name }}">
|
||||
|
||||
<div class="base-image-wrap">
|
||||
<div class="base-image">
|
||||
@if (! $product->base_image->exists)
|
||||
<div class="base-image-inner">
|
||||
<div class="base-image-slide" data-image="{{ asset('themes/storefront/public/images/image-placeholder.png') }}">
|
||||
<img src="{{ asset('themes/storefront/public/images/image-placeholder.png') }}" alt="Image placeholder" class="image-placeholder">
|
||||
|
||||
<div class="btn-gallery-trigger">
|
||||
<i class="las la-search-plus"></i>
|
||||
<a v-cloak href="{{ $media->path }}" data-gallery="product-gallery-preview" class="gallery-view-icon glightbox">
|
||||
<i class="las la-search-plus"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@else
|
||||
<div class="base-image-inner">
|
||||
<div class="base-image-slide" data-image="{{ $product->base_image->path }}">
|
||||
<img src="{{ $product->base_image->path }}" alt="Product image">
|
||||
<div class="gallery-preview-slide">
|
||||
<div class="gallery-preview-item">
|
||||
<img src="{{ asset('build/assets/image-placeholder.png') }}" data-zoom="{{ asset('build/assets/image-placeholder.png') }}" alt="{{ $product->name }}" class="image-placeholder">
|
||||
|
||||
<div class="btn-gallery-trigger">
|
||||
<a v-cloak href="{{ asset('build/assets/image-placeholder.png') }}" data-gallery="product-gallery-preview" class="gallery-view-icon glightbox">
|
||||
<i class="las la-search-plus"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@foreach ($product->additional_images as $additionalImage)
|
||||
@if (! $additionalImage->exists)
|
||||
<div class="base-image-inner">
|
||||
<div class="base-image-slide" data-image="{{ asset('themes/storefront/public/images/image-placeholder.png') }}">
|
||||
<img src="{{ asset('themes/storefront/public/images/image-placeholder.png') }}" alt="Image placeholder" class="image-placeholder">
|
||||
|
||||
<div class="btn-gallery-trigger">
|
||||
<i class="las la-search-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="base-image-inner">
|
||||
<div class="base-image-slide" data-image="{{ $additionalImage->path }}">
|
||||
<img src="{{ $additionalImage->path }}" alt="Product image">
|
||||
|
||||
<div class="btn-gallery-trigger">
|
||||
<i class="las la-search-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-gallery-thumbnail" v-cloak>
|
||||
@if ($item->media->isNotEmpty())
|
||||
@foreach ($item->media as $media)
|
||||
<div class="gallery-thumbnail-slide">
|
||||
<div class="gallery-thumbnail-item">
|
||||
<img src="{{ $media->path }}" alt="{{ $product->name }}">
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@else
|
||||
<div class="gallery-thumbnail-slide">
|
||||
<div class="gallery-thumbnail-item">
|
||||
<img src="{{ asset('build/assets/image-placeholder.png') }}" alt="{{ $product->name }}" class="image-placeholder">
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,10 +6,10 @@
|
||||
</div>
|
||||
|
||||
<div class="vertical-products-slider" ref="upSellProducts">
|
||||
@foreach ($upSellProducts->chunk(5) as $latestProductChunks)
|
||||
@foreach ($upSellProducts->chunk(5) as $upSellProductChunks)
|
||||
<div class="vertical-products-slide">
|
||||
@foreach ($latestProductChunks as $latestProduct)
|
||||
<product-card-vertical :product="{{ $latestProduct }}"></product-card-vertical>
|
||||
@foreach ($upSellProductChunks as $upSellProduct)
|
||||
<product-card-vertical :product="{{ $upSellProduct }}"></product-card-vertical>
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
<aside class="right-sidebar">
|
||||
@if (setting('storefront_features_section_enabled'))
|
||||
<div class="feature-list">
|
||||
@foreach ($features as $feature)
|
||||
<div class="single-feature">
|
||||
<div class="feature-icon">
|
||||
<i class="{{ $feature->icon }}"></i>
|
||||
</div>
|
||||
|
||||
<div class="feature-details">
|
||||
<h6>{{ $feature->title }}</h6>
|
||||
<span>{{ $feature->subtitle }}</span>
|
||||
</div>
|
||||
<div class="feature-list">
|
||||
@foreach ($features as $feature)
|
||||
<div class="single-feature">
|
||||
<div class="feature-icon">
|
||||
<i class="{{ $feature->icon }}"></i>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="feature-details">
|
||||
<h6>{{ $feature->title }}</h6>
|
||||
<span>{{ $feature->subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -3,25 +3,25 @@
|
||||
|
||||
<ul class="list-inline social-links">
|
||||
<li>
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u={{ url()->current() }}" title="{{ trans('storefront::product.facebook') }}" target="_blank">
|
||||
<a :href="`https://www.facebook.com/sharer/sharer.php?u=${productUrl}`" title="{{ trans('storefront::product.facebook') }}" target="_blank">
|
||||
<i class="lab la-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://twitter.com/share?url={{ url()->current() }}&text={{ $product->name }}" title="{{ trans('storefront::product.twitter') }}" target="_blank">
|
||||
<a :href="`https://twitter.com/share?url=${productUrl}&text={{ $product->name }}`" title="{{ trans('storefront::product.twitter') }}" target="_blank">
|
||||
<i class="lab la-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="http://www.linkedin.com/shareArticle?mini=true&url={{ url()->current() }}" title="{{ trans('storefront::product.linkedin') }}" target="_blank">
|
||||
<a :href="`http://www.linkedin.com/shareArticle?mini=true&url=${productUrl}`" title="{{ trans('storefront::product.linkedin') }}" target="_blank">
|
||||
<i class="lab la-linkedin"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="http://www.tumblr.com/share?v=3&u={{ url()->current() }}" title="{{ trans('storefront::product.tumblr') }}" target="_blank">
|
||||
<a :href="`http://www.tumblr.com/share?v=3&u=${productUrl}`" title="{{ trans('storefront::product.tumblr') }}" target="_blank">
|
||||
<i class="lab la-tumblr"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -2,78 +2,82 @@
|
||||
<div id="reviews" class="tab-pane reviews" :class="{ active: activeTab === 'reviews' }">
|
||||
<div class="row">
|
||||
<div class="col-xl-9 col-lg-18">
|
||||
<div class="review-form-wrap">
|
||||
<form @submit.prevent="addNewReview" @input="errors.clear($event.target.name)">
|
||||
<div class="review-form">
|
||||
<h4>{{ trans('storefront::product.add_a_review') }}</h4>
|
||||
@if($product->purchasedByUser())
|
||||
<div class="review-form-wrap">
|
||||
|
||||
@honeypot
|
||||
<form @submit.prevent="addNewReview" @input="errors.clear($event.target.name)">
|
||||
<div class="review-form">
|
||||
<h4>{{ trans('storefront::product.add_a_review') }}</h4>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-18">
|
||||
<div class="form-group">
|
||||
<label>{{ trans('storefront::product.review_form.your_rating') }}<span>*</span></label>
|
||||
@honeypot
|
||||
|
||||
<div class="rating-input">
|
||||
<input type="radio" name="rating" v-model="reviewForm.rating" id="star-5" value="5">
|
||||
<label for="star-5" title="5 star">
|
||||
<i class="las la-star"></i>
|
||||
</label>
|
||||
<div class="row">
|
||||
<div class="col-md-18">
|
||||
<div class="form-group">
|
||||
<label>{{ trans('storefront::product.review_form.your_rating') }}<span>*</span></label>
|
||||
|
||||
<input type="radio" name="rating" v-model="reviewForm.rating" id="star-4" value="4">
|
||||
<label for="star-4" title="4 star">
|
||||
<i class="las la-star"></i>
|
||||
</label>
|
||||
<div class="rating-input">
|
||||
<input type="radio" name="rating" v-model="reviewForm.rating" id="star-5" value="5">
|
||||
<label for="star-5" title="5 star">
|
||||
<i class="las la-star"></i>
|
||||
</label>
|
||||
|
||||
<input type="radio" name="rating" v-model="reviewForm.rating" id="star-3" value="3">
|
||||
<label for="star-3" title="3 star">
|
||||
<i class="las la-star"></i>
|
||||
</label>
|
||||
<input type="radio" name="rating" v-model="reviewForm.rating" id="star-4" value="4">
|
||||
<label for="star-4" title="4 star">
|
||||
<i class="las la-star"></i>
|
||||
</label>
|
||||
|
||||
<input type="radio" name="rating" v-model="reviewForm.rating" id="star-2" value="2">
|
||||
<label for="star-2" title="2 star">
|
||||
<i class="las la-star"></i>
|
||||
</label>
|
||||
<input type="radio" name="rating" v-model="reviewForm.rating" id="star-3" value="3">
|
||||
<label for="star-3" title="3 star">
|
||||
<i class="las la-star"></i>
|
||||
</label>
|
||||
|
||||
<input type="radio" name="rating" v-model="reviewForm.rating" id="star-1" value="1">
|
||||
<label for="star-1" title="1 star">
|
||||
<i class="las la-star"></i>
|
||||
</label>
|
||||
<input type="radio" name="rating" v-model="reviewForm.rating" id="star-2" value="2">
|
||||
<label for="star-2" title="2 star">
|
||||
<i class="las la-star"></i>
|
||||
</label>
|
||||
|
||||
<input type="radio" name="rating" v-model="reviewForm.rating" id="star-1" value="1">
|
||||
<label for="star-1" title="1 star">
|
||||
<i class="las la-star"></i>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<span class="error-message" v-if="errors.has('rating')" v-text="errors.get('rating')"></span>
|
||||
</div>
|
||||
|
||||
<span class="error-message" v-if="errors.has('rating')" v-text="errors.get('rating')"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="name">{{ trans('storefront::product.review_form.name') }}<span>*</span></label>
|
||||
<input type="text" name="reviewer_name" v-model="reviewForm.reviewer_name" id="name" class="form-control">
|
||||
<span class="error-message" v-if="errors.has('reviewer_name')" v-text="errors.get('reviewer_name')"></span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">{{ trans('storefront::product.review_form.name') }}<span>*</span></label>
|
||||
<input type="text" name="reviewer_name" v-model="reviewForm.reviewer_name" id="name" class="form-control">
|
||||
<span class="error-message" v-if="errors.has('reviewer_name')" v-text="errors.get('reviewer_name')"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="comment">{{ trans('storefront::product.review_form.comment') }}<span>*</span></label>
|
||||
<textarea rows="5" name="comment" v-model="reviewForm.comment" id="comment" class="form-control"></textarea>
|
||||
<span class="error-message" v-if="errors.has('comment')" v-text="errors.get('comment')"></span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="comment">{{ trans('storefront::product.review_form.comment') }}<span>*</span></label>
|
||||
<textarea rows="5" name="comment" v-model="reviewForm.comment" id="comment" class="form-control"></textarea>
|
||||
<span class="error-message" v-if="errors.has('comment')" v-text="errors.get('comment')"></span>
|
||||
</div>
|
||||
<div class="form-group p-t-5 captcha-field">
|
||||
@captcha
|
||||
|
||||
<input type="text" name="captcha" v-model="reviewForm.captcha" placeholder="{{ trans('storefront::layout.enter_captcha_code') }}">
|
||||
<span class="error-message" v-if="errors.has('captcha')" v-text="errors.get('captcha')"></span>
|
||||
</div>
|
||||
|
||||
<div class="form-group p-t-5">
|
||||
@captcha
|
||||
<input type="text" name="captcha" v-model="reviewForm.captcha" class="captcha-input" placeholder="{{ trans('storefront::layout.enter_captcha_code') }}">
|
||||
<span class="error-message" v-if="errors.has('captcha')" v-text="errors.get('captcha')"></span>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary btn-submit"
|
||||
:class="{ 'btn-loading': addingNewReview }"
|
||||
>
|
||||
{{ trans('storefront::product.review_form.submit') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary btn-submit"
|
||||
:class="{ 'btn-loading': addingNewReview }"
|
||||
>
|
||||
{{ trans('storefront::product.review_form.submit') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="col-xl-9 col-lg-18">
|
||||
@@ -106,7 +110,7 @@
|
||||
:total-page="totalReviewPage"
|
||||
:current-page="currentReviewPage"
|
||||
@page-changed="changeReviewPage"
|
||||
v-if="totalReviews > 4"
|
||||
v-if="totalReviews > 5"
|
||||
>
|
||||
</v-pagination>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
@foreach ($product->variations as $variation)
|
||||
<div class="variant-custom-selection">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<label class="d-none d-lg-block">
|
||||
{{ $variation->name }}
|
||||
</label>
|
||||
|
||||
<label class="d-lg-none">
|
||||
{{ $variation->name }}:
|
||||
</label>
|
||||
|
||||
<span class="d-lg-none" v-text="activeVariationValues['{{ $variation->uid }}']"></span>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-14">
|
||||
<span class="d-none d-lg-flex variation-label" v-text="activeVariationValues['{{ $variation->uid }}']"></span>
|
||||
|
||||
<ul class="list-inline form-custom-radio custom-selection">
|
||||
@foreach ($variation->values as $value)
|
||||
<li
|
||||
:title="
|
||||
isVariationValueEnabled('{{ $variation->uid }}', {{ $loop->parent->index }}, '{{ $value->uid }}') &&
|
||||
!isActiveVariationValue('{{ $variation->uid }}', '{{ $value->uid }}') ?
|
||||
'{{ trans('storefront::product.click_to_select') }} {{ $value->label }}' :
|
||||
''
|
||||
"
|
||||
class="
|
||||
{{ $variation->type === 'color' ? 'variation-color' : '' }}
|
||||
{{ $variation->type === 'image' ? 'variation-image' : '' }}
|
||||
"
|
||||
:class="{
|
||||
active: isActiveVariationValue('{{ $variation->uid }}', '{{ $value->uid }}'),
|
||||
disabled: !isVariationValueEnabled('{{ $variation->uid }}', {{ $loop->parent->index }}, '{{ $value->uid }}')
|
||||
|
||||
}"
|
||||
@mouseenter="setVariationValueLabel({{ $loop->parent->index }}, {{ $loop->index }})"
|
||||
@mouseleave="setActiveVariationValueLabel({{ $loop->parent->index }})"
|
||||
@click="syncVariationValue(
|
||||
'{{ $variation->uid }}',
|
||||
{{ $loop->parent->index }},
|
||||
'{{ $value->uid }}',
|
||||
{{ $loop->index }}
|
||||
)"
|
||||
>
|
||||
@if ($variation->type === 'text')
|
||||
{{ $value->label }}
|
||||
@elseif ($variation->type === 'color')
|
||||
<div style="background-color: {{ $value->color }};"></div>
|
||||
@elseif ($variation->type === 'image')
|
||||
<img src="{{ $value->image->path }}" alt="{{ $value->label }}">
|
||||
@endif
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
Reference in New Issue
Block a user