Guide du JavaScript personnalisé
Le JavaScript personnalisé vous permet d'ajouter un comportement pour lequel le personnalisateur n'a pas d'interrupteur : un avis de livraison sur chaque page, un compte à rebours jusqu'à la fin d'une offre, un message WhatsApp pré-rempli, un bouton de retour en haut. Vous écrivez le code une seule fois dans le tableau de bord et il s'exécute sur votre boutique pour chaque visiteur. Ce guide explique où le coller, où il s'exécute, ce qu'il ne peut pas faire, et propose une série d'extraits à copier.
Le JavaScript personnalisé est disponible sur le plan Entreprise. Sur les autres plans, la section apparaît verrouillée. Consultez les plans pour passer à la version supérieure.
Où le coller
Barre latérale Personnaliser la boutique / تخصيص المتجر → Personnaliser / تخصيص → JavaScript personnalisé / JavaScript مخصّص. Collez votre code, puis cliquez sur Enregistrer.
Collez uniquement du JavaScript. N'ajoutez ni balise <script> ni HTML autour : le champ vous prévient quand il en détecte.
Pendant que vous tapez, le champ vérifie le code. S'il trouve une erreur de syntaxe, il affiche le message du navigateur sous le champ, et un code qui contient une erreur de syntaxe ne s'exécute pas du tout. Corrigez l'erreur avant d'enregistrer.
L'aperçu à droite du personnalisateur n'exécute jamais votre JavaScript. Pour le tester, enregistrez, puis ouvrez votre boutique dans un nouvel onglet. Les pages de la vitrine sont mises en cache quelques minutes : comptez environ cinq minutes, ou ouvrez la boutique dans une fenêtre privée.
Si quelque chose ne va pas sur votre boutique, videz le champ et enregistrez. Ce code ne touche jamais à vos produits, vos commandes ni vos paramètres.
Où il s'exécute
Sur la page d'accueil, les pages produit, les pages catégorie et tous les produits, le panier, le checkout, le suivi de commande et la page de confirmation de commande.
Il ne s'exécute pas sur les landing pages sur /landing/{slug}, et il ne s'exécute pas dans l'aperçu du personnalisateur.
Comment il se charge
Votre code est livré dans son propre fichier et s'exécute une fois que le navigateur a fini de lire la page. Deux conséquences :
- Tous les éléments de la page existent déjà quand votre code démarre, vous pouvez donc les chercher tout de suite. Vous n'avez pas besoin d'attendre un événement « page chargée ».
- Une erreur dans votre code arrête votre code à cette ligne. La boutique elle-même continue de fonctionner : les produits, le panier et le formulaire de commande n'en dépendent pas.
Les visiteurs téléchargent le fichier une seule fois et leur navigateur le conserve jusqu'à ce que vous modifiiez le code.
Limites
| Limite | Ce qui se passe |
|---|---|
| 50 000 octets de code | Un collage plus long est refusé avec un message à l'enregistrement, et rien n'est enregistré. Le compteur sous le champ affiche la taille actuelle. Chaque lettre arabe compte pour deux octets. |
| JavaScript uniquement | Une balise <script> ou du HTML dans le champ est une erreur de syntaxe, donc le code ne s'exécute pas. |
| Votre propre code uniquement | Le chargement d'un fichier de script depuis un autre site web (un widget de chat, un outil de heatmap) est bloqué par la politique de sécurité de la boutique. Les connexions de votre code vers la plupart des autres sites web sont bloquées de la même façon. |
| Landing pages | Non couvertes. |
| Autres plans | Si la boutique quitte le plan Entreprise, ou si le plan expire, le code cesse de s'exécuter. Il reste enregistré et s'exécute à nouveau quand le plan est actif. |
Pour Meta, TikTok, Snapchat, Google Analytics ou Google Tag Manager, utilisez plutôt la page Pixels du tableau de bord. Ces outils y sont pris en charge sans aucun code.
Trouver l'élément voulu
Utilisez l'inspecteur de votre navigateur, de la même façon que pour le CSS personnalisé :
- Ouvrez votre boutique sur un navigateur desktop.
- Faites un clic droit sur l'élément et choisissez Inspecter.
- Notez son
class="…"et cherchez-le dans votre code avecdocument.querySelector('.that-class').
Ces sélecteurs existent sur la plupart des thèmes :
| Sélecteur | Élément |
|---|---|
.navbar-store | L'en-tête en haut |
.announcement-bar | Le bandeau promo au-dessus de l'en-tête |
.product-card | Une tuile produit dans une grille |
.product-price | Le prix sur une tuile produit |
.btn-buy-now | Le bouton Acheter maintenant de la page produit |
a.whatsapp-float | Le bouton WhatsApp flottant |
.footer | Le pied de page (Brico utilise .brico-footer) |
Les noms de classe diffèrent d'un thème à l'autre et peuvent changer lors de la mise à jour d'un thème. Vérifiez toujours que l'élément existe avant de l'utiliser, comme le fait chaque extrait ci-dessous avec if (...).
Extraits
Chaque extrait ci-dessous a été exécuté dans un vrai navigateur, sur desktop et en largeur téléphone, avant sa publication. Collez-en un, ou plusieurs à la suite.
Un avis en haut de chaque page
var bar = document.createElement('div');
bar.textContent = 'Free delivery on orders above 5000 DA';
bar.style.cssText = 'background:#111827;color:#fff;text-align:center;padding:10px 16px;font-size:14px;';
document.body.insertBefore(bar, document.body.firstChild);
Vérifiez d'abord si la Barre d'annonce intégrée (Personnaliser → Barre d'annonce) répond à votre besoin. Elle ne demande aucun code.
Une note sur les pages produit uniquement
if (location.pathname.indexOf('/product/') !== -1) {
var note = document.createElement('p');
note.textContent = 'Order before 2 pm and we ship the same day.';
note.style.cssText = 'margin:12px 0;padding:10px 14px;border-radius:8px;background:#fef3c7;color:#92400e;font-size:14px;';
var title = document.querySelector('h1');
if (title) { title.parentNode.insertBefore(note, title.nextSibling); }
}
Le même test fonctionne pour d'autres pages : /cart, /checkout, /category/.
Compte à rebours jusqu'à la fin d'une offre
var end = new Date('2026-12-31T23:59:59');
var box = document.createElement('div');
box.style.cssText = 'background:#b91c1c;color:#fff;text-align:center;padding:10px 16px;font-size:14px;';
document.body.insertBefore(box, document.body.firstChild);
function tick() {
var left = Math.floor((end - new Date()) / 1000);
if (left <= 0) { box.style.display = 'none'; return; }
var d = Math.floor(left / 86400), h = Math.floor(left % 86400 / 3600), m = Math.floor(left % 3600 / 60);
box.textContent = 'Offer ends in ' + d + ' d ' + h + ' h ' + m + ' min';
setTimeout(tick, 30000);
}
tick();
Modifiez la date sur la première ligne. La barre se masque d'elle-même une fois la date passée.
Un message WhatsApp pré-rempli
var wa = document.querySelector('a.whatsapp-float');
if (wa && wa.href.indexOf('text=') === -1) {
wa.href += (wa.href.indexOf('?') === -1 ? '?' : '&') + 'text=' + encodeURIComponent('Hello, I have a question about: ' + document.title);
}
Le message du client commence par le nom de la page sur laquelle il se trouvait.
Ouvrir les liens externes dans un nouvel onglet
var links = document.querySelectorAll('a[href^="http"]');
for (var i = 0; i < links.length; i++) {
if (links[i].hostname !== location.hostname) {
links[i].target = '_blank';
links[i].rel = 'noopener';
}
}
Un bouton de retour en haut
var up = document.createElement('button');
up.type = 'button';
up.textContent = '↑';
up.setAttribute('aria-label', 'Back to top');
up.style.cssText = 'position:fixed;bottom:90px;left:16px;width:44px;height:44px;border-radius:50%;border:0;background:#111827;color:#fff;font-size:18px;display:none;z-index:900;';
up.addEventListener('click', function () { window.scrollTo({ top: 0, behavior: 'smooth' }); });
document.body.appendChild(up);
window.addEventListener('scroll', function () {
up.style.display = window.scrollY > 600 ? 'block' : 'none';
}, { passive: true });
Exécuter du code sur téléphone uniquement
if (window.matchMedia('(max-width: 768px)').matches) {
document.documentElement.classList.add('on-phone');
}
Vous pouvez ensuite cibler .on-phone depuis votre CSS personnalisé.
Réagir à un clic sur Acheter maintenant
document.addEventListener('click', function (e) {
if (e.target.closest('.btn-buy-now')) {
console.log('Buy now clicked on ' + document.title);
}
});
Écoutez le clic, comme ici. Ne remplacez pas le bouton et ne bloquez pas le clic : la commande ne passerait pas.
Bonnes pratiques
- Ne touchez pas au formulaire de commande. Ne modifiez pas, ne masquez pas et ne renvoyez pas les champs du formulaire de commande ou du checkout, et ne redéfinissez pas les fonctions qui existent déjà sur la page. Une boutique qui ne peut plus prendre de commandes est la seule erreur que ce champ peut causer.
- Vérifiez qu'un élément existe avant de l'utiliser (
if (el) { ... }). Un élément manquant est la cause d'erreur la plus fréquente. - Testez sur un vrai téléphone. La plupart de vos acheteurs sont sur téléphone.
- Vérifiez les deux langues si votre boutique vend en arabe et en français. Le texte que vous ajoutez depuis le code n'est pas traduit pour vous.
- Restez court. Quelques lignes ciblées sont plus faciles à garder en état de marche qu'un long script, et elles se chargent plus vite.
- Utilisez un réglage intégré quand il existe. Un interrupteur du personnalisateur continue de fonctionner quand un thème change ; un nom de classe dans votre code, pas forcément.
- Regardez la console du navigateur (clic droit → Inspecter → Console) après l'enregistrement. Une erreur de votre code s'y affiche avec sa ligne.
Dépannage
| Symptôme | Cause probable | Solution |
|---|---|---|
| Rien ne se passe sur ma boutique | La page que vous voyez est une copie en cache | Attendez environ cinq minutes, ou ouvrez la boutique dans une fenêtre privée |
| Rien ne se passe, et le champ affiche une erreur | Le code contient une erreur de syntaxe, donc rien ne s'exécute | Corrigez la ligne indiquée par le message |
| Le champ demande de retirer la balise script | Vous avez collé une balise <script> ou du HTML | Collez uniquement le JavaScript situé entre les balises |
| L'enregistrement est refusé | Le code dépasse 50 000 octets | Raccourcissez-le |
| Cela fonctionne sur un thème, mais plus après un changement de thème | Le nom de classe n'existe pas sur le nouveau thème | Inspectez à nouveau l'élément et mettez à jour le sélecteur |
| Un widget de chat ou d'analytics ne se charge pas | Il charge un fichier depuis un autre site web, ce qui est bloqué | Utilisez la page Pixels pour les outils pris en charge ; les autres scripts externes ne sont pas pris en charge |
| Rien ne se passe dans l'aperçu du personnalisateur | L'aperçu n'exécute jamais le JavaScript personnalisé | Enregistrez et ouvrez la boutique dans un nouvel onglet |
| Rien ne change sur ma landing page | Le JavaScript personnalisé ne s'exécute pas sur les pages /landing/… | Non pris en charge sur ces pages |
| La boutique se comporte bizarrement depuis ma modification | Une ligne de votre code interfère avec la page | Videz le champ et enregistrez, puis remettez le code quelques lignes à la fois |
Le supprimer
Videz le champ et cliquez sur Enregistrer. En quelques minutes, la boutique ne charge plus votre code. Réinitialiser dans le personnalisateur l'efface aussi, avec vos autres personnalisations.
Vous voulez changer l'apparence plutôt que le comportement ? Voir le guide CSS personnalisé et la Personnalisation de la boutique.