responsive updates

This commit is contained in:
shubhammehrotra.symfony@webkul.com 2020-01-24 18:49:50 +05:30
parent a826937b98
commit 80ef6e8820
26 changed files with 1279 additions and 370 deletions

View File

@ -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;
}
}

View File

@ -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;
}
});
/***/ })
/******/ ]);

View File

@ -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>

View File

@ -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];

View File

@ -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;
}

View File

@ -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";
}
}
}

View File

@ -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;

View File

@ -1,6 +1,7 @@
/* @author Shubham Mehrotra */
body {
display: none;
overflow-x: hidden;
scroll-behavior: smooth;

View File

@ -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;
}
}
}

View File

@ -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 !',
]
]
],
]
?>

View File

@ -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>

View File

@ -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

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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') }}

View File

@ -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')}}

View File

@ -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')}}

View File

@ -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')}}

View File

@ -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>

View File

@ -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')

View File

@ -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"

View File

@ -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

View File

@ -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>

View File

@ -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>