responsive updates
This commit is contained in:
parent
a826937b98
commit
80ef6e8820
|
|
@ -1068,7 +1068,7 @@
|
|||
}
|
||||
|
||||
.product-card-new .cart-wish-wrap .wishlist-icon {
|
||||
height: 32px;
|
||||
height: 38px;
|
||||
display: table;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -1443,6 +1443,14 @@
|
|||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.cart-details .coupon-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.cart-details .coupon-container .control-error {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.account-content .sidebar {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1780,7 +1788,8 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.custom-form .row {
|
||||
.custom-form .form-field {
|
||||
padding: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
|
|
@ -2494,8 +2503,45 @@
|
|||
padding: 2px;
|
||||
}
|
||||
|
||||
.bottom-toolbar .pagination .page-item {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.bottom-toolbar .pagination a {
|
||||
color: unset !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.bottom-toolbar .pagination a i {
|
||||
top: 2px;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bottom-toolbar .pagination .angle-left-icon,
|
||||
.bottom-toolbar .pagination .angle-right-icon {
|
||||
speak: none;
|
||||
line-height: 1;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
font-variant: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: 'Webkul Rango' !important;
|
||||
background: unset;
|
||||
}
|
||||
|
||||
.bottom-toolbar .pagination .angle-right-icon::before {
|
||||
content: "\E908";
|
||||
}
|
||||
|
||||
.bottom-toolbar .pagination .angle-left-icon::before {
|
||||
content: "\E907";
|
||||
}
|
||||
|
||||
/* @author Shubham Mehrotra */
|
||||
body {
|
||||
display: none;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
|
@ -3129,15 +3175,6 @@ body::after {
|
|||
background-color: #4d7ea8;
|
||||
}
|
||||
|
||||
.footer .footer-content .newsletter-subscription .newsletter-wrapper {
|
||||
display: flex;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-box-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.footer .footer-content .newsletter-subscription .newsletter-wrapper input.subscribe-field {
|
||||
width: 300px;
|
||||
border: none;
|
||||
|
|
@ -4480,9 +4517,23 @@ button[disabled] {
|
|||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.main-content-wrapper .vc-header > div.vc-small-screen .right-vc-header .badge-wrapper {
|
||||
top: -2px;
|
||||
left: -7px;
|
||||
position: relative;
|
||||
}
|
||||
.main-content-wrapper .vc-header > div.vc-small-screen .right-vc-header .badge-wrapper .badge {
|
||||
z-index: 10;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
background: #26A37C;
|
||||
}
|
||||
#top {
|
||||
display: none;
|
||||
}
|
||||
.product-card-new {
|
||||
max-width: 16rem;
|
||||
}
|
||||
.product-card-new .cart-wish-wrap .wishlist-icon {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -4518,6 +4569,10 @@ button[disabled] {
|
|||
.footer .footer-content .newsletter-subscription {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.footer .footer-content .newsletter-subscription .newsletter-wrapper {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.footer .footer-content .newsletter-subscription .newsletter-wrapper input.subscribe-field {
|
||||
width: 200px;
|
||||
}
|
||||
|
|
@ -4601,19 +4656,73 @@ button[disabled] {
|
|||
.customer-rating > .row > div:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.auth-content.form-container > .container {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.auth-content.form-container > .container > div:first-child {
|
||||
padding: 0;
|
||||
}
|
||||
.auth-content.form-container > .container > div:first-child .body {
|
||||
padding: 20px;
|
||||
}
|
||||
.category-page-wrapper .layered-filter-wrapper {
|
||||
display: none;
|
||||
}
|
||||
.category-page-wrapper .category-container {
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
.category-page-wrapper .category-container > div {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.category-page-wrapper .category-container .filters-container {
|
||||
left: 0px;
|
||||
top: -15px;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
padding-bottom: 10px;
|
||||
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.21);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.21);
|
||||
}
|
||||
.category-page-wrapper .category-container .filters-container .toolbar-wrapper > div.col-4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: table;
|
||||
text-align: center;
|
||||
}
|
||||
.category-page-wrapper .category-container .filters-container .toolbar-wrapper > div.col-4 * {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.category-page-wrapper .category-container .filters-container .toolbar-wrapper > div.col-4 a {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
.category-page-wrapper .category-container .filters-container .toolbar-wrapper > div.col-4 span {
|
||||
left: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.nav-container {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
font-size: 16px;
|
||||
overflow-y: scroll;
|
||||
padding-right: 15px;
|
||||
-webkit-box-shadow: 0 2px 8px 0;
|
||||
box-shadow: 0 2px 8px 0;
|
||||
width: 300px !important;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.nav-container .wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.nav-container .wrapper .category-title {
|
||||
width: 100%;
|
||||
display: table;
|
||||
|
|
@ -4636,8 +4745,13 @@ button[disabled] {
|
|||
margin: 2px 2px 0px 0px !important;
|
||||
}
|
||||
.nav-container .wrapper .greeting {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
display: table;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
background-color: #FFFFFF;
|
||||
border-bottom: 1px solid #CCCCCC;
|
||||
}
|
||||
.nav-container .wrapper .greeting > i {
|
||||
font-size: 26px;
|
||||
|
|
@ -4650,7 +4764,8 @@ button[disabled] {
|
|||
vertical-align: top;
|
||||
}
|
||||
.nav-container .wrapper ul {
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
color: #111111;
|
||||
border-top: 1px solid #CCCCCC;
|
||||
}
|
||||
.nav-container .wrapper ul li {
|
||||
|
|
@ -4660,7 +4775,8 @@ button[disabled] {
|
|||
.nav-container .wrapper ul li:hover {
|
||||
background-color: #ECECEC;
|
||||
}
|
||||
.nav-container .wrapper ul li .category-logo {
|
||||
.nav-container .wrapper ul li .category-logo,
|
||||
.nav-container .wrapper ul li .language-logo-wrapper {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 5px;
|
||||
|
|
@ -4676,43 +4792,137 @@ button[disabled] {
|
|||
.nav-container .wrapper ul li .nested-category li:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.nav-container .wrapper .vc-customer-options li,
|
||||
.nav-container .wrapper .category-wrapper li {
|
||||
font-size: 14px;
|
||||
}
|
||||
.nav-container .wrapper .vc-customer-options li i.icon,
|
||||
.nav-container .wrapper .category-wrapper li i.icon {
|
||||
speak: none;
|
||||
line-height: 1;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
font-variant: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: 'Webkul Rango' !important;
|
||||
font-size: 18px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.nav-container .wrapper .vc-customer-options li i.icon.profile::before,
|
||||
.nav-container .wrapper .category-wrapper li i.icon.profile::before {
|
||||
content: "\E995";
|
||||
}
|
||||
.nav-container .wrapper .vc-customer-options li i.icon.address::before,
|
||||
.nav-container .wrapper .category-wrapper li i.icon.address::before {
|
||||
content: "\E949";
|
||||
}
|
||||
.nav-container .wrapper .vc-customer-options li i.icon.reviews::before,
|
||||
.nav-container .wrapper .category-wrapper li i.icon.reviews::before {
|
||||
content: "\E97D";
|
||||
}
|
||||
.nav-container .wrapper .vc-customer-options li i.icon.wishlist::before,
|
||||
.nav-container .wrapper .category-wrapper li i.icon.wishlist::before {
|
||||
content: "\E93E";
|
||||
}
|
||||
.nav-container .wrapper .vc-customer-options li i.icon.orders::before,
|
||||
.nav-container .wrapper .category-wrapper li i.icon.orders::before {
|
||||
content: "\E931";
|
||||
}
|
||||
.nav-container .wrapper .vc-customer-options li i.icon.downloadables::before,
|
||||
.nav-container .wrapper .category-wrapper li i.icon.downloadables::before {
|
||||
content: "\E926";
|
||||
}
|
||||
.nav-container .drawer-section {
|
||||
padding: 15px;
|
||||
}
|
||||
.auth-content > .container {
|
||||
margin: 0;
|
||||
.nav-container .header.drawer-section {
|
||||
width: 100%;
|
||||
}
|
||||
.category-page-wrapper .layered-filter-wrapper {
|
||||
display: none;
|
||||
}
|
||||
.category-page-wrapper .category-container {
|
||||
margin: 0;
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
.category-page-wrapper .category-container > div {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.category-page-wrapper .category-container .filters-container {
|
||||
padding: 0;
|
||||
}
|
||||
.category-page-wrapper .category-container .filters-container .toolbar-wrapper > div.col-4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: table;
|
||||
text-align: center;
|
||||
}
|
||||
.category-page-wrapper .category-container .filters-container .toolbar-wrapper > div.col-4 i {
|
||||
left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.category-page-wrapper .category-container .filters-container .toolbar-wrapper > div.col-4 * {
|
||||
.nav-container .header.drawer-section > * {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.category-page-wrapper .category-container .filters-container .toolbar-wrapper > div.col-4:nth-of-type(2) i {
|
||||
left: 15px;
|
||||
.nav-container .header.drawer-section i {
|
||||
width: 25px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.nav-container .layered-filter-wrapper {
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.category-container .grid-card,
|
||||
.search-container .grid-card {
|
||||
width: 45%;
|
||||
}
|
||||
.category-container .grid-card:nth-child(odd),
|
||||
.search-container .grid-card:nth-child(odd) {
|
||||
float: left;
|
||||
}
|
||||
.category-container .grid-card:nth-child(even),
|
||||
.search-container .grid-card:nth-child(even) {
|
||||
float: right;
|
||||
}
|
||||
.cart-details.offset-1 {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.cart-details .order-summary-container.offset-1 {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.cart-details h1,
|
||||
.cart-details .cart-details-header {
|
||||
padding: 0;
|
||||
}
|
||||
.cart-details h1 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cart-details .cart-header {
|
||||
display: none;
|
||||
}
|
||||
.cart-details .cart-item-list > div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.cart-details .product-price span:nth-child(1),
|
||||
.cart-details .product-price .special-price {
|
||||
font-size: 18px;
|
||||
}
|
||||
.cart-details .actions {
|
||||
margin-top: 7px !important;
|
||||
}
|
||||
.checkout-process {
|
||||
margin-left: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
.checkout-process h1,
|
||||
.checkout-process > div {
|
||||
padding: 0;
|
||||
}
|
||||
.checkout-process .accordian-header h3 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.checkout-process .billing-address {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.address-holder > div {
|
||||
padding-right: 0;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.wishlist-container {
|
||||
width: 100% !important;
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
.wishlist-container .product-card-new {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1117,12 +1117,21 @@ __WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('child-sidebar', __webpack
|
|||
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('card-list-content', __webpack_require__(63));
|
||||
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('card-list-header', __webpack_require__(66));
|
||||
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('magnify-image', __webpack_require__(69));
|
||||
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('responsive-sidebar', __webpack_require__(76));
|
||||
|
||||
window.eventBus = new __WEBPACK_IMPORTED_MODULE_0_vue___default.a();
|
||||
|
||||
$(document).ready(function () {
|
||||
// define a mixin object
|
||||
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.mixin({
|
||||
data: function data() {
|
||||
return {
|
||||
'navContainer': false,
|
||||
'responsiveSidebarTemplate': '',
|
||||
'responsiveSidebarKey': Math.random()
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
redirect: function redirect(route) {
|
||||
route ? window.location.href = route : '';
|
||||
|
|
@ -1239,6 +1248,8 @@ $(document).ready(function () {
|
|||
},
|
||||
|
||||
mounted: function mounted() {
|
||||
document.body.style.display = "block";
|
||||
|
||||
var sliderContainer = $('.slides-container');
|
||||
if (sliderContainer && sliderContainer.length) {
|
||||
sliderContainer = sliderContainer[0];
|
||||
|
|
@ -36908,5 +36919,122 @@ if (false) {
|
|||
|
||||
// removed by extract-text-webpack-plugin
|
||||
|
||||
/***/ }),
|
||||
/* 74 */,
|
||||
/* 75 */,
|
||||
/* 76 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var disposed = false
|
||||
var normalizeComponent = __webpack_require__(1)
|
||||
/* script */
|
||||
var __vue_script__ = __webpack_require__(78)
|
||||
/* template */
|
||||
var __vue_template__ = __webpack_require__(77)
|
||||
/* 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/responsive-sidebar.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-3cf1203e", Component.options)
|
||||
} else {
|
||||
hotAPI.reload("data-v-3cf1203e", Component.options)
|
||||
}
|
||||
module.hot.dispose(function (data) {
|
||||
disposed = true
|
||||
})
|
||||
})()}
|
||||
|
||||
module.exports = Component.exports
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 77 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var render = function() {
|
||||
var _vm = this
|
||||
var _h = _vm.$createElement
|
||||
var _c = _vm._self._c || _h
|
||||
return _vm.isMobile() && _vm.navContainer
|
||||
? _c(
|
||||
"div",
|
||||
{ key: _vm.key, staticClass: "nav-container scrollable" },
|
||||
[_vm._t("sidebar-body")],
|
||||
2
|
||||
)
|
||||
: _vm._e()
|
||||
}
|
||||
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-3cf1203e", module.exports)
|
||||
}
|
||||
}
|
||||
|
||||
/***/ }),
|
||||
/* 78 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
|
||||
/* harmony default export */ __webpack_exports__["default"] = ({
|
||||
data: function data() {
|
||||
return {
|
||||
templateRender: null
|
||||
};
|
||||
},
|
||||
|
||||
staticRenderFns: [],
|
||||
|
||||
created: function created() {
|
||||
debugger;
|
||||
},
|
||||
|
||||
computed: {
|
||||
'key': function key() {
|
||||
debugger;
|
||||
return this.$root.responsiveSidebarKey;
|
||||
}
|
||||
},
|
||||
|
||||
render: function render(h) {
|
||||
debugger;
|
||||
}
|
||||
});
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<div
|
||||
:key="key"
|
||||
class="nav-container scrollable"
|
||||
v-if="isMobile() && navContainer">
|
||||
<slot name="sidebar-body"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
templateRender: null
|
||||
}
|
||||
},
|
||||
|
||||
staticRenderFns: [],
|
||||
|
||||
created: function () {
|
||||
debugger
|
||||
},
|
||||
|
||||
computed: {
|
||||
'key': function () {
|
||||
debugger
|
||||
return this.$root.responsiveSidebarKey;
|
||||
}
|
||||
},
|
||||
|
||||
render: function (h) {
|
||||
debugger
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -28,12 +28,21 @@ Vue.component('child-sidebar', require('./UI/components/child-sidebar'));
|
|||
Vue.component('card-list-content', require('./UI/components/card-list'));
|
||||
Vue.component('card-list-header', require('./UI/components/card-header'));
|
||||
Vue.component('magnify-image', require('./UI/components/image-magnifier'));
|
||||
Vue.component('responsive-sidebar', require('./UI/components/responsive-sidebar'));
|
||||
|
||||
window.eventBus = new Vue();
|
||||
|
||||
$(document).ready(function () {
|
||||
// define a mixin object
|
||||
Vue.mixin({
|
||||
data: function () {
|
||||
return {
|
||||
'navContainer': false,
|
||||
'responsiveSidebarTemplate': '',
|
||||
'responsiveSidebarKey': Math.random(),
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
redirect: function (route) {
|
||||
route ? window.location.href = route : '';
|
||||
|
|
@ -125,7 +134,7 @@ $(document).ready(function () {
|
|||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -150,6 +159,8 @@ $(document).ready(function () {
|
|||
},
|
||||
|
||||
mounted: function () {
|
||||
document.body.style.display = "block";
|
||||
|
||||
let sliderContainer = $('.slides-container');
|
||||
if (sliderContainer && sliderContainer.length) {
|
||||
sliderContainer = sliderContainer[0];
|
||||
|
|
|
|||
|
|
@ -11,3 +11,20 @@
|
|||
-ms-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin rango-default {
|
||||
speak: none;
|
||||
line-height: 1;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
font-variant: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: 'Webkul Rango' !important;
|
||||
}
|
||||
|
||||
@mixin remove-padding-margin {
|
||||
width: 100% !important;
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -271,7 +271,7 @@
|
|||
|
||||
.cart-wish-wrap {
|
||||
.wishlist-icon {
|
||||
height: 32px;
|
||||
height: 38px;
|
||||
display: table;
|
||||
text-align: right;
|
||||
|
||||
|
|
@ -678,6 +678,14 @@
|
|||
margin-top: 20px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.coupon-container {
|
||||
margin-top: 20px;
|
||||
|
||||
.control-error {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-content {
|
||||
|
|
@ -1077,7 +1085,8 @@
|
|||
}
|
||||
|
||||
.custom-form {
|
||||
.row {
|
||||
.form-field {
|
||||
padding: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
|
|
@ -1841,3 +1850,35 @@
|
|||
.category-page-wrapper {
|
||||
@extend .remove-padding-margin;
|
||||
}
|
||||
|
||||
.bottom-toolbar {
|
||||
.pagination {
|
||||
.page-item {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: unset !important;
|
||||
text-decoration: none !important;
|
||||
|
||||
i {
|
||||
top: 2px;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.angle-left-icon,
|
||||
.angle-right-icon {
|
||||
@include rango-default;
|
||||
|
||||
background: unset;
|
||||
}
|
||||
.angle-right-icon::before {
|
||||
content: "\E908";
|
||||
}
|
||||
.angle-left-icon::before {
|
||||
content: "\E907";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,13 +10,6 @@
|
|||
background-color: #4d7ea8;
|
||||
|
||||
.newsletter-wrapper {
|
||||
display: flex;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-box-pack: justify;
|
||||
justify-content: space-between;
|
||||
|
||||
input.subscribe-field {
|
||||
width: 300px;
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
|
||||
/* @author Shubham Mehrotra */
|
||||
body {
|
||||
display: none;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
|
|
|
|||
|
|
@ -105,6 +105,19 @@
|
|||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.badge-wrapper {
|
||||
top: -2px;
|
||||
left: -7px;
|
||||
position: relative;
|
||||
|
||||
.badge {
|
||||
z-index: 10;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -115,6 +128,8 @@
|
|||
}
|
||||
|
||||
.product-card-new {
|
||||
max-width: 16rem;
|
||||
|
||||
.cart-wish-wrap {
|
||||
.wishlist-icon {
|
||||
text-align: left;
|
||||
|
|
@ -176,6 +191,9 @@
|
|||
padding: 10px 20px;
|
||||
|
||||
.newsletter-wrapper {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
input.subscribe-field {
|
||||
width: 200px;
|
||||
}
|
||||
|
|
@ -324,19 +342,90 @@
|
|||
}
|
||||
}
|
||||
|
||||
.auth-content {
|
||||
&.form-container {
|
||||
> .container {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
> div:first-child {
|
||||
padding: 0;
|
||||
|
||||
.body {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-page-wrapper {
|
||||
.layered-filter-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.category-container {
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
|
||||
> div {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
left: 0px;
|
||||
top: -15px;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
padding-bottom: 10px;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.21);
|
||||
|
||||
.toolbar-wrapper {
|
||||
> div.col-4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: table;
|
||||
text-align: center;
|
||||
|
||||
* {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
span {
|
||||
left: 5px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
font-size: 16px;
|
||||
overflow-y: scroll;
|
||||
padding-right: 15px;
|
||||
box-shadow: 0 2px 8px 0;
|
||||
width: 300px !important;
|
||||
background-color: $white-color;
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
|
||||
.category-title {
|
||||
width: 100%;
|
||||
display: table;
|
||||
|
|
@ -363,8 +452,12 @@
|
|||
}
|
||||
|
||||
.greeting {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
display: table;
|
||||
position: sticky;
|
||||
background-color: $white-color;
|
||||
border-bottom: 1px solid $border-common;
|
||||
|
||||
> i {
|
||||
font-size: 26px;
|
||||
|
|
@ -380,7 +473,8 @@
|
|||
}
|
||||
|
||||
ul {
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
color: $black-color;
|
||||
border-top: 1px solid $border-common;
|
||||
|
||||
li {
|
||||
|
|
@ -391,7 +485,8 @@
|
|||
background-color: $border-light;
|
||||
}
|
||||
|
||||
.category-logo {
|
||||
.category-logo,
|
||||
.language-logo-wrapper {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 5px;
|
||||
|
|
@ -412,62 +507,172 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-section {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
.vc-customer-options,
|
||||
.category-wrapper {
|
||||
li {
|
||||
font-size: 14px;
|
||||
|
||||
.auth-content {
|
||||
> .container {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
i {
|
||||
&.icon {
|
||||
@include rango-default;
|
||||
|
||||
.category-page-wrapper {
|
||||
.layered-filter-wrapper {
|
||||
display: none;
|
||||
}
|
||||
font-size: 18px;
|
||||
padding-right: 5px;
|
||||
|
||||
.category-container {
|
||||
margin: 0;
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
&.profile::before {
|
||||
content: "\E995";
|
||||
}
|
||||
|
||||
> div {
|
||||
padding: 0 10px;
|
||||
}
|
||||
&.address::before {
|
||||
content: "\e949";
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
padding: 0;
|
||||
&.reviews::before {
|
||||
content: "\e97d";
|
||||
}
|
||||
|
||||
.toolbar-wrapper {
|
||||
> div.col-4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: table;
|
||||
text-align: center;
|
||||
&.wishlist::before {
|
||||
content: "\e93e";
|
||||
}
|
||||
|
||||
i {
|
||||
left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
&.orders::before {
|
||||
content: "\e931";
|
||||
}
|
||||
|
||||
* {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
> div.col-4:nth-of-type(2) {
|
||||
i {
|
||||
left: 15px;
|
||||
&.downloadables::before {
|
||||
content: "\e926";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-section {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.header {
|
||||
&.drawer-section {
|
||||
width: 100%;
|
||||
display: table;
|
||||
|
||||
> * {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 25px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layered-filter-wrapper {
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.category-container,
|
||||
.search-container {
|
||||
.grid-card {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.grid-card:nth-child(odd) {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.grid-card:nth-child(even) {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-details {
|
||||
&.offset-1 {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.order-summary-container {
|
||||
&.offset-1 {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
.cart-details-header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cart-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cart-item-list {
|
||||
> div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
span:nth-child(1),
|
||||
.special-price {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 7px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.checkout-process {
|
||||
margin-left: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
|
||||
h1,
|
||||
> div {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.accordian-header {
|
||||
h3 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.billing-address {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.address-holder {
|
||||
> div {
|
||||
padding-right: 0;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.wishlist-container {
|
||||
@include remove-padding-margin;
|
||||
|
||||
.product-card-new {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -243,6 +243,12 @@ return [
|
|||
'new-password' => 'New password',
|
||||
'confirm-new-password' => 'Confirm new password',
|
||||
'top-brands' => 'Top Brands',
|
||||
'filter' => 'Filter',
|
||||
'view' => 'View',
|
||||
'addresses' => 'Addresses',
|
||||
'reviews' => 'Reviews',
|
||||
'orders' => 'Orders',
|
||||
'downloadables' => 'Downloadable Products',
|
||||
],
|
||||
],
|
||||
|
||||
|
|
@ -250,7 +256,7 @@ return [
|
|||
'header' => [
|
||||
'greeting' => 'Welcome, :customer !',
|
||||
]
|
||||
]
|
||||
],
|
||||
]
|
||||
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -148,8 +148,8 @@
|
|||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div v-if="hamburger" class="nav-container scrollable">
|
||||
<div class="wrapper" v-if="rootCategories">
|
||||
<div class="greeting drawer-section">
|
||||
<div class="wrapper" v-if="this.rootCategories">
|
||||
<div class="greeting drawer-section fw6">
|
||||
<i class="material-icons">perm_identity</i>
|
||||
<span>
|
||||
@guest('customer')
|
||||
|
|
@ -167,15 +167,41 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<ul type="none">
|
||||
@php
|
||||
$currency = $locale = null;
|
||||
|
||||
$currentLocale = app()->getLocale();
|
||||
$currentCurrency = core()->getCurrentCurrencyCode();
|
||||
|
||||
$allLocales = core()->getCurrentChannel()->locales;
|
||||
$allCurrency = core()->getCurrentChannel()->currencies;
|
||||
@endphp
|
||||
|
||||
@foreach ($allLocales as $appLocale)
|
||||
@if ($appLocale->code == $currentLocale)
|
||||
@php
|
||||
$locale = $appLocale;
|
||||
@endphp
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
@foreach ($allCurrency as $appCurrency)
|
||||
@if ($appCurrency->code == $currentCurrency)
|
||||
@php
|
||||
$currency = $appCurrency;
|
||||
@endphp
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
<ul type="none" class="velocity-content">
|
||||
<li
|
||||
:key="index"
|
||||
v-text="content.title"
|
||||
v-for="(content, index) in headerContent">
|
||||
<a :href="`${url}/${content.page_link}`" class="unset" v-text="content.title"></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul type="none">
|
||||
<ul type="none" class="category-wrapper">
|
||||
<li v-for="(category, index) in JSON.parse(categories)">
|
||||
<div class="category-logo">
|
||||
<img
|
||||
|
|
@ -187,7 +213,7 @@
|
|||
<a
|
||||
class="unset"
|
||||
:href="`${url}/${category['translations'][0].url_path}`">
|
||||
<span>@{{ category.name }}</span>
|
||||
<span v-text="category.name"></span>
|
||||
</a>
|
||||
|
||||
<i
|
||||
|
|
@ -196,6 +222,83 @@
|
|||
</i>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@auth('customer')
|
||||
<ul type="none" class="vc-customer-options">
|
||||
<li>
|
||||
<a href="{{ route('customer.profile.index') }}" class="unset">
|
||||
<i class="icon profile text-down-3"></i>
|
||||
<span>{{ __('shop::app.header.profile') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="{{ route('customer.address.index') }}" class="unset">
|
||||
<i class="icon address text-down-3"></i>
|
||||
<span>{{ __('velocity::app.shop.general.addresses') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="{{ route('customer.reviews.index') }}" class="unset">
|
||||
<i class="icon reviews text-down-3"></i>
|
||||
<span>{{ __('velocity::app.shop.general.reviews') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="{{ route('customer.wishlist.index') }}" class="unset">
|
||||
<i class="icon wishlist text-down-3"></i>
|
||||
<span>{{ __('shop::app.header.wishlist') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="{{ route('customer.orders.index') }}" class="unset">
|
||||
<i class="icon orders text-down-3"></i>
|
||||
<span>{{ __('velocity::app.shop.general.orders') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="{{ route('customer.downloadable_products.index') }}" class="unset">
|
||||
<i class="icon downloadables text-down-3"></i>
|
||||
<span>{{ __('velocity::app.shop.general.downloadables') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@endauth
|
||||
|
||||
<ul type="none" class="meta-wrapper">
|
||||
<li>
|
||||
<div class="language-logo-wrapper">
|
||||
@if ($locale->locale_image)
|
||||
<img
|
||||
class="language-logo"
|
||||
src="{{ asset('/storage/' . $locale->locale_image) }}" />
|
||||
@else
|
||||
<img
|
||||
class="language-logo"
|
||||
src="{{ asset($locale->locale_image) }}" />
|
||||
@endif
|
||||
</div>
|
||||
<span>{{ $locale->name }}</span>
|
||||
|
||||
<i
|
||||
class="rango-arrow-right"
|
||||
@click="toggleMetaInfo('languages')">
|
||||
</i>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span>{{ $currency->code }}</span>
|
||||
|
||||
<i
|
||||
class="rango-arrow-right"
|
||||
@click="toggleMetaInfo('currencies')">
|
||||
</i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wrapper" v-else-if="subCategory">
|
||||
|
|
@ -252,11 +355,74 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wrapper" v-else-if="languages">
|
||||
<div class="drawer-section">
|
||||
<i class="rango-arrow-left fs24 text-down-4" @click="toggleSubcategories('root')"></i>
|
||||
<h4 class="display-inbl">Languages</h4>
|
||||
<i class="material-icons pull-right" @click="closeDrawer()">cancel</i>
|
||||
</div>
|
||||
|
||||
<ul type="none">
|
||||
@foreach ($allLocales as $locale)
|
||||
<li>
|
||||
<div class="category-logo">
|
||||
<img
|
||||
class="category-icon"
|
||||
src="{{ asset('/storage/' . $locale->locale_image) }}" />
|
||||
</div>
|
||||
|
||||
@if (isset($serachQuery))
|
||||
<a
|
||||
class="unset"
|
||||
href="?{{ $serachQuery }}&locale={{ $locale->code }}">
|
||||
<span>{{ $locale->title }}</span>
|
||||
</a>
|
||||
@else
|
||||
<a
|
||||
class="unset"
|
||||
href="locale={{ $locale->code }}">
|
||||
<span>{{ $locale->name }}</span>
|
||||
</a>
|
||||
@endif
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wrapper" v-else-if="currencies">
|
||||
<div class="drawer-section">
|
||||
<i class="rango-arrow-left fs24 text-down-4" @click="toggleSubcategories('root')"></i>
|
||||
<h4 class="display-inbl">Currencies</h4>
|
||||
<i class="material-icons pull-right" @click="closeDrawer()">cancel</i>
|
||||
</div>
|
||||
|
||||
<ul type="none">
|
||||
@foreach ($allCurrency as $currency)
|
||||
<li>
|
||||
@if (isset($serachQuery))
|
||||
<a
|
||||
class="unset"
|
||||
href="?{{ $serachQuery }}&locale={{ $currency->code }}">
|
||||
<span>{{ $currency->code }}</span>
|
||||
</a>
|
||||
@else
|
||||
<a
|
||||
class="unset"
|
||||
href="?locale={{ $currency->code }}">
|
||||
<span>{{ $currency->code }}</span>
|
||||
</a>
|
||||
@endif
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hamburger-wrapper" @click="toggleHamburger">
|
||||
<i class="rango-toggle hamburger"></i>
|
||||
</div>
|
||||
|
||||
<logo-component></logo-component>
|
||||
</div>
|
||||
|
||||
|
|
@ -269,7 +435,19 @@
|
|||
<i class="material-icons">search</i>
|
||||
</a>
|
||||
|
||||
<a href="" class="unset">
|
||||
@php
|
||||
$cart = cart()->getCart();
|
||||
|
||||
$cartItemsCount = trans('shop::app.minicart.zero');
|
||||
if ($cart) {
|
||||
$cartItemsCount = $cart->items->count();
|
||||
}
|
||||
@endphp
|
||||
|
||||
<a href="{{ route('shop.checkout.cart.index') }}" class="unset">
|
||||
<div class="badge-wrapper">
|
||||
<span class="badge">{{ $cartItemsCount }}</span>
|
||||
</div>
|
||||
<i class="material-icons text-down-3">shopping_cart</i>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -310,6 +488,16 @@
|
|||
</header>
|
||||
</script>
|
||||
|
||||
<script type="text/x-template" id="sidebar-categories-template">
|
||||
<div class="wrapper" v-if="rootCategories">
|
||||
Hello World
|
||||
</div>
|
||||
|
||||
<div class="wrapper" v-else-if="subCategory">
|
||||
Hello World 2
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
(() => {
|
||||
Vue.component('star-ratings', {
|
||||
|
|
@ -460,6 +648,8 @@
|
|||
|
||||
data: function () {
|
||||
return {
|
||||
'currencies': false,
|
||||
'languages': false,
|
||||
'hamburger': false,
|
||||
'subCategory': null,
|
||||
'isSearchbar': false,
|
||||
|
|
@ -485,6 +675,13 @@
|
|||
|
||||
toggleHamburger: function () {
|
||||
this.hamburger = true;
|
||||
|
||||
// let html = $('#sidebar-categories-template').html();
|
||||
|
||||
// this.$root.navContainer = true;
|
||||
// this.$root.responsiveSidebarKey = Math.random();
|
||||
|
||||
// this.$root.responsiveSidebarTemplate = Vue.compile(html);
|
||||
},
|
||||
|
||||
closeDrawer: function() {
|
||||
|
|
@ -504,8 +701,13 @@
|
|||
this.rootCategories = false;
|
||||
this.subCategory = categories[index];
|
||||
}
|
||||
},
|
||||
|
||||
toggleMetaInfo: function (metaKey) {
|
||||
this.rootCategories = false;
|
||||
this[metaKey] = !this[metaKey];
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
|
|
@ -8,173 +8,207 @@
|
|||
@stop
|
||||
|
||||
@section('content-wrapper')
|
||||
<div class="container">
|
||||
<section class="cart-details row offset-1">
|
||||
<h1 class="fw6 row col-12">{{ __('shop::app.checkout.cart.title') }}</h1>
|
||||
|
||||
<div class="cart-details-header row col-6">
|
||||
{{-- TODO:- USE table insted of column --}}
|
||||
@if ($cart)
|
||||
<div class="row cart-header col-12 no-padding">
|
||||
<span class="col-8 fw6 fs16 pr0">
|
||||
{{ __('velocity::app.checkout.items') }}
|
||||
</span>
|
||||
|
||||
<span class="col-2 fw6 fs16 no-padding text-center">
|
||||
{{ __('velocity::app.checkout.qty') }}
|
||||
</span>
|
||||
|
||||
<span class="col-2 fw6 fs16 text-right pr0">
|
||||
{{ __('velocity::app.checkout.subtotal') }}
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($cart)
|
||||
<div class="cart-content col-12">
|
||||
<form
|
||||
action="{{ route('shop.checkout.cart.update') }}"
|
||||
method="POST"
|
||||
@submit.prevent="onSubmit">
|
||||
|
||||
<div class="cart-item-list">
|
||||
@csrf
|
||||
|
||||
@foreach ($cart->items as $key => $item)
|
||||
|
||||
@php
|
||||
$productBaseImage = $item->product->getTypeInstance()->getBaseImage($item);
|
||||
$product = $item->product;
|
||||
|
||||
$productPrice = $product->getTypeInstance()->getProductPrices();
|
||||
|
||||
@endphp
|
||||
|
||||
<div class="row col-12">
|
||||
<a
|
||||
href="{{ route('shop.productOrCategory.index', ['slug' => $product->url_key]) }}"
|
||||
title="{{ $product->name }}"
|
||||
class="product-image-container col-2">
|
||||
|
||||
<img
|
||||
src="{{ $productBaseImage['medium_image_url'] }}"
|
||||
class="card-img-top"
|
||||
alt="{{ $product->name }}">
|
||||
</a>
|
||||
|
||||
<div class="product-details-content col-6">
|
||||
<div class="row">
|
||||
<a
|
||||
href="{{ route('shop.productOrCategory.index', ['slug' => $product->url_key]) }}"
|
||||
title="{{ $product->name }}"
|
||||
class="unset col-12">
|
||||
|
||||
<span class="fs20 fw6 link-color">{{ $product->name }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row col-12">
|
||||
@include ('shop::products.price', ['product' => $product])
|
||||
</div>
|
||||
|
||||
<div class="row col-12 cursor-pointer">
|
||||
<a href="{{ route('shop.checkout.cart.remove', ['id' => $item->id]) }}" class="unset">
|
||||
<span class="rango-delete fs24"></span>
|
||||
<span class="align-vertical-top">{{ __('shop::app.checkout.cart.remove') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-quantity col-3 no-padding">
|
||||
<quantity-changer
|
||||
:control-name="'qty[{{$item->id}}]'"
|
||||
quantity="{{ $item->quantity }}">
|
||||
</quantity-changer>
|
||||
</div>
|
||||
|
||||
<div class="product-price fs18 col-1">
|
||||
<span class="card-current-price fw6 mr10">
|
||||
{{ core()->currency( $item->base_total) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{!! view_render_event('bagisto.shop.checkout.cart.controls.after', ['cart' => $cart]) !!}
|
||||
<a
|
||||
class="col-12 link-color remove-decoration fs16 no-padding"
|
||||
href="{{ route('shop.home.index') }}">
|
||||
{{ __('shop::app.checkout.cart.continue-shopping') }}
|
||||
</a>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="theme-btn light mr15 pull-right unset">
|
||||
|
||||
{{ __('shop::app.checkout.cart.update-cart') }}
|
||||
</button>
|
||||
{!! view_render_event('bagisto.shop.checkout.cart.controls.after', ['cart' => $cart]) !!}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@include ('shop::products.view.cross-sells')
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{!! view_render_event('bagisto.shop.checkout.cart.summary.after', ['cart' => $cart]) !!}
|
||||
|
||||
@if ($cart)
|
||||
<div class="col-4 offset-1 row order-summary-container">
|
||||
@include('shop::checkout.total.summary', ['cart' => $cart])
|
||||
|
||||
<coupon-component></coupon-component>
|
||||
</div>
|
||||
@else
|
||||
<div class="fs16 row col-12">
|
||||
{{ __('shop::app.checkout.cart.empty') }}
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="fs16 mt15 col-12 row remove-decoration"
|
||||
href="{{ route('shop.home.index') }}">
|
||||
|
||||
<button type="button" class="theme-btn remove-decoration">
|
||||
{{ __('shop::app.checkout.cart.continue-shopping') }}
|
||||
</button>
|
||||
</a>
|
||||
@endif
|
||||
|
||||
{!! view_render_event('bagisto.shop.checkout.cart.summary.after', ['cart' => $cart]) !!}
|
||||
|
||||
</section>
|
||||
</div>
|
||||
<cart-component></cart-component>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
@include('shop::checkout.cart.coupon')
|
||||
|
||||
<script type="text/javascript">
|
||||
function removeLink(message) {
|
||||
if (!confirm(message))
|
||||
event.preventDefault();
|
||||
}
|
||||
<script type="text/x-template" id="cart-template">
|
||||
<div class="container">
|
||||
<section class="cart-details row offset-1 col-12">
|
||||
<h1 class="fw6 col-12">{{ __('shop::app.checkout.cart.title') }}</h1>
|
||||
|
||||
function updateCartQunatity(operation, index) {
|
||||
var quantity = document.getElementById('cart-quantity'+index).value;
|
||||
@if ($cart)
|
||||
<div class="cart-details-header col-lg-6 col-md-12">
|
||||
<div class="row cart-header col-12 no-padding">
|
||||
<span class="col-8 fw6 fs16 pr0">
|
||||
{{ __('velocity::app.checkout.items') }}
|
||||
</span>
|
||||
|
||||
if (operation == 'add') {
|
||||
quantity = parseInt(quantity) + 1;
|
||||
} else if (operation == 'remove') {
|
||||
if (quantity > 1) {
|
||||
quantity = parseInt(quantity) - 1;
|
||||
} else {
|
||||
alert('{{ __('shop::app.products.less-quantity') }}');
|
||||
<span class="col-2 fw6 fs16 no-padding text-center">
|
||||
{{ __('velocity::app.checkout.qty') }}
|
||||
</span>
|
||||
|
||||
<span class="col-2 fw6 fs16 text-right pr0">
|
||||
{{ __('velocity::app.checkout.subtotal') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="cart-content col-12">
|
||||
<form
|
||||
action="{{ route('shop.checkout.cart.update') }}"
|
||||
method="POST"
|
||||
@submit.prevent="onSubmit">
|
||||
|
||||
<div class="cart-item-list">
|
||||
@csrf
|
||||
|
||||
@foreach ($cart->items as $key => $item)
|
||||
|
||||
@php
|
||||
$productBaseImage = $item->product->getTypeInstance()->getBaseImage($item);
|
||||
$product = $item->product;
|
||||
|
||||
$productPrice = $product->getTypeInstance()->getProductPrices();
|
||||
|
||||
@endphp
|
||||
|
||||
<div class="row col-12" v-if="!isMobileDevice">
|
||||
<a
|
||||
title="{{ $product->name }}"
|
||||
class="product-image-container col-2"
|
||||
href="{{ route('shop.productOrCategory.index', ['slug' => $product->url_key]) }}">
|
||||
|
||||
<img
|
||||
src="{{ $productBaseImage['medium_image_url'] }}"
|
||||
class="card-img-top"
|
||||
alt="{{ $product->name }}">
|
||||
</a>
|
||||
|
||||
<div class="product-details-content col-6">
|
||||
<div class="row">
|
||||
<a
|
||||
href="{{ route('shop.productOrCategory.index', ['slug' => $product->url_key]) }}"
|
||||
title="{{ $product->name }}"
|
||||
class="unset col-12">
|
||||
|
||||
<span class="fs20 fw6 link-color">{{ $product->name }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row col-12">
|
||||
@include ('shop::products.price', ['product' => $product])
|
||||
</div>
|
||||
|
||||
<div class="row col-12 cursor-pointer">
|
||||
<a href="{{ route('shop.checkout.cart.remove', ['id' => $item->id]) }}" class="unset">
|
||||
<span class="rango-delete fs24"></span>
|
||||
<span class="align-vertical-top">{{ __('shop::app.checkout.cart.remove') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-quantity col-3 no-padding">
|
||||
<quantity-changer
|
||||
:control-name="'qty[{{$item->id}}]'"
|
||||
quantity="{{ $item->quantity }}">
|
||||
</quantity-changer>
|
||||
</div>
|
||||
|
||||
<div class="product-price fs18 col-1">
|
||||
<span class="card-current-price fw6 mr10">
|
||||
{{ core()->currency( $item->base_total) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row col-12" v-else>
|
||||
<a
|
||||
title="{{ $product->name }}"
|
||||
class="product-image-container col-2"
|
||||
href="{{ route('shop.productOrCategory.index', ['slug' => $product->url_key]) }}">
|
||||
|
||||
<img
|
||||
src="{{ $productBaseImage['medium_image_url'] }}"
|
||||
class="card-img-top"
|
||||
alt="{{ $product->name }}">
|
||||
</a>
|
||||
|
||||
<div class="col-10 pr0">
|
||||
<a
|
||||
href="{{ route('shop.productOrCategory.index', ['slug' => $product->url_key]) }}"
|
||||
title="{{ $product->name }}"
|
||||
class="unset col-12 no-padding">
|
||||
|
||||
<span class="fs20 fw6 link-color">{{ $product->name }}</span>
|
||||
</a>
|
||||
|
||||
<div class="col-12 no-padding">
|
||||
@include ('shop::products.price', ['product' => $product])
|
||||
</div>
|
||||
|
||||
<div class="row col-12 remove-padding-margin actions">
|
||||
<div class="product-quantity col-4 no-padding">
|
||||
<quantity-changer
|
||||
:control-name="'qty[{{$item->id}}]'"
|
||||
quantity="{{ $item->quantity }}">
|
||||
</quantity-changer>
|
||||
</div>
|
||||
|
||||
<div class="col-4 cursor-pointer text-down-4">
|
||||
<a href="{{ route('shop.checkout.cart.remove', ['id' => $item->id]) }}" class="unset">
|
||||
<i class="material-icons fs24">delete</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{!! view_render_event('bagisto.shop.checkout.cart.controls.after', ['cart' => $cart]) !!}
|
||||
<a
|
||||
class="col-12 link-color remove-decoration fs16 no-padding"
|
||||
href="{{ route('shop.home.index') }}">
|
||||
{{ __('shop::app.checkout.cart.continue-shopping') }}
|
||||
</a>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="theme-btn light mr15 pull-right unset">
|
||||
|
||||
{{ __('shop::app.checkout.cart.update-cart') }}
|
||||
</button>
|
||||
{!! view_render_event('bagisto.shop.checkout.cart.controls.after', ['cart' => $cart]) !!}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@include ('shop::products.view.cross-sells')
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{!! view_render_event('bagisto.shop.checkout.cart.summary.after', ['cart' => $cart]) !!}
|
||||
|
||||
@if ($cart)
|
||||
<div class="col-lg-4 col-md-12 offset-1 row order-summary-container">
|
||||
@include('shop::checkout.total.summary', ['cart' => $cart])
|
||||
|
||||
<coupon-component></coupon-component>
|
||||
</div>
|
||||
@else
|
||||
<div class="fs16 row col-12">
|
||||
{{ __('shop::app.checkout.cart.empty') }}
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="fs16 mt15 col-12 row remove-decoration"
|
||||
href="{{ route('shop.home.index') }}">
|
||||
|
||||
<button type="button" class="theme-btn remove-decoration">
|
||||
{{ __('shop::app.checkout.cart.continue-shopping') }}
|
||||
</button>
|
||||
</a>
|
||||
@endif
|
||||
|
||||
{!! view_render_event('bagisto.shop.checkout.cart.summary.after', ['cart' => $cart]) !!}
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" id="cart-template">
|
||||
(() => {
|
||||
Vue.component('cart-component', {
|
||||
template: '#cart-template',
|
||||
data: function () {
|
||||
return {
|
||||
isMobileDevice: this.isMobile(),
|
||||
}
|
||||
}
|
||||
}
|
||||
document.getElementById('cart-quantity'+index).value = quantity;
|
||||
event.preventDefault();
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
@endpush
|
||||
|
|
@ -13,11 +13,10 @@
|
|||
|
||||
<script type="text/x-template" id="checkout-template">
|
||||
<div class="container">
|
||||
<div id="checkout" class="checkout-process offset-1 row col-11">
|
||||
<h1 class="row col-12">{{ __('velocity::app.checkout.checkout') }}</h1>
|
||||
|
||||
<div class="row col-7">
|
||||
<div id="checkout" class="checkout-process row offset-lg-1 col-lg-11 col-md-12">
|
||||
<h1 class="col-12">{{ __('velocity::app.checkout.checkout') }}</h1>
|
||||
|
||||
<div class="col-lg-7 col-md-12">
|
||||
<div class="step-content information" id="address-section">
|
||||
@include('shop::checkout.onepage.customer-info')
|
||||
</div>
|
||||
|
|
@ -76,7 +75,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 offset-1 row order-summary-container top pt0">
|
||||
<div class="col-lg-4 col-md-12 offset-lg-1 order-summary-container top pt0">
|
||||
<summary-section :key="summeryComponentKey"></summary-section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@endphp
|
||||
|
||||
@if (isset($shipping) && $shipping)
|
||||
<div :class="`row col-12 ${errors.has('address-form.shipping[first_name]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.shipping[first_name]') ? 'has-error' : ''}`">
|
||||
<label for="shipping[first_name]" class="required">
|
||||
{{ __('shop::app.checkout.onepage.first-name') }}*
|
||||
</label>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div :class="`row col-12 ${errors.has('address-form.shipping[last_name]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.shipping[last_name]') ? 'has-error' : ''}`">
|
||||
<label for="shipping[last_name]" class="required">
|
||||
{{ __('shop::app.checkout.onepage.last-name') }}*
|
||||
</label>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div :class="`row col-12 ${errors.has('address-form.shipping[email]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.shipping[email]') ? 'has-error' : ''}`">
|
||||
<label for="shipping[email]" class="required">
|
||||
{{ __('shop::app.checkout.onepage.email') }}*
|
||||
</label>
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div :class="`row col-12 ${errors.has('address-form.shipping[address1][]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.shipping[address1][]') ? 'has-error' : ''}`">
|
||||
<label for="shipping_address_0" class="required">
|
||||
{{ __('shop::app.checkout.onepage.address1') }}*
|
||||
</label>
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
core()->getConfigData('customer.settings.address.street_lines')
|
||||
&& core()->getConfigData('customer.settings.address.street_lines') > 1
|
||||
)
|
||||
<div class="row col-12">
|
||||
<div class="col-12 form-field">
|
||||
@for ($i = 1; $i < core()->getConfigData('customer.settings.address.street_lines'); $i++)
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
</div>
|
||||
@endif
|
||||
|
||||
<div :class="`row col-12 ${errors.has('address-form.shipping[city]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.shipping[city]') ? 'has-error' : ''}`">
|
||||
<label for="shipping[city]" class="required">
|
||||
{{ __('shop::app.checkout.onepage.city') }}*
|
||||
</label>
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div :class="`row col-12 ${errors.has('address-form.shipping[country]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.shipping[country]') ? 'has-error' : ''}`">
|
||||
<label for="shipping[country]" class="required">
|
||||
{{ __('shop::app.checkout.onepage.country') }}*
|
||||
</label>
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div :class="`row col-12 ${errors.has('address-form.shipping[state]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.shipping[state]') ? 'has-error' : ''}`">
|
||||
<label for="shipping[state]" class="required">
|
||||
{{ __('shop::app.checkout.onepage.state') }}*
|
||||
</label>
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div :class="`row col-12 ${errors.has('address-form.shipping[postcode]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.shipping[postcode]') ? 'has-error' : ''}`">
|
||||
<label for="shipping[postcode]" class="required">
|
||||
{{ __('shop::app.checkout.onepage.postcode') }}*
|
||||
</label>
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div :class="`row col-12 ${errors.has('address-form.shipping[phone]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.shipping[phone]') ? 'has-error' : ''}`">
|
||||
<label for="shipping[phone]" class="required">
|
||||
{{ __('shop::app.checkout.onepage.phone') }}*
|
||||
</label>
|
||||
|
|
@ -236,7 +236,7 @@
|
|||
@endauth
|
||||
|
||||
@elseif (isset($billing) && $billing)
|
||||
<div :class="`row col-12 ${errors.has('address-form.billing[email]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.billing[email]') ? 'has-error' : ''}`">
|
||||
<label for="billing[email]" class="required">
|
||||
{{ __('shop::app.checkout.onepage.email') }}*
|
||||
</label>
|
||||
|
|
@ -262,7 +262,7 @@
|
|||
@include('shop::checkout.onepage.customer-checkout')
|
||||
@endif
|
||||
|
||||
<div :class="`row col-12 ${errors.has('address-form.billing[first_name]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.billing[first_name]') ? 'has-error' : ''}`">
|
||||
<label for="billing[first_name]" class="required">
|
||||
{{ __('shop::app.checkout.onepage.first-name') }}*
|
||||
</label>
|
||||
|
|
@ -281,7 +281,7 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div :class="`row col-12 ${errors.has('address-form.billing[last_name]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.billing[last_name]') ? 'has-error' : ''}`">
|
||||
<label for="billing[last_name]" class="required">
|
||||
{{ __('shop::app.checkout.onepage.last-name') }}*
|
||||
</label>
|
||||
|
|
@ -300,7 +300,7 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div :class="`row col-12 ${errors.has('address-form.billing[address1][]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.billing[address1][]') ? 'has-error' : ''}`">
|
||||
<label for="billing_address_0" class="required">
|
||||
{{ __('shop::app.checkout.onepage.address1') }}*
|
||||
</label>
|
||||
|
|
@ -323,7 +323,7 @@
|
|||
core()->getConfigData('customer.settings.address.street_lines')
|
||||
&& core()->getConfigData('customer.settings.address.street_lines') > 1
|
||||
)
|
||||
<div class="row col-12" style="margin-top: -25px;">
|
||||
<div class="col-12 form-field" style="margin-top: -25px;">
|
||||
@for ($i = 1; $i < core()->getConfigData('customer.settings.address.street_lines'); $i++)
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -335,7 +335,7 @@
|
|||
</div>
|
||||
@endif
|
||||
|
||||
<div :class="`row col-12 ${errors.has('address-form.billing[city]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.billing[city]') ? 'has-error' : ''}`">
|
||||
<label for="billing[city]" class="required">
|
||||
{{ __('shop::app.checkout.onepage.city') }}*
|
||||
</label>
|
||||
|
|
@ -354,7 +354,7 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div :class="`row col-12 ${errors.has('address-form.billing[country]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.billing[country]') ? 'has-error' : ''}`">
|
||||
<label for="billing[country]" class="required">
|
||||
{{ __('shop::app.checkout.onepage.country') }}*
|
||||
</label>
|
||||
|
|
@ -381,7 +381,7 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div :class="`row col-12 ${errors.has('address-form.billing[state]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.billing[state]') ? 'has-error' : ''}`">
|
||||
<label for="billing[state]" class="required">
|
||||
{{ __('shop::app.checkout.onepage.state') }}*
|
||||
</label>
|
||||
|
|
@ -419,7 +419,7 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div :class="`row col-12 ${errors.has('address-form.billing[postcode]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.billing[postcode]') ? 'has-error' : ''}`">
|
||||
<label for="billing[postcode]" class="required">
|
||||
{{ __('shop::app.checkout.onepage.postcode') }}*
|
||||
</label>
|
||||
|
|
@ -438,7 +438,7 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div :class="`row col-12 ${errors.has('address-form.billing[phone]') ? 'has-error' : ''}`">
|
||||
<div :class="`col-12 form-field ${errors.has('address-form.billing[phone]') ? 'has-error' : ''}`">
|
||||
<label for="billing[phone]" class="required">
|
||||
{{ __('shop::app.checkout.onepage.phone') }}*
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<div slot="body">
|
||||
<div class="address-summary row">
|
||||
@if ($billingAddress = $cart->billing_address)
|
||||
<div class="billing-address col-6">
|
||||
<div class="billing-address col-lg-6 col-md-12">
|
||||
<div class="card-title mb-20">
|
||||
<b>{{ __('shop::app.checkout.onepage.billing-address') }}</b>
|
||||
</div>
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
</div>
|
||||
|
||||
<div class="order-description row fs16 cart-details">
|
||||
<div class="col-4">
|
||||
<div class="col-lg-4 col-md-12">
|
||||
@if ($cart->haveStockableItems())
|
||||
<div class="shipping mb20">
|
||||
<div class="decorator">
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
<slot name="place-order-btn"></slot>
|
||||
</div>
|
||||
|
||||
<div class="col-6 order-summary-container bottom pt0 offset-2">
|
||||
<div class="col-lg-6 col-md-12 order-summary-container bottom pt0 offset-lg-2">
|
||||
<slot name="summary-section"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,9 +29,9 @@
|
|||
{{ __('shop::app.customer.account.address.index.add') }}
|
||||
</a>
|
||||
@else
|
||||
<div class="address-holder row col-12">
|
||||
<div class="address-holder col-12 no-padding">
|
||||
@foreach ($addresses as $address)
|
||||
<div class="col-4">
|
||||
<div class="col-lg-4 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fw6">{{ auth()->guard('customer')->user()->name }} {{ $address->name }}</h5>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@extends('shop::customers.account.index')
|
||||
|
||||
@section('page_title')
|
||||
{{ __('shop::app.customer.account.review.index.page-title') }}
|
||||
{{ __('shop::app.customer.account.wishlist.page-title') }}
|
||||
@endsection
|
||||
|
||||
@section('page-detail-wrapper')
|
||||
|
|
@ -23,11 +23,7 @@
|
|||
|
||||
{!! view_render_event('bagisto.shop.customers.account.wishlist.list.before', ['wishlist' => $items]) !!}
|
||||
|
||||
<div class="filters-container">
|
||||
@include ('shop::products.list.toolbar')
|
||||
</div>
|
||||
|
||||
<div class="account-items-list row col-12 wishlist-container">
|
||||
<div class="account-items-list row wishlist-container">
|
||||
|
||||
@if ($items->count())
|
||||
@foreach ($items as $item)
|
||||
|
|
@ -36,7 +32,7 @@
|
|||
@endphp
|
||||
|
||||
@if ($currentMode == "grid")
|
||||
<div class="col-3">
|
||||
<div class="col-6 no-padding">
|
||||
@endif
|
||||
@include ('shop::products.list.card', [
|
||||
'checkmode' => true,
|
||||
|
|
@ -48,6 +44,10 @@
|
|||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
<div class="bottom-toolbar">
|
||||
{{ $items->links() }}
|
||||
</div>
|
||||
@else
|
||||
<div class="empty">
|
||||
{{ __('customer::app.wishlist.empty') }}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
{!! view_render_event('bagisto.shop.customers.login.before') !!}
|
||||
|
||||
<div class="container">
|
||||
<div class="row col-10 offset-1">
|
||||
<div class="col-lg-10 col-md-12 offset-lg-1">
|
||||
<div class="heading">
|
||||
<h2 class="fs24 fw6">
|
||||
{{ __('velocity::app.customer.login-form.customer-login')}}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
@section('content-wrapper')
|
||||
<div class="auth-content form-container">
|
||||
<div class="container">
|
||||
<div class="row col-10 offset-1">
|
||||
<div class="col-lg-10 col-md-12 offset-lg-1">
|
||||
<div class="heading">
|
||||
<h2 class="fs24 fw6">
|
||||
{{ __('velocity::app.customer.forget-password.forgot-password')}}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
@section('content-wrapper')
|
||||
<div class="auth-content form-container">
|
||||
<div class="container">
|
||||
<div class="row col-10 offset-1">
|
||||
<div class="col-lg-10 col-md-12 offset-lg-1">
|
||||
<div class="heading">
|
||||
<h2 class="fs24 fw6">
|
||||
{{ __('velocity::app.customer.signup-form.user-registration')}}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
@endpush
|
||||
|
||||
<div class="row">
|
||||
<div class="col-9 no-padding carousel-products vc-full-screen">
|
||||
<div class="col-9 no-padding carousel-products vc-full-screen" v-if="!isMobile()">
|
||||
<carousel-component
|
||||
slides-per-page="5"
|
||||
navigation-enabled="hide"
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
</carousel-component>
|
||||
</div>
|
||||
|
||||
<div class="col-9 no-padding carousel-products vc-small-screen">
|
||||
<div class="col-12 no-padding carousel-products vc-small-screen" v-else>
|
||||
<carousel-component
|
||||
slides-per-page="2"
|
||||
navigation-enabled="hide"
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
|
||||
@include ('shop::products.list.recently-viewed', [
|
||||
'quantity' => 3,
|
||||
'addClass' => 'col-3 new-products-recent',
|
||||
'addClass' => 'col-lg-3 col-md-12',
|
||||
'addClassWrapper' => 'scrollable max-height-350',
|
||||
])
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -57,6 +57,8 @@
|
|||
@include('shop::UI.particals')
|
||||
|
||||
<div id="app">
|
||||
{{-- <responsive-sidebar v-html="responsiveSidebarTemplate"></responsive-sidebar> --}}
|
||||
|
||||
<div class="main-container-wrapper">
|
||||
|
||||
@section('body-header')
|
||||
|
|
@ -179,7 +181,10 @@
|
|||
})()
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="{{ asset('vendor/webkul/ui/assets/js/ui.js') }}"></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="{{ asset('vendor/webkul/ui/assets/js/ui.js') }}">
|
||||
</script>
|
||||
|
||||
@stack('scripts')
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{!! view_render_event('bagisto.shop.products.add_to_cart.before', ['product' => $product]) !!}
|
||||
|
||||
<div class="col-4 add-to-cart-btn">
|
||||
<div class="col-4 add-to-cart-btn pl0">
|
||||
@if (isset($form) && !$form)
|
||||
<button
|
||||
type="submit"
|
||||
|
|
|
|||
|
|
@ -12,6 +12,16 @@
|
|||
<meta name="keywords" content="{{ $category->meta_keywords }}" />
|
||||
@stop
|
||||
|
||||
@push('css')
|
||||
<style type="text/css">
|
||||
@media only screen and (max-width: 992px) {
|
||||
.main-content-wrapper .vc-header {
|
||||
box-shadow: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@php
|
||||
$isDisplayMode = in_array(
|
||||
$category->display_mode, [
|
||||
|
|
@ -33,7 +43,7 @@
|
|||
@endif
|
||||
|
||||
<div class="category-container right">
|
||||
<div class="row">
|
||||
<div class="row remove-padding-margin">
|
||||
<div class="col-12">
|
||||
<h1 class="fw6 mb10">{{ $category->name }}</h1>
|
||||
|
||||
|
|
@ -76,7 +86,7 @@
|
|||
@if ($isDisplayMode)
|
||||
@if ($products->count())
|
||||
@if ($toolbarHelper->getCurrentMode() == 'grid')
|
||||
<div class="row">
|
||||
<div class="row col-12 remove-padding-margin">
|
||||
@foreach ($products as $productFlat)
|
||||
@include ('shop::products.list.card', ['product' => $productFlat])
|
||||
@endforeach
|
||||
|
|
@ -84,12 +94,10 @@
|
|||
@else
|
||||
<div class="product-list">
|
||||
@foreach ($products as $productFlat)
|
||||
|
||||
@include ('shop::products.list.card', [
|
||||
'list' => true,
|
||||
'product' => $productFlat
|
||||
])
|
||||
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
|
@ -119,41 +127,4 @@
|
|||
|
||||
{!! view_render_event('bagisto.shop.productOrCategory.index.after', ['category' => $category]) !!}
|
||||
</section>
|
||||
@stop
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.responsive-layred-filter').css('display','none');
|
||||
$(".sort-icon, .filter-icon").on('click', function(e){
|
||||
var currentElement = $(e.currentTarget);
|
||||
if (currentElement.hasClass('sort-icon')) {
|
||||
currentElement.removeClass('sort-icon');
|
||||
currentElement.addClass('icon-menu-close-adj');
|
||||
currentElement.next().removeClass();
|
||||
currentElement.next().addClass('icon filter-icon');
|
||||
$('.responsive-layred-filter').css('display','none');
|
||||
$('.pager').css('display','flex');
|
||||
$('.pager').css('justify-content','space-between');
|
||||
} else if (currentElement.hasClass('filter-icon')) {
|
||||
currentElement.removeClass('filter-icon');
|
||||
currentElement.addClass('icon-menu-close-adj');
|
||||
currentElement.prev().removeClass();
|
||||
currentElement.prev().addClass('icon sort-icon');
|
||||
$('.pager').css('display','none');
|
||||
$('.responsive-layred-filter').css('display','block');
|
||||
$('.responsive-layred-filter').css('margin-top','10px');
|
||||
} else {
|
||||
currentElement.removeClass('icon-menu-close-adj');
|
||||
$('.responsive-layred-filter').css('display','none');
|
||||
$('.pager').css('display','none');
|
||||
if ($(this).index() == 0) {
|
||||
currentElement.addClass('sort-icon');
|
||||
} else {
|
||||
currentElement.addClass('filter-icon');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@stop
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
</a>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="product-name">
|
||||
<div class="product-name col-12 no-padding">
|
||||
<a
|
||||
href="{{ route('shop.productOrCategory.index', ['slug' => $product->url_key]) }}"
|
||||
title="{{ $product->name }}"
|
||||
|
|
@ -91,20 +91,20 @@
|
|||
</div>
|
||||
|
||||
@if ($totalReviews)
|
||||
<div class="product-rating">
|
||||
<div class="product-rating col-12 no-padding">
|
||||
<star-ratings ratings="{{ $avgRatings }}"></star-ratings>
|
||||
<span class="align-top">{{ $totalReviews }} Ratings</span>
|
||||
</div>
|
||||
@else
|
||||
<div class="product-rating">
|
||||
<div class="product-rating col-12 no-padding">
|
||||
<span class="fs14">{{ __('velocity::app.products.be-first-review') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="cart-wish-wrap row">
|
||||
<div class="cart-wish-wrap row col-12 no-padding ml0">
|
||||
@include ('shop::products.add-to-cart', [
|
||||
'product' => $product,
|
||||
'addWishlistClass' => 'col-lg-4 col-md-4 col-sm-12 offset-lg-4',
|
||||
'addWishlistClass' => 'col-lg-4 col-md-4 col-sm-12 offset-lg-4 pr0',
|
||||
'addToCartBtnClass' => $addToCartBtnClass ?? ''
|
||||
])
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -78,20 +78,56 @@
|
|||
</div>
|
||||
|
||||
<div class="toolbar-wrapper row" v-else>
|
||||
<div class="col-4">
|
||||
<i class="material-icons">filter_list</i>
|
||||
<span>Filter</span>
|
||||
<div v-if="layeredNavigation" class="nav-container scrollable">
|
||||
<div class="header drawer-section">
|
||||
<i class="material-icons" @click="layeredNavigation = false">keyboard_backspace</i>
|
||||
|
||||
<span class="fs24 fw6">{{ __('velocity::app.shop.general.filter') }}</span>
|
||||
{{-- <span class="pull-right link-color" @click="layeredNavigation = false">Done</span> --}}
|
||||
</div>
|
||||
|
||||
@include ('shop::products.list.layered-navigation')
|
||||
</div>
|
||||
|
||||
<div class="col-4" @click="toggleLayeredNavigation({event: $event, actionType: 'open'})">
|
||||
<a class="unset">
|
||||
<i class="material-icons">filter_list</i>
|
||||
<span>{{ __('velocity::app.shop.general.filter') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<i class="material-icons">sort_by_alpha</i>
|
||||
<span>Sort By</span>
|
||||
<a
|
||||
class="unset"
|
||||
href="{{
|
||||
$toolbarHelper->isOrderCurrent('name-asc')
|
||||
? $toolbarHelper->getOrderUrl('name-asc')
|
||||
: $toolbarHelper->getOrderUrl('name-desc')
|
||||
}}">
|
||||
|
||||
<i class="material-icons">sort_by_alpha</i>
|
||||
<span>{{ __('shop::app.products.sort-by') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<i class="material-icons">view_module
|
||||
</i>
|
||||
<span>View</span>
|
||||
@php
|
||||
$isList = $toolbarHelper->isModeActive('list');
|
||||
@endphp
|
||||
|
||||
<a
|
||||
class="unset"
|
||||
href="{{
|
||||
$isList
|
||||
? $toolbarHelper->getModeUrl('grid')
|
||||
: $toolbarHelper->getModeUrl('list')
|
||||
}}">
|
||||
|
||||
<i class="material-icons">
|
||||
@if ($isList) list @else view_module @endif
|
||||
</i>
|
||||
<span>{{ __('velocity::app.shop.general.view') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
@ -99,7 +135,22 @@
|
|||
<script type="text/javascript">
|
||||
(() => {
|
||||
Vue.component('toolbar-component', {
|
||||
template: '#toolbar-template'
|
||||
template: '#toolbar-template',
|
||||
data: function () {
|
||||
return {
|
||||
'layeredNavigation': false,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleLayeredNavigation: function ({event, actionType}) {
|
||||
// this.$root.navContainer = true;
|
||||
// this.$root.responsiveSidebarTemplate = `<div slot="sidebar-body">
|
||||
// Hello World
|
||||
// </div>`;
|
||||
this.layeredNavigation = true;
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue