fixed drawer issues

This commit is contained in:
shubhammehrotra.symfony@webkul.com 2020-01-21 21:30:55 +05:30
parent 4bf3e43bd8
commit d48493225c
39 changed files with 897 additions and 970 deletions

View File

@ -811,118 +811,6 @@
top: 8px;
}
.nav-container {
position: fixed;
width: 300px !important;
height: 100vh;
background-color: white;
margin-left: -16px;
z-index: 2;
}
.nav-container .wrapper {
margin-top: 15px;
}
.nav-container .wrapper .category-title {
display: table;
width: 100%;
padding-left: 10px;
margin: 13px 0px 13px 0px;
display: none;
}
.nav-container .wrapper .category-title > i {
display: table-cell;
vertical-align: middle;
font-size: 26px;
}
.nav-container .wrapper .category-title span {
display: table-cell;
vertical-align: top;
font-size: 20px;
}
.nav-container .wrapper .category-title span i {
float: left !important;
margin: 2px 2px 0px 0px !important;
}
.nav-container .wrapper .greeting {
display: table;
width: 100%;
padding-left: 10px;
margin: 13px 0px 13px 0px;
}
.nav-container .wrapper .greeting > i {
display: table-cell;
vertical-align: middle;
font-size: 26px;
}
.nav-container .wrapper .greeting span {
display: table-cell;
vertical-align: top;
font-size: 20px;
}
.nav-container .wrapper .greeting span i {
float: right !important;
margin: 2px 20px 0px 0px !important;
}
.nav-container .wrapper .offers {
color: rgba(0, 0, 0, 0.83);
line-height: 20px;
font-weight: 530;
border-top: 1px solid rgba(0, 0, 0, 0.24);
border-bottom: 1px solid rgba(0, 0, 0, 0.24);
}
.nav-container .wrapper .offers li {
font-size: 16px;
margin: 16px 0px 16px 15px;
}
.nav-container .wrapper .layered-category {
font-weight: 501;
letter-spacing: 0.2px;
margin: 16px 0px 0px 0px;
}
.nav-container .wrapper .layered-category .category-icon {
width: 36px;
height: 20px;
padding-left: 12px;
display: inline-block;
}
.nav-container .wrapper .layered-category .category-icon img {
width: 100%;
height: 100%;
vertical-align: text-top;
}
.nav-container .wrapper .layered-category li {
margin: 18px 0px 18px 5px;
font-size: 17px;
}
.nav-container .wrapper .layered-category li a span {
color: black;
font-size: 14px;
margin: 16px 0px 16px 15px !important;
font-weight: 400px;
}
.nav-container .wrapper .layered-category li i {
float: right;
font-size: 16px;
margin: 3px 20px 0px 0px;
}
.review-page-container {
padding: 20px;
}
@ -1157,6 +1045,14 @@
margin-top: 10px;
}
.product-card-new .card-body .product-name,
.product-card-new .card-body .product-rating {
width: 15rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.product-card-new .product-price .sticker {
display: block;
}
@ -1579,7 +1475,7 @@
.account-content .sidebar .customer-sidebar .navigation li:hover, .account-content .sidebar .customer-sidebar .navigation li.active {
color: #28557B;
background-color: #F7F7F9;
background-color: #ECECEC;
}
.account-content .sidebar .customer-sidebar .navigation li i.icon {
@ -2583,7 +2479,7 @@
}
.recetly-viewed-products-wrapper {
padding: 10px;
padding: 2px;
}
/* @author Shubham Mehrotra */
@ -2788,6 +2684,14 @@ header #search-form > *:focus {
vertical-align: middle;
}
.product-policy-container .product-policy-wrapper:nth-of-type(1) {
padding-left: 0px;
}
.product-policy-container .product-policy-wrapper:nth-last-of-type(1) {
padding-right: 0px;
}
/* product policy section */
/* category with custom option */
.category-with-custom-options img {
@ -3021,7 +2925,6 @@ header #search-form > *:focus {
.main-content-wrapper .main-category {
padding: 8px 15px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
.main-content-wrapper .content-list {
@ -3255,9 +3158,14 @@ body::after {
.footer .footer-content .newsletter-subscription .newsletter-wrapper .social-icons .within-circle {
background: #4d7ea8;
margin-right: 2px;
border: 1px solid rgba(255, 255, 255, 0.52);
}
.footer .footer-content .newsletter-subscription .newsletter-wrapper .social-icons .within-circle:hover {
opacity: 0.5;
}
.footer .footer-content .newsletter-subscription .newsletter-wrapper .social-icons img {
background: #4d7ea8;
border: 1px solid rgba(255, 255, 255, 0.52);
@ -3299,6 +3207,10 @@ body::after {
color: rgba(255, 255, 255, 0.83);
}
.footer .footer-content > .row .footer-rt-content {
padding-right: 0px;
}
.footer .footer-content > .row .footer-rt-content .row > div {
width: 100%;
display: block;
@ -3349,6 +3261,10 @@ body::after {
color: rgba(255, 255, 255, 0.52);
}
.footer .footer-content .footer-statics .software-description {
padding-left: 0px;
}
.footer .footer-content .footer-statics .software-description p {
font-size: 14px;
}
@ -3996,6 +3912,13 @@ body::after {
padding: 10px 0 !important;
}
.small-card-container .card-body .product-name {
width: 17rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.small-card-container .sticker,
.small-card-container .regular-price {
display: none;
@ -4219,8 +4142,8 @@ button[disabled] {
font-size: 14px;
}
.max-height-300 {
max-height: 300px;
.max-height-350 {
max-height: 350px;
}
.border-normal {
@ -4229,7 +4152,9 @@ button[disabled] {
.product-detail {
padding-top: 20px;
margin-bottom: 60px;
margin-bottom: 20px;
padding-left: 0 !important;
padding-right: 0 !important;
}
.product-detail .magnifier > img {
@ -4388,10 +4313,16 @@ button[disabled] {
.product-detail #product-form .form-container .left {
top: 60px;
padding: 0px;
position: -webkit-sticky;
position: sticky;
}
.product-detail #product-form .form-container .left .product-image-group > div {
margin: 0;
padding: 0;
}
.product-detail #product-form .form-container .right .swatch-container {
margin-top: 10px;
display: inline-block;
@ -4455,8 +4386,12 @@ button[disabled] {
max-height: 300px;
}
.related-products {
margin-bottom: 60px;
}
.vc-small-screen {
display: none;
display: none !important;
}
@media only screen and (max-width: 1100px) {
@ -4490,6 +4425,23 @@ button[disabled] {
}
@media only screen and (max-width: 992px) {
.vc-small-screen {
display: block !important;
}
.main-content-wrapper {
position: relative;
}
.main-content-wrapper .vc-header {
top: 0;
margin: 0;
padding: 0;
z-index: 100;
position: -webkit-sticky;
position: sticky;
background-color: #FFFFFF;
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.main-content-wrapper .vc-header > div {
display: none;
}
@ -4502,13 +4454,13 @@ button[disabled] {
max-height: 50px;
}
.main-content-wrapper .vc-header > div.vc-small-screen .hamburger-wrapper {
display: table;
display: inline-block;
height: 50px;
}
.main-content-wrapper .vc-header > div.vc-small-screen .hamburger-wrapper .hamburger {
top: 12px;
font-size: 24px;
display: table-cell;
vertical-align: middle;
position: relative;
}
.main-content-wrapper .vc-header > div.vc-small-screen .right-vc-header {
text-align: right;
@ -4522,9 +4474,6 @@ button[disabled] {
#top {
display: none;
}
#top + header {
display: none;
}
.product-card-new .cart-wish-wrap .wishlist-icon {
text-align: left;
}
@ -4600,6 +4549,117 @@ button[disabled] {
.vc-small-screen .searchbar {
padding-left: 100px !important;
}
.carousel-products.vc-full-screen {
display: none;
}
.carousel-products.vc-small-screen {
display: block !important;
}
.reviews-container .review-wrapper,
.reviews-container .review-wrapper:nth-of-type(1),
.reviews-container .review-wrapper:nth-last-of-type(1),
.reviews-container .review-wrapper:nth-last-of-type(2) {
padding: 0px;
}
.reviews-container .review-wrapper:not(:last-child) {
margin-bottom: 10px;
}
.product-policy-wrapper {
padding: 0px !important;
}
.product-policy-wrapper:not(:last-child) {
margin-bottom: 10px;
}
.main-product-image {
display: none;
}
.product-detail #product-form .form-container .left {
top: 0px;
padding: 0px;
position: relative;
margin-bottom: 20px;
}
.product-detail #product-form .form-container .right {
padding: 0px;
}
.product-detail .customer-rating > .row > div {
margin-bottom: 30px;
}
.review-page-container > div:not(:last-child) {
margin-bottom: 20px;
}
.nav-container {
top: 0px;
left: 0px;
z-index: 10;
height: 100vh;
position: fixed;
font-size: 16px;
overflow-y: scroll;
-webkit-box-shadow: 0 2px 8px 0;
box-shadow: 0 2px 8px 0;
width: 300px !important;
background-color: #FFFFFF;
}
.nav-container .wrapper .category-title {
width: 100%;
display: table;
padding-left: 10px;
display: none;
margin: 13px 0px 13px 0px;
}
.nav-container .wrapper .category-title > i {
font-size: 26px;
display: table-cell;
vertical-align: middle;
}
.nav-container .wrapper .category-title span {
font-size: 20px;
display: table-cell;
vertical-align: top;
}
.nav-container .wrapper .category-title span i {
float: left !important;
margin: 2px 2px 0px 0px !important;
}
.nav-container .wrapper .greeting {
width: 100%;
display: table;
}
.nav-container .wrapper .greeting > i {
font-size: 26px;
display: table-cell;
vertical-align: middle;
}
.nav-container .wrapper .greeting span {
font-size: 20px;
display: table-cell;
vertical-align: top;
}
.nav-container .wrapper ul {
color: black;
border-top: 1px solid #CCCCCC;
}
.nav-container .wrapper ul li {
font-size: 16px;
padding: 10px 0px 10px 20px;
}
.nav-container .wrapper ul li:hover {
background-color: #ECECEC;
}
.nav-container .wrapper ul li .category-logo {
width: 18px;
height: 18px;
margin-right: 5px;
display: inline-block;
}
.nav-container .wrapper ul li .rango-arrow-right {
float: right;
padding-right: 15px;
}
.nav-container .drawer-section {
padding: 15px;
}
}
/* fallback */
@ -12884,7 +12944,7 @@ body {
#top #account + .account-modal {
top: 40px;
right: 10px;
z-index: 100;
z-index: 101;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
@ -13329,9 +13389,9 @@ header .dropdown-menu-large .dropdown-footer .checkout-link {
}
#nav-menu .navbar .category-dropdown li.category-list a:hover {
background-color: #F7F7F9;
color: #28557B;
text-decoration: none;
background-color: #F7F7F9;
}
#nav-menu .navbar .category-dropdown li.category-list .child-container {

View File

@ -1111,6 +1111,7 @@ __WEBPACK_IMPORTED_MODULE_0_vue___default.a.component("vue-slider", __webpack_re
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('modal-component', __webpack_require__(45));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('quantity-btn', __webpack_require__(48));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('sidebar-component', __webpack_require__(51));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component("wishlist-component", __webpack_require__(73));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('carousel-component', __webpack_require__(54));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('child-sidebar', __webpack_require__(57));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('card-list-content', __webpack_require__(60));
@ -1205,6 +1206,14 @@ $(document).ready(function () {
eventBus.$emit('onFormError');
}
});
},
isMobile: function isMobile() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
return true;
} else {
return false;
}
}
}
});
@ -35822,7 +35831,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
//
//
//
//
/* harmony default export */ __webpack_exports__["default"] = ({
props: ['id', 'loop', 'timeout', 'autoplay', 'addClass', 'slidesCount', 'slidesPerPage', 'navigationEnabled', 'paginationEnabled'],
@ -35860,8 +35868,7 @@ var render = function() {
perPage: parseInt(_vm.slidesPerPage),
loop: _vm.loop == "true" ? true : false,
autoplay: _vm.autoplay == "true" ? true : false,
autoplayTimeout: _vm.timeout ? parseInt(_vm.timeout) : 2000,
"slide-click": "slideClicked"
autoplayTimeout: _vm.timeout ? parseInt(_vm.timeout) : 2000
}
},
[
@ -36758,8 +36765,8 @@ var render = function() {
staticClass: "main-product-image",
attrs: {
src: _vm.src,
id: "active-product-image",
"data-zoom-image": _vm.src
"data-zoom-image": _vm.src,
id: "active-product-image"
}
})
])
@ -36786,5 +36793,122 @@ if (false) {
// removed by extract-text-webpack-plugin
/***/ }),
/* 71 */,
/* 72 */,
/* 73 */
/***/ (function(module, exports, __webpack_require__) {
var disposed = false
var normalizeComponent = __webpack_require__(1)
/* script */
var __vue_script__ = __webpack_require__(74)
/* template */
var __vue_template__ = __webpack_require__(75)
/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = null
/* scopeId */
var __vue_scopeId__ = null
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
__vue_script__,
__vue_template__,
__vue_template_functional__,
__vue_styles__,
__vue_scopeId__,
__vue_module_identifier__
)
Component.options.__file = "src/Resources/assets/js/UI/components/wishlist.vue"
/* hot reload */
if (false) {(function () {
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-ac965700", Component.options)
} else {
hotAPI.reload("data-v-ac965700", Component.options)
}
module.hot.dispose(function (data) {
disposed = true
})
})()}
module.exports = Component.exports
/***/ }),
/* 74 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
//
//
//
//
//
//
//
//
//
//
/* harmony default export */ __webpack_exports__["default"] = ({
props: ['active'],
data: function data() {
return {
isActive: this.active
};
}
});
/***/ }),
/* 75 */
/***/ (function(module, exports, __webpack_require__) {
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"i",
{
class: "material-icons",
on: {
mouseover: function($event) {
_vm.isActive ? (_vm.isActive = !_vm.isActive) : ""
},
mouseout: function($event) {
_vm.active !== "" && !_vm.isActive
? (_vm.isActive = !_vm.isActive)
: ""
}
}
},
[
_vm._v(
"\n\n " +
_vm._s(_vm.isActive ? "favorite_border" : "favorite") +
"\n"
)
]
)
}
var staticRenderFns = []
render._withStripped = true
module.exports = { render: render, staticRenderFns: staticRenderFns }
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-hot-reload-api") .rerender("data-v-ac965700", module.exports)
}
}
/***/ })
/******/ ]);

View File

@ -24,7 +24,7 @@ class VelocityMetaDataSeeder extends Seeder
'subscription_bar_content' => '<div class="social-icons col-lg-6 text-center"><a href="https://webkul.com" target="_blank" class="unset" rel="noopener noreferrer"><i class="fs24 within-circle rango-facebook" title="facebook"></i> </a> <a href="https://webkul.com" target="_blank" class="unset" rel="noopener noreferrer"><i class="fs24 within-circle rango-twitter" title="twitter"></i> </a> <a href="https://webkul.com" target="_blank" class="unset" rel="noopener noreferrer"><i class="fs24 within-circle rango-linked-in" title="linkedin"></i> </a> <a href="https://webkul.com" target="_blank" class="unset" rel="noopener noreferrer"><i class="fs24 within-circle rango-pintrest" title="Pinterest"></i> </a> <a href="https://webkul.com" target="_blank" class="unset" rel="noopener noreferrer"><i class="fs24 within-circle rango-youtube" title="Youtube"></i> </a> <a href="https://webkul.com" target="_blank" class="unset" rel="noopener noreferrer"><i class="fs24 within-circle rango-instagram" title="instagram"></i></a></div>',
'product_policy' => '<div class="col-sm-4 col-xs-12 product-policy-wrapper"><div class="card"><div class="policy"><div class="left"><i class="rango-van-ship fs40"></i></div> <div class="right"><span class="font-setting fs20">Free Shippingon Order $20 or More</span></div></div></div></div> <div class="col-sm-4 col-xs-12 product-policy-wrapper"><div class="card"><div class="policy"><div class="left"><i class="rango-exchnage fs40"></i></div> <div class="right"><span class="font-setting fs20">ProductReplace &amp; Return Available </span></div></div></div></div> <div class="col-sm-4 col-xs-12 product-policy-wrapper"><div class="card"><div class="policy"><div class="left"><i class="rango-exchnage fs40"></i></div> <div class="right"><span class="font-setting fs20">ProductExchange and EMI Available </span></div></div></div></div>',
'product_policy' => '<div class="row"><div class="col-lg-4 col-sm-12 product-policy-wrapper"><div class="card"><div class="policy"><div class="left"><i class="rango-van-ship fs40"></i></div> <div class="right"><span class="font-setting fs20">Free Shippingon Order $20 or More</span></div></div></div></div> <div class="col-lg-4 col-sm-12 product-policy-wrapper"><div class="card"><div class="policy"><div class="left"><i class="rango-exchnage fs40"></i></div> <div class="right"><span class="font-setting fs20">ProductReplace &amp; Return Available </span></div></div></div></div> <div class="col-lg-4 col-sm-12 product-policy-wrapper"><div class="card"><div class="policy"><div class="left"><i class="rango-exchnage fs40"></i></div> <div class="right"><span class="font-setting fs20">ProductExchange and EMI Available </span></div></div></div></div></div>',
]);
DB::table('locales')->where('code', 'en')->update([

View File

@ -10,8 +10,7 @@
(navigationEnabled == 'hide') ? 'navigation-hide' : '',
(paginationEnabled == 'hide') ? 'pagination-hide' : '',
addClass
]"
slide-click="slideClicked">
]">
<slot
v-for="index in slidesCount"

View File

@ -2,10 +2,10 @@
<div class="magnifier col-12 text-center no-padding">
<img
:src="src"
:data-zoom-image="src"
ref="activeProductImage"
id="active-product-image"
class="main-product-image"
:data-zoom-image="src"
/>
</div>
</template>

View File

@ -0,0 +1,20 @@
<template>
<i
:class="`material-icons`"
@mouseover="isActive ? isActive = !isActive : ''"
@mouseout="active !== '' && !isActive ? isActive = !isActive : ''">
{{ isActive ? 'favorite_border' : 'favorite' }}
</i>
</template>
<script type="text/javascript">
export default {
props: ['active'],
data: function () {
return {
isActive: this.active
}
},
}
</script>

View File

@ -22,6 +22,7 @@ Vue.component("vue-slider", require("vue-slider-component"));
Vue.component('modal-component', require('./UI/components/modal'));
Vue.component('quantity-btn', require('./UI/components/quantity-btn'));
Vue.component('sidebar-component', require('./UI/components/sidebar'));
Vue.component("wishlist-component", require("./UI/components/wishlist"));
Vue.component('carousel-component', require('./UI/components/carousel'));
Vue.component('child-sidebar', require('./UI/components/child-sidebar'));
Vue.component('card-list-content', require('./UI/components/card-list'));
@ -117,6 +118,14 @@ $(document).ready(function () {
}
});
},
isMobile() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
return true
} else {
return false
}
}
}
});

View File

@ -210,7 +210,7 @@ body {
top: 40px;
right: 10px;
z-index: 100;
z-index: 101;
height: max-content;
width: 290px !important;
position: absolute !important;
@ -653,9 +653,9 @@ header {
}
&:hover {
background-color: #F7F7F9;
color: #28557B;
text-decoration: none;
background-color: $light-background;
}
}

View File

@ -121,116 +121,4 @@
top: 8px;
}
}
}
.nav-container {
position: fixed;
width: 300px !important;
height: 100vh;
background-color: white;
margin-left: -16px;
z-index: 2;
.wrapper {
margin-top : 15px;
.category-title {
display: table;
width: 100%;
padding-left: 10px;
margin : 13px 0px 13px 0px;
display: none;
> i {
display: table-cell;
vertical-align: middle;
font-size: 26px;
}
span {
display: table-cell;
vertical-align: top;
font-size: 20px;
i {
float: left !important;
margin: 2px 2px 0px 0px !important;
}
}
}
.greeting {
display: table;
width: 100%;
padding-left: 10px;
margin : 13px 0px 13px 0px;
> i {
display: table-cell;
vertical-align: middle;
font-size: 26px;
}
span {
display: table-cell;
vertical-align: top;
font-size: 20px;
i {
float: right !important;
margin: 2px 20px 0px 0px !important;
}
}
}
.offers {
color: rgba(0,0,0,0.83);
line-height: 20px;
font-weight: 530;
border-top: 1px solid rgba(0,0,0,0.24);
border-bottom: 1px solid rgba(0,0,0,0.24);
li {
font-size: 16px;
margin : 16px 0px 16px 15px;
}
}
.layered-category{
font-weight: 501;
letter-spacing: 0.2px;
margin: 16px 0px 0px 0px;
.category-icon {
width: 36px;
height: 20px;
padding-left: 12px;
display: inline-block;
img {
width: 100%;
height: 100%;
vertical-align: text-top;
}
}
li {
margin: 18px 0px 18px 5px;
font-size: 17px;
a {
span {
color: black;
font-size: 14px;
margin : 16px 0px 16px 15px !important;
font-weight: 400px;
}
}
i {
float: right;
font-size: 16px;
margin: 3px 20px 0px 0px;
}
}
}
}
}

View File

@ -244,6 +244,14 @@
> div:last-child {
margin-top: 10px;
}
.product-name,
.product-rating {
width: 15rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.product-price {
@ -705,7 +713,7 @@
&:hover,
&.active {
color: $light-link-color;
background-color: $light-background;
background-color: $border-light;
}
i {
@ -1816,5 +1824,5 @@
}
.recetly-viewed-products-wrapper {
padding: 10px;
padding: 2px;
}

View File

@ -48,9 +48,14 @@
.within-circle {
background: #4d7ea8;
margin-right: 2px;
border: 1px solid rgba(255, 255, 255, 0.52);
}
.within-circle:hover {
opacity: 0.5;
}
img {
background: #4d7ea8;
border: 1px solid rgba(255, 255, 255, 0.52);
@ -97,6 +102,8 @@
}
.footer-rt-content {
padding-right: 0px;
.row {
> div {
width: 100%;
@ -148,6 +155,8 @@
.footer-statics {
.software-description {
padding-left: 0px;
p {
@extend .clr-dark;

View File

@ -211,6 +211,13 @@ header #search-form > *:focus {
}
}
}
.product-policy-wrapper:nth-of-type(1) {
padding-left: 0px;
}
.product-policy-wrapper:nth-last-of-type(1) {
padding-right: 0px;
}
}
/* product policy section */
@ -468,7 +475,6 @@ header #search-form > *:focus {
.main-category {
padding: 8px 15px;
border-top: 1px solid $border-common;
border-bottom: 1px solid $border-common;
}
.content-list {

View File

@ -1,5 +1,5 @@
.vc-small-screen {
display: none;
display: none !important;
}
@media only screen and (max-width: 1100px) {
@ -52,8 +52,22 @@
@media only screen and (max-width: 992px) {
$header-height: 50px;
.vc-small-screen {
display: block !important;
}
.main-content-wrapper {
position: relative;
.vc-header {
top: 0;
margin: 0;
padding: 0;
z-index: 100;
position: sticky;
background-color: $white-color;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
> div {
display: none;
}
@ -68,13 +82,13 @@
}
.hamburger-wrapper {
display: table;
display: inline-block;
height: $header-height;
.hamburger {
top: 12px;
font-size: 24px;
display: table-cell;
vertical-align: middle;
position: relative;
}
}
@ -94,14 +108,6 @@
#top {
display: none;
+ header {
display: none;
}
// + .categories-sidebar-container {
// display: none;
// }
}
.product-card-new {
@ -187,7 +193,6 @@
}
.popular-categories-container {
.popular-category-wrapper {
padding: 0px;
@ -239,4 +244,157 @@
padding-left: 100px !important;
}
}
.carousel-products {
&.vc-full-screen {
display: none;
}
&.vc-small-screen {
display: block !important;
}
}
.reviews-container {
.review-wrapper,
.review-wrapper:nth-of-type(1),
.review-wrapper:nth-last-of-type(1),
.review-wrapper:nth-last-of-type(2) {
padding: 0px;
}
.review-wrapper:not(:last-child) {
margin-bottom: 10px;
}
}
.product-policy-wrapper {
padding: 0px !important;
}
.product-policy-wrapper:not(:last-child) {
margin-bottom: 10px;
}
.main-product-image {
display: none;
}
.product-detail {
#product-form {
.form-container {
.left {
top: 0px;
padding: 0px;
position: relative;
margin-bottom: 20px;
}
.right {
padding: 0px;
}
}
}
.customer-rating {
> .row {
> div {
margin-bottom: 30px;
}
}
}
}
.review-page-container {
> div:not(:last-child) {
margin-bottom: 20px;
}
}
.nav-container {
top: 0px;
left: 0px;
z-index: 10;
height: 100vh;
position: fixed;
font-size: 16px;
overflow-y: scroll;
box-shadow: 0 2px 8px 0;
width: 300px !important;
background-color: $white-color;
.wrapper {
.category-title {
width: 100%;
display: table;
padding-left: 10px;
display: none;
margin : 13px 0px 13px 0px;
> i {
font-size: 26px;
display: table-cell;
vertical-align: middle;
}
span {
font-size: 20px;
display: table-cell;
vertical-align: top;
i {
float: left !important;
margin: 2px 2px 0px 0px !important;
}
}
}
.greeting {
width: 100%;
display: table;
> i {
font-size: 26px;
display: table-cell;
vertical-align: middle;
}
span {
font-size: 20px;
display: table-cell;
vertical-align: top;
}
}
ul {
color: black;
border-top: 1px solid $border-common;
li {
font-size: 16px;
padding: 10px 0px 10px 20px;
&:hover {
background-color: $border-light;
}
.category-logo {
width: 18px;
height: 18px;
margin-right: 5px;
display: inline-block;
}
.rango-arrow-right {
float: right;
padding-right: 15px;
}
}
}
}
.drawer-section {
padding: 15px;
}
}
}

View File

@ -1,6 +1,8 @@
.product-detail {
padding-top: 20px;
margin-bottom: 60px;
margin-bottom: 20px;
padding-left: 0 !important;
padding-right: 0 !important;
.magnifier {
> img {
@ -230,7 +232,15 @@
.left {
top: 60px;
padding: 0px;
position: sticky;
.product-image-group {
> div {
margin: 0;
padding: 0;
}
}
}
.right {
@ -305,3 +315,7 @@
}
}
.related-products {
margin-bottom: 60px;
}

View File

@ -557,6 +557,13 @@
width: 50%;
display: inline-block;
padding: 10px 0 !important;
.product-name {
width: 17rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.sticker,
@ -787,8 +794,8 @@ button[disabled] {
font-size: 14px;
}
.max-height-300 {
max-height: 300px;
.max-height-350 {
max-height: 350px;
}
.border-normal {

View File

@ -24,9 +24,6 @@
star_border
</i>
</template>
{{-- <i class="material-icons">star_border</i>
<i class="material-icons">star</i> --}}
</div>
</script>
@ -139,31 +136,78 @@
<div class="col-4">
{!! 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>
</script>
<script type="text/x-template" id="content-header-template">
<header class="row velocity-divide-page remove-padding-margin vc-header active">
<div class="vc-small-screen container">
<header class="row velocity-divide-page vc-header header-shadow active">
<div class="vc-small-screen container" v-if="isMobile()">
<div class="row">
<div class="col-8">
<div class="row col-12">
<div v-if="hamburger">
@include('shop::UI.shared.responsive-header')
<div v-if="hamburger" class="nav-container scrollable">
<div class="wrapper" v-if="rootCategories">
<div class="greeting drawer-section">
<i class="material-icons">perm_identity</i>
<span>
@guest('customer')
{{ __('velocity::app.responsive.header.greeting', ['customer' => 'Guest']) }}
@endguest
@auth('customer')
{{ __('velocity::app.responsive.header.greeting', ['customer' => auth()->guard('customer')->user()->first_name]) }}
@endauth
<i class="material-icons pull-right" v-on:click="closeDrawer()">cancel</i>
</span>
</div>
<ul type="none">
<li
:key="index"
v-text="content.title"
v-for="(content, index) in headerContent">
</li>
</ul>
<ul type="none">
<li v-for="(category, index) in JSON.parse(categories)">
<div class="category-logo">
<img
class="category-icon"
v-if="category.category_icon_path"
:src="`${url}/storage/${category.category_icon_path}`" />
</div>
<a
class="unset"
:href="`${url}/${category['translations'][0].url_path}`">
<span>@{{ category.name }}</span>
</a>
<i class="rango-arrow-right" @click="toggleSubcategories(index, $event)"></i>
</li>
</ul>
</div>
<div class="hamburger-wrapper" v-on:click="toggleHamburger">
<i class="rango-toggle hamburger"></i>
<div class="wrapper" v-else-if="subCategory">
<div class="drawer-section">
<i class="rango-arrow-left fs24 text-down-4" @click="toggleSubcategories('root')"></i>
<h4 class="display-inbl">@{{ subCategory.name }}</h4>
</div>
<ul>
<li v-for="(subCategory, index) in subCategory.children">@{{ subCategory.name }}</li>
</ul>
</div>
<logo-component add-class="ml30"></logo-component>
</div>
<div class="hamburger-wrapper" @click="toggleHamburger">
<i class="rango-toggle hamburger"></i>
</div>
<logo-component></logo-component>
</div>
<div class="row right-vc-header col-4">
<a :href="`${url}/customer/account/wishlist`" class="unset">
<i class="material-icons">favorite_border</i>
@ -183,6 +227,7 @@
</div>
<div
v-else
@mouseout="toggleSidebar('0', $event, 'mouseout')"
@mouseover="toggleSidebar('0', $event, 'mouseover')"
class="main-category fs16 unselectable fw6 cursor-pointer left">
@ -235,10 +280,7 @@
methods: {
updateRating: function (index) {
index = Math.abs(index);
this.editable ? this.showFilled = index : '';
this.showFilled
}
},
})
@ -360,18 +402,21 @@
'url',
'heading',
'isEnabled',
'categories',
'headerContent',
],
data: function () {
return {
'hamburger': true,
'subCategory': null,
'isSearchbar': false,
'hamburger': false
'rootCategories': true,
}
},
methods: {
'openSearchBar': function () {
openSearchBar: function () {
this.isSearchbar = !this.isSearchbar;
let footer = $('.footer');
@ -393,6 +438,18 @@
closeDrawer: function() {
$('.nav-container').hide();
this.hamburger = false;
},
toggleSubcategories: function (index, event) {
if (index == "root") {
this.rootCategories = true;
} else {
event.preventDefault();
let categories = JSON.parse(this.categories);
this.rootCategories = false;
this.subCategory = categories[0];
}
}
}
})

View File

@ -1,171 +0,0 @@
{!! view_render_event('bagisto.shop.layout.header.category.before') !!}
@php
$velocityContent = app('Webkul\Velocity\Repositories\ContentRepository')->getAllContents();
$categories = [];
foreach (app('Webkul\Category\Repositories\CategoryRepository')->getVisibleCategoryTree(core()->getCurrentChannel()->root_category_id) as $category) {
if ($category->slug)
array_push($categories, $category);
}
@endphp
<div class="nav-container">
<div class="wrapper">
<div class="greeting">
<i class="material-icons">perm_identity</i>
<span>
@guest('customer')
{{ __('velocity::app.responsive.header.greeting', ['customer' => 'Guest']) }}
@endguest
@auth('customer')
{{ __('velocity::app.responsive.header.greeting', ['customer' => auth()->guard('customer')->user()->first_name]) }}
@endauth
<i class="material-icons close-responsive-header" v-on:click="closeDrawer()">cancel</i>
</span>
</div>
<div class="offers">
<ul type="none">
@foreach ($velocityContent as $index => $content)
<li>{{ $content->title }}</li>
@endforeach
</ul>
</div>
<div class="layered-category">
<category-nav categories='@json($categories)' url="{{url()->to('/')}}"></category-nav>
</div>
</div>
</div>
{!! view_render_event('bagisto.shop.layout.header.category.after') !!}
@push('scripts')
<script type="text/x-template" id="category-nav-template">
<ul type="none">
<category-item
v-for="(item, index) in items"
:key="index"
:url="url"
:item="item"
:parent="index">
</category-item>
</ul>
</script>
<script>
Vue.component('category-nav', {
template: '#category-nav-template',
props: {
categories: {
type: [Array, String, Object],
required: false,
default: (function () {
return [];
})
},
url: String
},
data: function(){
return {
items_count:0
};
},
computed: {
items: function() {
return JSON.parse(this.categories)
}
},
});
</script>
<script type="text/x-template" id="category-item-template">
<li>
<img
class="category-icon"
src="{{ asset('storage/'.$category->category_icon_path) }}"/>
<a class="category-name" :href="url+'/'+this.item['translations'][0].url_path">
<span>@{{ name }}</span>
</a>
<!-- <i class="material-icons"
v-if="haveChildren && item.parent_id != null"
@click="showOrHide(item.id)">
chevron_right
</i> -->
<!--
<div class="sub-category" v-if="haveChildren && show">
@include('shop::UI.shared.subCategories-header', [
'category_id' => 12
])
-->
</div>
</li>
</script>
<script>
Vue.component('category-item', {
template: '#category-item-template',
props: {
item: Object,
url: String,
},
data: function() {
return {
items_count:0,
show: false,
};
},
computed: {
haveChildren: function() {
return this.item.children.length ? true : false;
},
name: function() {
if (this.item.translations && this.item.translations.length) {
this.item.translations.forEach(function(translation) {
if (translation.locale == document.documentElement.lang)
return translation.name;
});
}
return this.item.name;
},
},
methods: {
showOrHide: function(id) {
$('.category-name').html("").hide();
$("img").attr("src", "").hide();
$(".demo").html("").hide();
this.item.children = this.item;
this.show = true;
$('.greeting, .offers').hide();
}
}
});
</script>
<script type="text/javascript">
function closeSubCategory() {
$('.greeting, .offers, .layered-category').show();
$('.sub-category, .sub-category').hide();
}
</script>
@endpush

View File

@ -1,88 +0,0 @@
@php
$velocityContent = app('Webkul\Velocity\Repositories\ContentRepository')->getAllContents();
@endphp
<div class="nav-container">
<div class="wrapper">
<div class="category-title">
<span>
<i class="material-icons" onclick="closeSubCategory()">chevron_left</i>
Mens
</span>
</div>
<div class="sub-category">
<ul type="none">
<li>Top</li>
<li>Bottom</li>
</ul>
</div>
<div class="greeting">
<i class="material-icons">perm_identity</i>
<span>
@guest('customer')
{{ __('velocity::app.responsive.header.greeting', ['customer' => 'Guest']) }}
@endguest
@auth('customer')
{{ __('velocity::app.responsive.header.greeting', ['customer' => auth()->guard('customer')->user()->first_name]) }}
@endauth
<i class="material-icons close-responsive-header" v-on:click="closeDrawer()">cancel</i>
</span>
</div>
<div class="offers">
<ul type="none">
@foreach ($velocityContent as $index => $content)
<li>{{ $content->title }}</li>
@endforeach
</ul>
</div>
<div class="layered-category">
<ul type="none">
@foreach ($categories as $index => $category)
<li>
@if($category->category_icon_path)
<img
class="category-icon"
src="{{ asset('storage/' . $category->category_icon_path) }}"/>
@endif
{{ $category->name }}
@if(sizeof($category->children) > 0)
<i class="material-icons" value="{{ $category->name }}">chevron_right</i>
@endif
</li>
@endforeach
</ul>
</div>
</div>
</div>
@push('scripts')
<script type="text/javascript">
function openSubCategory() {
$('.greeting, .offers, .layered-category').hide();
$('.sub-category, .category-title').show();
}
function closeSubCategory() {
$('.greeting, .offers, .layered-category').show();
$('.sub-category, .category-title').hide();
}
function closeDrawer() {
$('.nav-container').hide();
}
</script>
@endpush

View File

@ -16,7 +16,7 @@
heading="{{ $categoryDetails->name }}">
</card-list-header>
<div class="row flex-nowrap">
<div class="carousel-products vc-full-screen">
<carousel-component
slides-per-page="6"
navigation-enabled="hide"
@ -25,13 +25,26 @@
id="{{ $categoryDetails->name }}-carousel">
@foreach ($products as $index => $product)
<slide slot="slide-{{ $index }}">
@include ('shop::products.list.card', ['product' => $product])
</slide>
@endforeach
</carousel-component>
</div>
<div class="carousel-products vc-small-screen">
<carousel-component
slides-per-page="3"
navigation-enabled="hide"
pagination-enabled="hide"
:slides-count="{{ sizeof($products) }}"
id="{{ $categoryDetails->name }}-carousel">
@foreach ($products as $index => $product)
<slide slot="slide-{{ $index }}">
@include ('shop::products.list.card', ['product' => $product])
</slide>
@endforeach
</carousel-component>
</div>
</div>

View File

@ -11,7 +11,7 @@
<div class="row">
@foreach ($reviews as $key => $review)
<div class="col-3 review-wrapper">
<div class="col-lg-3 col-md-12 review-wrapper">
<div class="card no-padding">
<div class="review-info">
<div class="customer-info">

View File

@ -9,12 +9,10 @@
@if ($featuredProductsCount)
<div class="container-fluid featured-products">
<card-list-header heading="{{ __('shop::app.home.featured-products') }}">
</card-list-header>
<div class="row flex-nowrap">
<div class="carousel-products vc-full-screen">
<carousel-component
slides-per-page="6"
navigation-enabled="hide"
@ -29,9 +27,25 @@
</slide>
@endforeach
</carousel-component>
</div>
<div class="carousel-products vc-small-screen">
<carousel-component
slides-per-page="2"
navigation-enabled="hide"
pagination-enabled="hide"
id="fearured-products-carousel"
:slides-count="{{ $featuredProductsCount }}">
@foreach ($featuredProducts as $index => $product)
<slide slot="slide-{{ $index }}">
@include ('shop::products.list.card', ['product' => $product])
</slide>
@endforeach
</carousel-component>
</div>
</div>
@endif

View File

@ -1,52 +0,0 @@
<!-- @author Shubham Mehrotra <shubhammehrotra.symfony@webkul.com> shubhwebkul -->
<?php
$categories = [
'Shoes2' => 'rango-globe',
'Shoes3' => 'rango-globe',
'Shoes4' => 'rango-globe',
'Shoes5' => 'rango-globe',
'Shoes6' => 'rango-globe',
'Shoes7' => 'rango-globe',
'Shoes8' => 'rango-globe',
'Shoes18' => 'rango-globe',
'Shoes19' => 'rango-globe',
'Men' => 'rango-cloth',
'Women' => 'rango-t-shirt',
'kids' => 'rango-baby',
'Lipstick' => 'rango-lipstick',
'Shoes' => 'rango-shoes',
'Shop' => 'rango-shop',
"Jewellery" => "rango-neckless",
"Camera" => "rango-camera",
"Travel" => "rango-bag",
];
$slicedCount = (sizeof($categories) - 9);
$categories = array_slice($categories, $slicedCount);
$categories['More'] = 'rango-plus';
?>
{!! view_render_event('bagisto.shop.home.categories.before') !!}
<div class="container-fluid no-padding fs14">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 no-padding mt15">
<!-- categories list -->
@foreach ($categories as $categoryName => $icon)
<div class="category">
<i class="{{$icon}} mr7 fs18"></i>
<span>{{ $categoryName }}</span>
<i class="angle-right-icon"></i>
</div>
@endforeach
</div>
<div class="col-sm-9 no-padding banner-icon"></div>
</div>
{!! view_render_event('bagisto.shop.home.categories.after') !!}
<!-- @author -->

View File

@ -1,12 +0,0 @@
<div class="container-fluid popular-products">
<card-list-header :show-tabs="true"></card-list-header>
{!! view_render_event('bagisto.shop.popular.products.before') !!}
<card-list-content :card-details="{{ json_encode(array_slice($sampleProducts, 1)) }}"></card-list-content>
{!! view_render_event('bagisto.shop.popular.products.after') !!}
</div>

View File

@ -1,24 +0,0 @@
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-close-icon">
<button type="button" class="btn btn-default" style="float: right;" data-dismiss="modal">X</button>
</div>
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
<img src="{{ url('../storage/app/public/slider_images/Default/vqahHid7sRVX5E0FwbRzCVSokItmwYoXAqnB21yU.jpeg')}}" style="width: 225px; height: 303.3px;" alt="" srcset="">
</div>
<div class="modal-body col-xs-5 col-sm-5 col-md-5 col-lg-5">
<p>Some text in the modal.</p>
</div>
</div>
</div>
</div>

View File

@ -1,146 +0,0 @@
{{-- <div class="container-fluid no-padding recently-reviewed-items-container">
<div class="row">
<div class="col-lg-6">
<h2 class="fs20">Plants</h2>
</div>
<div class="col-6">
<div class="row">
<div class="col-4 no-padding switch-buttons">
<div class="row justify-content-end">
<h2 class="col-lg-1 no-padding mr20 fw6 cursor-pointer"><</h2>
<h2 class="col-lg-1 no-padding fw6 cursor-pointer">></h2>
</div>
</div>
<div class="col-8 text-right">
<h2 class="fs20">Recently Viewed Product</h2>
</div>
</div>
</div>
</div>
@php
$plants = [
[
'actual-price' => 25,
'star-rating' => 3,
'review-count' => 25,
'currency-icon' => '$',
'selling-price' => 25,
'product-image' => asset('themes/velocity/assets/images/product1.png'),
'productName' => 'Flower Pot Potted 1291324',
], [
'actual-price' => 50,
'star-rating' => 3,
'review-count' => 25,
'currency-icon' => '$',
'selling-price' => 1,
'product-image' => asset('themes/velocity/assets/images/product2.png'),
'productName' => 'Flower Pot Potted 1291324',
], [
'actual-price' => 50,
'star-rating' => 3,
'review-count' => 25,
'currency-icon' => '$',
'selling-price' => 23,
'product-image' => asset('themes/velocity/assets/images/product3.png'),
'productName' => 'Flower Pot Potted 1291324',
], [
'actual-price' => 23,
'star-rating' => 3,
'review-count' => 0,
'currency-icon' => '$',
'selling-price' => 23,
'product-image' => asset('themes/velocity/assets/images/product4.png'),
'productName' => 'Flower Pot Potted 1291324',
], [
'actual-price' => 50,
'star-rating' => 3,
'review-count' => 25,
'currency-icon' => '$',
'selling-price' => 23,
'product-image' => asset('themes/velocity/assets/images/product1.png'),
'productName' => 'Flower Pot Potted 1291324',
],
];
$recentlyReviewed = [
[
'star-rating' => 3,
'currency-icon' => '$',
'selling-price' => 25,
'product-image' => asset('themes/velocity/assets/images/product1.png'),
'productName' => 'Flower Pot Potted 1291324',
], [
'star-rating' => 3,
'currency-icon' => '$',
'selling-price' => 25,
'product-image' => asset('themes/velocity/assets/images/product1.png'),
'productName' => 'Flower Pot Potted 1291324',
], [
'star-rating' => 3,
'currency-icon' => '$',
'selling-price' => 25,
'product-image' => asset('themes/velocity/assets/images/product1.png'),
'productName' => 'Flower Pot Potted 1291324',
], [
'star-rating' => 3,
'currency-icon' => '$',
'selling-price' => 25,
'product-image' => asset('themes/velocity/assets/images/product1.png'),
'productName' => 'Flower Pot Potted 1291324',
],
]
@endphp
<div class="row">
<!--- plants ---->
@include('shop::home.helper.product-large-cart-view', [
'products' => $plants
])
<!---recently viewed product ---->
<div class="col-lg-2 recetly-viewed-items">
@include('shop::home.helper.product-small-cart-view', [
'products' => $recentlyReviewed
])
</div>
</div>
</div> --}}
@php
$cardCount = 5;
@endphp
<div class="container-fluid">
<card-list-header
heading="Plants"
></card-list-header>
{!! view_render_event('bagisto.shop.new-products.before') !!}
<div class="row flex-nowrap">
@foreach ($products as $index => $product)
@if ($index <= ($cardCount - 1))
@include ('shop::products.list.card', ['product' => $product])
@endif
@endforeach
@include ('shop::products.list.recently-viewed', ['products' => $products])
</div>
{!! view_render_event('bagisto.shop.new-products.after') !!}
</div>

View File

@ -11,17 +11,17 @@
{!! view_render_event('bagisto.shop.new-products.before') !!}
<div class="row flex-nowrap">
@if ($showRecentlyViewed)
@push('css')
<style>
.recently-viewed {
padding-right: 0px;
}
</style>
@endpush
@if ($showRecentlyViewed)
@push('css')
<style>
.recently-viewed {
padding-right: 0px;
}
</style>
@endpush
<div class="col-9 no-padding">
<div class="row">
<div class="col-9 no-padding carousel-products vc-full-screen">
<carousel-component
slides-per-page="5"
navigation-enabled="hide"
@ -41,11 +41,33 @@
</carousel-component>
</div>
<div class="col-9 no-padding carousel-products vc-small-screen">
<carousel-component
slides-per-page="2"
navigation-enabled="hide"
pagination-enabled="hide"
id="new-products-carousel"
:slides-count="{{ sizeof($newProducts) }}">
@foreach ($newProducts as $index => $product)
<slide slot="slide-{{ $index }}">
@include ('shop::products.list.card', [
'product' => $product,
'addToCartBtnClass' => 'small-padding'
])
</slide>
@endforeach
</carousel-component>
</div>
@include ('shop::products.list.recently-viewed', [
'addClass' => 'col-3 new-products-recent',
'addClassWrapper' => 'scrollable max-height-300',
'addClassWrapper' => 'scrollable max-height-350',
])
@else
</div>
@else
<div class="carousel-products vc-full-screen">
<carousel-component
slides-per-page="6"
navigation-enabled="hide"
@ -62,8 +84,27 @@
@endforeach
</carousel-component>
@endif
</div>
</div>
<div class="carousel-products vc-small-screen">
<carousel-component
slides-per-page="2"
navigation-enabled="hide"
pagination-enabled="hide"
id="new-products-carousel"
:slides-count="{{ sizeof($newProducts) }}">
@foreach ($newProducts as $index => $product)
<slide slot="slide-{{ $index }}">
@include ('shop::products.list.card', [
'product' => $product,
'addToCartBtnClass' => 'small-padding'
])
</slide>
@endforeach
</carousel-component>
</div>
@endif
{!! view_render_event('bagisto.shop.new-products.after') !!}
</div>

View File

@ -1,4 +1,4 @@
<div class="row footer-statics">
<div class="row footer-statics col-12 no-margin">
@include('velocity::layouts.footer.footer-links.footer-left')
@include('velocity::layouts.footer.footer-links.footer-middle')
@include('velocity::layouts.footer.footer-links.footer-right')

View File

@ -3,7 +3,7 @@
|| core()->getConfigData('customer.settings.newsletter.subscription')
)
<div class="newsletter-subscription">
<div class="newsletter-wrapper row">
<div class="newsletter-wrapper row col-12">
@if ($velocityMetaData->subscription_bar_content)
{!! $velocityMetaData->subscription_bar_content !!}
@endif

View File

@ -1,4 +1,4 @@
<header class="sticky-header">
<header class="sticky-header" v-if="!isMobile()">
<div class="row col-12 remove-padding-margin velocity-divide-page">
<logo-component></logo-component>
<searchbar-component></searchbar-component>

View File

@ -23,15 +23,15 @@
<li
class="category-list"
v-if="parent < 10"
@mouseover="showOrHide(true)"
@mouseleave="showOrHide(false)"
>
@mouseover="isShow = true"
@mouseleave="isShow = false">
<a :href="url+'/categories/'+this.item['translations'][0].slug">
@{{ name }}&emsp;
<i class="material-icons" v-if="haveChildren && item.parent_id != null">chevron_right</i>
</a>
<div class="child-container" v-if="haveChildren && show">
<div class="child-container" v-if="haveChildren && isShow">
<ul class="child-category" v-for="(child, index) in item.children">
<li class="category-list">
@ -105,8 +105,8 @@
data: function() {
return {
isShow: false,
items_count:0,
show: false,
};
},
@ -130,16 +130,6 @@
return this.item.name;
}
},
methods: {
showOrHide: function(status) {
if (status) {
this.show = true;
} else {
this.show = false;
}
}
}
});
//Hide show category dropdown

View File

@ -73,6 +73,7 @@
<content-header
url="{{ url()->to('/') }}"
is-enabled="{{ sizeof($categories) }}"
categories="{{ json_encode($categories) }}"
:header-content="{{ json_encode($velocityContent) }}"
heading= "{{ __('velocity::app.menu-navbar.text-category') }}"
></content-header>
@ -132,7 +133,6 @@
<script type="text/javascript">
(() => {
var showAlert = (messageType, messageLabel, message) => {
debugger
if (messageType && message !== '') {
let html = `<div class="alert ${messageType} alert-dismissible" id="alert">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

View File

@ -30,7 +30,9 @@
<div class="col-8 no-padding card-body align-vertical-top">
<a :href="`${baseURL}/${product.urlKey}`" class="unset no-padding">
<span class="fs16 text-nowrap">@{{ product.name }}</span>
<div class="product-name">
<span class="fs16 text-nowrap">@{{ product.name }}</span>
</div>
<div
v-html="product.priceHTML"

View File

@ -12,8 +12,8 @@
<section class="row review-page-container">
@include ('shop::products.view.small-view', ['product' => $product])
<div class="col-6">
<div class="row customer-rating">
<div class="col-lg-6 col-md-12">
<div class="row customer-rating col-12 remove-padding-margin">
<h2 class="full-width">
{{ __('shop::app.reviews.write-review') }}
</h2>
@ -92,7 +92,7 @@
</div>
@if ($showRecentlyViewed)
@include ('shop::products.list.recently-viewed', [
'addClass' => 'col-3'
'addClass' => 'col-lg-3 col-md-12'
])
@endif
</section>

View File

@ -37,102 +37,101 @@
@section('full-content-wrapper')
{!! view_render_event('bagisto.shop.products.view.before', ['product' => $product]) !!}
<div class="row no-margin">
<section class="col-12 product-detail">
<div class="layouter">
<product-view>
<div class="form-container">
@csrf()
<section class="col-12 product-detail">
<div class="layouter">
<product-view>
<div class="form-container">
@csrf()
<input type="hidden" name="product_id" value="{{ $product->product_id }}">
<input type="hidden" name="product_id" value="{{ $product->product_id }}">
{{-- product-gallery --}}
<div class="left col-lg-5">
@include ('shop::products.view.gallery')
</div>
{{-- product-gallery --}}
<div class="left col-lg-5">
@include ('shop::products.view.gallery')
</div>
{{-- right-section --}}
<div class="right col-lg-7">
{{-- product-info-section --}}
<div class="row info">
<h2 class="col-lg-12">{{ $product->name }}</h2>
{{-- right-section --}}
<div class="right col-lg-7">
{{-- product-info-section --}}
<div class="row info">
<h2 class="col-lg-12">{{ $product->name }}</h2>
@if ($total)
<div class="reviews col-lg-12">
<star-ratings
:ratings="{{ $avgStarRating }}"
push-class="mr5"
></star-ratings>
@if ($total)
<div class="reviews col-lg-12">
<star-ratings
:ratings="{{ $avgStarRating }}"
push-class="mr5"
></star-ratings>
<div class="reviews">
<span>{{ $avgRatings }} Ratings and {{ $total }} Reviews</span>
</div>
<div class="reviews">
<span>{{ $avgRatings }} Ratings and {{ $total }} Reviews</span>
</div>
@endif
@include ('shop::products.view.stock', ['product' => $product])
<div class="col-12 price">
@include ('shop::products.price', ['product' => $product])
</div>
@include ('shop::products.add-to-cart', [
'form' => false,
'product' => $product,
'showCartIcon' => false,
])
</div>
{!! view_render_event('bagisto.shop.products.view.short_description.before', ['product' => $product]) !!}
<div class="description">
<h3 class="col-lg-12">{{ __('velocity::app.products.short-description') }}</h3>
{!! $product->short_description !!}
</div>
{!! view_render_event('bagisto.shop.products.view.short_description.after', ['product' => $product]) !!}
{!! view_render_event('bagisto.shop.products.view.quantity.before', ['product' => $product]) !!}
@if ($product->getTypeInstance()->showQuantityBox())
<quantity-changer></quantity-changer>
@else
<input type="hidden" name="quantity" value="1">
@endif
{!! view_render_event('bagisto.shop.products.view.quantity.after', ['product' => $product]) !!}
@include ('shop::products.view.stock', ['product' => $product])
@include ('shop::products.view.configurable-options')
<div class="col-12 price">
@include ('shop::products.price', ['product' => $product])
</div>
@include ('shop::products.view.downloadable')
@include ('shop::products.view.grouped-products')
@include ('shop::products.view.bundle-options')
@include ('shop::products.view.attributes', [
'active' => true
@include ('shop::products.add-to-cart', [
'form' => false,
'product' => $product,
'showCartIcon' => false,
])
{{-- product long description --}}
@include ('shop::products.view.description')
{{-- reviews count --}}
@include ('shop::products.view.reviews', ['accordian' => true])
</div>
{!! view_render_event('bagisto.shop.products.view.short_description.before', ['product' => $product]) !!}
<div class="description">
<h3 class="col-lg-12">{{ __('velocity::app.products.short-description') }}</h3>
{!! $product->short_description !!}
</div>
{!! view_render_event('bagisto.shop.products.view.short_description.after', ['product' => $product]) !!}
{!! view_render_event('bagisto.shop.products.view.quantity.before', ['product' => $product]) !!}
@if ($product->getTypeInstance()->showQuantityBox())
<quantity-changer></quantity-changer>
@else
<input type="hidden" name="quantity" value="1">
@endif
{!! view_render_event('bagisto.shop.products.view.quantity.after', ['product' => $product]) !!}
@include ('shop::products.view.configurable-options')
@include ('shop::products.view.downloadable')
@include ('shop::products.view.grouped-products')
@include ('shop::products.view.bundle-options')
@include ('shop::products.view.attributes', [
'active' => true
])
{{-- product long description --}}
@include ('shop::products.view.description')
{{-- reviews count --}}
@include ('shop::products.view.reviews', ['accordian' => true])
</div>
</product-view>
</div>
@include ('shop::products.view.related-products')
@include ('shop::products.view.up-sells')
</div>
</product-view>
</div>
</section>
<div class="related-products">
@include('shop::products.view.related-products')
@include('shop::products.view.up-sells')
</div>
<div class="store-meta-images col-3">
@if(
isset($velocityMetaData['product_view_images'])
@ -146,32 +145,34 @@
@endif
</div>
</div>
{!! view_render_event('bagisto.shop.products.view.after', ['product' => $product]) !!}
@endsection
@push('scripts')
<script type="text/x-template" id="product-view-template">
<form method="POST" id="product-form" action="{{ route('cart.add', $product->product_id) }}" @click="onSubmit($event)">
<input type="hidden" name="is_buy_now" v-model="is_buy_now">
<slot></slot>
</form>
</script>
<script type="text/x-template" id="quantity-changer-template">
<div class="quantity control-group" :class="[errors.has(controlName) ? 'has-error' : '']">
<div :class="`quantity control-group ${errors.has(controlName) ? 'has-error' : ''}`">
<label class="required">{{ __('shop::app.products.quantity') }}</label>
<button type="button" class="decrease" @click="decreaseQty()">-</button>
<input :name="controlName" class="control" :value="qty" :v-validate="validations" data-vv-as="&quot;{{ __('shop::app.products.quantity') }}&quot;" readonly>
<input
:value="qty"
class="control"
:name="controlName"
:v-validate="validations"
data-vv-as="&quot;{{ __('shop::app.products.quantity') }}&quot;" readonly>
<button type="button" class="increase" @click="increaseQty()">+</button>
<span class="control-error" v-if="errors.has(controlName)">@{{ errors.first(controlName) }}</span>
<span class="control-error" v-if="errors.has(controlName)">
@{{ errors.first(controlName) }}
</span>
</div>
</script>

View File

@ -8,11 +8,17 @@
{!! view_render_event('bagisto.shop.products.view.gallery.before', ['product' => $product]) !!}
<div class="product-image-group">
<div class="row">
<magnify-image src="{{ $images[0]['large_image_url'] }}"></magnify-image>
<div class="row col-12">
<magnify-image src="{{ $images[0]['large_image_url'] }}" v-if="!isMobile()">
</magnify-image>
<img
v-else
class="vc-small-product-image"
src="{{ $images[0]['large_image_url'] }}" />
</div>
<div class="row">
<div class="row col-12">
<product-gallery></product-gallery>
</div>
@ -22,7 +28,6 @@
<script type="text/x-template" id="product-gallery-template">
<ul class="thumb-list col-12 row" type="none">
@if (sizeof($images) > 4)
<li class="arrow left" @click="scroll('prev')">
<i class="rango-arrow-left fs24"></i>
@ -30,12 +35,12 @@
@endif
<carousel-component
:slides-count="{{ sizeof($images) }}"
slides-per-page="4"
:id="galleryCarouselId"
add-class="product-gallary"
pagination-enabled="hide"
navigation-enabled="hide">
navigation-enabled="hide"
add-class="product-gallary"
:slides-count="{{ sizeof($images) }}">
@foreach ($images as $index => $thumb)
<slide slot="slide-{{ $index }}">
@ -65,7 +70,6 @@
<i class="rango-arrow-right fs24"></i>
</li>
@endif
</ul>
</script>
@ -75,9 +79,7 @@
var galleryImages = @json($images);
Vue.component('product-gallery', {
template: '#product-gallery-template',
data: function() {
return {
images: galleryImages,
@ -129,6 +131,13 @@
this.$root.$emit('changeMagnifiedImage', {
smallImageUrl: this.currentOriginalImageUrl
});
let productImage = $('.vc-small-product-image');
if (productImage && productImage[0]) {
productImage = productImage[0];
productImage.src = this.currentOriginalImageUrl;
}
},
scroll: function (navigateTo) {

View File

@ -9,24 +9,41 @@
row-class="pt20"
></card-list-header>
<carousel-component
:slides-count="{{ sizeof($relatedProducts) }}"
slides-per-page="5"
id="related-products-carousel"
navigation-enabled="hide"
pagination-enabled="hide">
<div class="carousel-products vc-full-screen">
<carousel-component
slides-per-page="6"
navigation-enabled="hide"
pagination-enabled="hide"
id="related-products-carousel"
:slides-count="{{ sizeof($relatedProducts) }}">
@foreach ($relatedProducts as $index => $relatedProduct)
@foreach ($relatedProducts as $index => $relatedProduct)
<slide slot="slide-{{ $index }}">
@include ('shop::products.list.card', [
'product' => $relatedProduct,
'addToCartBtnClass' => 'small-padding',
])
</slide>
@endforeach
</carousel-component>
</div>
<slide slot="slide-{{ $index }}">
@include ('shop::products.list.card', [
'product' => $relatedProduct,
'addToCartBtnClass' => 'small-padding',
])
</slide>
@endforeach
</carousel-component>
<div class="carousel-products vc-small-screen">
<carousel-component
:slides-count="{{ sizeof($relatedProducts) }}"
slides-per-page="2"
id="related-products-carousel"
navigation-enabled="hide"
pagination-enabled="hide">
@foreach ($relatedProducts as $index => $relatedProduct)
<slide slot="slide-{{ $index }}">
@include ('shop::products.list.card', [
'product' => $relatedProduct,
'addToCartBtnClass' => 'small-padding',
])
</slide>
@endforeach
</carousel-component>
</div>
@endif

View File

@ -133,9 +133,9 @@
<div class="col-lg-12 mt5">
<span>{{ __('velocity::app.products.review-by') }} -</span>
<label>
<span class="fs16 fw6">
{{ $review->name }},
</label>
</span>
<span>{{ core()->formatDate($review->created_at, 'F d, Y') }}
</span>

View File

@ -4,7 +4,7 @@
$productBaseImage = $productImageHelper->getProductBaseImage($product);
@endphp
<div class="col-3">
<div class="col-lg-3 col-md-12">
<a class="row" href="{{ route('shop.productOrCategory.index', ['slug' => $product->url_key]) }}">
<img src="{{ $productBaseImage['medium_image_url'] }}" class="col-12" />
</a>

View File

@ -26,30 +26,4 @@
<wishlist-component active="false"></wishlist-component>
</a>
@endauth
{!! view_render_event('bagisto.shop.products.wishlist.after') !!}
@push('scripts')
<script type="text/x-template" id="wishlist-template">
<i
:class="`material-icons`"
@mouseover="isActive ? isActive = !isActive : ''"
@mouseout="active !== '' && !isActive ? isActive = !isActive : ''">
@{{ isActive ? 'favorite_border' : 'favorite' }}
</i>
</script>
<script type="text/javascript">
(() => {
Vue.component('wishlist-component', {
props: ['active'],
template: '#wishlist-template',
data: function () {
return {
isActive: this.active
}
},
});
})()
</script>
@endpush
{!! view_render_event('bagisto.shop.products.wishlist.after') !!}