1066 lines
34 KiB
Vue
1066 lines
34 KiB
Vue
<template>
|
|
<div v-resize="checkActiveCategory">
|
|
<!-- <HeaderPromoBanner
|
|
v-if="
|
|
pageName() == 'HomePage' &&
|
|
heroBanner &&
|
|
headerPromoBanner &&
|
|
headerPromoBanner.active
|
|
"
|
|
@closeHeroBanner="closeBanner"
|
|
:headerPromoBanner="headerPromoBanner"
|
|
/> -->
|
|
<v-app-bar
|
|
v-if="heroData && newUser"
|
|
flat
|
|
:class="
|
|
pageName() == 'HomePage' &&
|
|
heroBanner &&
|
|
headerPromoBanner &&
|
|
headerPromoBanner.active
|
|
? 'header-top-margin transparent-background'
|
|
: 'transparent-background'
|
|
"
|
|
absolute
|
|
:color="'rgba(0,0,0,0.0)'"
|
|
elevation="0"
|
|
fixed
|
|
>
|
|
<v-system-bar class="transparent-background mt-3" fixed>
|
|
<v-spacer></v-spacer>
|
|
<v-menu
|
|
offset-y
|
|
down
|
|
allow-overflow
|
|
v-if="userAuth"
|
|
:disabled="isScrolled"
|
|
>
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn
|
|
icon
|
|
v-on="on"
|
|
:class="textColor"
|
|
class="d-none d-md-block header-buttons"
|
|
:max-width="$vuetify.breakpoint.mdOnly ? '35px' : ''"
|
|
>
|
|
<div class="text-uppercase">Hi {{ userName }}</div>
|
|
</v-btn>
|
|
</template>
|
|
<v-card elevation="0" tile>
|
|
<v-list dense flat>
|
|
<v-list-item>
|
|
<v-list-item-title
|
|
@click="goToDashboard()"
|
|
class="cursor-pointer"
|
|
>My Account</v-list-item-title
|
|
>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-title @click="goToLogout()" class="cursor-pointer"
|
|
>Logout</v-list-item-title
|
|
>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-card>
|
|
</v-menu>
|
|
|
|
<v-hover v-slot:default="{ hover }" v-if="!userAuth">
|
|
<v-btn
|
|
icon
|
|
@click="goToLogin()"
|
|
class="d-none d-md-block header-buttons"
|
|
:max-width="$vuetify.breakpoint.mdOnly ? '35px' : ''"
|
|
>
|
|
<v-icon
|
|
v-if="pageName() == 'CategoryPage'"
|
|
:class="hover ? 'header-category-icon' : 'primary--text'"
|
|
>mdi-account-circle-outline</v-icon
|
|
>
|
|
<v-icon v-else :class="hover ? 'primary--text' : 'white--text'"
|
|
>mdi-account-circle-outline</v-icon
|
|
>
|
|
</v-btn>
|
|
</v-hover>
|
|
|
|
<v-hover v-slot:default="{ hover }">
|
|
<v-btn
|
|
icon
|
|
:class="
|
|
hover ? 'primary--text' : textColor ? textColor : 'white--text'
|
|
"
|
|
@click="showSearchInput = true"
|
|
class="d-none d-md-block header-buttons"
|
|
:max-width="$vuetify.breakpoint.mdOnly ? '35px' : ''"
|
|
>
|
|
<v-icon
|
|
v-if="pageName() == 'CategoryPage'"
|
|
:class="hover ? 'header-category-icon' : 'primary--text'"
|
|
>mdi-magnify</v-icon
|
|
>
|
|
<v-icon v-else :class="hover ? 'primary--text' : 'white--text'"
|
|
>mdi-magnify</v-icon
|
|
>
|
|
</v-btn>
|
|
</v-hover>
|
|
|
|
<v-navigation-drawer
|
|
v-model="showSearchInput"
|
|
v-if="showSearchInput"
|
|
absolute
|
|
right
|
|
color="#ffffff"
|
|
:width="searchInputWidth"
|
|
height="56"
|
|
>
|
|
<!--<v-autocomplete
|
|
v-model="search"
|
|
v-if="showSearchInput"
|
|
autofocus
|
|
class="mt-0 py-0 search-catalog header-autocomplete"
|
|
height="30"
|
|
:items="searchResultList"
|
|
:loading="searchInProgress"
|
|
:search-input.sync="lookupCatelog"
|
|
@change="GotoPage(search)"
|
|
@blur="showSearchInput=false"
|
|
hide-details
|
|
:no-filter="true"
|
|
hide-no-data
|
|
flat
|
|
solo
|
|
clearable
|
|
item-text="title"
|
|
item-value="title"
|
|
label="Search"
|
|
append-icon="mdi-magnify"
|
|
return-object
|
|
>
|
|
<template v-slot:selection="data">
|
|
<span class="ml-2" v-text="data.item.title "></span>
|
|
</template>
|
|
<template v-slot:item="data ">
|
|
<template>
|
|
<v-list-item-content>
|
|
<div class="d-flex justify-space-between">
|
|
<v-list-item-title class="d-block text-truncate">{{data.item.title}}</v-list-item-title>
|
|
|
|
</div>
|
|
</v-list-item-content>
|
|
</template>
|
|
</template>
|
|
</v-autocomplete>-->
|
|
<v-text-field
|
|
v-model="search"
|
|
autofocus
|
|
clearable
|
|
single-line
|
|
label="Search"
|
|
solo
|
|
type="text"
|
|
class="header-search-field"
|
|
@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-btn
|
|
icon
|
|
:class="textColor"
|
|
class="header-buttons"
|
|
@click="categoryProducts('10')"
|
|
:max-width="this.$vuetify.breakpoint.mdOnly? '35px':''"
|
|
>
|
|
<v-icon class="white--text">mdi-shopping-outline</v-icon>
|
|
</v-btn>-->
|
|
<v-hover v-slot:default="{ hover }">
|
|
<v-btn
|
|
icon
|
|
:class="
|
|
hover ? 'primary--text' : textColor ? textColor : 'white--text'
|
|
"
|
|
class="header-buttons"
|
|
@click.stop="showCartDrawer(true)"
|
|
:max-width="$vuetify.breakpoint.mdOnly ? '35px' : ''"
|
|
>
|
|
<v-icon
|
|
v-if="pageName() == 'CategoryPage'"
|
|
:class="hover ? 'header-category-icon' : 'primary--text'"
|
|
>mdi-cart-outline</v-icon
|
|
>
|
|
<v-icon v-else :class="hover ? 'primary--text' : 'white--text'"
|
|
>mdi-cart-outline</v-icon
|
|
>
|
|
<span v-if="cartProductsProgress || inProgress">
|
|
<v-progress-circular
|
|
:size="20"
|
|
color="primary"
|
|
: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-hover>
|
|
</v-system-bar>
|
|
<NavigationDrawerComponent
|
|
@actionShowMessage="showMessage"
|
|
@actionPageMessage="pageMessage"
|
|
></NavigationDrawerComponent>
|
|
<v-app-bar-nav-icon class="d-md-none"></v-app-bar-nav-icon>
|
|
<v-spacer></v-spacer>
|
|
<v-img
|
|
v-if="pageName() == 'CategoryPage'"
|
|
src="@/assets/Crane_Logo_blue.png"
|
|
max-height="44"
|
|
max-width="146"
|
|
contain
|
|
@click="goToHomePage()"
|
|
class="mt-md-11 cursor-pointer"
|
|
></v-img>
|
|
<v-img
|
|
v-else
|
|
src="@/assets/Crane_Logo_white.png"
|
|
max-height="44"
|
|
max-width="146"
|
|
contain
|
|
@click="goToHomePage()"
|
|
class="mt-md-11 cursor-pointer"
|
|
></v-img>
|
|
<v-spacer></v-spacer>
|
|
<!-- <template v-slot:extension>
|
|
<v-spacer></v-spacer>
|
|
<div
|
|
v-for="(categories, index) in categoryList.childrenData"
|
|
v-bind:key="index"
|
|
>
|
|
<v-toolbar-items
|
|
class="white--text d-none d-md-flex mt-11"
|
|
v-if="index === 0"
|
|
>
|
|
<v-menu
|
|
open-on-hover
|
|
down
|
|
offset-y
|
|
allow-overflow
|
|
content-class="pt-4 header-menu-content"
|
|
v-for="(category, i) in categories.childrenData"
|
|
v-bind:key="i"
|
|
>
|
|
<template v-slot:activator="{ on }">
|
|
<div
|
|
v-if="
|
|
category.name !== 'Baby' &&
|
|
category.name !== 'Gifts' &&
|
|
category.isActive
|
|
"
|
|
text
|
|
class="cursor-pointer text-uppercase body my-auto pa-0 px-sm-2 ls-n01 px-lg-4 header-category-text"
|
|
v-on="on"
|
|
:class="
|
|
category.id == activeCategoryMenu
|
|
? 'header-category-text-active'
|
|
: categoryId
|
|
? 'header-category-page-text'
|
|
: 'white--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"
|
|
@onActionScrollSub="onActionScroll"
|
|
/>
|
|
</v-col>
|
|
</v-menu>
|
|
</v-toolbar-items>
|
|
</div>
|
|
<v-spacer></v-spacer>
|
|
</template> -->
|
|
</v-app-bar>
|
|
<v-app-bar
|
|
height="56"
|
|
:absolute="!isScrolled"
|
|
:app="isScrolled"
|
|
:color="
|
|
isScrolled || hover ? 'header-background-white' : 'rgba(0,0,0,0.0)'
|
|
"
|
|
elevation="0"
|
|
v-else-if="pageName() == 'CheckoutPage'"
|
|
>
|
|
<v-spacer></v-spacer>
|
|
<v-img
|
|
v-if="!isScrolled"
|
|
src="@/assets/Crane_Logo_white.png"
|
|
max-width="100"
|
|
@click="goToHomePage()"
|
|
class="cursor-pointer"
|
|
contain
|
|
aspect-ratio="1"
|
|
></v-img>
|
|
<v-img
|
|
v-if="isScrolled"
|
|
src="@/assets/Crane_Logo_blue.png"
|
|
max-width="100"
|
|
class="cursor-pointer"
|
|
@click="goToHomePage()"
|
|
contain
|
|
aspect-ratio="1"
|
|
></v-img>
|
|
<v-spacer></v-spacer>
|
|
</v-app-bar>
|
|
<v-hover v-else v-slot:default="{ hover }">
|
|
<v-app-bar
|
|
height="56"
|
|
:class="
|
|
pageName() == 'HomePage' &&
|
|
heroBanner &&
|
|
headerPromoBanner &&
|
|
headerPromoBanner.active
|
|
? 'header-top-margin'
|
|
: ''
|
|
"
|
|
:absolute="!isScrolled"
|
|
:app="isScrolled"
|
|
:color="
|
|
isScrolled || hover ? 'header-background-white' : 'rgba(0,0,0,0.0)'
|
|
"
|
|
elevation="0"
|
|
>
|
|
<v-col class="d-flex justify-start pa-0">
|
|
<v-app-bar-nav-icon
|
|
@click.stop="menuAction()"
|
|
:class="textColor"
|
|
class="d-md-none header-menu-button ml-n3 pl-1"
|
|
:color="
|
|
hover && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
|
|
"
|
|
></v-app-bar-nav-icon>
|
|
<v-img
|
|
v-if="!isScrolled && !hover"
|
|
src="@/assets/Crane_Logo_white.png"
|
|
max-width="100"
|
|
@click="goToHomePage()"
|
|
class="cursor-pointer d-none d-md-flex"
|
|
contain
|
|
aspect-ratio="1"
|
|
></v-img>
|
|
<v-img
|
|
v-else-if="(isScrolled && !hover) || hover"
|
|
src="@/assets/Crane_Logo_blue.png"
|
|
max-width="100"
|
|
class="cursor-pointer d-none d-md-flex"
|
|
@click="goToHomePage()"
|
|
contain
|
|
aspect-ratio="1"
|
|
></v-img>
|
|
</v-col>
|
|
<v-col class="d-flex justify-center">
|
|
<v-img
|
|
v-if="!isScrolled && !hover"
|
|
src="@/assets/Crane_Logo_white.png"
|
|
max-width="100"
|
|
@click="goToHomePage()"
|
|
class="cursor-pointer d-md-none"
|
|
contain
|
|
aspect-ratio="1"
|
|
></v-img>
|
|
<v-img
|
|
v-else-if="(isScrolled && !hover) || hover"
|
|
src="@/assets/Crane_Logo_blue.png"
|
|
max-width="100"
|
|
class="cursor-pointer d-md-none"
|
|
@click="goToHomePage()"
|
|
contain
|
|
aspect-ratio="1"
|
|
></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="
|
|
isScrolled || hover
|
|
? category.id == activeCategoryMenu && categoryId
|
|
? 'header-category-text-active'
|
|
: 'header-category-text'
|
|
: category.id == activeCategoryMenu && categoryId
|
|
? 'header-category-text-active'
|
|
: textColor
|
|
"
|
|
@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"
|
|
@onActionScrollSub="onActionScroll"
|
|
/>
|
|
</v-col>
|
|
</v-menu>
|
|
</v-toolbar-items>
|
|
</div> -->
|
|
</v-col>
|
|
<v-col class="d-flex justify-end pr-0">
|
|
<v-toolbar-items>
|
|
<v-menu offset-y down allow-overflow v-if="userAuth">
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn
|
|
icon
|
|
v-on="on"
|
|
:class="textColor"
|
|
:color="
|
|
hover && !isScrolled
|
|
? 'primary'
|
|
: isScrolled
|
|
? 'primary'
|
|
: ''
|
|
"
|
|
class="d-none d-md-block header-buttons mr-6"
|
|
:max-width="$vuetify.breakpoint.mdOnly ? '35px' : ''"
|
|
>
|
|
<div class="text-uppercase">Hi {{ userName }}</div>
|
|
</v-btn>
|
|
</template>
|
|
<v-card elevation="0" tile flat>
|
|
<v-list dense flat>
|
|
<v-list-item>
|
|
<v-list-item-title
|
|
@click="goToDashboard()"
|
|
class="cursor-pointer"
|
|
>My Account</v-list-item-title
|
|
>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-title
|
|
@click="goToLogout()"
|
|
class="cursor-pointer"
|
|
>Logout</v-list-item-title
|
|
>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-card>
|
|
</v-menu>
|
|
<v-btn
|
|
v-if="!userAuth"
|
|
icon
|
|
:color="
|
|
hover && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
|
|
"
|
|
@click="goToLogin()"
|
|
:class="textColor"
|
|
class="d-none d-md-block header-buttons"
|
|
:max-width="$vuetify.breakpoint.mdOnly ? '35px' : ''"
|
|
>
|
|
<v-icon class="header-action-icons"
|
|
>mdi-account-circle-outline</v-icon
|
|
>
|
|
</v-btn>
|
|
|
|
<v-btn
|
|
icon
|
|
:color="
|
|
hover && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
|
|
"
|
|
@click="showSearchInput = true"
|
|
:class="textColor"
|
|
class="d-none d-md-block header-buttons"
|
|
:max-width="$vuetify.breakpoint.mdOnly ? '35px' : ''"
|
|
>
|
|
<v-icon class="header-action-icons">mdi-magnify</v-icon>
|
|
</v-btn>
|
|
|
|
<!--<v-btn
|
|
v-show="pageName() !== 'CartProducts'"
|
|
icon
|
|
:class="textColor"
|
|
class="header-buttons"
|
|
@click="categoryProducts('10')"
|
|
:max-width="this.$vuetify.breakpoint.mdOnly? '35px':''"
|
|
>
|
|
<v-icon>mdi-shopping-outline</v-icon>
|
|
</v-btn>-->
|
|
<div class="test">
|
|
<v-btn
|
|
v-show="pageName() !== 'CartProducts'"
|
|
icon
|
|
:class="textColor"
|
|
:color="
|
|
hover && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
|
|
"
|
|
class="header-buttons mr-n2"
|
|
@click.stop="showCartDrawer(true)"
|
|
:max-width="$vuetify.breakpoint.mdOnly ? '35px' : ''"
|
|
>
|
|
<v-icon class="header-action-icons">mdi-cart-outline</v-icon>
|
|
|
|
<span v-if="cartProductsProgress || inProgress">
|
|
<v-progress-circular
|
|
:size="20"
|
|
color="primary"
|
|
: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>
|
|
<NavigationDrawerComponent
|
|
@actionShowMessage="showMessage"
|
|
@actionPageMessage="pageMessage"
|
|
></NavigationDrawerComponent>
|
|
</div>
|
|
<v-navigation-drawer
|
|
v-model="showSearchInput"
|
|
v-if="showSearchInput"
|
|
absolute
|
|
right
|
|
color="#ffffff"
|
|
:width="searchInputWidth"
|
|
height="56"
|
|
>
|
|
<!--<v-autocomplete
|
|
v-model="search"
|
|
v-if="showSearchInput"
|
|
autofocus
|
|
class="mt-0 py-0 search-catalog header-autocomplete"
|
|
height="30"
|
|
:items="searchResultList"
|
|
:loading="searchInProgress"
|
|
:search-input.sync="lookupCatelog"
|
|
@change="GotoPage(search)"
|
|
@blur="showSearchInput=false"
|
|
hide-details
|
|
:no-filter="true"
|
|
hide-no-data
|
|
flat
|
|
solo
|
|
clearable
|
|
item-text="name"
|
|
item-value="sku"
|
|
label="Search"
|
|
append-icon="mdi-magnify"
|
|
return-object
|
|
>
|
|
<template v-slot:selection="data">
|
|
<span class="ml-2" v-text="data.item.title "></span>
|
|
</template>
|
|
<template v-slot:item="data ">
|
|
<template>
|
|
<v-list-item-content>
|
|
<div class="d-flex justify-space-between">
|
|
<v-list-item-title class="d-block text-truncate">{{data.item.title}}</v-list-item-title>
|
|
|
|
</div>
|
|
</v-list-item-content>
|
|
</template>
|
|
</template>
|
|
</v-autocomplete>-->
|
|
<v-text-field
|
|
v-model="search"
|
|
autofocus
|
|
clearable
|
|
single-line
|
|
label="Search"
|
|
solo
|
|
type="text"
|
|
class="header-search-field"
|
|
@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-toolbar-items>
|
|
</v-col>
|
|
</v-app-bar>
|
|
</v-hover>
|
|
{{ snackbarFlag }}
|
|
<SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
/* eslint-disable */
|
|
|
|
import SubMenu from "@/components/layout/sub-menu/SubMenu";
|
|
import NavigationDrawerComponent from "@/components/layout/header/NavigationDrawerComponent";
|
|
import SnackbarComponent from "@/components/common/SnackbarComponent";
|
|
import { doFetchCatelogProducts } from "@/services/product.service";
|
|
import HeaderPromoBanner from "@/components/layout/header/HeaderPromoBanner";
|
|
import {
|
|
customAttributeValueNew,
|
|
// googleAanalyticsEventCategory,
|
|
getCategoryOne,
|
|
goToCategoryPageRouting,
|
|
} from "@/services/util.service";
|
|
import humps from "lodash-humps";
|
|
export default {
|
|
name: "Header",
|
|
components: {
|
|
SubMenu,
|
|
NavigationDrawerComponent,
|
|
SnackbarComponent,
|
|
HeaderPromoBanner,
|
|
},
|
|
props: ["offsetTop", "heroData"],
|
|
data: () => ({
|
|
blockId: "30",
|
|
heroBanner: true,
|
|
//subMenu: "",
|
|
activeCategoryMenu: "",
|
|
showMenu: false,
|
|
pageNo: 1,
|
|
defaultWidth: 400,
|
|
pageSize: 9,
|
|
sortSelect: { label: "Position", value: "position" },
|
|
snackbar: {
|
|
show: false,
|
|
message: null,
|
|
color: null,
|
|
timeout: 0,
|
|
},
|
|
search: null,
|
|
number: "",
|
|
searchResultList: [],
|
|
searchInProgress: false,
|
|
lookupCatelog: null,
|
|
showSearchInput: false,
|
|
}),
|
|
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);
|
|
},
|
|
},
|
|
categoryId() {
|
|
if (!this.categoryId) {
|
|
localStorage.removeItem("cr_subCategoryItemId");
|
|
localStorage.removeItem("cr_subCategoryId");
|
|
localStorage.removeItem("cr_mainCategoryId");
|
|
}
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
/* checkLogedIn() {
|
|
return true;
|
|
},*/
|
|
snackbarFlag() {
|
|
if (this.$store.state.userCartProduct.autoLogoutFlag) {
|
|
this.showMessage({
|
|
message: "Your session has expired please login again.",
|
|
color: "error",
|
|
show: true,
|
|
timeout: 5000,
|
|
});
|
|
}
|
|
return "";
|
|
},
|
|
cartProductsProgress: function () {
|
|
if (this.userAuth) {
|
|
return this.$store.state.userCartProduct.cartProductsProgress;
|
|
} else {
|
|
return '';
|
|
}
|
|
},
|
|
inProgress: function () {
|
|
if (this.userAuth) {
|
|
return this.$store.state.userCartProduct.inProgress;
|
|
} else {
|
|
return '';
|
|
}
|
|
},
|
|
isDesktop: function () {
|
|
return this.$vuetify.breakpoint.xsOnly ? true : false;
|
|
},
|
|
|
|
newUser() {
|
|
if (this.$vuetify.breakpoint.smAndDown) return false;
|
|
let userVisits = this.$store.state.layout.user.userVisits;
|
|
if (userVisits && Number(userVisits) > 1) return false;
|
|
else return true;
|
|
},
|
|
|
|
searchInputWidth() {
|
|
return this.$vuetify.breakpoint.xsOnly ? "100%" : "256";
|
|
},
|
|
isScrolled: function () {
|
|
let pagePath = this.$route.path;
|
|
let isGateModulePage = pagePath.includes("/gate/");
|
|
if (isGateModulePage) {
|
|
return this.offsetTop > 30 ? true : false;
|
|
}
|
|
if (!this.heroData || this.pageName() === "CategoryPage") return true;
|
|
|
|
return this.offsetTop > 30 ? true : false;
|
|
},
|
|
textColor: function () {
|
|
let pagePath = this.$route.path;
|
|
let isGateModulePage = pagePath.includes("/gate/");
|
|
if (isGateModulePage) {
|
|
return "white--text";
|
|
}
|
|
if (!this.heroData) return "content-color";
|
|
|
|
if (this.offsetTop > 30) return "content-color";
|
|
else return "white--text";
|
|
},
|
|
userAuth: function () {
|
|
return this.$store.state.auth.userAuth;
|
|
},
|
|
|
|
cartProductsItem() {
|
|
if (this.userAuth) {
|
|
return this.$store.state.userCartProduct.cartProductList;
|
|
} else {
|
|
return ''
|
|
}
|
|
},
|
|
|
|
/*sku: function() {
|
|
return this.cartProductsItem.items.map(obj => obj.sku).find(obj => obj);
|
|
},*/
|
|
userName: function () {
|
|
return this.$store.state.accountOne.one.firstname;
|
|
},
|
|
categoryList: function () {
|
|
return this.$store.state.headerCategoryList.categoryList;
|
|
},
|
|
headerPromoBanner: function () {
|
|
let cmsBlockContent = this.$store.state.layout.cmsBlockContent;
|
|
|
|
if (cmsBlockContent.length) {
|
|
let data = cmsBlockContent.filter((element) => {
|
|
return element.identifier === "header-promo-banner";
|
|
})[0];
|
|
|
|
if (data) return data;
|
|
else return null;
|
|
}
|
|
return null;
|
|
},
|
|
subMenuItem: {
|
|
get: function () {
|
|
return this.$store.state.headerCategoryList.categoryId;
|
|
},
|
|
set: function () {},
|
|
},
|
|
categoryId() {
|
|
return this.$route.meta.id;
|
|
},
|
|
categoryDetailsList: function () {
|
|
return this.$store.state.headerCategoryList.categoryDetails;
|
|
},
|
|
},
|
|
methods: {
|
|
pageMessage() {
|
|
this.snackbar = {
|
|
message: "Updated Product View",
|
|
color: "success",
|
|
show: true,
|
|
timeout: 3000,
|
|
};
|
|
},
|
|
/* eslint-disable no-alert, no-console , no-debugger */
|
|
|
|
inside: function (e) {
|
|
console.log("clicked inside!", e);
|
|
},
|
|
onActionScroll() {
|
|
this.$emit("actionScroll");
|
|
},
|
|
pageName() {
|
|
return this.$route.name;
|
|
},
|
|
menuAction: function () {
|
|
this.$emit("action", {
|
|
showMenu: !this.showMenu,
|
|
categoryList: this.categoryList,
|
|
activeCategoryMenu: this.activeCategoryMenu,
|
|
subMenuItem: this.subMenuItem,
|
|
});
|
|
},
|
|
showCartDrawer(flag) {
|
|
if (this.userAuth) {
|
|
this.$store.dispatch("userCartProduct/cartDrawer", flag);
|
|
}
|
|
},
|
|
|
|
showMessage(obj) {
|
|
this.snackbar = {
|
|
show: obj.show,
|
|
message: obj.message,
|
|
color: obj.color,
|
|
timeout: obj.timeout,
|
|
};
|
|
},
|
|
goToDashboard() {
|
|
window.open("/b2b", "_self");
|
|
},
|
|
goToLogin() {
|
|
localStorage.removeItem("cr_mainCategoryId");
|
|
localStorage.removeItem("cr_subCategoryItemId");
|
|
window.open("/gate/sign-in", "_self");
|
|
},
|
|
goToLogout() {
|
|
localStorage.removeItem("cr_checkOutTab");
|
|
let pagePath = this.$route.path;
|
|
let isGateModulePage = pagePath.includes("/gate/");
|
|
if (isGateModulePage) {
|
|
window.open("/logout-success", "_self");
|
|
} else {
|
|
this.$router.push({
|
|
name: "LogOutSuccess",
|
|
});
|
|
}
|
|
},
|
|
goToHomePage() {
|
|
window.open("/", "_self");
|
|
},
|
|
async inactiveCategoryMenu(data) {
|
|
this.activeCategoryMenu = data.mainMenu;
|
|
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);
|
|
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);
|
|
let pagePath = this.$route.path;
|
|
let isGateModulePage = pagePath.includes("/gate/");
|
|
if (isGateModulePage) {
|
|
window.open(`/${path}`, "_self");
|
|
} else {
|
|
let vm = this;
|
|
goToCategoryPageRouting(vm, categoryOne);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
activeCategories() {
|
|
if (this.categoryId) {
|
|
let Category = localStorage.getItem("cr_mainCategoryId");
|
|
let subCategory = localStorage.getItem("cr_subCategoryItemId");
|
|
if (Category && subCategory) {
|
|
this.activeCategoryMenu = Category;
|
|
this.$store.dispatch("headerCategoryList/setCategoryId", subCategory);
|
|
} else if (Category) {
|
|
this.activeCategoryMenu = Category;
|
|
} else {
|
|
let subMenuItem = "";
|
|
this.activeCategoryMenu = localStorage.getItem("cr_mainCategoryId");
|
|
this.$store.dispatch("headerCategoryList/setCategoryId", subMenuItem);
|
|
}
|
|
} else {
|
|
localStorage.removeItem("cr_mainCategoryId");
|
|
localStorage.removeItem("cr_subCategoryItemId");
|
|
localStorage.removeItem("cr_subCategoryId");
|
|
}
|
|
},
|
|
checkActiveCategory() {
|
|
let Category = localStorage.getItem("cr_mainCategoryId");
|
|
let subCategory = localStorage.getItem("cr_subCategoryItemId");
|
|
if (Category && subCategory) {
|
|
this.activeCategoryMenu = Category;
|
|
this.$store.dispatch("headerCategoryList/setCategoryId", subCategory);
|
|
} else {
|
|
let subMenuItem = "";
|
|
this.activeCategoryMenu = localStorage.getItem("cr_mainCategoryId");
|
|
this.$store.dispatch("headerCategoryList/setCategoryId", subMenuItem);
|
|
}
|
|
},
|
|
getCustomAttributeValue(customAttributes, attributeCode) {
|
|
return customAttributeValueNew(customAttributes, attributeCode);
|
|
},
|
|
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");
|
|
this.activeCategoryMenu = categoryId;
|
|
console.log(categoryOne.n, categoryOne);
|
|
/* 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 isGateModulePage = pagePath.includes("/gate/");
|
|
if (isGateModulePage) {
|
|
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;
|
|
});
|
|
}
|
|
}
|
|
},
|
|
GotoPage() {
|
|
if (this.search) {
|
|
// this.search = null;
|
|
this.showSearchInput = false;
|
|
this.searchResultList = [];
|
|
let searchKeywords = this.search;
|
|
let pagePath = this.$route.path;
|
|
let isGateModulePage = pagePath.includes("/gate/");
|
|
if (isGateModulePage) {
|
|
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;
|
|
}
|
|
},
|
|
closeBanner() {
|
|
setTimeout(() => {
|
|
this.heroBanner = true;
|
|
}, 10000);
|
|
},
|
|
},
|
|
created() {
|
|
if (
|
|
localStorage.getItem("cr_mainCategoryId") ||
|
|
localStorage.getItem("cr_subCategoryItemId")
|
|
) {
|
|
this.activeCategories();
|
|
} else {
|
|
localStorage.setItem("cr_mainCategoryId", this.categoryId);
|
|
this.activeCategories();
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style src="./Header.scss" lang="scss" scopped/> |