[Résolu] Intégration de blocage sur des boutons

Bonjour à tous,

Voila je suis nouveau sur ce forum mais il m'a beaucoup aidé!
Je viens vers vous car j'ai un petit soucis ^^' j'utilise Wordpress pour créer mon site et j'utilise du HTML pour rajouter des boutons sur la fiche d'un produit et du PHP en modifiant les fichiers de mon "checkout" Wordpress.

Sur la fiche produit j'ai 2 boutons:
- le 1er pour ajouter au panier

-le 2nd pour valider la commande (qui redirige sur le checkout)

Mais je voudrais faire en sorte que mes futurs clients ne puissent rien ajouter au panier tant qu'ils n'ont pas modifié la valeur de la quantité. De même qu'ils ne peuvent pas accéder à la validation de la commande sans avoir ajouter au panier l'article (avec la quantité modifiée).

J'ai retourné tout google mais je n'ai pas de solutions... Aidez moi svp je vais cracker x)

Bonjour,

Je pense que pour faire ce que vous désirez, l'idéal serait d'utiliser du JS.
Ça fera le boulot parfaitement.
Wordpress ne vous permettra pas de faire cela nativement. Sauf peut-être si vous utilisez un plugin pour gérer un e-commerce (comme Woocommerce)

Bonjour,

Sans connaitre votre plugin , il y a pour les formulaires une première approche éventuellement à mettre en place avec l'attribut required sur les champs de formulaire .

Qu'est ce que c'est ? https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input#required

Coté styles ? https://developer.mozilla.org/fr/docs/Web/CSS/:required

Mais plus encore ? : https://www.alsacreations.com/tuto/lire/1391-formulaire-html5-placeholder-required-pattern.html


Enfin, cet attribut est -il efficace sur les navigateurs ciblés : https://caniuse.com/#feat=mdn-css_selectors_required

Un simple test avec ce code minimal devrait déjà vous donner un aperçu :

<form>
  <input required>
  <input type="submit">
</form>

Cdt
Modifié par gcyrillus (24 Mar 2020 - 13:34)

Bonjour
Merci de vos réponses, Gus le JS j'en ai lu beaucoup à ce sujet mais je ne vois pas du tout où écrire le bout de code enfin je ne sais même pas comment le faire...
gcyrillus, Merci j'avais lu ça aussi mais se n'est pas l'effet recherché, de ce que j'ai compris celui la et pour désactiver l'envoie d'un formulaire si un champ n'est pas rempli.
En faite (voir joint le screen), je souhaiterais qu'un client ne puisse faire d'ajout au panier seulement si il a changer la valeur de la quantité, et, qu'il ne puisse validé la commande que s'il a ajouté au panier.
Je sais vraiment pas comment faire...
Modifié par Kartman241116 (24 Mar 2020 - 14:37)

Cela fonctionne aussi avec une checkbox et son label : https://codepen.io/gc-nomade/pen/bGdmora

Ok merci, saurait-tu comment et dans quel fichier du serveur de doit l'incrémenté ?
Car si je met et modifie le code dans la fiche produit les bouton ce rajoute en plus des autres. Comme se sont des produits simples, je suis dans :
www/wp-content/plugins/woocommerce/templates/single-product/add-to-cart/simple.php mais aucun changement... à moins que je ne sache pas comment m'y prendre surement...

Comme dit précédemment, je ne connais pas ce plugin.

Tel quel, l'ajout au panier peut se faire en validant la commande (au traitement des champs du formulaire coté serveur) .

Pour incrémenter ? , idem : un input pour renvoyer un champ : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/number

Mais au minimum il faudra derrière du JavaScript, une session/cookies ainsi que le traitement du formulaire coté serveur pour s'assurer que tout fonctionne correctement.

Une autre approche en js est de laisser le bouton submit en disabled, tant qu'un ajout au panier n'est pas fait, ou n'afficher le bouton valider la commande uniquement dans la page récapitulant le contenu du panier si il y a au moins un article.



cdt
Modifié par gcyrillus (24 Mar 2020 - 19:00)

Oui pardon,
En tout cas merci pour tes réponses et ton aide, des que j'ai un ptit bout de code je reviendrais surement vers toi pour voir ce qui cloche car a mon avis du 1er coup il y as des chances pour que ça ne fonctionne pas correctement.

Pas de soucis, le forum reste ouvert

Me voila de retour voila la chose que j'ai bidouillé x)

                    //bouton "ajouter au panier"
		<button type="submit" name="add-to-cart" onclick="afficherMasquer()" value="<?php echo esc_attr( $product->get_id() ); ?>"  class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?>
		</button>
	          //bouton "validation commande"
<a id="validation" href="<?php echo esc_url( wc_get_checkout_url() ); ?>"  class="checkout-button button alt wc-forward" style="display:none" 
	<?php esc_html_e( 'Proceed to checkout', 'woocommerce' ); ?>
</a>

<script>
function afficherMasquer()
{
  if(document.getElementById("validation").style.display == "none")
    document.getElementById("validation").style.display = "block";
  else
    document.getElementById("validation").style.display = "none";
}
</script>

La fonction marche bien mais le problème et que la page se refresh... donc comme j'ai défini mon bouton par défault sur "style="display:none" " ben après le refresh le bouton et de nouveau caché forcement... Une idée pour empêcher ca ^^'?

au refresh de ta page (formulaire traité coté serveur) il te suffit de tester si ton champ $_POST['add-to-cart'] existe et a une valeur supérieur a 0 pour afficher ou non ton lien de validation (via php et pas javascript)
Modifié par gcyrillus (24 Mar 2020 - 23:23)

Merci à toi ^^ tout roule nickel maintenant et encore merci pour tes réponses !!
Modifié par Kartman241116 (25 Mar 2020 - 14:18)