Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

adds theme toggle for avatar widget to allow opt-out without code change #3496

Merged
merged 4 commits into from
Jun 5, 2024
Merged

adds theme toggle for avatar widget to allow opt-out without code change #3496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d000917
adds theme toggle for avatar widget to allow opt-out without code change
mtbottens May 31, 2024
94f505c
resolve spacing differences when account-icon is present in the DOM
mtbottens May 31, 2024
730c010
Update 15 translation files
translation-platform[bot] Jun 4, 2024
a27dfba
Update 5 translation files
translation-platform[bot] Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions assets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2549,6 +2549,10 @@ input[type='checkbox'] {
--shop-avatar-size: 2.8rem;
}

account-icon {
display: flex;
}

/* Search */
menu-drawer + .header__search {
display: none;
Expand Down
8 changes: 8 additions & 0 deletions locales/cs.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "Barevné schéma nabídky"
},
"header__7": {
"content": "Přihlášení k zákaznickým účtům",
"info": "Pokud chcete spravovat zákaznické účty, přejděte do [jejich nastavení](/admin/settings/customer_accounts)."
},
"enable_customer_avatar": {
"label": "Zobrazit avatar",
"info": "Zákazníci po přihlášení v aplikaci Shop zobrazí jen svůj avatar."
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/da.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "Farveskema for menu"
},
"header__7": {
"content": "Login for kundekonti",
"info": "For at administrere kundekonti skal du gå til [indstillingerne for kundekonti](/admin/settings/customer_accounts)."
},
"enable_customer_avatar": {
"label": "Vis avatar",
"info": "Kunder ser kun deres avatar, når de er logget ind med Shop"
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/de.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "Menü-Farbschema"
},
"header__7": {
"content": "Einloggen mit Kundenkonten",
"info": "Um deine Kundenkonten zu verwalten, gehe zu deinen [Kundenkonto-Einstellungen](/admin/settings/customer_accounts)."
},
"enable_customer_avatar": {
"label": "Avatar anzeigen",
"info": "Kunden sehen nur ihren Avatar, wenn sie bei Shop angemeldet sind."
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/en.default.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1172,6 +1172,14 @@
"options__2": {
"label": "Left"
}
},
"header__7": {
"content": "Customer accounts log in",
"info": "To manage customer accounts, go to your [customer accounts settings](/admin/settings/customer_accounts)."
},
"enable_customer_avatar": {
"label": "Show avatar",
mtbottens marked this conversation as resolved.
Show resolved Hide resolved
mtbottens marked this conversation as resolved.
Show resolved Hide resolved
"info": "Customers will only see their avatar when they're signed in with Shop"
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/es.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "Esquema de colores del menú"
},
"header__7": {
"content": "Inicio de sesión de cuentas de cliente",
"info": "Para gestionar las cuentas de cliente, ve a la [configuración de cuentas de cliente](/admin/settings/customer_accounts)."
},
"enable_customer_avatar": {
"label": "Mostrar avatar",
"info": "Los clientes solo verán su avatar cuando inicien sesión en Shop."
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/fi.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "Värimallivalikko"
},
"header__7": {
"content": "Asiakastilille kirjautuminen",
"info": "Voit hallinnoida asiakastilejä [asiakastilien asetuksista](/admin/settings/customer_accounts)."
},
"enable_customer_avatar": {
"label": "Näytä avatar",
"info": "Asiakkaat näkevät oman avatarinsa vain ollessaan kirjautuneena Shopiin"
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/fr.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "Nuancier de couleurs de menu"
},
"header__7": {
"content": "Connexion au comptes clients",
"info": "Pour gérer les comptes clients, allez dans vos [paramètres de compte client](/admin/settings/customer_accounts)."
},
"enable_customer_avatar": {
"label": "Afficher l’avatar",
"info": "Les clients ne verront leur avatar que lorsqu’ils seront connectés à Shop"
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/it.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "Schema di colori del menu"
},
"header__7": {
"content": "Come accedere agli account cliente",
"info": "Per gestire gli account cliente vai su [customer accounts settings](/admin/settings/customer_accounts)."
},
"enable_customer_avatar": {
"label": "Mostra avatar",
"info": "I clienti vedranno i propri avatar quando avranno effettuato l'accesso a Shop"
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/ja.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "メニューの配色"
},
"header__7": {
"content": "お客様アカウントのログイン",
"info": "お客様アカウントを管理するには、[お客様アカウント設定](/admin/settings/customer_accounts) に移動します。"
},
"enable_customer_avatar": {
"label": "アバターを表示",
"info": "お客様はShopにログインしているときのみアバターを見ることができます"
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/ko.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "메뉴 색상 구성표"
},
"header__7": {
"content": "고객 계정 로그인",
"info": "고객 계정을 관리하려면 [고객 계정 설정](/admin/settings/customer_accounts)으로 이동하십시오."
},
"enable_customer_avatar": {
"label": "아바타 표시",
"info": "고객이 Shop으로 로그인하면 본인의 아바타를 보기만 할 수 있습니다."
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/nb.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "Menyens fargepalett"
},
"header__7": {
"content": "Pålogging til kundekontoer",
"info": "Gå til [kundekontoinnstillingene](/admin/settings/customer_accounts) for å administrere kundekontoer."
},
"enable_customer_avatar": {
"label": "Vis avatar",
"info": "Kundene ser bare avataren sin når de er logget på med Shop"
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/nl.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "Kleurschemamenu"
},
"header__7": {
"content": "Inloggen bij klantaccounts",
"info": "Ga om klantaccounts te beheren naar je instellingen voor klantaccounts ](/admin/settings/customer_accounts)."
},
"enable_customer_avatar": {
"label": "Avatar weergeven",
"info": "Klanten kunnen de avatar alleen zien als ze zijn ingelogd bij Shop"
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/pl.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "Kolorystyka menu"
},
"header__7": {
"content": "Logowanie do kont klientów",
"info": "Aby zarządzać kontami klientów, przejdź do [ustawień kont klientów](/admin/settings/customer_accounts)]."
},
"enable_customer_avatar": {
"label": "Pokaż awatar",
"info": "Klienci zobaczą swój awatar tylko po zalogowaniu się przez Shop"
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/pt-BR.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "Esquema de cores do menu"
},
"header__7": {
"content": "Login de contas de cliente",
"info": "Para gerenciar as contas de cliente, acesse as [configurações relacionadas](/admin/settings/customer_accounts)."
},
"enable_customer_avatar": {
"label": "Mostrar avatar",
"info": "Os clientes só veem o avatar deles depois de fazer login no Shop"
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/pt-PT.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "Esquema de cores do menu"
},
"header__7": {
"content": "Início de sessão de contas de cliente",
"info": "Para gerir contas de cliente, aceda às suas [definições de contas de cliente](/admin/settings/customer_accounts)."
},
"enable_customer_avatar": {
"label": "Mostrar avatar",
"info": "Os clientes apenas verão o respetivo avatar quando iniciarem sessão com o Shop"
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/sv.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "Färgschema för meny"
},
"header__7": {
"content": "Inloggning till kundkonton",
"info": "Gå till [kundkontoinställningar](/admin/settings/customer_accounts) för att hantera kundkonton."
},
"enable_customer_avatar": {
"label": "Visa avatar",
"info": "Kunder ser endast sin avatar när de är inloggade med Shop"
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/th.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "รูปแบบสีเมนู"
},
"header__7": {
"content": "บัญชีผู้ใช้ของลูกค้าเข้าสู่ระบบ",
"info": "หากต้องการจัดการบัญชีผู้ใช้ของลูกค้า ให้ไปที่การตั้งค่า[บัญชีผู้ใช้ของลูกค้า](/admin/settings/customer_accounts)"
},
"enable_customer_avatar": {
"label": "แสดงอวาตาร์",
"info": "ลูกค้าจะเห็นอวาตาร์ของตนเมื่อลูกค้าเข้าสู่ระบบด้วย Shop"
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/tr.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "Menü renk şeması"
},
"header__7": {
"content": "Müşteri hesaplarında oturum açma",
"info": "Müşteri hesaplarını yönetmek için [müşteri hesabı ayarlarınıza gidin ](/admin/settings/customer_accounts)"
},
"enable_customer_avatar": {
"label": "Avatarı göster",
"info": "Müşteriler, avatarlarını yalnızca Shop'a giriş yaptıkları zaman görür"
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/vi.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "Bảng màu của menu"
},
"header__7": {
"content": "Đăng nhập tài khoản khách hàng",
"info": "Để quản lý tài khoản khách hàng, vào mục [cài đặt tài khoản khách hàng](/admin/settings/customer_accounts)."
},
"enable_customer_avatar": {
"label": "Hiển thị hình đại diện",
"info": "Khách hàng sẽ chỉ nhìn thấy hình đại diện của họ khi họ đăng nhập bằng Shop"
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/zh-CN.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "菜单配色方案"
},
"header__7": {
"content": "客户账户登录",
"info": "若要管理客户账户，请前往您的[客户账户设置](/admin/settings/customer_accounts)。"
},
"enable_customer_avatar": {
"label": "显示头像",
"info": "客户将仅在使用 Shop 登录时才会看到自己的头像"
}
}
},
Expand Down
8 changes: 8 additions & 0 deletions locales/zh-TW.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,14 @@
},
"menu_color_scheme": {
"label": "選單顏色配置"
},
"header__7": {
"content": "顧客帳號登入",
"info": "若要管理顧客帳號，請前往您的[顧客帳號設定](/admin/settings/customer_accounts)。"
},
"enable_customer_avatar": {
"label": "顯示大頭貼",
"info": "當顧客登入 Shop 時只會看到他們的大頭貼。"
}
}
},
Expand Down
3 changes: 0 additions & 3 deletions sections/footer.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,10 +232,7 @@

{%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}
<div class="footer__follow-on-shop">
{% comment %} TODO: enable theme-check once `login_button` is accepted as valid filter {% endcomment %}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be a valid filter, removing the hack

{% # theme-check-disable %}
{{ shop | login_button: action: 'follow' }}
{% # theme-check-enable %}
</div>
{%- endif -%}

Expand Down
30 changes: 23 additions & 7 deletions sections/header.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,13 +256,17 @@

{%- 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 %}">
<account-icon>
{%- if customer and customer.has_avatar? -%}
{{ customer | avatar }}
{%- else -%}
{% render 'icon-account' %}
{%- endif -%}
</account-icon>
{%- if section.settings.enable_customer_avatar -%}

This comment was marked as resolved.

Sign in to view

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would result the account tag and hidden data still to exist when disabled, no?

Nah, this check is nested under the anchor tag, so the anchor should always render.

My own opinion on this PR is to just leave merchants to disable customer accounts in their Shopify customer settings. More granular control like this is best left to devs to reduce theme settings bloat.

This was the original thought we had as well, but ultimately giving control to the merchant (as opposed to requiring developer intervention) was the desired approach internally. The aim is to keep the theme on the green (upgrade) path.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nah, this check is nested under the anchor tag, so the anchor should always render.

My point being that when disabled, the anchor should not be uselessly dangling in the DOM.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh, disregard, I misunderstood the code.

<account-icon>
{%- if customer and customer.has_avatar? -%}
{{ customer | avatar }}
{%- else -%}
{% render 'icon-account' %}
{%- endif -%}
</account-icon>
{%- else -%}
{% render 'icon-account' %}
{%- endif -%}
<span class="visually-hidden">
{%- liquid
if customer
Expand Down Expand Up @@ -586,6 +590,18 @@
"default": true,
"label": "t:sections.header.settings.enable_language_selector.label"
},
{
"type": "header",
"content": "t:sections.header.settings.header__7.content",
"info": "t:sections.header.settings.header__7.info"
},
{
"type": "checkbox",
"id": "enable_customer_avatar",
"default": true,
"label": "t:sections.header.settings.enable_customer_avatar.label",
"info": "t:sections.header.settings.enable_customer_avatar.info"
},
{
"type": "header",
"content": "t:sections.header.settings.mobile_layout.content"
Expand Down
Loading
Loading