Script

Webflow

Bouton quantité personnalisé

Javascript

HTML

CSS

Auteur

Aurélien Gallier

Démo lecture seule

Voir

Remix Link

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 ?

Réservé aux étudiants CORIACE

Javascript

CSS

HTML

Slider avant/après

Ajoute un slider interactif sur ton site Webflow avec un effet Avant/Après

Voir

Réservé aux étudiants CORIACE

Javascript

CSS

HTML

Transition de page - Slide up

Crées une animation stylée pour tes transitions de page pour une navigation plus fluide !

Voir

Réservé aux étudiants CORIACE

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

Voir tous les scripts

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 100 no-codeurs

Tu veux qu’on crée le site de ton entreprise ?