fixed drawer issues
This commit is contained in:
parent
4bf3e43bd8
commit
d48493225c
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
|
|
@ -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 & 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 & 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([
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@
|
|||
(navigationEnabled == 'hide') ? 'navigation-hide' : '',
|
||||
(paginationEnabled == 'hide') ? 'pagination-hide' : '',
|
||||
addClass
|
||||
]"
|
||||
slide-click="slideClicked">
|
||||
]">
|
||||
|
||||
<slot
|
||||
v-for="index in slidesCount"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 }} 
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -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">×</a>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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=""{{ __('shop::app.products.quantity') }}"" readonly>
|
||||
<input
|
||||
:value="qty"
|
||||
class="control"
|
||||
:name="controlName"
|
||||
:v-validate="validations"
|
||||
data-vv-as=""{{ __('shop::app.products.quantity') }}"" 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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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') !!}
|
||||
Loading…
Reference in New Issue