Bouton ajouter sur miniature

[prestaprojet]

Bonjour,

J'ai consulté ce très bon tuto pour ajouter un bouton ajouter sur les miniatures d'articles :

Quote

https://www.matthieu-jalbert.fr/afficher-un-bouton-ajouter-au-panier-sur-le-listing-produit-de-prestashop-1-7/

Cependant, je souhaiterai savoir si certains ont des solutions pour améliorer la présentation à savoir :

- remplacer le bouton bleu par une image de panier caddy sur laquelle on peut cliquer pour ajouter

- ajouter des boutons rond + et - à droite et à gauche de la case où il y a la quantité pour l'incrémenter ou décrémenter

Quelqu'un aurait svp des orientations pour réaliser ceci ?

Merci d'avance pour votre aide

:-)

[Bllidz]

Bonjour, 

 

pour ton bouton image essai quelque chose comme ça 

<input type="image" id="image" alt="btnImage"
       src="/tonimage.png">

et pour tes boutons +/- ils sont pas existant . ? 

[prestaprojet]

Bonjour Bllidz,

Merci pour cette orientation ;

Du coup, j'ai modifié ainsi :

<form action="{$urls.pages.cart}" method="post">
   <input type="hidden" name="token" value="{$static_token}">
   <input type="hidden" value="{$product.id_product}" name="id_product">

   <div style="float:left;"> 
   {* saisi de la quantité *}
   <input type="number" class="input-group form-control" name="qty" value="1" style="font-weight: bold;">
   
   {* bouton sans écrit ajouter au panier *}
   <button style= "background: url(/images/logo_panier_achat.png); background-repeat : no-repeat; background-size: cover; width: 30px; height: 40px; color:black;" data-button-action="add-to-cart" {if !$product.add_to_cart_url}disabled{/if} class="btn btn-primary">{l}</button>
  
   {* bouton avec écrit ajouter au panier *}
   {*<button style= "background: url(/images/logo_panier_achat.png); background-repeat : no-repeat; background-size: cover; width: 30px; height: 40px; color:black;" data-button-action="add-to-cart" {if !$product.add_to_cart_url}disabled{/if} class="btn btn-primary">{l s='Add to cart' d='Shop.Theme.Actions'}</button>*}
{*FIN bouton ajouter au panier d'achat *} 

    </div>
	
</form>

 

ça fonctionne.

Par contre le problème est que je ne parviens pas à mettre sur la même ligne le champ de saisi et le bouton devenu image afin que ça fasse plus propre et gagner de la place, visuellement se sera plus sympa.

Si vous avez une idée pour réaliser cette action je suis preneur.

A propos des +/- non ils n'existent pas, je souhaite au juste les ajouter.

Merci d'avance pour votre aide

:-)

Edited September 17, 2021 by prestaprojet (see edit history)

[Mediacom87]

il y a 2 minutes, prestaprojet a dit :

Par contre le problème est que je ne parviens pas à mettre sur la même ligne le champ de saisi et le bouton devenu image afin que ça fasse plus propre et gagner de la place, visuellement se sera plus sympa.

Si vous avez une idée pour réaliser cette action je suis preneur.

pour répondre à votre besoin il faudrait s'amuser à reproduire à l'identique ce que vous avez fait et ensuite chercher à corriger le css qui fait passer à la ligne ou autre et donc pourquoi ne pas simplement donner accès à ce que vous avez fait pour que les gens n'aient pas à monter une installation unique totalement inutile pour eux pour corriger votre problème ?

[prestaprojet]

Bonjour,

Voici ce que j'ai ajouté dans la div + le input + le button : display: inline-block;

et ça fonctionne très bien.

Si des améliorations peuvent être réalisés, je suis preneur et à l'écoute de vos réalisations + Tuto + partie de code à partager.

Ici l'amélioration  laquelle je pense serait d'ajouter un +/- comme évoqué précédemment ou des flèches quantités haut/bas pour incrémenter ou décrémenter la quantité.

Merci pour votre aide

:-)

Edited September 17, 2021 by prestaprojet (see edit history)

[Bllidz]

On 9/17/2021 at 1:05 PM, prestaprojet said:

Bonjour Bllidz,

Merci pour cette orientation ;

Du coup, j'ai modifié ainsi :

<form action="{$urls.pages.cart}" method="post">
   <input type="hidden" name="token" value="{$static_token}">
   <input type="hidden" value="{$product.id_product}" name="id_product">

   <div style="float:left;"> 
   {* saisi de la quantité *}
   <input type="number" class="input-group form-control" name="qty" value="1" style="font-weight: bold;">
   
   {* bouton sans écrit ajouter au panier *}
   <button style= "background: url(/images/logo_panier_achat.png); background-repeat : no-repeat; background-size: cover; width: 30px; height: 40px; color:black;" data-button-action="add-to-cart" {if !$product.add_to_cart_url}disabled{/if} class="btn btn-primary">{l}</button>
  
   {* bouton avec écrit ajouter au panier *}
   {*<button style= "background: url(/images/logo_panier_achat.png); background-repeat : no-repeat; background-size: cover; width: 30px; height: 40px; color:black;" data-button-action="add-to-cart" {if !$product.add_to_cart_url}disabled{/if} class="btn btn-primary">{l s='Add to cart' d='Shop.Theme.Actions'}</button>*}
{*FIN bouton ajouter au panier d'achat *} 

    </div>
	
</form>

 

ça fonctionne.

Par contre le problème est que je ne parviens pas à mettre sur la même ligne le champ de saisi et le bouton devenu image afin que ça fasse plus propre et gagner de la place, visuellement se sera plus sympa.

Si vous avez une idée pour réaliser cette action je suis preneur.

A propos des +/- non ils n'existent pas, je souhaite au juste les ajouter.

Merci d'avance pour votre aide

🙂

Bonjour, 

 

Je regarde dans la soirée pour vos bouton +/- 

Et pour l'alignement de vos blocks il faut rajouter un peu de css. un "display: inline-block;" devrait faire l'affaire. 

 

Jérémy 

[prestaprojet]

Bonjour Jéréy,

Merci pour ce retour ;

Oui en effet, c'est ce que j'indique précédemment :

Bonjour,

Voici ce que j'ai ajouté dans la div + le input + le button : display: inline-block;

et ça fonctionne très bien.

Si des améliorations peuvent être réalisés, je suis preneur et à l'écoute de vos réalisations + Tuto + partie de code à partager.

Ici l'amélioration  laquelle je pense serait d'ajouter un +/- comme évoqué précédemment ou des flèches quantités haut/bas pour incrémenter ou décrémenter la quantité.

Merci pour votre aide

:-)

Avec plaisir, j'attends ton retour pour +/-

Merci d'avance 

:-)

[Bllidz]

3 hours ago, prestaprojet said:

Bonjour Jéréy,

Merci pour ce retour ;

Oui en effet, c'est ce que j'indique précédemment :

Bonjour,

Voici ce que j'ai ajouté dans la div + le input + le button : display: inline-block;

et ça fonctionne très bien.

Si des améliorations peuvent être réalisés, je suis preneur et à l'écoute de vos réalisations + Tuto + partie de code à partager.

Ici l'amélioration  laquelle je pense serait d'ajouter un +/- comme évoqué précédemment ou des flèches quantités haut/bas pour incrémenter ou décrémenter la quantité.

Merci pour votre aide

:-)

Avec plaisir, j'attends ton retour pour +/-

Merci d'avance 

🙂

 

J'avais pas vu le second message, c'est pour ça.  

Du coup j'ai pris 5 minutes pour faire tes boutons +/- 

du coup pour l'html ça donne ça 

 <div style="float:left;"> 
   {* saisi de la quantité *}
   <button 
type="button" onClick="down();"> -
</button>
<input type="number" class="input-group form-control" id="qty" name="qty" value="1" style="font-weight: bold;">
<button 
type="button" onClick="up();"> +
</button>

J'ai rajouté un id="qty" à ton input.

ensuite pour le js 

<script language="JavaScript" type="text/javascript">
function down() {
n = document.getElementById('qty');

n.value = parseInt(n.value)-1;
}
function up() {
n = document.getElementById('qty');
//alert(n);
n.value = parseInt(n.value)+1;
}
</script>

Tu peux tester, normalement c'est good  

CDT 

Jérémy 

[prestaprojet]

Bonjour Jérémy,

Oui, je viens de tester ainsi avec le code suivant que tu proposes :

<form action="{$urls.pages.cart}" method="post">
   <input type="hidden" name="token" value="{$static_token}">
   <input type="hidden" value="{$product.id_product}" name="id_product">

<div style="float:left; display: inline-block;"> 
   
   {* Bouton - de la saisie de la quantité *}
   <button type="button" onClick="down();"> - </button>
   
   {* saisi de la quantité *}
   <input type="number" class="input-group form-control" id="qty" name="qty" value="1" style="font-weight: bold; display:inline-block;  width:35%; height:auto;">
   
   {* Bouton + de la saisie de la quantité *}
   <button type="button" onClick="up();"> + </button>
   
   {* bouton sans écrit ajouter au panier *}
   <button style= "background: url(/images/logo_panier_achat.png); background-repeat : no-repeat; background-size: cover; width: 30px; height: 40px; color:black; display: inline-block;" data-button-action="add-to-cart" {if !$product.add_to_cart_url}disabled{/if} class="btn btn-primary">{l}</button>
  
    </div>
	
<script language="JavaScript" type="text/javascript">
function down() {
n = document.getElementById('qty');

n.value = parseInt(n.value)-1;
}
function up() {
n = document.getElementById('qty');
//alert(n);
n.value = parseInt(n.value)+1;
}
</script>
	
</form>

 

A propos du fonctionnement, il y a une anomalie ;

Les Boutons - / + se positionnent parfaitement.

Quand j'incrémente ou décrémente avec le bouton +/- du premier article de ma page tout fonctionne également.

Par contre, quand je réalise la même action avec d'autres articles, c'est toujours le premier article qui est impacté à être incrémenté ou décrémenté.

Egalement, en actionnant le bouton -, la quantité peut-être nulle et même négative. Il est préférable de bloquer la quantité minimal à 1.

A propos du script JAVA, je l'ai inséré à la suite de la div comme ci-dessus. Est-ce bien à cet endroit qu'il faut l'insérer ?

Pour info, le cash vidé, les données du navigateur effacé.

Merci d'avance pour l'aide

:-)

[Bllidz]

Bonjour, 

Quote

Par contre, quand je réalise la même action avec d'autres articles, c'est toujours le premier article qui est impacté à être incrémenté ou décrémenté.

 

Surement une question d'id vu que il prends le premier sachant que l'id est "qty".  Pourrais-tu me donner le lien de la page en question ? (En mp si tu préfères).

 

 

Quote

Egalement, en actionnant le bouton -, la quantité peut-être nulle et même négative. Il est préférable de bloquer la quantité minimal à 1.

Pour cela change la fonction down() par 

function down() {
n = document.getElementById('qty');
if(parseInt(n.value)>1){
n.value = parseInt(n.value)-1;
}
}

ça devrait bloquer à 1.

Quote

A propos du script JAVA, je l'ai inséré à la suite de la div comme ci-dessus. Est-ce bien à cet endroit qu'il faut l'insérer ?

Pour le javascript tu peux le mettre ici, mais ce n'est pas très propre.. tu as surement sinon un fichier js dans ton thème.  

[prestaprojet]

Bonjour Jérémy,

Je travaille en local donc je n'ai pas la possibilité de donner la main.

Quand tu dis un problème d'id que veux-tu dire par là ?

Aussi, j'ai oublié d'indiquer qu'en version mobileça ne fonctionne pas non plus => aucune incrémentation ou décrémentation se passe après avoir cliqué sur +/- ;

Pour tester, j'ai modifié le nom de l'id dans le input et les fonctions en java => même effet.

A propos de la modification de la fonction down pour ne pas avoir une quantité nulle ou négative c'est Ok ça fonctionne en desktop et non en mobile.

En effet dans mon thème à ce chemin \themes\child_classic\assets\js\

j'ai le fichier custom.js et theme.js

J'ai utilisé le fichier custom.js où j'ai inséré le code java. 

Et ici en plaçant le code suivant 

*
 * Custom code goes here.
 * A template should always ship with an empty custom.js
 */
 
 
 /* Fonction bouton +/- dans le fichier product.tpl */
/*<script language="JavaScript" type="text/javascript">*/  /*</script>*/

function down() {
n = document.getElementById('qty');
if(parseInt(n.value)>1){
n.value = parseInt(n.value)-1;
}
}

function up() {
n = document.getElementById('qty');
//alert(n);
n.value = parseInt(n.value)+1;}

 

ça donne le même résultat, c'est toujours le premier article qui est incrémenté ou décrémenté quelque soit l'article utilisé avec les boutons +/- en Desktop. Aucun fonctionnement en mobile.

Peux-tu stp me mettre sur une piste pour la recherche d'erreur concernant les id dont tu parles ?

Merci d'avance pour ton aide

:-)

Edited September 21, 2021 by prestaprojet (see edit history)

[Bllidz]

Quote

Quand tu dis un problème d'id que veux-tu dire par là ?

Je veux dire que en gros dans le JS tu récupères la donnée grace à l'id du input avec 

n = document.getElementById('qty')

Sauf que tout les input on le même id donc normal qu'on bouge que le premier, y'a rien qui dit en gros passe au second input quand je clique ici. Je ne sais trop comment l'expliquer à l'écrit. Mais j'epsère que tu auras l'idée un peu près. 

Quote

'ai utilisé le fichier custom.js où j'ai inséré le code java. 

C'etait le bon fichier, toujours modifier dans les customs que ce soit css ou js ect..

 

Quote

Peux-tu stp me mettre sur une piste pour la recherche d'erreur concernant les id ?

Il te faudrait un id dynamique à mon sens , je peux me tromper vu que je ne suis qu'étudiant et que le js n'est pas ma spécialité  mais si en id tu mets un id dynamique chaque input n'aura pas le même id et du coup dans le js en fonction de l'id les boutons n'affecteront plus le meme input 

[prestaprojet]

Bonjour Jérémy,

Merci pour ton aide et ton retour ; c'est très clair très explication et en tout cas tu as bien cerné la problématique à résolver.

Par contre pour la mise en oeuvre de ta piste là c'est quid ? En Dynamique je n'ai pas d'idée non plus pour l'écriture du code en js ?

Espérons que des lecteurs pourront nous aider à trouver une solution pour lever cette difficulté.

Et de ton côté si tu as d'autres orientations ou idée ou ami qui pourrait aider je suis preneur !!

Merci d'avance

:-)

 

[Bllidz]

Bonjour, 

 

Qu'entends tu par "quid" ? Je me pencherai sur la problématique plus en détail sur mon local dès que j'ai un peu plus de temps (période exam donc un peu la course), si personne n'a eu d'idée avant. 

Quote

Et de ton côté si tu as d'autres orientations ou idée ou ami qui pourrait aider je suis preneur !!

hésite pas sinon a demander au "gros" du forum sinon s'ils peuvent t'aider. 

 

CDT 

Jérémy

[prestaprojet]

Bonjour Jérémy,

ça marche merci pour le retour !

Le fil de discussion est ouvert

Help Help pour corriger cette erreur d'incrémentation et décrémentation SVP

Merci d'avance

:-)

[prestaprojet]

En point de synthèse voici donc où j'en suis arrivé sur le code grâce à votre aide

mais

un problème demeure pour avoir le fonctionnement souhaité à savoir =>

 

Quand j'incrémente ou décrémente avec le bouton +/- du premier article de ma page tout fonctionne.

Par contre, quand je réalise la même action avec d'autres articles, c'est toujours le premier article qui est impacté à être incrémenté ou décrémenté.

Voici le code inséré dans le fichier  product.tpl

{* bouton ajouter au panier d'achat Avec champ de saisi de la quantité avec bouton +/- en forme de flèche *}

<form action="{$urls.pages.cart}" method="post">
   <input type="hidden" name="token" value="{$static_token}">
   <input type="hidden" value="{$product.id_product}" name="id_product">

<div>
 
 <div style="display:inline-block; vertical-align:middle">
   
   <div>
   {* Bouton + de la saisie de la quantité qui est une flèche vers le haut *}
   <button type="button" onClick="up();" class="btn input-group-btn btn-primary" style= "background: url(/images/logo_fleche_haut.png); background-repeat : no-repeat; background-size: contain; background-position:center;"></button>
   </div>
   
   <div>
  {* Bouton - de la saisie de la quantité qui est une flèche vers le bas *}
   <button type="button" onClick="down();" class="btn input-group-btn btn-primary" style= "background: url(/images/logo_fleche_bas.png); background-repeat : no-repeat; background-size: contain;  background-position:center;"></button>
   </div>
   
   </div>

 {* saisi de la quantité dans le champs quantité *}
   <input type="number" class="input-group form-control" id='qty' name="qty" value="1" style="font-weight: bold; width:35%; height:auto; display:inline-block">
    
   {* bouton sans écrit ajouter au panier qui permet de valider la quantité saisie *}
   <button style= "background: url(/images/logo_panier_achat.png); background-repeat : no-repeat; background-size: cover; width: 30px; height: 40px; color:black; display: inline-block;" data-button-action="add-to-cart" {if !$product.add_to_cart_url}disabled{/if} class="btn btn-primary">{l}</button>
    
</div>
	
</form>

Voici le code JS inséré dans le fichier custom.js

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.js
 */
 
 
 /* Fonction bouton +/- dans le fichier product.tpl */
/*<script language="JavaScript" type="text/javascript">*/  /*</script>*/
function down() {
n = document.getElementById('qty');
if(parseInt(n.value)>1){
n.value = parseInt(n.value)-1;
}

}
function up() {
n = document.getElementById('qty');
//alert(n);
n.value = parseInt(n.value)+1;}

 

Merci d'avance pour votre aide

:-)