Bootstrap 4 Conversion Completed
This commit is contained in:
devansh bawari
parent
05d73164e9
commit
614b78d3a2
|
|
@ -2,50 +2,52 @@
|
|||
<div class="modal-parent scrollable">
|
||||
<div class="cd-quick-view">
|
||||
<template v-if="showProductDetails || true">
|
||||
<div class="col-lg-6 product-gallery">
|
||||
<ul class="cd-slider" type="none">
|
||||
<carousel-component
|
||||
slides-per-page="1"
|
||||
navigation-enabled="hide"
|
||||
:slides-count="product.galleryImages.length">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<ul class="cd-slider" type="none">
|
||||
<carousel-component
|
||||
slides-per-page="1"
|
||||
navigation-enabled="hide"
|
||||
:slides-count="product.galleryImages.length">
|
||||
|
||||
<slide
|
||||
:key="index"
|
||||
:slot="`slide-${index}`"
|
||||
title=" "
|
||||
v-for="(image, index) in product.galleryImages">
|
||||
<slide
|
||||
:key="index"
|
||||
:slot="`slide-${index}`"
|
||||
title=" "
|
||||
v-for="(image, index) in product.galleryImages">
|
||||
|
||||
<li class="selected" @click="showProductDetails = false">
|
||||
<img :src="image.medium_image_url" :alt="product.name" />
|
||||
</li>
|
||||
</slide>
|
||||
</carousel-component>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 fs16">
|
||||
<h2 class="fw6 quick-view-name">{{ product.name }}</h2>
|
||||
|
||||
<div class="product-price" v-html="product.priceHTML"></div>
|
||||
|
||||
<div
|
||||
class="product-rating"
|
||||
v-if="product.totalReviews && product.totalReviews > 0">
|
||||
|
||||
<star-ratings :ratings="product.avgRating"></star-ratings>
|
||||
<a class="pl10 unset active-hover" :href="`${$root.baseUrl}/reviews/${product.slug}`">
|
||||
{{ __('products.reviews-count', {'totalReviews': product.totalReviews}) }}
|
||||
</a>
|
||||
<li class="selected" @click="showProductDetails = false">
|
||||
<img :src="image.medium_image_url" :alt="product.name" />
|
||||
</li>
|
||||
</slide>
|
||||
</carousel-component>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="product-rating" v-else>
|
||||
<span class="fs14" v-text="product.firstReviewText"></span>
|
||||
</div>
|
||||
<div class="col-lg-6 fs16">
|
||||
<h2 class="fw6 quick-view-name">{{ product.name }}</h2>
|
||||
|
||||
<p class="pt14 fs14 description-text" v-html="product.shortDescription"></p>
|
||||
<div class="product-price" v-html="product.priceHTML"></div>
|
||||
|
||||
<div class="product-actions">
|
||||
<vnode-injector :nodes="getDynamicHTML(product.addToCartHtml)"></vnode-injector>
|
||||
<div
|
||||
class="product-rating"
|
||||
v-if="product.totalReviews && product.totalReviews > 0">
|
||||
|
||||
<star-ratings :ratings="product.avgRating"></star-ratings>
|
||||
<a class="pl10 unset active-hover" :href="`${$root.baseUrl}/reviews/${product.slug}`">
|
||||
{{ __('products.reviews-count', {'totalReviews': product.totalReviews}) }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="product-rating" v-else>
|
||||
<span class="fs14" v-text="product.firstReviewText"></span>
|
||||
</div>
|
||||
|
||||
<p class="pt14 fs14 description-text" v-html="product.shortDescription"></p>
|
||||
|
||||
<div class="product-actions">
|
||||
<vnode-injector :nodes="getDynamicHTML(product.addToCartHtml)"></vnode-injector>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -195,6 +195,7 @@ body {
|
|||
display: table;
|
||||
min-width: 150px;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
text-align: right;
|
||||
padding-top: 5px;
|
||||
|
||||
|
|
@ -482,6 +483,7 @@ header {
|
|||
.mini-cart-container {
|
||||
height: 50px;
|
||||
padding: 5px 17px;
|
||||
display: inline-block;
|
||||
|
||||
#mini-cart {
|
||||
.mini-cart-content {
|
||||
|
|
@ -511,15 +513,14 @@ header {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// transform: scale(1) rotateZ(-180deg);
|
||||
// transition: transform .15s,opacity .15s;
|
||||
}
|
||||
}
|
||||
|
||||
~ .compare-btn,
|
||||
~ .wishlist-btn {
|
||||
.left-wrapper {
|
||||
float: right;
|
||||
|
||||
.compare-btn, .wishlist-btn {
|
||||
height: 50px;
|
||||
float: right;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
padding: 10px 16px 6px 16px;
|
||||
|
|
|
|||
|
|
@ -837,6 +837,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ body {
|
|||
}
|
||||
|
||||
.select-icon {
|
||||
top: 12px;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -57,10 +58,18 @@ body {
|
|||
}
|
||||
|
||||
.mini-cart-container {
|
||||
~ .compare-btn,
|
||||
~ .wishlist-btn {
|
||||
float: left;
|
||||
#mini-cart {
|
||||
.badge {
|
||||
top: -8px;
|
||||
left: 73%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-wrapper {
|
||||
float: left;
|
||||
|
||||
.compare-btn, .wishlist-btn {
|
||||
.badge-container {
|
||||
.badge {
|
||||
top: -28px;
|
||||
|
|
@ -68,21 +77,6 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
~ .wishlist-btn , ~ .compare-btn {
|
||||
.badge-container {
|
||||
.badge {
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#mini-cart {
|
||||
.badge {
|
||||
top: -8px;
|
||||
left: 73%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -109,8 +103,8 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.main-content-wrapper .vc-header
|
||||
|
||||
.main-content-wrapper
|
||||
.vc-header
|
||||
.mini-cart-container {
|
||||
#mini-cart {
|
||||
.badge {
|
||||
|
|
@ -123,30 +117,6 @@ body {
|
|||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
~ .compare-btn,
|
||||
~ .wishlist-btn {
|
||||
.badge-container {
|
||||
top: -6px;
|
||||
left: 20px;
|
||||
vertical-align: top;
|
||||
|
||||
.badge {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
~ .compare-btn {
|
||||
left: 15%;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
~ .wishlist-btn {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.form-container {
|
||||
|
|
@ -190,15 +160,20 @@ body {
|
|||
#top {
|
||||
#account {
|
||||
.welcome-content {
|
||||
float: left;
|
||||
|
||||
i {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
+ .account-modal {
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: 0;
|
||||
width: 100% !important;
|
||||
right: unset;
|
||||
|
||||
.modal-content {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -207,14 +182,6 @@ body {
|
|||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#account {
|
||||
+ .account-modal {
|
||||
.modal-content {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#cart-modal-content {
|
||||
|
|
|
|||
|
|
@ -125,50 +125,51 @@
|
|||
</div>
|
||||
|
||||
<div class="col-lg-7 col-md-12 vc-full-screen">
|
||||
{!! view_render_event('bagisto.shop.layout.header.cart-item.before') !!}
|
||||
@include('shop::checkout.cart.mini-cart')
|
||||
{!! view_render_event('bagisto.shop.layout.header.cart-item.after') !!}
|
||||
<div class="left-wrapper">
|
||||
@php
|
||||
$showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
|
||||
|
||||
@php
|
||||
$showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;
|
||||
$showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;
|
||||
@endphp
|
||||
|
||||
$showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
|
||||
{!! view_render_event('bagisto.shop.layout.header.wishlist.before') !!}
|
||||
@if($showWishlist)
|
||||
<a class="wishlist-btn unset" :href="`{{ route('customer.wishlist.index') }}`">
|
||||
<i class="material-icons">favorite_border</i>
|
||||
<div class="badge-container" v-if="wishlistCount > 0">
|
||||
<span class="badge" v-text="wishlistCount"></span>
|
||||
</div>
|
||||
<span>{{ __('shop::app.layouts.wishlist') }}</span>
|
||||
</a>
|
||||
@endif
|
||||
{!! view_render_event('bagisto.shop.layout.header.wishlist.after') !!}
|
||||
|
||||
@endphp
|
||||
{!! view_render_event('bagisto.shop.layout.header.compare.before') !!}
|
||||
@if ($showCompare)
|
||||
<a
|
||||
class="compare-btn unset"
|
||||
@auth('customer')
|
||||
href="{{ route('velocity.customer.product.compare') }}"
|
||||
@endauth
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.compare.before') !!}
|
||||
@if ($showCompare)
|
||||
<a
|
||||
class="compare-btn unset"
|
||||
@auth('customer')
|
||||
href="{{ route('velocity.customer.product.compare') }}"
|
||||
@endauth
|
||||
@guest('customer')
|
||||
href="{{ route('velocity.product.compare') }}"
|
||||
@endguest
|
||||
>
|
||||
|
||||
@guest('customer')
|
||||
href="{{ route('velocity.product.compare') }}"
|
||||
@endguest
|
||||
>
|
||||
<i class="material-icons">compare_arrows</i>
|
||||
<div class="badge-container" v-if="compareCount > 0">
|
||||
<span class="badge" v-text="compareCount"></span>
|
||||
</div>
|
||||
<span>{{ __('velocity::app.customer.compare.text') }}</span>
|
||||
</a>
|
||||
@endif
|
||||
{!! view_render_event('bagisto.shop.layout.header.compare.after') !!}
|
||||
|
||||
<i class="material-icons">compare_arrows</i>
|
||||
<div class="badge-container" v-if="compareCount > 0">
|
||||
<span class="badge" v-text="compareCount"></span>
|
||||
</div>
|
||||
<span>{{ __('velocity::app.customer.compare.text') }}</span>
|
||||
</a>
|
||||
@endif
|
||||
{!! view_render_event('bagisto.shop.layout.header.compare.after') !!}
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.wishlist.before') !!}
|
||||
@if($showWishlist)
|
||||
<a class="wishlist-btn unset" :href="`{{ route('customer.wishlist.index') }}`">
|
||||
<i class="material-icons">favorite_border</i>
|
||||
<div class="badge-container" v-if="wishlistCount > 0">
|
||||
<span class="badge" v-text="wishlistCount"></span>
|
||||
</div>
|
||||
<span>{{ __('shop::app.layouts.wishlist') }}</span>
|
||||
</a>
|
||||
@endif
|
||||
{!! view_render_event('bagisto.shop.layout.header.wishlist.after') !!}
|
||||
{!! view_render_event('bagisto.shop.layout.header.cart-item.before') !!}
|
||||
@include('shop::checkout.cart.mini-cart')
|
||||
{!! view_render_event('bagisto.shop.layout.header.cart-item.after') !!}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -449,10 +450,10 @@
|
|||
this.__('shop.general.alert.error'),
|
||||
"{{ __('shop::app.common.error') }}"
|
||||
);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
imageInput.value = '';
|
||||
|
||||
|
||||
window.showAlert(
|
||||
`alert-danger`,
|
||||
this.__('shop.general.alert.error'),
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="mini-cart-container float-right">
|
||||
<div class="mini-cart-container">
|
||||
<mini-cart
|
||||
view-cart="{{ route('shop.checkout.cart.index') }}"
|
||||
cart-text="{{ __('shop::app.minicart.view-cart') }}"
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
@endphp
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.locale.before') !!}
|
||||
<div class="float-left">
|
||||
<div class="d-inline-block">
|
||||
<div class="dropdown">
|
||||
@php
|
||||
$localeImage = null;
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
{!! view_render_event('bagisto.shop.layout.header.currency-item.before') !!}
|
||||
|
||||
@if (core()->getCurrentChannel()->currencies->count() > 1)
|
||||
<div class="float-left">
|
||||
<div class="d-inline-block">
|
||||
<div class="dropdown">
|
||||
<select
|
||||
class="btn btn-link dropdown-toggle control locale-switcher styled-select"
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@
|
|||
<script type="text/x-template" id="login-header-template">
|
||||
<div class="dropdown">
|
||||
<div id="account">
|
||||
|
||||
<div class="welcome-content float-right" @click="togglePopup">
|
||||
<div class="d-inline-block welcome-content" @click="togglePopup">
|
||||
<i class="material-icons align-vertical-top">perm_identity</i>
|
||||
<span class="text-center">
|
||||
@guest('customer')
|
||||
|
|
@ -23,91 +22,89 @@
|
|||
</div>
|
||||
|
||||
<div class="account-modal sensitive-modal hide mt5">
|
||||
<!--Content-->
|
||||
@guest('customer')
|
||||
<div class="modal-content">
|
||||
<!--Header-->
|
||||
<div class="modal-header no-border pb0">
|
||||
<label class="fs18 grey">{{ __('shop::app.header.title') }}</label>
|
||||
@guest('customer')
|
||||
<div class="modal-content">
|
||||
<!-- header -->
|
||||
<div class="modal-header no-border pb0">
|
||||
<label class="fs18 grey">{{ __('shop::app.header.title') }}</label>
|
||||
|
||||
<button type="button" class="close disable-box-shadow" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true" class="white-text fs20" @click="togglePopup">×</span>
|
||||
</button>
|
||||
<button type="button" class="close disable-box-shadow" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true" class="white-text fs20" @click="togglePopup">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- body -->
|
||||
<div class="pl10 fs14">
|
||||
<p>{{ __('shop::app.header.dropdown-text') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<div class="modal-footer">
|
||||
<div>
|
||||
<a href="{{ route('customer.session.index') }}">
|
||||
<button
|
||||
type="button"
|
||||
class="theme-btn fs14 fw6">
|
||||
|
||||
{{ __('shop::app.header.sign-in') }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!--Body-->
|
||||
<div class="pl10 fs14">
|
||||
<p>{{ __('shop::app.header.dropdown-text') }}</p>
|
||||
</div>
|
||||
|
||||
<!--Footer-->
|
||||
<div class="modal-footer">
|
||||
<div>
|
||||
<a href="{{ route('customer.session.index') }}">
|
||||
<button
|
||||
type="button"
|
||||
class="theme-btn fs14 fw6">
|
||||
|
||||
{{ __('shop::app.header.sign-in') }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a href="{{ route('customer.register.index') }}">
|
||||
<button
|
||||
type="button"
|
||||
class="theme-btn fs14 fw6">
|
||||
{{ __('shop::app.header.sign-up') }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ route('customer.register.index') }}">
|
||||
<button
|
||||
type="button"
|
||||
class="theme-btn fs14 fw6">
|
||||
{{ __('shop::app.header.sign-up') }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endguest
|
||||
</div>
|
||||
@endguest
|
||||
|
||||
@auth('customer')
|
||||
<div class="modal-content customer-options">
|
||||
<div class="customer-session">
|
||||
<label class="">
|
||||
{{ auth()->guard('customer')->user()->first_name }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<ul type="none">
|
||||
<li>
|
||||
<a href="{{ route('customer.profile.index') }}" class="unset">{{ __('shop::app.header.profile') }}</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="{{ route('customer.orders.index') }}" class="unset">{{ __('velocity::app.shop.general.orders') }}</a>
|
||||
</li>
|
||||
|
||||
@php
|
||||
$showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;
|
||||
|
||||
$showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
|
||||
@endphp
|
||||
|
||||
@if ($showWishlist)
|
||||
<li>
|
||||
<a href="{{ route('customer.wishlist.index') }}" class="unset">{{ __('shop::app.header.wishlist') }}</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@if ($showCompare)
|
||||
<li>
|
||||
<a href="{{ route('velocity.customer.product.compare') }}" class="unset">{{ __('velocity::app.customer.compare.text') }}</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
<li>
|
||||
<a href="{{ route('customer.session.destroy') }}" class="unset">{{ __('shop::app.header.logout') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
@auth('customer')
|
||||
<div class="modal-content customer-options">
|
||||
<div class="customer-session">
|
||||
<label class="">
|
||||
{{ auth()->guard('customer')->user()->first_name }}
|
||||
</label>
|
||||
</div>
|
||||
@endauth
|
||||
<!--/.Content-->
|
||||
|
||||
<ul type="none">
|
||||
<li>
|
||||
<a href="{{ route('customer.profile.index') }}" class="unset">{{ __('shop::app.header.profile') }}</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="{{ route('customer.orders.index') }}" class="unset">{{ __('velocity::app.shop.general.orders') }}</a>
|
||||
</li>
|
||||
|
||||
@php
|
||||
$showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;
|
||||
|
||||
$showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
|
||||
@endphp
|
||||
|
||||
@if ($showWishlist)
|
||||
<li>
|
||||
<a href="{{ route('customer.wishlist.index') }}" class="unset">{{ __('shop::app.header.wishlist') }}</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@if ($showCompare)
|
||||
<li>
|
||||
<a href="{{ route('velocity.customer.product.compare') }}" class="unset">{{ __('velocity::app.customer.compare.text') }}</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
<li>
|
||||
<a href="{{ route('customer.session.destroy') }}" class="unset">{{ __('shop::app.header.logout') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@endauth
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue