Liquid, Javascript, thèmes
Bonjour à tous,
Je travaille actuellement sur un site Shopify (Reaverfit.com) et j'aimerais ajouter une fonctionnalité à notre widget de géolocalisation situé dans le pied de page (footer). Je souhaite afficher un petit drapeau SVG à côté du nom de chaque langue. Par exemple, un drapeau français à côté du mot "Français", un drapeau anglais à côté de "English", etc.
J'ai déjà les fichiers SVG de chaque drapeau disponibles dans mes ressources et j'ai compris comment intégrer un SVG dans le code HTML. Cependant, je ne suis pas sûr de comment intégrer cela dans le widget de géolocalisation spécifiquement, pour qu'un drapeau différent s'affiche à côté de chaque langue.
Voici un extrait du code actuel du widget :
<div class="Footer__Aside"> {%- if section.settings.show_currency_selector and shop.enabled_currencies.size > 1 -%} {%- assign currency_selector = true -%} {%- endif -%} {%- if section.settings.show_locale_selector and shop.published_locales.size > 1 -%} {%- assign locale_selector = true -%} {%- endif -%} {%- if locale_selector or currency_selector -%} <div class="Footer__Localization"> {%- form 'localization', id: 'localization_form_footer', class: 'Footer__LocalizationForm' -%} {%- if currency_selector -%} <div class="Footer__LocalizationItem"> <input type="hidden" name="currency_code" value="{{ form.current_currency.iso_code }}"> <span class="u-visually-hidden">{{ 'footer.general.currency' | t }}</span> <button type="button" class="SelectButton Link Link--primary u-h8" aria-haspopup="true" aria-expanded="false" aria-controls="footer-currency-popover"> {{ form.current_currency.iso_code }} {% if form.current_currency.symbol %}{{ form.current_currency.symbol }}{% endif %} {%- render 'icon', icon: 'select-arrow' -%} </button> <div id="footer-currency-popover" class="Popover Popover--small Popover--noWrap" aria-hidden="true"> <header class="Popover__Header"> <button type="button" class="Popover__Close Icon-Wrapper--clickable" data-action="close-popover">{% render 'icon' with 'close' %}</button> <span class="Popover__Title Heading u-h4">{{ 'footer.general.currency' | t }}</span> </header> <div class="Popover__Content"> <div class="Popover__ValueList Popover__ValueList--center" data-scrollable> {%- for currency in form.available_currencies -%} <button type="submit" name="currency_code" class="Popover__Value {% if currency.iso_code == form.current_currency.iso_code %}is-selected{% endif %} Heading Link Link--primary u-h6" value="{{ currency.iso_code }}" {% if currency.iso_code == form.current_currency.iso_code %}aria-current="true"{% endif %}> {{ currency.iso_code }} {% if currency.symbol %}{{ currency.symbol }}{% endif %} </button> {%- endfor -%} </div> </div> </div> </div> {%- endif -%} {%- if locale_selector -%} <div class="Footer__LocalizationItem"> <input type="hidden" name="locale_code" value="{{ form.current_locale.iso_code }}"> <span class="u-visually-hidden">{{ 'footer.general.locale' | t }}</span> <button type="button" class="SelectButton Link Link--primary u-h8" aria-haspopup="true" aria-expanded="false" aria-controls="footer-locale-popover"> {{- form.current_locale.endonym_name -}} {%- render 'icon', icon: 'select-arrow' -%} </button> <div id="footer-locale-popover" class="Popover Popover--small Popover--noWrap" aria-hidden="true"> <header class="Popover__Header"> <button type="button" class="Popover__Close Icon-Wrapper--clickable" data-action="close-popover">{% render 'icon' with 'close' %}</button> <span class="Popover__Title Heading u-h4">{{ 'footer.general.locale' | t }}</span> </header> <div class="Popover__Content"> <div class="Popover__ValueList Popover__ValueList--center" data-scrollable> {%- for locale in form.available_locales -%} <button type="submit" name="locale_code" class="Popover__Value {% if locale.iso_code == form.current_locale.iso_code %}is-selected{% endif %} Heading Link Link--primary u-h6" value="{{ locale.iso_code }}" {% if locale.iso_code == form.current_locale.iso_code %}aria-current="true"{% endif %}> {{- locale.endonym_name -}} </button> {%- endfor -%} </div> </div> </div> </div> {%- endif -%} {%- endform -%} </div> {%- endif -%}
Je vous remercie par avance pour votre aide.
Cordialement,
Pour que les clients se sentent encouragés à acheter des produits, ils doivent comprendre ...
By Océanne Sep 3, 2024Il y a possiblement une grosse opportunité négligée dans la vente de vos produits. La créa...
By Océanne Jul 16, 2024La confiance est l'une des devises les plus importantes avec laquelle vous traitez lorsque...
By Océanne Jun 14, 2024