Bonjour à toutes et à tous,
Je fais face à un problème JavaScript persistant sur mon thème Shopify et j’ai besoin de votre expertise. Mon objectif est d’implémenter une section FAQ interactive et cliquable sur mes articles de blog. Cette FAQ est personnalisable grâce à l’utilisation de champs méta (metafields) Shopify pour chaque question/réponse. Elle doit permettre aux questions de s’ouvrir et de se fermer (effet accordéon) pour révéler des réponses formatées avec du texte riche. J’ai développé le HTML, le CSS et le JavaScript nécessaire pour cette fonctionnalité.
Le problème principal : Malgré l’intégration de mon code dans le fichier theme.liquid, la fonctionnalité ne s’active pas et je vois des erreurs JavaScript bloquantes dans la console de mon navigateur.
Voici les erreurs récurrentes que je rencontre :
- jquery-ui.js:14 Uncaught ReferenceError: jQuery is not defined
- vendor.js:142 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
Ma configuration actuelle et les tests effectués :
- Objectif du code FAQ : J’utilise du JavaScript pur (sans jQuery) pour gérer l’ouverture/fermeture des réponses FAQ et le rendu du contenu riche des champs méta. Ce script est actuellement encapsulé dans un setTimeout de 100ms pour s’assurer qu’il s’exécute après le chargement du DOM. Voici un extrait de mon code FAQ dans theme.liquid:
- Inclusion de jQuery : Pour tenter de résoudre l’erreur jQuery is not defined provenant de jquery-ui.js, j’ai inclus la bibliothèque jQuery via la balise script recommandée par Shopify:
{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
Cette ligne est placée juste avant la balise de fermeture dans mon fichier theme.liquid.
- Test de la communauté (suggéré par le support Shopify) : Sur les conseils du support Shopify, j’ai ajouté un script de test tiré d’un fil de discussion de la communauté ([lien vers l’article du forum que le support t’a donné, tu peux le remettre ici si tu veux]). Ce script est censé attendre que jQuery soit chargé et afficher un message en console. Le code ajouté, placé juste après l’inclusion de jQuery et avant , était le suivant:
Résultat du test : Après avoir rechargé la page, le message “Astellow - jQuery est bien chargé !” n’apparaît pas dans la console. Les erreurs jquery-ui.js:14 Uncaught ReferenceError: jQuery is not defined et vendor.js:142 Uncaught (in promise) Error… persistent. Cela suggère que l’erreur jQuery is not defined est si bloquante qu’elle empêche même l’exécution du code de test, et donc de tout autre script JavaScript qui suit.
Hypothèses et pistes explorées / observées dans le forum :
- Problème d’ordre de chargement : Il semble que jquery-ui.js soit exécuté par le thème avant que jQuery ne soit disponible, même si j’inclus jQuery en bas du .
- Placement de jQuery dans : Dans le fil de discussion que le support m’a partagé, une solution suggérée pour cette erreur est de placer jQuery directement dans la balise . J’ai tenté cette approche par le passé, mais cela a provoqué des dysfonctionnements sur l’ensemble de mon site.
- Attribut defer sur jQuery : Un autre intervenant dans le même forum a mentionné une piste pertinente : “This is possible because your jQuery is declared defer, so it won’t work when you call at the bottom of body.” Cela suggère que le problème pourrait venir du fait que jQuery est chargé avec un attribut ‘defer’, ce qui ferait qu’il ne s’exécute qu’après le chargement complet du HTML, et donc trop tard pour jquery-ui.js qui en a besoin plus tôt.
- Conflit avec une application (potentiel) : Toujours dans le fil de discussion, une application (“Smart Tabs”) est citée comme pouvant charger jQuery et potentiellement créer des conflits. Bien que je n’utilise pas d’application spécifique pour ma FAQ, pourriez-vous vérifier si une autre application installée sur mon thème (passée ou présente) pourrait être à l’origine de cette interférence avec jQuery ou jquery-ui.js ?
Mon site est accessible ici : https://astellow.com/blogs/blogstellow-spiritualite-esoterisme-bien-etre/20h20-signification-heure-miroir. Vous pouvez y observer les erreurs en console.
Je joins également une capture d’écran de ma console et le contenu de mon fichier theme.liquid actuel pour une analyse complète.
Mon fichier theme.liquid :
{%- if settings.favicon != blank -%}
{%- endif -%}
{%- if page_description -%}
{%- endif -%}
{%- render 'meta-tags' -%}
{%- render 'header-fonts' -%}
{%- render 'header-styles' -%}
{%- render 'header-javascript' -%}
{{ content_for_header }}
{%- render 'css-variables' -%}
{% include 'pagefly-app-header' %}
{%- if settings.preloading -%}
{% render 'preloading' %}
{%- endif -%}
{%- if settings.header_layout == "header2" -%}
{% sections 'header-group2' %}
{%- elsif settings.header_layout == "header3"-%}
{% sections 'header-group3' %}
{%- elsif settings.header_layout == "header4"-%}
{% sections 'header-group4' %}
{%- elsif settings.header_layout == "header5"-%}
{% sections 'header-group5' %}
{%- else -%}
{% sections 'header-group1' %}
{% endif %}
{%- if settings.footer_layout == "footer2" -%}
{% sections 'footer-group2' %}
{%- elsif settings.footer_layout == "footer3"-%}
{% sections 'footer-group3' %}
{%- else -%}
{% sections 'footer-group1' %}
{% endif %}
{% include 'footer-javascript' %}
{% include 'site-template' %}
{%- if settings.saleNotifi_enable and settings.collection_notification -%}
{% render 'sale-notification' %}
{%- endif -%}
{% render 'svg' %}
{%- if settings.header_bottom_mobile -%}
{%- render 'menu-fixed-mobile' -%}
{%- endif -%}
{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
