447 lines
14 KiB
Vue
447 lines
14 KiB
Vue
<template>
|
|
<v-app-bar
|
|
:clipped-left="$vuetify.display.mdAndUp"
|
|
app
|
|
color="header-background-color darken-3"
|
|
dark
|
|
class=" bg-indigo text-white pa-4"
|
|
>
|
|
<v-col class="d-flex justify-start pa-0">
|
|
<v-app-bar-nav-icon @click="menuAction()" class="header-buttons" />
|
|
<v-img
|
|
class="ml-md-2 cursor-pointer d-none d-md-flex d-lg-flex"
|
|
@click="goTohomePage()"
|
|
:src="craneLogoWhite"
|
|
max-height="45"
|
|
max-width="100"
|
|
contain
|
|
></v-img>
|
|
</v-col>
|
|
|
|
<v-col class="d-flex justify-center">
|
|
<v-img
|
|
class="ml-md-2 cursor-pointer d-md-none d-lg-none"
|
|
@click="goTohomePage()"
|
|
:src="craneLogoWhite"
|
|
max-height="45"
|
|
max-width="100"
|
|
contain
|
|
></v-img>
|
|
<!-- <div
|
|
v-for="(categories, index) in categoryList.childrenData"
|
|
v-bind:key="index"
|
|
>
|
|
<v-toolbar-items
|
|
class="white--text d-none d-md-flex"
|
|
v-if="index === 0"
|
|
>
|
|
<v-menu
|
|
open-on-hover
|
|
down
|
|
offset-y
|
|
allow-overflow
|
|
content-class="pt-4 header-menu-content"
|
|
v-for="(category, index) in categories.childrenData"
|
|
v-bind:key="index"
|
|
v-show="category.isActive"
|
|
>
|
|
<template v-slot:activator="{ on }">
|
|
<div
|
|
v-if="
|
|
category.name !== 'Baby' &&
|
|
category.name !== 'Gifts' &&
|
|
category.isActive
|
|
"
|
|
text
|
|
class="cursor-pointer text-uppercase my-auto body pa-0 d-inline-block px-sm-2 ls-n01 px-lg-4 menu-nav-link custom-menu"
|
|
v-on="on"
|
|
:class="
|
|
category.id == activeCategoryMenu &&
|
|
pageName() == 'CategoryPage'
|
|
? 'meheader-category-text-active'
|
|
: 'meheader-category-text'
|
|
"
|
|
@click="categoryProducts(category.id, category)"
|
|
>
|
|
{{ category.name }}
|
|
</div>
|
|
</template>
|
|
<v-col v-if="category.childrenData != ''">
|
|
<SubMenu
|
|
:subCategoryList="category"
|
|
@action="inactiveCategoryMenu"
|
|
:mainMenu="category.id"
|
|
:subMenuItem="subMenuItem"
|
|
/>
|
|
</v-col>
|
|
</v-menu>
|
|
</v-toolbar-items>
|
|
</div> -->
|
|
</v-col>
|
|
|
|
<v-col class="d-flex justify-end pr-0">
|
|
<!-- <v-btn icon @click="goToShopping()">
|
|
<v-icon>mdi-shopping-outline</v-icon>
|
|
</v-btn> -->
|
|
<div class="mt-3 mr-5 d-none d-md-block">
|
|
<v-menu offset-y v-if="userAuth" content-class="me-header-user-menu" >
|
|
<template v-slot:activator="{ on, attrs }">
|
|
<div color="primary" >
|
|
<span v-bind="attrs" v-on="on" class="text-uppercase cursor-pointer" > Welcome,</span>
|
|
<span class="text-uppercase cursor-pointer pl-2">{{ userName}}</span>
|
|
</div>
|
|
|
|
</template>
|
|
<v-list class="pr-10 d-none d-md-block ">
|
|
<v-list-item class="pr-10">
|
|
<v-list-item-title
|
|
@click="goTohomePage()"
|
|
class="cursor-pointer meheader-category-text"
|
|
>Retailer Portal</v-list-item-title
|
|
>
|
|
</v-list-item>
|
|
<v-list-item >
|
|
<v-list-item-title
|
|
@click="goToAddressBook()"
|
|
class="cursor-pointer meheader-category-text"
|
|
>Address Book</v-list-item-title
|
|
>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-title
|
|
@click="goToLogout()"
|
|
class="cursor-pointer meheader-category-text"
|
|
>Logout</v-list-item-title
|
|
>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</div>
|
|
|
|
<v-btn
|
|
icon
|
|
class="header-buttons"
|
|
@click="goToLogout()"
|
|
:max-width="$vuetify.display.mdOnly ? '35px' : ''"
|
|
>
|
|
<v-icon>mdi-logout</v-icon>
|
|
</v-btn>
|
|
<!-- <v-btn
|
|
icon
|
|
@click="showSearchInput = true"
|
|
class="d-none d-md-block header-buttons"
|
|
:max-width="$vuetify.display.mdOnly ? '35px' : ''"
|
|
>
|
|
<v-icon class="header-action-icons">mdi-magnify</v-icon>
|
|
</v-btn> -->
|
|
<v-btn
|
|
icon
|
|
class="header-buttons"
|
|
@click="goToCartProducts()"
|
|
:max-width="$vuetify.display.mdOnly ? '35px' : ''"
|
|
>
|
|
<v-icon>mdi-cart-outline</v-icon>
|
|
<span v-if="cartProductsProgress || inProgress">
|
|
<v-progress-circular
|
|
:size="20"
|
|
color="pink"
|
|
:width="2"
|
|
indeterminate
|
|
></v-progress-circular>
|
|
</span>
|
|
<span v-else>
|
|
<v-badge
|
|
class="mb-4"
|
|
v-show="cartProductsItem.length"
|
|
color="pink"
|
|
:content="cartProductsItem.length"
|
|
></v-badge>
|
|
</span>
|
|
</v-btn>
|
|
<v-navigation-drawer
|
|
v-model="showSearchInput"
|
|
v-if="showSearchInput"
|
|
absolute
|
|
right
|
|
color="#ffffff"
|
|
:width="searchInputWidth"
|
|
height="64"
|
|
>
|
|
<v-text-field
|
|
v-model="search"
|
|
autofocus
|
|
clearable
|
|
single-line
|
|
label="Search"
|
|
solo
|
|
type="text"
|
|
color="primary"
|
|
class="me-header-search-field black--text"
|
|
@blur="showSearchInput = false"
|
|
v-on:keyup.enter="GotoPage"
|
|
>
|
|
<template v-slot:append>
|
|
<v-icon @click="GotoPage()" class="primary--text"
|
|
>mdi-magnify</v-icon
|
|
>
|
|
</template>
|
|
</v-text-field>
|
|
</v-navigation-drawer>
|
|
|
|
</v-col>
|
|
</v-app-bar>
|
|
</template>
|
|
<script>
|
|
// import SubMenu from "@/components/layout/sub-menu/SubMenu";
|
|
import { doFetchCatelogProducts } from "@/services/product.service";
|
|
import {
|
|
customAttributeValueNew,
|
|
//googleAanalyticsEventCategory,
|
|
goToCategoryPageRouting,
|
|
getCategoryOne,
|
|
} from "@/services/util.service";
|
|
import humps from "lodash-humps";
|
|
import craneLogoBlue from "@/assets/Crane_Logo_blue.png";
|
|
import craneLogoWhite from "@/assets/Crane_Logo_white.png";
|
|
|
|
export default {
|
|
name: "Header",
|
|
// components: { SubMenu },
|
|
|
|
props: [],
|
|
data: () => ({
|
|
craneLogoBlue:craneLogoBlue,
|
|
craneLogoWhite:craneLogoWhite,
|
|
activeCategoryMenu: "",
|
|
searchResultList: [],
|
|
searchInProgress: false,
|
|
lookupCatelog: null,
|
|
showSearchInput: false,
|
|
search: null,
|
|
}),
|
|
watch: {
|
|
lookupCatelog: {
|
|
handler: function (newVal) {
|
|
clearTimeout(this.lookupCatelogProductTimeoutId);
|
|
this.lookupCatelogProductTimeoutId = setTimeout(async () => {
|
|
try {
|
|
if (!newVal) this.searchResultList = [];
|
|
else {
|
|
this.searchInProgress = true;
|
|
let results = await doFetchCatelogProducts(newVal);
|
|
if (results != null) {
|
|
this.searchResultList = humps(results);
|
|
} else {
|
|
this.searchResultList = [];
|
|
}
|
|
this.searchInProgress = false;
|
|
}
|
|
} catch (error) {
|
|
this.searchResultList = [];
|
|
}
|
|
}, 500);
|
|
},
|
|
},
|
|
},
|
|
computed: {
|
|
userName:function(){
|
|
return this.$store.state.accountOne.one.firstname;
|
|
},
|
|
userAuth: function () {
|
|
return this.$store.state.auth.userAuth;
|
|
},
|
|
|
|
categoryList: function () {
|
|
return this.$store.state.headerCategoryList.categoryList;
|
|
},
|
|
cartProductsProgress: function () {
|
|
if (this.userAuth) {
|
|
return this.$store.state.userCartProduct.cartProductsProgress;
|
|
} else {
|
|
return this.$store.state.cartProduct.cartProductsProgress;
|
|
}
|
|
},
|
|
subMenuItem: {
|
|
get: function () {
|
|
return this.$store.state.headerCategoryList.categoryId;
|
|
},
|
|
set: function () {},
|
|
},
|
|
inProgress: function () {
|
|
if (this.userAuth) {
|
|
return this.$store.state.userCartProduct.inProgress;
|
|
} else {
|
|
return this.$store.state.cartProduct.inProgress;
|
|
}
|
|
},
|
|
cartProductsItem() {
|
|
if (this.userAuth) {
|
|
return this.$store.state.userCartProduct.cartProductList;
|
|
} else {
|
|
return this.$store.state.cartProduct.cartProductList;
|
|
}
|
|
},
|
|
categoryDetailsList: function () {
|
|
return this.$store.state.headerCategoryList.categoryDetails;
|
|
},
|
|
searchInputWidth() {
|
|
return this.$vuetify.display.xsOnly ? "100%" : "256";
|
|
},
|
|
},
|
|
methods: {
|
|
|
|
goToAddressBook(){
|
|
return this.$router.push({ name : "AddressBook"})
|
|
},
|
|
|
|
pageName() {
|
|
return this.$route.name;
|
|
},
|
|
menuAction: function () {
|
|
this.$emit("action");
|
|
},
|
|
goToCartProducts() {
|
|
window.open("/cart-products", "_self");
|
|
},
|
|
goTohomePage() {
|
|
window.open("/", "_self");
|
|
},
|
|
goToLogout() {
|
|
localStorage.removeItem("cr_checkOutTab");
|
|
window.open("/logout-success", "_self");
|
|
},
|
|
getCustomAttributeValue(customAttributes, attributeCode) {
|
|
return customAttributeValueNew(customAttributes, attributeCode);
|
|
},
|
|
GotoPage() {
|
|
if (this.search) {
|
|
this.showSearchInput = false;
|
|
this.searchResultList = [];
|
|
let searchKeywords = this.search;
|
|
let pagePath = this.$route.path;
|
|
let isMeModulePage = pagePath.includes("/retailer/");
|
|
if (isMeModulePage) {
|
|
window.open(
|
|
`/search?pageNumber=1&pageSize=9&sortBy=relevance&q=${searchKeywords}&filter=W10=`,
|
|
"_self"
|
|
);
|
|
} else {
|
|
this.$router
|
|
.push({
|
|
name: "SearchPage",
|
|
query: {
|
|
pageNumber: 1,
|
|
pageSize: 9,
|
|
sortBy: "relevance",
|
|
q: searchKeywords,
|
|
filter: "W10=",
|
|
},
|
|
})
|
|
.catch((error) => {
|
|
error;
|
|
});
|
|
this.$store.dispatch("catalogBrowser/search", {
|
|
fullCatalog: window.craneCatalog,
|
|
keywords: searchKeywords,
|
|
filters: [],
|
|
pageNumber: 1,
|
|
pageSize: 9,
|
|
sortBy: "relevance",
|
|
});
|
|
}
|
|
localStorage.removeItem("cr_subCategoryItemId");
|
|
localStorage.removeItem("cr_subCategoryId");
|
|
localStorage.removeItem("cr_mainCategoryId");
|
|
this.search = null;
|
|
}
|
|
},
|
|
async categoryProducts(categoryId) {
|
|
if (this.categoryDetailsList) {
|
|
let categoryOne = await getCategoryOne(
|
|
this.categoryDetailsList,
|
|
categoryId
|
|
);
|
|
if (categoryOne) {
|
|
this.$store.dispatch("layout/setHeroContent", categoryOne);
|
|
let path = this.getCustomAttributeValue(categoryOne.ca, "url_path");
|
|
console.log(categoryOne.n, categoryOne);
|
|
this.activeCategoryMenu = categoryId;
|
|
// googleAanalyticsEventCategory(
|
|
// "browse_category",
|
|
// "ecommerce",
|
|
// categoryDetails
|
|
// );
|
|
localStorage.setItem("cr_mainCategoryId", categoryId);
|
|
localStorage.removeItem("cr_subCategoryItemId");
|
|
localStorage.removeItem("cr_subCategoryId");
|
|
let subMenuItem = "";
|
|
this.$store.dispatch("headerCategoryList/setCategoryId", subMenuItem);
|
|
this.$emit("actionScroll");
|
|
let pagePath = this.$route.path;
|
|
let isMeModulePage = pagePath.includes("/retailer/");
|
|
if (isMeModulePage) {
|
|
window.open(`/${path}`, "_self");
|
|
} else {
|
|
let vm = this;
|
|
goToCategoryPageRouting(vm, categoryOne);
|
|
}
|
|
this.$store
|
|
.dispatch("catalogBrowser/search", {
|
|
fullCatalog: window.craneCatalog,
|
|
keywords: "",
|
|
filters: [{ label: "Category", prop: "ci", value: categoryId }],
|
|
pageNumber: 1,
|
|
pageSize: 9,
|
|
sortBy: "position",
|
|
})
|
|
.catch((error) => {
|
|
error;
|
|
});
|
|
}
|
|
}
|
|
},
|
|
async inactiveCategoryMenu(data) {
|
|
this.activeCategoryMenu = data.mainMenu;
|
|
//this.subMenu = data.subMenu;
|
|
this.$store.dispatch(
|
|
"headerCategoryList/setCategoryId",
|
|
data.subMenuItem
|
|
);
|
|
localStorage.setItem("cr_mainCategoryId", data.mainMenu);
|
|
localStorage.setItem("cr_subCategoryItemId", data.subMenuItem);
|
|
localStorage.setItem("cr_subCategoryId", data.subMenu);
|
|
//let categoryObj = { mainMenu: data.mainMenu, subMenu: data.subMenu };
|
|
//localStorage.setItem("cr_categoryIds", JSON.stringify(categoryObj));
|
|
if (data.subMenuItem) {
|
|
if (this.categoryDetailsList) {
|
|
let categoryOne = await getCategoryOne(
|
|
this.categoryDetailsList,
|
|
data.subMenuItem
|
|
);
|
|
if (categoryOne) {
|
|
this.$store.dispatch("layout/setHeroContent", categoryOne);
|
|
let path = this.getCustomAttributeValue(categoryOne.ca, "url_path");
|
|
console.log(categoryOne.n, categoryOne);
|
|
// const words = path.split("/");
|
|
let pagePath = this.$route.path;
|
|
let isMeModulePage = pagePath.includes("/retailer/");
|
|
if (isMeModulePage) {
|
|
window.open(`/${path}`, "_self");
|
|
} else {
|
|
let vm = this;
|
|
goToCategoryPageRouting(vm, categoryOne);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
async created() {
|
|
if (this.userAuth) {
|
|
await this.$store.dispatch("accountOne/basicInfo");
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style src="./Header.scss" lang="scss" />
|