Webflow

Bouton quantité personnalisé

Javascript

CSS

Auteur

Aurélien Gallier

Démo lecture seule

Voir

Démo live

Voir

Copie-colle ce code entre les balise <head> de ta page.

Ce style CSS supprime les flèches par défaut des champs de type "number" et les rend comme de simples zones de texte, pour un rendu plus uniforme et un contrôle total de la mise en forme.


<style>
  /* supprimer les styles de formulaire et définir la marge à 0 */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
</style>

Copie-colle ce code entre les balise <body> de ta page.


<!-- JavaScript à placer dans un Embed en Footer (avant </body>) ou dans un fichier JS global -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Sélectionne tous les composants quantité
    document.querySelectorAll('.quantity-wrapper').forEach(function(wrapper) {
      const input = wrapper.querySelector('.qty-input');
      const btnPlus = wrapper.querySelector('.qty-plus');
      const btnMinus = wrapper.querySelector('.qty-minus');

      btnPlus.addEventListener('click', () => {
        let val = parseInt(input.value) || 0;
        input.value = val + 1;
        input.dispatchEvent(new Event('change'));
      });

      btnMinus.addEventListener('click', () => {
        let val = parseInt(input.value) || 0;
        if (val > parseInt(input.min || 1)) {
          input.value = val - 1;
          input.dispatchEvent(new Event('change'));
        }
      });
    });
  });
</script>

Ce script attend que la page soit chargée, puis repère tous les blocs portant la classe .quantity-wrapper. Dans chaque bloc, il récupère le champ numérique .qty-input et les boutons .qty-plus / .qty-minus. Au clic sur “+”, il convertit la valeur actuelle en nombre, l’incrémente de 1, puis déclenche un événement change. Au clic sur “–”, il décrémente la valeur si elle est supérieure au minimum défini, puis déclenche aussi change. Ainsi, il remplace les flèches natives du <input type="number"> par des boutons personnalisés pour gérer la quantité.

Structure ton bouton quantité comme indiqué ci-dessous et personnalise-le à ta guise !

1. Ajoute une div avec la classe "quantity-wrapper"

2. Ajoute la classe "qty-input" sur le champ input type "number"

3. Ajoute la classe "qty-minus" sur l'élément pour soustraire "1" au champ input

4. Ajoute la classe "qty-plus" sur l'élément pour ajouter "1" au champ input

Plus de scripts ?

Javascript

CSS

Compte à rebours personnalisé

Crée un compte à rebours personnalisé sur ton site rapidement pour afficher une date limite !

Voir

Javascript

CSS

Compte à rebours classique

Crées un compte à rebours sur ton site rapidement pour afficher une date limite !

Voir

Javascript

CSS

Bouton "Copier-coller"

Tu souhaites permettre aux visiteurs de ton site de pouvoir copier-coller un texte ? Ajoute ce code pour créer un bouton copier-coller clé en main !

Voir

Bouton quantité personnalisé

Copie-colle ce code entre les balise <head> de ta page.

Copie-colle ce code entre les balise <body> de ta page.

Structure ton bouton quantité comme indiqué ci-dessous et personnalise-le à ta guise !

Plus de scripts ?

+1 000 no-codeurs

Tu veux qu’on crée le site de ta boîte ?