Header with cart

Need check

HTML
View
Context
SCSS
Other Assets
Info
Notes


        
        <header class="main-header">
    <div class="container">
        <div class="header__brand">
            <a href="/">
            <img src="../../images/brand/brand-white.svg" alt="" class="XXL Organisation brand" />
         </a>
        </div>

        <div class="header__nav js-nav-inside">
            <!--
          * The primary subnav can have two different states:
          *
          * 1) By default, the subnav appear on hover from the trigger link.
          *
          * 2) With the 'js-dropdown--onclick' on the ul.primary-nav,
          *		the subnav appear on click from the trigger link.
          *
         -->

            <nav class="main-nav">
                <ul class="nav-primary" data-ui-component="primary-main">
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="https://google.com" class="js-dropdown-link">About</a>

                        <ul class="nav-primary__sub-nav js-dropdown-menu">
                            <li><a href="#">Products</a></li>
                            <li><a href="#">Company</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                    <li>
                        <a href="#" class="js-dropdown-link">Services</a>

                        <ul class="nav-primary__sub-nav js-dropdown-menu">
                            <li><a href="#">Web</a></li>
                            <li><a href="#">Data</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>

        <div class="header__search header__tools">
            <button class="button button--search js-open-search">
            <i class="icon icon--search"></i>
            <span>Rechercher</span>
         </button>
        </div>

        <div class="header__devis header__tools">
            <a href="#" class="button button--devis">
            <i class="icon icon--devis"></i>
            <span>Finaliser mon devis</span>
         </a>

            <div class="block-cart" id="cartSummary">
                <ul class="lst__unstyled">
                    <li>Modeld Barre Led RVB Ayrton 150</li>
                    <li>Modeld Barre Led RVB Ayrton 150</li>
                    <li>Modeld Barre Led RVB Ayrton 150</li>

                    <span>et 7 autres produits...</span>
                </ul>

                <a href="#" class="button  button--rounded button--black button--full-width">Finaliser mon devis</a>

            </div>
        </div>

        <div class="header__button">
            <button class="button button--menu js-toggle-menu">
            <svg width="15" height="12" xmlns="http://www.w3.org/2000/svg" id="menu-icon">
               <defs>
                  <linearGradient x1=".615%" y1="50%" y2="50%" id="a">
                     <stop stop-color="#E3CB78" offset="0%"/>
                     <stop stop-color="#BDA450" offset="49.584%"/>
                     <stop stop-color="#A07C2A" offset="100%"/>
                  </linearGradient>
               </defs>
               
               <g fill="url(#a)" fill-rule="evenodd">
                  <rect id="bars-1" width="15" height="2" rx="1"/>
                  <rect id="bars-2" y="5" width="15" height="2" rx="1"/>
                  <rect id="bars-3" y="10" width="15" height="2" rx="1"/>
               </g>
            </svg>
            <span>Menu</span>
         </button>
        </div>
    </div>
</header>


        <header class="main-header{{#if header_white}} header--white{{/if}}{{#if header_transparent}} header--transparent{{/if}}">
   <div class="container">
      <div class="header__brand">
         <a href="/">
         {{#if header_white}}
            <img src="{{path '/images/brand/brand-black.svg'}}" alt="{{brand.alt}}" class="XXL Organisation brand" />
         {{else}}
            <img src="{{path '/images/brand/brand-white.svg'}}" alt="{{brand.alt}}" class="XXL Organisation brand" />
         {{/if}}
         </a>
      </div>

      <div class="header__nav js-nav-inside">
         {{> @nav }}
      </div>

      <div class="header__search header__tools">
         <button class="button button--search js-open-search">
            <i class="icon icon--search"></i>
            <span>Rechercher</span>
         </button>
      </div>

      <div class="header__devis header__tools">
         <a href="#" class="button button--devis">
            <i class="icon icon--devis"></i>
            <span>Finaliser mon devis</span>
         </a>

         {{> @block-cart }}
         
      </div>

      <div class="header__button">
         <button class="button button--menu js-toggle-menu">
            <svg width="15" height="12" xmlns="http://www.w3.org/2000/svg" id="menu-icon">
               <defs>
                  <linearGradient x1=".615%" y1="50%" y2="50%" id="a">
                     <stop stop-color="#E3CB78" offset="0%"/>
                     <stop stop-color="#BDA450" offset="49.584%"/>
                     <stop stop-color="#A07C2A" offset="100%"/>
                  </linearGradient>
               </defs>
               
               <g fill="url(#a)" fill-rule="evenodd">
                  <rect id="bars-1" width="15" height="2" rx="1"/>
                  <rect id="bars-2" y="5" width="15" height="2" rx="1"/>
                  <rect id="bars-3" y="10" width="15" height="2" rx="1"/>
               </g>
            </svg>
            <span>Menu</span>
         </button>
      </div>
   </div>
</header>


        
            
            {
  "block_cart": {
    "total_product": 7,
    "articles": [
      {
        "title": "Modeld Barre Led RVB Ayrton 150"
      },
      {
        "title": "Modeld Barre Led RVB Ayrton 150"
      },
      {
        "title": "Modeld Barre Led RVB Ayrton 150"
      },
      {
        "title": "Modeld Barre Led RVB Ayrton 150"
      },
      {
        "title": "Modeld Barre Led RVB Ayrton 150"
      },
      {
        "title": "Modeld Barre Led RVB Ayrton 150"
      },
      {
        "title": "Modeld Barre Led RVB Ayrton 150"
      }
    ]
  }
}

File:

Content:


                                header {
   position: relative;
   background: $c-background-dark;
   padding-bottom: $margin-s;
   padding-top: $margin-s;
   z-index: 40;
   
   @include mediaWQuery($media-query-l) {
      background: $c-background-gradient-dark;
   }

   // Fallback for unsupported grid browser
   & > .container > *[class^="header__"] {
      display: inline-block;
      vertical-align: middle;
   }

   // Grid layout
   .container {
      @supports (display: grid) {
         display: grid;

         align-items: center;

         grid-template-columns: auto 1fr auto;
         grid-template-rows: repeat(3, auto);
         grid-template-areas: 'brand search button'
                              'nav nav nav'
                              'devis devis devis';

         @include mediaWQuery($media-query-s) {

            grid-template-columns: 1fr auto auto auto;
            grid-template-rows: auto auto;
            grid-template-areas:  'brand search devis button'
                                  'nav nav nav nav';
         }

         @include mediaWQuery($media-query-m) {
            align-items: initial;

            grid-template-columns: auto 1fr auto;
            grid-template-rows: auto auto auto;
            grid-template-areas:  'brand search devis'
                                  'brand button button'
                                  'nav nav nav';
         }

         @include mediaWQuery($media-query-l) {
            grid-template-columns: auto 1fr auto auto;
            grid-template-rows: 1fr 2fr;
            grid-template-areas:  'brand . search devis'
                                  'brand nav nav nav';

            .header__button { display: none }
         }

         .header__brand { grid-area: brand }
         .header__nav { grid-area: nav }
         .header__search { grid-area: search }
         .header__devis { grid-area: devis }
         .header__button { grid-area: button }
      }
   }

   // Brand modifier
   .header__brand {
      font-size: 0;

      img {
         width: 100%;
         max-width: 110px;
         height: auto;

         @include mediaWQuery($media-query-m) { max-width: 150px }
         @include mediaWQuery($media-query-xl) { max-width: 180px }
      }
   }

   // Nav modifier
   .header__nav {
      nav {
         display: none;
         li a { color: $c-white; }

         @include mediaWQuery($media-query-l) {
            display: block;
            .nav-primary__sub-nav a { color: $c-black }
         }
      }

      @include mediaWQuery($media-query-l) {
         justify-self: flex-end;
         align-self: center;
      }
   }

   .header__tools {
      span {
         text-transform: uppercase;
         font-size: rem(18);
      }

      i { margin: -3px 5px 0 0; }
   }

   // Search modifier
   .header__search {
      justify-self: flex-end;
      @include mediaWQuery($media-query-m) {
         .button {
            padding-bottom: 0;
            padding-top: 0;
         }
      }

      @include mediaWQuery($media-query-l) {
         justify-self: center;
      }
   }

   // Devis modifier
   .header__devis {
      position: relative;
      .button--devis, .button--search {
         display: none;
         margin-top: $margin-m;

         @include mediaWQuery($media-query-m) {
            padding-bottom: 0;
            padding-top: 0;
         }
      }

      @include mediaWQuery($media-query-s) {
         padding-top: 0;

         .button {
            margin-top: 0;
            display: inline-block!important;
         }
      }

      @include mediaWQuery($media-query-m) {
         padding-bottom: 0;
         justify-self: center;
         padding: 0 0 0 $margin-l;
      }

      padding: 0;

      .block-cart {
         display: none;

         @include mediaWQuery($media-query-s) {
            position: absolute;
            min-width: 270px;
            right: 0;
            top: 80%;

            &::after {
               left: initial;
               right: 15px;
            }
         }

         @include mediaWQuery($media-query-m) {
            &::after {
               right: initial;
               left: 50%;
            }
         }
         
         @include mediaWQuery($media-query-xl) {
            right: initial;
            left: 50%;
            transform: translateX(-50%);
         }
      }
   }

   .header__button {
      justify-self: flex-end;
   }
   

   // Button modifier
   .button {
      font-family: $font-primary;
      font-size: 16px;
      padding: $margin-m $margin-s;

      &--search, &--devis {
         color: $c-button-header-black;
      }

      &--search {
         span { display: none }


         @include mediaWQuery($media-query-m) {
            span {
               display: inline-block;
            }
         }
      }

      &--menu {
         color: $c-white;
         font-size: 20px;
         text-transform: uppercase;
         line-height: 1;

         #menu-icon {

            #bars-1, #bars-3 {
               transform-origin: top left;
               -moz-transform-origin: top left;
               transition: .3s ease;
            }

            #bars-2 {
               transition: .3s ease;
            }

         }

         &.active {
            #bars-1 { transform: rotate(45deg) translate(2px, -2px) }
            #bars-2 { opacity: 0; transition: .3s ease; }
            #bars-3 { transform: rotate(-45deg) translate(-7px, -2px) }
         }

         i { margin-top: -4px }
      }

      &--devis {
         display: block;
         background: $c-button-gradient;
         color: $c-black;
         border-radius: $border-radius-s;
         background-size: auto 200%;

         @include mediaWQuery($media-query-s) {
            background: transparent;
            color: $c-button-header-black;
            span { display: none;}
         }

         @include mediaWQuery($media-query-m) {
            span { display: inline-block }
         }
      }
   }

   &.header--transparent {
      background: transparent;
      nav ul li a,
      .button--menu { color: $c-white }
   }

   &.header--white {
      background: transparent;

      .button--search { color: $c-button-header-white }
      nav ul li a,
      .button--menu { color: $c-black }
      @include mediaWQuery($media-query-s) {
         .button--devis { color: $c-button-header-white }
      }

      .icon--search {
         background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='far' data-icon='search' class='svg-inline--fa fa-search fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23A07C2A' d='M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z'/%3E%3C/svg%3E");
      }
   
      .icon--devis {
         background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fal' data-icon='question-circle' class='svg-inline--fa fa-question-circle fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23A07C2A' d='M256 340a28 28 0 100 56 28 28 0 000-56zm7.7-24h-16a12 12 0 01-12-12v-.4c0-70.3 77.4-63.6 77.4-107.4 0-20-17.8-40.2-57.4-40.2-29.2 0-44.3 9.6-59.2 28.7-4 5-11 6-16.3 2.4l-13.1-9.2a12 12 0 01-2.7-17.2c21.3-27.2 46.4-44.7 91.3-44.7 52.3 0 97.4 29.8 97.4 80.2 0 67.4-77.4 63.9-77.4 107.4v.4a12 12 0 01-12 12zM256 40a216 216 0 110 432 216 216 0 010-432m0-32a248 248 0 100 496 248 248 0 000-496z'/%3E%3C/svg%3E");
      }

      .icon--pencil {
         background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fal' data-icon='pen-alt' class='svg-inline--fa fa-pen-alt fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23A07C2A' d='M493.25 56.26l-37.51-37.51C443.24 6.25 426.86 0 410.49 0c-16.38 0-32.76 6.25-45.25 18.74l-67.88 67.88L274.74 64c-12.5-12.5-32.76-12.5-45.25 0L99.37 194.12c-3.12 3.12-3.12 8.19 0 11.31l11.31 11.31c3.12 3.12 8.19 3.12 11.31 0L252.1 86.63l22.62 22.62L93.95 290.03A327.038 327.038 0 0 0 .17 485.12l-.03.23C-1.45 499.72 9.88 512 23.95 512c5.73 0 111.06-6.99 198.03-93.95l271.28-271.28c24.99-25 24.99-65.52-.01-90.51zm-293.9 339.16c-45 45-103.93 74.41-166.1 83.39 9.13-62.64 38.5-121.32 83.34-166.16l180.77-180.77.01.01.01-.01 82.76 82.76-180.79 180.78zm271.28-271.28l-67.88 67.88-82.77-82.77 67.88-67.88c12.5-12.5 32.74-12.51 45.25 0l37.51 37.51c12.51 12.5 12.52 32.74.01 45.26z'/%3E%3C/svg%3E");
      }

      .js-dropdown-link::after {
         background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='chevron-down' class='svg-inline--fa fa-chevron-down fa-w-14' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E %3Cdefs%3E %3ClinearGradient id='FirstGradient' %3E %3Cstop offset='0%25'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cpath fill='%23A07C2A' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'%3E%3C/path%3E %3C/svg%3E")!important;
      }
   }
}

URL: /components/raw/header/header.scss
Filesystem Path: components/06-components/20-header/header.scss
Size: 9.5 KB

File:

Content:


                                const toggleThis = (el, trigger = false) => {
	var x = el;
	if (
		window.getComputedStyle(el, null).getPropertyValue("display") === "none"
	) {
		x.style.display = "block";
		if (trigger) trigger.classList.add("active");
	} else {
		x.style.display = "none";
		if (trigger) trigger.classList.remove("active");
	}
};

document.addEventListener("DOMContentLoaded", (LetsGO) => {
	let toggleMenu = document.getElementsByClassName("js-toggle-menu")[0];
	if (toggleMenu) {
		toggleMenu.addEventListener("click", (event) => {
			event.preventDefault();
			let menu = document.querySelector(".js-nav-inside > nav");

			if (menu) toggleThis(menu, toggleMenu);

			if (window.innerWidth < 480) {
				let buttonDevis = document.querySelector(".button--devis");
				if (buttonDevis) {
					toggleThis(buttonDevis);
				}
			}
		});
	}

	// Cart button
	if (window.innerWidth > 480) {
		var myCardProduct = JSON.parse(localStorage.getItem("myCart"));
		let toggleBlockCart = document.querySelector(".button--devis");

		if (toggleBlockCart) {
			toggleBlockCart.onclick = (event) => {
				if (myCardProduct && myCardProduct.productCount > 0) {
					event.preventDefault();
					let blockCart = document.querySelector(".block-cart");
					jQuery(blockCart).fadeToggle();
				}
			};
		}
	}

	const openModal = (el) => {
		let searchInput = el.querySelector('input[type="search"]');

		const targetElement = document.querySelector("body");
		// bodyScrollLock.disableBodyScroll(targetElement);

		console.log("openModal", el);

		modalSearch.style.opacity = "0";
		modalSearch.style.display = "block";
		modalSearch.style.transition = ".3s ease";
		setTimeout(() => {
			modalSearch.style.opacity = "1";
			searchInput.focus();
			searchInput.select();
		}, 10);
	};

	const closeModal = (el) => {
		modalSearch.style.opacity = "0";

		const targetElement = document.querySelector("body");
		// bodyScrollLock.enableBodyScroll(targetElement);

		setTimeout(() => (el.style.display = "none"), 310);
	};

	// Search trigger
	let searchTrigger = document.querySelectorAll(".js-open-search");
	let searchClose = document.querySelectorAll(".js-close-search");
	let modalSearch = document.querySelector("#modal-block-search");

	searchTrigger.forEach((trigger) => {
		trigger.addEventListener("click", (event) => {
			event.preventDefault();
			openModal(modalSearch);
		});
	});

	searchClose.forEach((trigger) => {
		trigger.addEventListener("click", (event) => {
			event.preventDefault();
			closeModal(modalSearch);
		});
	});

	document.addEventListener("keydown", (event) => {
		if (event.keyCode == 27) {
			closeModal(modalSearch);
		}
	});
});

// Si il existe des produits dans le panier, on mets à jour l'intitulé du bouton 'Demander un devis'
var myCardProduct = JSON.parse(localStorage.getItem("myCart"));

document.addEventListener("DOMContentLoaded", () => {
	let headerButtonDevis = document.querySelector(
			".main-header .button--devis"
		),
		buttonDevisIcon = headerButtonDevis.querySelector(".icon"),
		buttonDevisLabel = headerButtonDevis.querySelector("span"),
		cartSummary = document.querySelector("#cartTooltipSummary .button");

	if (myCardProduct && myCardProduct.productCount > 0) {
		buttonDevisIcon.classList.remove("icon--devis");
		buttonDevisIcon.classList.add("icon--pencil");

		buttonDevisLabel.innerHTML = "Finaliser mon devis";
		cartSummary.innerHTML = "Finaliser mon devis";
	}
});

URL: /components/raw/header/header.js
Filesystem Path: components/06-components/20-header/header.js
Size: 3.4 KB

Handle: @header--header-with-cart
Variants (4): Default , Transparent header , White header , Header with cart
Preview:
- With layout
- Component only
Filesystem Path: components/06-components/20-header/header.hbs
References (2): @nav, @block-cart

There are no notes for this item.

Header with cart

Typography

Heading

Paragraph

Link

List

Forms

Label

Icons

Button

Tools

Navs

Blocks

Block Cart

Block Search

Cards

Card Section

Card Product

Sections

Heros

Header

Pages

Page Devis

Archives

Single

Single News

Single Product

Header with cart

Heading

Paragraph

Link

List

Label

Icons Social

Nav Pagination

Block Cart

Block Search

Card Section

Card Product

Page Devis

Single News

Single Product