"Navbar: cart, search and account"

A store’s navbar usually holds the cart, the search, the login and the country switcher, on every page. This page says where each part goes and what it must be inside. Each part has its own guide for the details.

How it fits together

What Smootify needs:

• the cart count and the button that opens the cart inside the same smootify-cart as the mini cart;
• each other part as its own element: smootify-search, passwordless-login, country-switcher. None of them needs to be inside another.

What is up to you:

• which parts the navbar has, their order and their design;
• the layout of the navbar. Put it in a component, so it is the same on every page.

Each part, and what it holds:

A full example, with the search, the account and the cart:

<header>
  <a href="/">Brand</a>
  <nav>
    <a href="/shop/">Shop</a>
    <a href="/about/">About</a>
    <a href="/contact/">Contact</a>
  </nav>
  <smootify-search>
    <form><input type="search" name="query"></form>
    <div popover="auto">
      <search-with-query>
        <search-result>
          <a search="url" href="#"><div search="title">Product name</div><div search="price">$0.00</div></a>
        </search-result>
        <search-empty><div>No products found</div></search-empty>
      </search-with-query>
    </div>
  </smootify-search>
  <div customer-condition="not-logged-in">
    <passwordless-login>
      <form><button type="submit">Log in</button></form>
      <div form-done hidden>Redirecting…</div>
      <div form-fail hidden>Something went wrong</div>
    </passwordless-login>
  </div>
  <a href="/account/" customer-condition="logged-in">Hi, <span customer="first-name">there</span></a>
  <smootify-cart data-open="on-add">
    <button type="button" data-action="open-cart"><span>Cart</span><span cart="count">0</span></button>
    <div popover="auto" id="cart-drawer">
      <form>
        <cart-item><div cart-item="title">Product</div></cart-item>
        <button type="submit">Check out</button>
      </form>
      <div form-done hidden>Your cart is empty</div>
      <div form-fail hidden>Something went wrong</div>
    </div>
  </smootify-cart>
</header>

The cart sits outside the menu panel that opens on small screens (a [popover] or a <dialog> with data-overflow-body), next to its button, so it stays visible on phones.

1. The cart and its count

Build the mini cart as in Build the cart, and put its smootify-cart in the navbar.

• One cart holds everything. cart="count" works only inside smootify-cart, and an open button opens only the cart it is inside. Put the cart icon, the count, the open button and the panel in the same smootify-cart.
• Don’t add a second cart for the count. A smootify-cart with no popover inside it counts as a cart page, and turns off data-open on the mini cart.
• Which way to open it. Any of the ways in Build the cart works in a navbar. A [popover] and a <dialog> open above the whole page.
• On small screens. What sits inside the panel that holds the links on small screens collapses with them. To keep the cart visible on every screen size, put it outside that panel, as above.
• On the cart page. The page’s own cart turns off data-open, so the mini cart stays closed when a product is added there.

A link to your cart page is a normal link.

2. Search

Add a smootify-search to the navbar for results that show as the visitor types. It holds a text input named query and the results, which open in a popover or show in place. It needs the Lite or Server plan, or the Predictive Search add-on turned on in the Smootify dashboard.

See Predictive search for the parts and smootify-search for every attribute.

3. Login and account

Login works with Shopify’s Customer Accounts, set up as in Customer accounts. Without that set-up, the login does nothing.

• Log in. Add a passwordless-login element, with a <form> inside it. The form needs only a submit button, such as “Log in”. A click takes the visitor to Shopify’s login page, then back to the site, logged in.
• Account link. A link to your account page with customer-condition="logged-in" shows only to logged-in visitors. customer="first-name" inside it shows their first name.
• Log out. Add a logout-form element, with a <form> and a submit button inside it.
• Show one or the other. Wrap the login in an element with customer-condition="not-logged-in".

<div>
  <div customer-condition="not-logged-in">
    <passwordless-login>
      <form><button type="submit">Log in</button></form>
      <div form-done hidden>Redirecting…</div>
      <div form-fail hidden>Something went wrong</div>
    </passwordless-login>
  </div>
  <a href="/account/" customer-condition="logged-in">Hi, <span customer="first-name">there</span></a>
</div>

What the visitor sees, from the page load to the login:

Every value is in customer conditions.

4. Country and currency

Add a country-switcher to the navbar. It is built on a popover: the first button or link inside it is the template of each country. In the trigger, data-prop="flag", data-prop="name" and data-prop="currency-iso-code" show the current country and currency. A pick changes the country, and prices follow.

Languages. On a site with locales, the language switcher is a [locales] element of real links, one for each page in the other language or market, built with localeSwitcherLinks. Each option goes to the same page in the other language, and the address changes too. Do not use country-switcher there: it changes the country without changing the page, so the page and the visitor’s choice would disagree.

See Markets, currencies and languages. To suggest the right country to a new visitor, see Market suggestion.

Before you publish