Header

Deprecation Notice

Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.

Overview

Usually a big strip across the top with a big heading, logo, and perhaps a search bar. This usually stays the same from one web page to another. A typical header presents information such as a company logo or its name, other heading elements. Also, in the header is a menu of options for the application along with links to profile, cart, wishlist and account settings page.

A default header looks like this: QG2

Context

Context is a object which includes various other key value pairs, object, and list of various variables, which we can use in creating header, it includes:

Key	Type	Description
is_logged_in	Boolean	whether user logged in or not
logo	URL	URL of the logo used in header (in desktop)
mobile_logo	URL	URL of the logo used in mobile view header for smaller screens
favourite_ids	Array	list of id of products that are added in the wishlist
cart_item_count	Number	count of how much items have been added into the cart
compare_slugs	Array	list of unique slugs of items added to compare page of application
offers	String	information of any available offer to be displayed in header
navigation	Array	list of multiple objects of different navigation to be displayed in menu bar of header
name	String	name of the application
all_navigation_details	Array	list of all orientations in the navigation of the application

Apart from these attributes, there are few more attributes that exists in header’s context, which can also be used:

Key	Type	Description
user_pincode	Number	user's selected pincode
colors	Object	object of colors used in various attributes of application e.g. button, links and other attributes
app_info	Object	various information about application
theme_colors	Object	object of colors used in various attributes of application e.g. button, links and other attributes

global_config

This is a object which contains the information regarding the global level settings of our application, for header this includes following attributes:

Attribute	Type	Description
search_placeholder	String	Text to show as placeholder in the auto-complete search box in header
disable_cart	Boolean	To show or hide the cart page link icon in header.

To use global_config object’s attributes we need to write it as e.g. global_config.props.disable_cart.

Config & Schema

Header consists of four basic parts including Logo, Autocomplete Search Bar, Basic links for necessary pages including Cart, Profile and Settings Page, and a menu bar which consists of links to different pages of application. Each application can have a full width desktop header along with a mobile view header for smaller screens

LOGO: Header requires two logo icon for both desktop and mobile view,.

for using logo in application’s header the code can be as follows:

            <fdk-link :link="'/'">
              <img className="fynd-logo" :src="logoUrl" />
            </fdk-link>

here logoUrl can be context.logo or context.mobile_logo both.

Auto-complete Search box: We can add search box with autocomplete functionality in our application’s header. This can be added using the fdk-search action component.

A typical example of adding search box is:

theme/templates/components/header.vue

<fdk-search>
       <template slot-scope="searchData">
           <span>
                <input
                    :placeholder="search_placeholder"
                    autocomplete="off"
                    v-model="searchtext"
                    type="text"
                    id="search"
                    @keyup.enter="selectedIndex === null
                    ? getEnterSearchData(searchData)
                    : getSearchData()"
                    @keydown="onArrowKey"
                    @input="inputSearchResults(searchData)"
                    v-on:click="showlist = true"/>
                <div>
                    <div v-if="searchData.suggestions.length > 0 && showlist">
                        <ul>
                            <li
                            v-for="(value, name, index) in getGroupedResults(
                              searchData.suggestions.slice(0, 8)
                            )"
                            :key="name + index"
                            v-on:click="showlist = false"
                            >
                            //Code for displaying the logo and search item text inside the anchor
                            </li>
                        </ul>
                    </div>
                </div>
           </span>
       </template
    </fdk-search>

Here search_placeholder variable will contain the value of the placeholder.

For fetching the search items getGroupedResults() method is used, and searchData.suggestion is passed as arguments inside this function, which is a list of items we get through autocomplete search API after entering the text. We can use getGroupedResults() method as follows:

    getGroupedResults: function getGroupedMobileResults(item) {
      let grouped = groupBy(item, (data) => data.type);
      return grouped;
    },

if the searchData.suggestions key got no results from api them the searchData.noResults key have true value and then we can handle the header using:

<div v-if="searchData.noResults && showlist">
    <ul>
        <li @click.stop="showlist = false">
            <fdk-link :link="'/products/?q=' + searchtext"
            >Search for {{ searchtext }}</fdk-link>
        </li>
     </ul>
</div>

QG11

Header Icons :- This includes multiple icons which on clicked redirect to various other pages of our application, by default we get icons to Cart, Wishlist, Profile and Settings page of our application.

We can add other icons also to create links for other pages using fdk-link action component (see the below example)

<fdk-link :link="'/cart/bag'">
    <div className="profile-icons">
        <img title="Cart" src="../../assets/images/shopping-bag1.svg" />
    </div>
</fdk-link>

Navigation: It includes basic settings about positioning of menu bar in header, in themes we need the list of menu (Navigation) to redirect to various other pages of our application, we have the support of three level navigation in our header, it can be managed from here.

QG21

We can use navigation inside our header using context.navigation key, a typical navigation object will by default contain below listed array of links, e.g.

[
    {
        "display": "Home",
        "link": "/",
        "image": "https://res.cloudinary.com/dwzm9bysq/image/upload/v1567148153/production/system/icons/mystore-tab_y0dqzt.png",
        "tags": [],
        "sub_navigation": []
    },
    {
        "display": "Brands",
        "link": "/brands",
        "image": "https://res.cloudinary.com/dwzm9bysq/image/upload/v1567148153/production/system/icons/brands-tab_sfinpk.png",
        "tags": [],
        "sub_navigation": []
    },
    {
        "display": "Collections",
        "link": "/collections",
        "image": "https://res.cloudinary.com/dwzm9bysq/image/upload/v1567148153/production/system/icons/collections-tab_a0tg9c.png",
        "tags": [],
        "sub_navigation": []
    },
    {
        "display": "Categories",
        "link": "/categories",
        "image": "https://res.cloudinary.com/dwzm9bysq/image/upload/v1567148154/production/system/icons/categories-tab_ss8e0q.png",
        "tags": [],
        "sub_navigation": []
    }
]

We can use this as below:

<div
    v-for="(menu, index) in context.navigation"
    :key="index">
     <fdk-link className="header-nav-menu" :link="menu.link">{{menu.display
     }}</fdk-link>
     //more code to handle sub-navigation like the same we did for navigation array
</div>

Overview​

Context​

global_config​

Config & Schema​

Overview

Context

global_config

Config & Schema