Bouton quantité personnalisé

Javascript

HTML

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 Premium ?

Javascript

CSS

HTML

Player video Youtube optimisé

Marre de voir tes performances Page Speed Insight réduites à néant à cause d'une seule vidéo dans ta page ? Voici un script pour te permettre d'ajouter une vidéo sans impacter les performances !

Voir