Add customer avatar (#3376)

Shopify · Apr 2, 2024 · 8b1099b · 8b1099b
1 parent 3c99075
commit 8b1099b
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 2 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -2533,6 +2533,10 @@ product-info .loading__spinner:not(.hidden) ~ *,
   background: rgba(var(--color-foreground), 0.5);
 }
 
+.header__icon--account shop-user-avatar {
+  --shop-avatar-size: 2.8rem;
+}
+
 /* Search */
 menu-drawer + .header__search {
   display: none;

diff --git a/assets/component-menu-drawer.css b/assets/component-menu-drawer.css
@@ -209,6 +209,12 @@ details[open].menu-opening > .menu-drawer__submenu {
   margin-right: 1rem;
 }
 
+.menu-drawer__account shop-user-avatar {
+  --shop-avatar-size: 2.4rem;
+  margin-right: 0.55rem;
+  margin-left: -0.45rem;
+}
+
 .menu-drawer__account:hover .icon-account {
   transform: scale(1.07);
 }

diff --git a/assets/global.js b/assets/global.js
@@ -1339,3 +1339,23 @@ class ProductRecommendations extends HTMLElement {
 }
 
 customElements.define('product-recommendations', ProductRecommendations);
+
+class AccountIcon extends HTMLElement {
+  constructor() {
+    super();
+
+    this.icon = this.querySelector('.icon');
+  }
+
+  connectedCallback() {
+    document.addEventListener('storefront:signincompleted', this.handleStorefrontSignInCompleted.bind(this));
+  }
+
+  handleStorefrontSignInCompleted(event) {
+    if (event?.detail?.avatar) {
+      this.icon?.replaceWith(event.detail.avatar.cloneNode());
+    }
+  }
+}
+
+customElements.define('account-icon', AccountIcon);
diff --git a/sections/header.liquid b/sections/header.liquid
@@ -256,7 +256,13 @@
 
       {%- if shop.customer_accounts_enabled -%}
         <a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}" class="header__icon header__icon--account link focus-inset{% if section.settings.menu != blank %} small-hide{% endif %}">
-          {% render 'icon-account' %}
+          <account-icon>
+            {%- if customer and customer.has_avatar? -%}
+              {{ customer | avatar }}
+            {%- else -%}
+              {% render 'icon-account' %}
+            {%- endif -%}
+          </account-icon>
           <span class="visually-hidden">
             {%- liquid
               if customer

diff --git a/snippets/header-drawer.liquid b/snippets/header-drawer.liquid
@@ -129,7 +129,13 @@
                 href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}"
                 class="menu-drawer__account link focus-inset h5 medium-hide large-up-hide"
               >
-                {% render 'icon-account' %}
+                <account-icon>
+                  {%- if customer and customer.has_avatar? -%}
+                    {{ customer | avatar }}
+                  {%- else -%}
+                    {% render 'icon-account' %}
+                  {%- endif -%}
+                </account-icon>
                 {%- liquid
                   if customer
                     echo 'customer.account_fallback' | t