modifier l'affichage des modules de paiement

[kerlin]

Bonjour, sur un PS 1.6.1.14, je souhaite que les 4 modules de paiement s'affichent l'un à côté de l'autre au lieu d'être l'un en-dessous de l'autre. Il y a les modules Paypal, paiement par carte bancaire/Paypal, Paiement par Amazon et Comnpay.
L'inspecteur m'indique que il y a une div row pour chaque. Je l'ai trouvée dans les tpl pour 3 d'entre eux mais pas pour le module paiement par cartebancaire/paypal. Je souhaite pour chaque rajouter  col-xs-12 col-md-3.Du coup, je ne peux pas le faire pour ce module. Où donc cette div se cache-t-elle si elle n'est pas dans le fichier ? L'inspecteur montre deux balises pour ce module : div class = row  et div class = col-xs-12 col-md-6 avant p class=payment_module.
Mais dans express_checkout_payment.tpl du module creditcardpaypal, cela commence directement par la balise p.

J'ai cherché partout sans trouver où se trouvaient ces balises div qui entourent p.
Quelqu'un aurait-il une idée ? Je sèche !

 

Merci d'avance !

[doekia]

themes/xxx/order-payment.tpl ou themes/xxx/order-payment-advanced.tpl ou themes/xxx/order-payment-classic.tpl

[Manu-41]

Bonjour, sur un PS 1.6.1.14, je souhaite que les 4 modules de paiement s'affichent l'un à côté de l'autre au lieu d'être l'un en-dessous de l'autre. Il y a les modules Paypal, paiement par carte bancaire/Paypal, Paiement par Amazon et Comnpay.

L'inspecteur m'indique que il y a une div row pour chaque. Je l'ai trouvée dans les tpl pour 3 d'entre eux mais pas pour le module paiement par cartebancaire/paypal. Je souhaite pour chaque rajouter  col-xs-12 col-md-3.Du coup, je ne peux pas le faire pour ce module. Où donc cette div se cache-t-elle si elle n'est pas dans le fichier ? L'inspecteur montre deux balises pour ce module : div class = row  et div class = col-xs-12 col-md-6 avant p class=payment_module.

Mais dans express_checkout_payment.tpl du module creditcardpaypal, cela commence directement par la balise p.

J'ai cherché partout sans trouver où se trouvaient ces balises div qui entourent p.

Quelqu'un aurait-il une idée ? Je sèche !

 

Merci d'avance !

Bonjour,

quel fichier as tu modifié? car c'est une modif que je cherche à faire.

merci pour tes infos

[kerlin]

Merci Doekia, de te pencher sur mon souci.

Hélas ce n'est pas cela. Ce serait trop simple :-(

 

Donc, comme je disais, le tpl de creditcardpaypal n'a pas de div.
Par contre, dans les tpl de paypal, il y a bien 

<div class="row col...">
 <div class ="col..."
   <p class="payment_module_paypal">...</p>
 </div>
</div>
<div class="row">
 <div clas="col ...">
    <p class="payment_module">...</p>
 </div>
</div>

Mais l'inspecteur montre dans "payment_module" 

<a href="javascript:void(0)" onclick="$('paypal_payment_form_credit_card')submit();" id="paypal_process_payment_credit_card" title="Payez par carte de crédit">
<img src="url_site/modules/creditcardpaypal/img/logos/ES_Paypal_logo....gif">

Et cela je ne le vois dans aucun fichier.
 

Pour voir, j'ai modifié les valeurs de <div class="row" > dans les tpl de Paypal, pensant que peut-être le tpl de creditcardpaypal venait remplacer le <p class="payment_module"> mais cela ne change rien.

 

Je m'arrache les cheveux !! 

Si tu souhaites voir le truc, je t'envoie l'url en MP ainsi que mes identifiants client.

Merci !!

[kerlin]

Bonjour,

quel fichier as tu modifié? car c'est une modif que je cherche à faire.

merci pour tes infos

 

Pour Paypal : express_checkout_payment.tpl qui est dans module/paypal/views/hooks. Tu règles la première div class=row col-xs-12 col-md-X" xs-12 affiche sur toute la largeur sur les petits écrans. md-X où X représente le nombre de colonnes sur 12. Donc si tu veux afficher 4 modules de paiement en largeur, tu mets md-3 (car 12 : 4 = 3).

 

Pour Amazon, c'est le fichier payment.tpl.

 

Pour Comnpay, c'est aussi payment.tpl

[Manu-41]

Pour Paypal : express_checkout_payment.tpl qui est dans module/paypal/views/hooks. Tu règles la première div class=row col-xs-12 col-md-X" xs-12 affiche sur toute la largeur sur les petits écrans. md-X où X représente le nombre de colonnes sur 12. Donc si tu veux afficher 4 modules de paiement en largeur, tu mets md-3 (car 12 : 4 = 3).

 

Pour Amazon, c'est le fichier payment.tpl.

 

Pour Comnpay, c'est aussi payment.tpl

Merci pour ces infos.

Je n'utilise plus paypal depuis plusieurs années, je ne peut donc t'aider la dessus.

J'ai réussi à les mettres les uns à coté des autres, mais il n'ont plus les mêmes dimensions en hauteur. Je cherche à mettre le texte en dessous de l'image, sait tu comment faire? cela réglerai le problème de hauteur je pense.

[kerlin]

Merci pour ces infos.

Je n'utilise plus paypal depuis plusieurs années, je ne peut donc t'aider la dessus.

J'ai réussi à les mettres les uns à coté des autres, mais il n'ont plus les mêmes dimensions en hauteur. Je cherche à mettre le texte en dessous de l'image, sait tu comment faire? cela réglerai le problème de hauteur je pense.

 

J'ai ajouté un line-height=25px qui semble avoir réglé le problème de hauteur tout en laissant l'image à gauche. Par contre j'ai ajouté un float:left à l'image pour que le texte ne coule pas dessous

[Manu-41]

J'ai ajouté un line-height=25px qui semble avoir réglé le problème de hauteur tout en laissant l'image à gauche. Par contre j'ai ajouté un float:left à l'image pour que le texte ne coule pas dessous

ou as tu ajouté line-height?

pour avoir le texte en dessous de l'image, un idée?

[kerlin]

Merci pour ces infos.

Je n'utilise plus paypal depuis plusieurs années, je ne peut donc t'aider la dessus.

J'ai réussi à les mettres les uns à coté des autres, mais il n'ont plus les mêmes dimensions en hauteur. Je cherche à mettre le texte en dessous de l'image, sait tu comment faire? cela réglerai le problème de hauteur je pense.

Manu1238, tu as mis les tpl modifiés dans le dossier modules du thème ? Chez moi, il ne les prend pas en compte.

Pour le line-height, ça marchait bien hier. Aujourd'hui, les boutons n'ont plus les mêmes hauteurs ! va comprendre, Charles !

[Manu-41]

J'ai trouvé, avec du temps... mais j'ai trouvé.

certains modules utilise le global.css, et d'autre le css de leur module.

 

Le rendu est TOP!

 

Bon courrage

[kerlin]

J'ai trouvé, avec du temps... mais j'ai trouvé.

certains modules utilise le global.css, et d'autre le css de leur module.

 

Le rendu est TOP!

 

Bon courrage

Perso, je mets tout dans global.css avec !important (et en commentant) cela me permet de retrouver toutes mes modifs d'un coup. 

Comment as-tu fait ? Pour ma part, j'allais justement te dire comment j'ai modifié :-) J'ai ajouté <br /> après l'image dans le tpl. Et dans le css je lui ai dit d'aligner au centre. Pour le module Amazon, j'ai modifié la traduction pour que cela tienne sur une ligne.

Voilà déjà une chose de faite. Mais j'ai dû désactiver le module creditcardpaypal car impossible de lui donner une largeur. L'utilises-tu ?

[Manu-41]

Perso, je mets tout dans global.css avec !important (et en commentant) cela me permet de retrouver toutes mes modifs d'un coup. 

Comment as-tu fait ? Pour ma part, j'allais justement te dire comment j'ai modifié :-) J'ai ajouté <br /> après l'image dans le tpl. Et dans le css je lui ai dit d'aligner au centre. Pour le module Amazon, j'ai modifié la traduction pour que cela tienne sur une ligne.

Voilà déjà une chose de faite. Mais j'ai dû désactiver le module creditcardpaypal car impossible de lui donner une largeur. L'utilises-tu ?

Non, je n'utilise plus paypal depuis longtemps.

J'ai aussi modifié la traduction sur les modules CB,chèque,virement,mandat,paiement à la livraison.

Tout est sur une ligne.

 

Prochaine étape, et de donner des images en couleurs à la place du gris.

[doekia]

Perso, je mets tout dans global.css avec !important (et en commentant) cela me permet de retrouver toutes mes modifs d'un coup. 

Comment as-tu fait ? Pour ma part, j'allais justement te dire comment j'ai modifié :-) J'ai ajouté <br /> après l'image dans le tpl. Et dans le css je lui ai dit d'aligner au centre. Pour le module Amazon, j'ai modifié la traduction pour que cela tienne sur une ligne.

Voilà déjà une chose de faite. Mais j'ai dû désactiver le module creditcardpaypal car impossible de lui donner une largeur. L'utilises-tu ?

! Very important

Lol

[Manu-41]

Perso, je mets tout dans global.css avec !important (et en commentant) cela me permet de retrouver toutes mes modifs d'un coup. 

Comment as-tu fait ? Pour ma part, j'allais justement te dire comment j'ai modifié :-) J'ai ajouté <br /> après l'image dans le tpl. Et dans le css je lui ai dit d'aligner au centre. Pour le module Amazon, j'ai modifié la traduction pour que cela tienne sur une ligne.

Voilà déjà une chose de faite. Mais j'ai dû désactiver le module creditcardpaypal car impossible de lui donner une largeur. L'utilises-tu ?

Hum, sur le rendu mobile, les cases se chevauchent, une solution?

[Manu-41]

Perso, je mets tout dans global.css avec !important (et en commentant) cela me permet de retrouver toutes mes modifs d'un coup. 

Comment as-tu fait ? Pour ma part, j'allais justement te dire comment j'ai modifié :-) J'ai ajouté <br /> après l'image dans le tpl. Et dans le css je lui ai dit d'aligner au centre. Pour le module Amazon, j'ai modifié la traduction pour que cela tienne sur une ligne.

Voilà déjà une chose de faite. Mais j'ai dû désactiver le module creditcardpaypal car impossible de lui donner une largeur. L'utilises-tu ?

Donc pour le rendu sur écran normal, cela se fait parfaitement, mais pour les smartphones, les cases se chevauchent.

 

j'ai mis ceci dans les pages payment des modules:

<div class="none">
	<div class="col-xs-3 col-md-3">
        <p class="payment_module">

J'ai oublié quelque chose?

[Manu-41]

en cherchant, j'ai testé avec col-xs-12 col-md-3 et tous s’affichent bien sur les écrans.