updates & initial responsive

This commit is contained in:
shubhammehrotra.symfony@webkul.com 2020-01-12 18:29:07 +05:30
parent d15128f85e
commit c28b2a0cbd
30 changed files with 874 additions and 302 deletions

View File

@ -724,7 +724,7 @@
}
.btn-add-to-cart {
padding: 8px !important;
padding: 3px 14px !important;
border-radius: 0px !important;
color: #FFFFFF !important;
border-color: #26A37C !important;
@ -858,12 +858,13 @@
top: 12px;
height: 5px;
position: relative;
background-color: #F7F7F9;
}
.customer-rating .rating-bar > div {
width: 0px;
height: 100%;
background-color: black;
background-color: #111111;
}
.customer-rating .btn-write-review {
@ -926,6 +927,11 @@
vertical-align: super;
}
.filters-container .limiter::after {
margin-left: 10px;
content: 'per page';
}
.view-mode {
margin-bottom: 20px;
}
@ -1011,7 +1017,6 @@
}
.product-card-new {
width: 22.5rem;
border: none !important;
margin: 0 5px 10px 10px;
}
@ -1039,6 +1044,10 @@
vertical-align: middle;
}
.product-card-new .product-rating .material-icons {
font-size: 16px;
}
.product-card-new .card-body > div:not(:last-child) {
margin-bottom: 5px;
}
@ -1664,11 +1673,7 @@
}
.wishlist-icon i {
color: #F05153;
}
.wishlist-icon i:hover::before {
content: "\E93D";
color: #111111;
}
.checkout-process {
@ -1684,7 +1689,7 @@
margin-bottom: 30px;
}
.checkout-process .scrollable {
.checkout-process .scrollable, .checkout-process .layered-filter-wrapper {
padding-top: 25px;
}
@ -1882,6 +1887,10 @@
margin-left: 0px !important;
}
.product-price span:nth-child(1) {
font-weight: 600;
}
.product-price .price-label {
margin-right: 6px;
}
@ -1917,8 +1926,16 @@
min-height: 65vh;
}
.search-container {
padding: 30px 20px;
}
.search-container .lg-card-container.list-card {
margin: 0 15px;
}
.search-container :first-child {
margin-left: 0px;
margin-top: 0px;
}
.method-sticker {
@ -2018,7 +2035,6 @@
#sidebar-level-0 {
display: none;
z-index: 100000;
border-top: 1px solid #CCCCCC;
}
.grouped-product-container .grouped-product-list {
@ -2230,6 +2246,7 @@
}
.category-container {
min-height: 670px;
margin-left: 15px;
padding: 40px 15px !important;
}
@ -2324,6 +2341,10 @@
background-color: #26A37C !important;
}
.slides-container .VueCarousel .VueCarousel-inner {
padding-top: 0;
}
.filter-attributes-item {
margin-bottom: 10px;
border-bottom: 1px solid #CCCCCC;
@ -2357,9 +2378,19 @@
}
.layered-filter-wrapper {
max-height: 670px;
margin-bottom: 42px;
padding: 42px 10px 0 10px;
}
.layered-filter-wrapper .recently-viewed {
margin-top: 20px;
}
.layered-filter-wrapper .recently-viewed h2 {
font-size: 18px;
}
.selective-div {
-webkit-appearance: none;
}
@ -2576,6 +2607,13 @@ header #search-form > *:focus {
/* product policy section */
/* category with custom option */
.category-with-custom-options img {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.category-with-custom-options .row:nth-child(1) {
margin-bottom: 0px;
}
@ -2591,14 +2629,10 @@ header #search-form > *:focus {
.category-with-custom-options .row:nth-child(1) > div:first-child {
max-height: 345px;
background-size: cover;
background-image: url("../images/girl.png");
}
.category-with-custom-options .row:nth-child(1) > div:nth-child(3) {
max-height: 345px;
background-size: cover;
background-image: url("../images/man.png");
}
.category-with-custom-options .row:nth-child(2) .category-image {
@ -2612,26 +2646,24 @@ header #search-form > *:focus {
.category-with-custom-options .row:nth-child(2) > div:nth-child(2) {
max-height: 345px;
background-size: cover;
background-image: url("../images/man.png");
}
.category-with-custom-options .row:nth-child(2) > div:nth-child(4) {
max-height: 345px;
background-size: cover;
background-image: url("../images/girl.png");
}
.category-with-custom-options .categories-collection {
width: 100%;
height: 100%;
min-height: 330px;
display: table;
min-height: 310px;
max-height: 345px;
padding-left: 36px;
background: #2B2B2B;
}
.category-with-custom-options .categories-collection h2 {
color: white;
color: #FFFFFF;
}
.category-with-custom-options .categories-collection li {
@ -2639,10 +2671,9 @@ header #search-form > *:focus {
}
.category-with-custom-options .categories-collection .category-text-content {
top: 50%;
position: relative;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
height: 100%;
display: table-cell;
vertical-align: middle;
}
/* category with custom option */
@ -2772,23 +2803,23 @@ header #search-form > *:focus {
/* Customer Reviews */
/* sidebar */
.categories-sidebar-container {
.general-container {
margin: 0;
margin-bottom: 60px;
display: inline-block;
}
.categories-sidebar-container > .row.disabled {
.general-container > .row.disabled {
cursor: not-allowed;
}
.categories-sidebar-container .main-category {
.general-container .main-category {
padding: 8px 15px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
.categories-sidebar-container .content-list {
.general-container .content-list {
margin: 0;
width: 100%;
height: 42px;
@ -2799,7 +2830,7 @@ header #search-form > *:focus {
display: inline-block;
}
.categories-sidebar-container .content-list ul {
.general-container .content-list ul {
width: 100%;
height: 100%;
display: -webkit-inline-box;
@ -2808,7 +2839,7 @@ header #search-form > *:focus {
background-color: #4D7EA8;
}
.categories-sidebar-container .content-list ul li a {
.general-container .content-list ul li a {
display: block;
cursor: pointer;
font-size: 16px;
@ -2820,7 +2851,7 @@ header #search-form > *:focus {
text-decoration: none;
}
.categories-sidebar-container .content-list ul li:hover {
.general-container .content-list ul li:hover {
background-color: #42719a;
}
@ -3186,7 +3217,7 @@ body::after {
font-size: 13px !important;
}
.fs14, .categories-sidebar-container {
.fs14, .general-container {
font-size: 14px;
}
@ -3578,7 +3609,7 @@ body::after {
}
.lg-card-container #quick-view-btn-container :hover {
color: white !important;
color: #FFFFFF !important;
}
.lg-card-container .background-image-group {
@ -3635,11 +3666,11 @@ body::after {
}
.lg-card-container.list-card .product-rating span {
vertical-align: middle;
vertical-align: top;
}
.lg-card-container.list-card .product-information {
height: 150px;
height: 200px;
display: table;
}
@ -3653,7 +3684,7 @@ body::after {
}
.lg-card-container.list-card .wishlist-icon {
height: 34px;
height: 40px;
display: table;
}
@ -3662,6 +3693,10 @@ body::after {
vertical-align: middle;
}
.lg-card-container.list-card .add-to-cart-btn {
max-width: 140px;
}
.lg-card-container.grid-card {
padding: 15px;
}
@ -3693,8 +3728,8 @@ body::after {
.product-card-new:hover,
.lg-card-container:hover,
.general-container:hover {
-webkit-box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.lg-card-container:hover .quick-view-btn-container {
@ -3726,6 +3761,7 @@ body::after {
.small-card-container .product-image {
height: 100%;
background-position: center;
}
.small-card-container .card-body {
@ -3853,8 +3889,12 @@ a.default {
cursor: pointer;
}
.VueCarousel .VueCarousel-inner {
padding-top: 5px;
}
.VueCarousel .VueCarousel-slide:nth-of-type(1) .product-card-new {
margin-left: 0px;
margin-left: 5px;
}
.navigation-hide .VueCarousel-navigation {
@ -3865,14 +3905,14 @@ a.default {
display: none;
}
.scrollable {
.scrollable, .layered-filter-wrapper {
max-height: 100vh;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
.scrollable::-webkit-scrollbar {
.scrollable::-webkit-scrollbar, .layered-filter-wrapper::-webkit-scrollbar {
width: 0 !important;
}
@ -3953,6 +3993,10 @@ button[disabled] {
max-height: 350px;
}
.border-normal {
border: 1px solid #DCDCDC;
}
.product-detail {
padding-top: 20px;
margin-bottom: 60px;
@ -4026,14 +4070,16 @@ button[disabled] {
.product-detail .right .add-to-cart-btn {
padding: 0px;
max-width: 130px;
}
.product-detail .right .add-to-cart-btn button {
padding: 9px 15px;
text-transform: uppercase;
padding: 9px 15px !important;
}
.product-detail .right .add-to-cart-btn button span {
top: 0;
font-size: 16px;
}
@ -4087,6 +4133,7 @@ button[disabled] {
.product-detail .wishlist-icon {
height: 46px;
display: table;
padding-left: 10px;
}
.product-detail .wishlist-icon i {
@ -4104,6 +4151,10 @@ button[disabled] {
max-height: 300px;
}
.velocity-small-screen {
display: none;
}
@media only screen and (max-width: 1100px) {
.footer .footer-content .newsletter-subscription .newsletter-wrapper .social-icons {
width: 100%;
@ -4120,6 +4171,163 @@ button[disabled] {
}
}
@media only screen and (max-width: 576px) {
.velocity-divide-page {
position: static;
}
.velocity-divide-page .left {
position: static;
}
.velocity-divide-page .right {
padding-left: 0;
}
.general-container .vc-header > div {
display: none;
}
.general-container .vc-header > div.velocity-small-screen {
display: block;
}
.general-container .vc-header > div.velocity-small-screen img {
width: 100%;
height: 100%;
max-height: 50px;
}
.general-container .vc-header .right-vc-header {
height: 50px;
display: table;
}
.general-container .vc-header .right-vc-header * {
display: table-cell;
vertical-align: middle;
}
#top {
display: none;
}
#top + header {
display: none;
}
}
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format("woff2");
}
/* fallback */
@font-face {
font-family: 'Material Icons Outlined';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format("woff2");
}
/* fallback */
@font-face {
font-family: 'Material Icons Round';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialiconsround/v14/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2) format("woff2");
}
/* fallback */
@font-face {
font-family: 'Material Icons Sharp';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialiconssharp/v15/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2) format("woff2");
}
/* fallback */
@font-face {
font-family: 'Material Icons Two Tone';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialiconstwotone/v13/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2) format("woff2");
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons-outlined {
font-family: 'Material Icons Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons-round {
font-family: 'Material Icons Round';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons-sharp {
font-family: 'Material Icons Sharp';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons-two-tone {
font-family: 'Material Icons Two Tone';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
/*!
* Bootstrap v3.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 Twitter, Inc.
@ -12076,38 +12284,6 @@ button.close {
}
}
@font-face {
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
src: url("../material-icons/iconfont/MaterialIcons-Regular.eot");
/* For IE6-8 */
src: local("Material Icons"), local("MaterialIcons-Regular"), url("../material-icons/iconfont/MaterialIcons-Regular.woff2") format("woff2"), url("../material-icons/iconfont/MaterialIcons-Regular.woff") format("woff"), url("../material-icons/iconfont/MaterialIcons-Regular.ttf") format("truetype");
}
.material-icons {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
}
* {
margin: 0;
padding: 0;
@ -12463,7 +12639,7 @@ header #search-form .btn-group .selectdiv, header #search-form .quantity .select
}
header #search-form .btn-group .selectdiv:before, header #search-form .quantity .selectdiv:before {
top: 13px;
top: 10px;
left: 108px;
z-index: 10;
font-size: 16px;
@ -12536,7 +12712,7 @@ header .mini-cart-container #mini-cart .mini-cart-content {
position: relative;
width: 75px;
text-align: right;
font-family: "SourceSansPro-Semibold";
font-weight: 600;
font-size: 16px;
color: rgba(0, 0, 0, 0.83);
letter-spacing: 0;
@ -12588,7 +12764,7 @@ header .dropdown-menu-large .dropdown-content .item .item-image .thumbnail {
}
header .dropdown-menu-large .dropdown-content .item .item-name {
font-family: "SourceSansPro-Semibold";
font-weight: 600;
font-size: 18px;
color: rgba(0, 0, 0, 0.83);
letter-spacing: 0;
@ -12612,7 +12788,6 @@ header .dropdown-menu-large .dropdown-content .item .item-details .item-qty-pric
}
header .dropdown-menu-large .dropdown-content .item .item-details .item-qty-price .item-qty {
font-family: "SourceSansPro-Regular";
font-size: 16px;
color: rgba(0, 0, 0, 0.83);
letter-spacing: 0;
@ -12620,7 +12795,7 @@ header .dropdown-menu-large .dropdown-content .item .item-details .item-qty-pric
}
header .dropdown-menu-large .dropdown-content .item .item-details .item-qty-price .item-price {
font-family: "SourceSansPro-Semibold";
font-weight: 600;
font-size: 16px;
color: rgba(0, 0, 0, 0.83);
letter-spacing: 0;
@ -12633,14 +12808,14 @@ header .dropdown-menu-large .dropdown-header {
}
header .dropdown-menu-large .dropdown-header .sub-total-text {
font-family: "SourceSansPro-Semibold";
font-weight: 600;
font-size: 16px;
color: rgba(0, 0, 0, 0.83);
letter-spacing: 0;
}
header .dropdown-menu-large .dropdown-header .cart-sub-total {
font-family: "SourceSansPro-Bold";
font-weight: 700;
font-size: 16px;
color: rgba(0, 0, 0, 0.83);
letter-spacing: 0;
@ -12650,7 +12825,7 @@ header .dropdown-menu-large .dropdown-header .cart-sub-total {
header .dropdown-menu-large .dropdown-footer {
padding: 10px 10px 0px 10px;
border-top: 1px solid #CCCCCC;
font-family: "SourceSansPro-Bold";
font-weight: 700;
font-size: 16px;
color: rgba(0, 0, 0, 0.83);
letter-spacing: 0;
@ -12725,7 +12900,7 @@ header .dropdown-menu-large .dropdown-footer .checkout-link {
#nav-menu .navbar .category-dropdown li.category-list a {
padding: 10px 0px;
position: relative;
font-family: "SourceSansPro-Semibold";
font-weight: 600;
font-size: 14px;
color: rgba(0, 0, 0, 0.83);
letter-spacing: 0;

View File

@ -1156,6 +1156,11 @@ $(document).ready(function () {
} else if (type == "mouseout") {
this.hide(subCategories1);
}
} else {
if (type == "mouseout") {
var _sidebar = $('#' + id);
_sidebar.hide();
}
}
}
}
@ -36839,6 +36844,20 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/* harmony default export */ __webpack_exports__["default"] = ({
props: ['heading', 'headerContent', 'isEnabled']
@ -36854,8 +36873,27 @@ var render = function() {
var _c = _vm._self._c || _h
return _c(
"div",
{ staticClass: "row velocity-divide-page remove-padding-margin" },
{ staticClass: "row velocity-divide-page remove-padding-margin vc-header" },
[
_c("div", { staticClass: "velocity-small-screen container" }, [
_c("div", { staticClass: "row" }, [
_c("div", { staticClass: "col-8" }, [
_c(
"div",
{ staticClass: "row" },
[
_c("logo-component", {
attrs: { "add-class": "col-8 offset-3" }
})
],
1
)
]),
_vm._v(" "),
_vm._m(0)
])
]),
_vm._v(" "),
_c(
"div",
{
@ -36913,7 +36951,20 @@ var render = function() {
]
)
}
var staticRenderFns = []
var staticRenderFns = [
function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c("div", { staticClass: "col-4 right-vc-header" }, [
_c("i", { staticClass: "fs16 fw6 rango-search" }),
_vm._v(" "),
_c("i", { staticClass: "material-icons text-down-3" }, [
_vm._v("shopping_cart")
])
])
}
]
render._withStripped = true
module.exports = { render: render, staticRenderFns: staticRenderFns }
if (false) {

View File

@ -1,5 +1,19 @@
<template>
<div class="row velocity-divide-page remove-padding-margin">
<div class="row velocity-divide-page remove-padding-margin vc-header">
<div class="velocity-small-screen container">
<div class="row">
<div class="col-8">
<div class="row">
<logo-component add-class="col-8 offset-3"></logo-component>
</div>
</div>
<div class="col-4 right-vc-header">
<i class="fs16 fw6 rango-search"></i>
<i class="material-icons text-down-3">shopping_cart</i>
</div>
</div>
</div>
<div
@mouseout="toggleSidebar('0', $event, 'mouseout')"
@mouseover="toggleSidebar('0', $event, 'mouseover')"

View File

@ -75,6 +75,11 @@ $(document).ready(function () {
} else if (type == "mouseout") {
this.hide(subCategories1);
}
} else {
if (type == "mouseout") {
let sidebar = $(`#${id}`);
sidebar.hide();
}
}
}
}

View File

@ -1,6 +1,7 @@
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
//velocity variables
$white-color: #FFFFFF;
$black-color: #111111;
$font-color: rgba(0,0,0,0.83);
$button-primary-bg: #21A179;
$border-primary: #269c77;
@ -24,8 +25,7 @@ $light-grey-clr: rgb(158, 158, 158);
$light-background: #F7F7F9;
$sidebar-width: 230px;
$box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
$material-icons-font-path: "../material-icons/iconfont/" !default;
$border-normal: 1px solid $border-dark;
$font-family-pro: 'Source Sans Pro', sans-serif;
$font-family-regular: 'SourceSansPro-Regular';
$font-family-semibold: 'SourceSansPro-Semibold';
$font-family-bold: 'SourceSansPro-Bold';

View File

@ -10,10 +10,9 @@
@import "components/product-view";
@import "components/media";
@import "static/material-icons";
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
$material-icons-font-path: "../material-icons/iconfont/" !default;
@import '../../../../publishable/assets/material-icons/iconfont/material-icons.scss';
// @import '../../../../publishable/assets/material-icons/iconfont/material-icons.scss';
* {
margin: 0;
@ -363,7 +362,7 @@ header {
}
.selectdiv:before {
top: 13px;
top: 10px;
left: 108px;
z-index: 10;
font-size: 16px;
@ -439,7 +438,7 @@ header {
position: relative;
width: 75px;
text-align: right;
font-family: $font-family-semibold;
font-weight: 600;
font-size: 16px;
color: $font-color;
letter-spacing: 0;
@ -488,7 +487,7 @@ header {
}
.item-name {
font-family: $font-family-semibold;
font-weight: 600;
font-size: 18px;
color: $font-color;
letter-spacing: 0;
@ -510,14 +509,13 @@ header {
display: inline-block;
.item-qty {
font-family: $font-family-regular;
font-size: 16px;
color: $font-color;
letter-spacing: 0;
text-align: left;
}
.item-price {
font-family: $font-family-semibold;
font-weight: 600;
font-size: 16px;
color: $font-color;
letter-spacing: 0;
@ -532,14 +530,14 @@ header {
border-top: 1px solid $border-common;
.sub-total-text {
font-family: $font-family-semibold;
font-weight: 600;
font-size: 16px;
color: $font-color;
letter-spacing: 0;
}
.cart-sub-total {
font-family: $font-family-bold;
font-weight: 700;
font-size: 16px;
color: $font-color;
letter-spacing: 0;
@ -549,7 +547,7 @@ header {
.dropdown-footer {
padding: 10px 10px 0px 10px;
border-top: 1px solid $border-common;
font-family: $font-family-bold;
font-weight: 700;
font-size: 16px;
color: $font-color;
letter-spacing: 0;
@ -621,7 +619,7 @@ header {
a {
padding: 10px 0px;
position: relative;
font-family: $font-family-semibold;
font-weight: 600;
font-size: 14px;
color: rgba(0,0,0,0.83);
letter-spacing: 0;

View File

@ -30,7 +30,7 @@
}
.btn-add-to-cart {
padding: 8px !important;
padding: 3px 14px !important;
border-radius: 0px !important;
color: $white-color !important;
border-color: $theme-color !important;

View File

@ -50,11 +50,12 @@
top: 12px;
height: 5px;
position: relative;
background-color: $light-background;
> div {
width: 0px;
height: 100%;
background-color: black;
background-color: $black-color;
}
}
@ -116,6 +117,11 @@
> div:not(:first-child) {
vertical-align: super;
}
.limiter::after {
margin-left: 10px;
content: 'per page';
}
}
.view-mode {
@ -204,7 +210,7 @@
}
.product-card-new {
width: 22.5rem;
// width: 19rem;
border: none !important;
margin: 0 5px 10px 10px;
@ -233,6 +239,10 @@
font-size: 14px;
vertical-align: middle;
}
.material-icons {
font-size: 16px;
}
}
.card-body {
@ -941,11 +951,11 @@
vertical-align: middle;
i {
color: $button-danger;
color: $black-color;
}
i:hover::before {
content: "\E93D";
// content: "\E93D";
}
}
@ -1160,6 +1170,10 @@
}
.product-price {
span:nth-child(1) {
font-weight: 600;
}
.price-label {
margin-right: 6px;
}
@ -1197,8 +1211,16 @@
}
.search-container {
padding: 30px 20px;
.lg-card-container {
&.list-card {
margin: 0 15px;
}
}
:first-child {
margin-left: 0px;
margin-top: 0px;
}
}
@ -1311,7 +1333,6 @@
#sidebar-level-0 {
display: none;
z-index: 100000;
border-top: 1px solid $border-common;
}
.grouped-product-container {
@ -1547,6 +1568,7 @@
}
.category-container {
min-height: 670px;
margin-left: 15px;
padding: 40px 15px !important;
@ -1642,6 +1664,11 @@
.VueCarousel-dot--active {
background-color: $theme-color !important;
}
.VueCarousel {
.VueCarousel-inner {
padding-top: 0;
}
}
}
.filter-attributes-item {
@ -1679,7 +1706,19 @@
}
.layered-filter-wrapper {
@extend .scrollable;
max-height: 670px;
margin-bottom: 42px;
padding: 42px 10px 0 10px;
.recently-viewed {
margin-top: 20px;
h2 {
font-size: 18px;
}
}
}
.selective-div {

View File

@ -210,6 +210,13 @@ header #search-form > *:focus {
.category-with-custom-options {
img {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.row:nth-child(1) {
margin-bottom: 0px;
@ -223,14 +230,10 @@ header #search-form > *:focus {
&:first-child() {
max-height: 345px;
background-size: cover;
background-image: url('../images/girl.png');
}
&:nth-child(3) {
max-height: 345px;
background-size: cover;
background-image: url('../images/man.png');
}
}
}
@ -246,27 +249,25 @@ header #search-form > *:focus {
&:nth-child(2) {
max-height: 345px;
background-size: cover;
background-image: url('../images/man.png');
}
&:nth-child(4) {
max-height: 345px;
background-size: cover;
background-image: url('../images/girl.png');
}
}
}
.categories-collection {
width: 100%;
height: 100%;
min-height: 330px;
display: table;
min-height: 310px;
max-height: 345px;
padding-left: 36px;
background:#2B2B2B;
h2 {
color: white;
color: $white-color;
}
li {
@ -274,9 +275,9 @@ header #search-form > *:focus {
}
.category-text-content {
top: 50%;
position: relative;
transform: translateY(-50%);
height: 100%;
display: table-cell;
vertical-align: middle;
}
}
}
@ -425,7 +426,7 @@ header #search-form > *:focus {
/* Customer Reviews */
/* sidebar */
.categories-sidebar-container {
.general-container {
@extend .fs14;
margin: 0;

View File

@ -1,3 +1,7 @@
.velocity-small-screen {
display: none;
}
@media only screen and (max-width: 1100px) {
.footer {
.footer-content {
@ -40,4 +44,57 @@
// body {
// display: block;
// }
.velocity-divide-page {
position: static;
.left {
position: static;
}
.right {
padding-left: 0;
}
}
.general-container {
.vc-header {
> div {
display: none;
}
> div.velocity-small-screen {
display: block;
img {
width: 100%;
height: 100%;
max-height: 50px;
}
}
.right-vc-header {
height: 50px;
display: table;
* {
display: table-cell;
vertical-align: middle;
}
}
}
}
#top {
display: none;
+ header {
display: none;
}
// + .categories-sidebar-container {
// display: none;
// }
}
}

View File

@ -139,12 +139,14 @@
.add-to-cart-btn {
padding: 0px;
max-width: 130px;
button {
padding: 9px 15px;
text-transform: uppercase;
padding: 9px 15px !important;
span {
top: 0;
font-size: 16px;
}
}
@ -203,6 +205,7 @@
.wishlist-icon {
height: 46px;
display: table;
padding-left: 10px;
i {
display: table-cell;

View File

@ -355,7 +355,7 @@
#quick-view-btn-container {
:hover {
color: white !important;
color: $white-color !important;
}
}
@ -420,12 +420,12 @@
}
span {
vertical-align: middle;
vertical-align: top;
}
}
.product-information {
height: 150px;
height: 200px;
display: table;
> div {
@ -441,7 +441,7 @@
}
.wishlist-icon {
height: 34px;
height: 40px;
display: table;
i {
@ -449,6 +449,10 @@
vertical-align: middle;
}
}
.add-to-cart-btn {
max-width: 140px;
}
}
&.grid-card {
@ -484,7 +488,7 @@
.product-card-new:hover,
.lg-card-container:hover,
.general-container:hover {
box-shadow: 0 6px 14px 0 rgba(0,0,0,0.14);
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.lg-card-container:hover {
@ -519,6 +523,7 @@
@extend .bg-image;
height: 100%;
background-position: center;
}
.card-body {
@ -648,9 +653,13 @@ a {
width: 100%;
cursor: pointer;
.VueCarousel-inner {
padding-top: 5px;
}
.VueCarousel-slide:nth-of-type(1) {
.product-card-new {
margin-left: 0px;
margin-left: 5px;
}
}
}
@ -749,4 +758,8 @@ button[disabled] {
.max-height-350 {
max-height: 350px;
}
.border-normal {
border: $border-normal;
}

View File

@ -0,0 +1,115 @@
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
/* fallback */
@font-face {
font-family: 'Material Icons Outlined';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}
/* fallback */
@font-face {
font-family: 'Material Icons Round';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialiconsround/v14/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2) format('woff2');
}
/* fallback */
@font-face {
font-family: 'Material Icons Sharp';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialiconssharp/v15/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2) format('woff2');
}
/* fallback */
@font-face {
font-family: 'Material Icons Two Tone';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialiconstwotone/v13/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons-outlined {
font-family: 'Material Icons Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons-round {
font-family: 'Material Icons Round';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons-sharp {
font-family: 'Material Icons Sharp';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons-two-tone {
font-family: 'Material Icons Two Tone';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

View File

@ -39,7 +39,7 @@
<div class="mini-cart-content">
<i class="icon fs16 cell rango-arrow-down down-icon-position down-arrow-margin"></i>
<i class="rango-cart-1 fs24 text-down-3"></i>
<i class="material-icons-outlined text-down-3">shopping_cart</i>
<span class="badge" v-text="itemCount"></span>
<span class="fs18 fw6 cart-text">{{ __('velocity::app.minicart.cart') }}</span>
</div>
@ -66,6 +66,19 @@
</div>
</script>
<script type="text/x-template" id="logo-template">
<a
:class="`left ${addClass}`"
href="{{ route('shop.home.index') }}">
@if ($logo = core()->getCurrentChannel()->logo_url)
<img class="logo" src="{{ $logo }}" />
@else
<img class="logo" src="{{ asset('themes/velocity/assets/images/logo-text.png') }}" />
@endif
</a>
</script>
<script type="text/javascript">
(() => {
Vue.component('star-ratings', {
@ -178,5 +191,10 @@
}
}
});
Vue.component('logo-component', {
template: '#logo-template',
props: ['addClass'],
});
})()
</script>

View File

@ -24,7 +24,7 @@
@push('css')
<style type="text/css">
.categories-sidebar-container {
.general-container {
margin-bottom: 0px;
min-height: 100vh;
}

View File

@ -0,0 +1,112 @@
<div class="container-fluid category-with-custom-options">
@php
$category[0] = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($category[0]);
$category[1] = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($category[1]);
$category[2] = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($category[2]);
$category[3] = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($category[3]);
@endphp
<div class="row">
<div class="col pr15">
<img src="{{ asset ('/storage/' . $category['2']->image) }}" />
</div>
<div class="col">
<div class="card-arrow-container">
<div class="card-arrow card-arrow-rt"></div>
</div>
<div class="categories-collection">
<div class="category-text-content">
<h2 class="text-uppercase">{{ $category[0]->name }}</h2>
<ul type="none" class="fs14">
@foreach ($category[0]->children as $subCategory)
<li>
<a href="{{ $subCategory->slug }}" class="unset">
{{ $subCategory->name }}
</a>
</li>
@endforeach
</ul>
</div>
</div>
</div>
<div class="col pr15">
<img src="{{ asset ('/storage/' . $category['0']->image) }}" />
</div>
<div class="col">
<div class="card-arrow-container">
<div class="card-arrow card-arrow-bt"></div>
</div>
<div class="categories-collection">
<div class="category-text-content">
<h2 class="text-uppercase">{{ $category[1]->name }}</h2>
<ul type="none" class="fs14">
@foreach ($category[1]->children as $subCategory)
<li>
<a href="{{ $subCategory->slug }}" class="unset">
{{ $subCategory->name }}
</a>
</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col mr15">
<div class="card-arrow-container">
<div class="card-arrow card-arrow-tp"></div>
</div>
<div class="categories-collection">
<div class="category-text-content">
<h2 class="text-uppercase">{{ $category[2]->name }}</h2>
<ul type="none" class="fs14">
@foreach ($category[2]->children as $subCategory)
<li>
<a href="{{ $subCategory->slug }}" class="unset">
{{ $subCategory->name }}
</a>
</li>
@endforeach
</ul>
</div>
</div>
</div>
<div class="col mt15">
<img src="{{ asset ('/storage/' . $category['3']->image) }}" />
</div>
<div class="col mt15 mr15">
<div class="card-arrow-container">
<div class="card-arrow card-arrow-lt"></div>
</div>
<div class="categories-collection">
<div class="category-text-content">
<h2 class="text-uppercase">{{ $category[3]->name }}</h2>
<ul type="none" class="fs14">
@foreach ($category[3]->children as $subCategory)
<li>
<a href="{{ $subCategory->slug }}" class="unset">
{{ $subCategory->name }}
</a>
</li>
@endforeach
</ul>
</div>
</div>
</div>
<div class="col">
<img src="{{ asset ('/storage/' . $category['1']->image) }}" />
</div>
</div>
</div>

View File

@ -17,7 +17,7 @@
</div>
<div class="right">
<h3 class="fs20 clr-light">{{ $categoryDetails->name }}</h3>
<h3 class="fs20 clr-light text-uppercase">{{ $categoryDetails->name }}</h3>
<ul type="none">
@foreach ($categoryDetails->children as $subCategory)

View File

@ -1,98 +0,0 @@
<div class="container-fluid category-with-custom-options">
<div class="row">
<div class="col bg-image mr15"></div>
<div class="col">
<div class="card-arrow-container">
<div class="card-arrow card-arrow-rt"></div>
</div>
<div class="categories-collection">
<div class="category-text-content">
<h2>WOMEN</h2>
<ul type="none" class="fs14">
<li>Clothing</li>
<li>Top Brands</li>
<li>Watches</li>
<li>Handbags & Clutches</li>
<li>Gold & Diamond Jewellery</li>
<li>Fashion & Silver Jewellery</li>
<li>Sunglasses</li>
<li>Handloom & Handicraft Store</li>
<li>Handbags & Clutches</li>
</ul>
</div>
</div>
</div>
<div class="col bg-image mr15"></div>
<div class="col">
<div class="card-arrow-container">
<div class="card-arrow card-arrow-bt"></div>
</div>
<div class="categories-collection">
<div class="category-text-content">
<h2>Kids</h2>
<ul type="none" class="fs14">
<li>Clothing</li>
<li>Top Brands</li>
<li>Watches</li>
<li>Handbags & Clutches</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col mr15">
<div class="card-arrow-container">
<div class="card-arrow card-arrow-tp"></div>
</div>
<div class="categories-collection">
<div class="category-text-content">
<h2>Women Apparel</h2>
<ul type="none" class="fs14">
<li>Hoodies & Sweatshirts</li>
<li>Jackets</li>
<li>Tees</li>
<li>Tanks</li>
<li>Pants</li>
<li>Shorts</li>
</ul>
</div>
</div>
</div>
<div class="col bg-image mt10"></div>
<div class="col mt10 mr15">
<div class="card-arrow-container">
<div class="card-arrow card-arrow-lt"></div>
</div>
<div class="categories-collection">
<div class="category-text-content">
<h2>Electronics</h2>
<ul type="none" class="fs14">
<li>Clothing</li>
<li>Top Brands</li>
<li>Watches</li>
<li>Handbags & Clutches</li>
</ul>
</div>
</div>
</div>
<div class="col bg-image"></div>
</div>
</div>

View File

@ -50,7 +50,7 @@
<div class="full-content-wrapper">
{!! view_render_event('bagisto.shop.home.content.before') !!}
{!! DbView::make($velocityMetaData)->field('home_page_content')->render() !!}
{{-- {!! DbView::make($velocityMetaData)->field('home_page_content')->render() !!} --}}
{{ view_render_event('bagisto.shop.home.content.after') }}
</div>
@ -63,8 +63,7 @@
<!-- Show Product Policy -->
{{-- @include('shop::home.product-policy') --}}
<!-- trending products -->
{{-- @include('shop::home.category-with-custom-option') --}}
<!-- advertisement two -->
{{-- @include('shop::home.advertisements.advertisement-two') --}}

View File

@ -1,12 +1,6 @@
<header>
<div class="row col-12 remove-padding-margin velocity-divide-page">
<a id="logo" class="left" href="{{ route('shop.home.index') }}">
@if ($logo = core()->getCurrentChannel()->logo_url)
<img class="logo" src="{{ $logo }}" class="img-responsive" title="" alt="" />
@else
<img class="logo" src="{{ asset('themes/velocity/assets/images/logo-text.png') }}" class="img-responsive" />
@endif
</a>
<logo-component></logo-component>
<div class="row no-margin right">
<div class="col-8 no-padding input-group">

View File

@ -63,7 +63,7 @@
@include('shop::layouts.top-nav.index')
@include('shop::layouts.header.index', ['categories' => $categories])
<div class="categories-sidebar-container col-12 no-padding">
<div class="general-container col-12 no-padding">
@php
$velocityContent = app('Webkul\Velocity\Repositories\ContentRepository')->getAllContents();

View File

@ -15,10 +15,11 @@
{{ ! $product->isSaleable() ? 'disabled' : '' }}>
@if (! (isset($showCartIcon) && !$showCartIcon))
<span class="rango-cart-1 fs20"></span>
{{-- <span class="rango-cart-1 fs20"></span> --}}
<i class="material-icons text-down-3">shopping_cart</i>
@endif
<span class="fs14 align-vertical-top fw6">
<span class="fs14 fw6 text-uppercase text-up-4">
{{ __('shop::app.products.add-to-cart') }}
</span>
</button>
@ -26,7 +27,9 @@
</div>
@if (! (isset($showWishlist) && !$showWishlist))
@include('shop::products.wishlist')
@include('shop::products.wishlist', [
'addClass' => $addWishlistClass ?? ''
])
@endif
{!! view_render_event('bagisto.shop.products.add_to_cart.after', ['product' => $product]) !!}

View File

@ -1,3 +1,4 @@
@inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
@inject ('productRepository', 'Webkul\Product\Repositories\ProductRepository')
@extends('shop::layouts.master')
@ -54,7 +55,6 @@
</div>
</div>
@if ($products->count())
<div class="filters-container">
@include ('shop::products.list.toolbar')
@ -74,17 +74,11 @@
</div>
@if ($isDisplayMode)
@if ($products->count())
@inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
@if ($toolbarHelper->getCurrentMode() == 'grid')
<div class="row">
@foreach ($products as $productFlat)
@include ('shop::products.list.card', ['product' => $productFlat])
@endforeach
</div>
@else

View File

@ -89,7 +89,7 @@
@if ($totalReviews)
<div class="product-rating">
<star-ratings ratings="{{ $avgRatings }}"></star-ratings>
<span>{{ $totalReviews }} Ratings</span>
<span class="align-top">{{ $totalReviews }} Ratings</span>
</div>
@else
<div class="product-rating">
@ -98,7 +98,10 @@
@endif
<div class="cart-wish-wrap row">
@include ('shop::products.add-to-cart', ['product' => $product])
@include ('shop::products.add-to-cart', [
'product' => $product,
'addWishlistClass' => 'col-4 offset-4'
])
</div>
</div>
</div>

View File

@ -36,6 +36,10 @@
<layered-navigation></layered-navigation>
@if ($showRecentlyViewed)
@include ('shop::products.list.recently-viewed')
@endif
{!! view_render_event('bagisto.shop.products.list.layered-nagigation.after') !!}
</div>
@ -50,7 +54,13 @@
<div class="filter-content">
<div class="filter-attributes">
<filter-attribute-item v-for='(attribute, index) in attributes' :attribute="attribute" :key="index" :index="index" @onFilterAdded="addFilters(attribute.code, $event)" :appliedFilterValues="appliedFilters[attribute.code]">
<filter-attribute-item
:key="index"
:index="index"
:attribute="attribute"
v-for='(attribute, index) in attributes'
@onFilterAdded="addFilters(attribute.code, $event)"
:appliedFilterValues="appliedFilters[attribute.code]">
</filter-attribute-item>
</div>
@ -74,13 +84,21 @@
<div class="filter-attributes-content">
<ul type="none" class="items ml15" v-if="attribute.type != 'price'">
<li class="item" v-for='(option, index) in attribute.options'>
<span class="checkbox">
<input type="checkbox" :id="option.id" v-bind:value="option.id" v-model="appliedFilters" @change="addFilter($event)"/>
@{{ option.label ? option.label : option.admin_name }}
</span>
<li
class="item"
v-for='(option, index) in attribute.options'>
<div
class="checkbox"
@click="optionClicked(option.id, $event)">
<input
type="checkbox"
:id="option.id"
v-bind:value="option.id"
v-model="appliedFilters"
@change="addFilter($event)" />
<span>@{{ option.label ? option.label : option.admin_name }}</span>
</div>
</li>
</ul>
@ -112,32 +130,25 @@
id="price_to">
</div>
</div>
</div>
</div>
</script>
<script>
<script type="text/javascript">
Vue.component('layered-navigation', {
template: '#layered-navigation-template',
data: function() {
return {
appliedFilters: {},
attributes: @json($filterAttributes),
appliedFilters: {}
}
},
created: function () {
var urlParams = new URLSearchParams(window.location.search);
let urlParams = new URLSearchParams(window.location.search);
var this_this = this;
urlParams.forEach(function (value, index) {
this_this.appliedFilters[index] = value.split(',');
urlParams.forEach((value, index) => {
this.appliedFilters[index] = value.split(',');
});
},
@ -162,14 +173,12 @@
}
window.location.href = "?" + params.join('&');
}
},
}
});
Vue.component('filter-attribute-item', {
template: '#filter-attribute-item-template',
props: [
'index',
'attribute',
@ -219,7 +228,6 @@
methods: {
addFilter: function (e) {
this.$emit('onFilterAdded', this.appliedFilters)
},
@ -236,10 +244,28 @@
this.appliedFilters = [];
this.$emit('onFilterAdded', this.appliedFilters)
},
optionClicked: function (id, {target}) {
let checkbox = $(`#${id}`);
if (checkbox && checkbox.length > 0 && target.type != "checkbox") {
checkbox = checkbox[0];
checkbox.checked = !checkbox.checked;
if (checkbox.checked) {
this.appliedFilters.push(id);
} else {
let idPosition = this.appliedFilters.indexOf(id);
if (idPosition == -1)
idPosition = this.appliedFilters.indexOf(id.toString());
this.appliedFilters.splice(idPosition, 1);
}
this.addFilter(event);
}
}
}
});
</script>
@endpush

View File

@ -46,6 +46,12 @@
</a>
</div>
</div>
<span
class="fs16"
v-if="!recentlyViewed"
v-text="'Not available'">
</span>
</div>
</div>
</script>
@ -60,19 +66,24 @@
return {
baseURL: '{{ url()->to('/') }}',
recentlyViewed: (() => {
let slugs = JSON.parse(window.localStorage.recentlyViewed);
let updatedSlugs = {};
let storedRecentlyViewed = window.localStorage.recentlyViewed;
if (storedRecentlyViewed) {
var slugs = JSON.parse(storedRecentlyViewed);
var updatedSlugs = {};
slugs.forEach(slug => {
updatedSlugs[slug] = {};
});
slugs.forEach(slug => {
updatedSlugs[slug] = {};
});
return updatedSlugs;
return updatedSlugs;
}
})(),
}
},
created: function () {
// @TODO:- current product and recentlyViewed
for (slug in this.recentlyViewed) {
if (slug) {
this.$http(`${this.baseURL}/product-details/${slug}`)

View File

@ -42,7 +42,7 @@
<div class="sorter">
<label>{{ __('shop::app.products.sort-by') }}</label>
<i class="icon fs16 cell rango-arrow-down select-icon-margin down-icon-position"></i>
<select class="selective-div" onchange="window.location.href = this.value">
<select class="selective-div border-normal" onchange="window.location.href = this.value">
@foreach ($toolbarHelper->getAvailableOrders() as $key => $order)
@ -58,7 +58,7 @@
<div class="limiter">
<label>{{ __('shop::app.products.show') }}</label>
<i class="icon fs16 cell rango-arrow-down select-icon-show-margin down-icon-position"></i>
<select class="selective-div" onchange="window.location.href = this.value" style="width: 57px;">
<select class="selective-div border-normal" onchange="window.location.href = this.value" style="width: 57px;">
@foreach ($toolbarHelper->getAvailableLimits() as $limit)

View File

@ -29,7 +29,7 @@
margin-top: 0px;
}
.categories-sidebar-container {
.general-container {
margin-bottom: 0px;
}
</style>
@ -84,7 +84,7 @@
@include ('shop::products.add-to-cart', [
'product' => $product,
'showCartIcon' => false
'showCartIcon' => false,
])
</div>
@ -201,7 +201,7 @@
if (existingViewed.indexOf(currentProductId) == -1) {
existingViewed.push(currentProductId);
if (existingViewed.length >= 4)
if (existingViewed.length > 4)
existingViewed = existingViewed.slice(Math.max(existingViewed.length - 4, 1));
window.localStorage.setItem('recentlyViewed', JSON.stringify(existingViewed));

View File

@ -7,7 +7,7 @@
@endphp
<a
class="unset wishlist-icon col-4 offset-4 text-right"
class="unset wishlist-icon text-right {{ $addWishlistClass ?? '' }}"
@if (! $isWished)
href="{{ route('customer.wishlist.add', $product->product_id) }}"
@elseif (isset($itemId) && $itemId)
@ -15,15 +15,41 @@
@endif
>
<i class="fs24 {{ $isWished ? 'rango-heart-fill' : 'rango-heart'}}"></i>
<wishlist-component active="{{ !$isWished }}"></wishlist-component>
</a>
@endauth
@guest('customer')
<a
href="{{ route('customer.session.index') }}"
class="unset wishlist-icon col-4 offset-4 text-right">
<i class="fs24 rango-heart"></i>
class="unset wishlist-icon text-right {{ $addWishlistClass ?? '' }}">
<wishlist-component active="false"></wishlist-component>
</a>
@endauth
{!! view_render_event('bagisto.shop.products.wishlist.after') !!}
@push('scripts')
<script type="text/x-template" id="wishlist-template">
<i
:class="`material-icons ${isActive} ${active}`"
@mouseover="isActive ? isActive = !isActive : ''"
@mouseout="active !== '' && !isActive ? isActive = !isActive : ''">
@{{ isActive ? 'favorite_border' : 'favorite' }}
</i>
</script>
<script type="text/javascript">
(() => {
Vue.component('wishlist-component', {
props: ['active'],
template: '#wishlist-template',
data: function () {
return {
isActive: this.active
}
},
});
})()
</script>
@endpush

View File

@ -1,3 +1,5 @@
@inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
@extends('shop::layouts.master')
@section('page_title')
@ -5,28 +7,39 @@
@endsection
@section('content-wrapper')
<section class="search-container cart-details row offset-1">
<section class="search-container cart-details row">
@if ($results->count())
<div class="filters-container col-12">
@include ('shop::products.list.toolbar')
</div>
@endif
@if (! $results)
<h1 class="fw6 row col-12">{{ __('shop::app.search.no-results') }}</h1>
<h1 class="fw6 col-12">{{ __('shop::app.search.no-results') }}</h1>
@else
@if ($results->isEmpty())
<h1 class="fw6 row col-12">{{ __('shop::app.products.whoops') }}</h1>
<h1 class="fw6 col-12">{{ __('shop::app.products.whoops') }}</h1>
<span>{{ __('shop::app.search.no-results') }}</span>
@else
@if ($results->total() == 1)
<h2 class="fw6 row col-12 mb20">
<h2 class="fw6 col-12 mb20">
{{ $results->total() }} {{ __('shop::app.search.found-result') }}
</h2>
@else
<h2 class="fw6 row col-12 mb20">
<h2 class="fw6 col-12 mb20">
{{ $results->total() }} {{ __('shop::app.search.found-results') }}
</h2>
@endif
@foreach ($results as $productFlat)
@include('shop::products.list.card', ['product' => $productFlat->product])
@if ($toolbarHelper->getCurrentMode() == 'grid')
@include('shop::products.list.card', ['product' => $productFlat->product])
@else
@include('shop::products.list.card', [
'list' => true,
'product' => $productFlat->product
])
@endif
@endforeach
@include('ui::datagrid.pagination')