00:00:01
Donc aujourd'hui on va voir ensemble
00:00:03
comment optimiser en fait la page
00:00:06
de paiement dans presta shop.
00:00:08
Un point 7. Donc si on vérifie,
00:00:11
qu'est-ce que ça donne?
00:00:13
Dans notre page de paiement.
00:00:15
Ajouter un article.
00:00:16
Donc quand on arrive à l'étape donc de
00:00:19
paiement voilà comment ça se présente.
00:00:22
On a donc la mention payer par chèque,
00:00:24
payer par virement bancaire et
00:00:26
compris d'autres méthodes de paiement.
00:00:30
Est ce que je reproche en fait à cette étape,
00:00:32
c'est que finalement.
00:00:33
Quant au premier coup deuil,
00:00:35
quand on voit cet emplacement,
00:00:36
bah on n'a pas l'impression qu'on peut.
00:00:38
Euh pardon si imaginons qu'on a même
00:00:40
les cartes de crédit ou autre chose,
00:00:42
ce n'est pas très visible.
00:00:44
Il faut lire le texte pour comprendre
00:00:46
ce que c'est et ça c'est à mon avis,
00:00:49
c'est un inconvénient.
00:00:49
J'aime bien les clients,
00:00:51
ils aiment bien voir le logo pour se
00:00:53
dire Ah OK je vois de quoi il s'agit
00:00:55
sans forcément devoir lire le texte.
00:00:57
Donc ça semble être un détail
00:00:59
mais qui a son importance déjà
00:01:00
juste pour rassurer le client,
00:01:02
un logo ça fait toujours mieux qu'un texte.
00:01:05
Donc, comment faire?
00:01:06
Comment faire cette mise en place?
00:01:08
Donc déjà je vais aller, euh,
00:01:11
dans mon projet. Et je vais aller.
00:01:15
Dans la partie thème.
00:01:17
Classique. Je t'aime plate.
00:01:21
Je vérifie où est-ce que c'était?
00:01:23
Je sais pas si c'était le Tchèque à août.
00:01:28
Et puis il va y avoir normalement.
00:01:32
Euh, une partie dédiée au paiement
00:01:35
acceptés dans le step paiement.
00:01:40
Alors c'est ici,
00:01:40
donc je parle pas très très clair,
00:01:42
je vais le mettre en fait dans la.
00:01:45
Je vais mettre tout à l'heure
00:01:47
dans le dans la description.
00:01:50
Donc dans la description de la vidéo,
00:01:52
donc je suis copier le chemin.
00:01:55
Voilà donc, si on reprend,
00:01:58
c'est dans le thème classique temp late,
00:02:02
check out. Partial,
00:02:03
step, paiement, belle.
00:02:05
Est-ce qu'on voit en fait dans cette,
00:02:08
euh, dans ce fichier sec avant même
00:02:10
de faire des modifications là-dedans?
00:02:14
J'ai vu qu'il y avait ça.
00:02:15
Un peu après coup donc apparemment une option
00:02:18
pour afficher le logo du paiement salon.
00:02:20
J'ai regardé un petit peu dans presta
00:02:22
shop et j'ai pas vu les éléments
00:02:24
qui peuvent être faire ça donc je
00:02:25
sais pas si c'est déjà en vigueur
00:02:27
ou bien si c'est pour la suite.
00:02:29
En tout cas dans l'état actuel j'ai
00:02:30
pas réussi à le faire fonctionner,
00:02:32
où j'ai pas bien regardé et j'ai pas bien lu.
00:02:35
donc si jamais vous avez trouvé l'option,
00:02:37
vous savez comment ça fonctionne.
00:02:39
Hésitez pas à laisser un
00:02:41
commentaire en dessous de la vidéo.
00:02:43
on va utiliser une méthode plus artisanale,
00:02:46
donc ce que j'ai fait, c'est, euh.
00:02:48
C'est on va rajouter en fait
00:02:51
un petit extrait de code.
00:02:53
Eux, ont déjà, peut-être voilà,
00:02:56
on va directement rajoute l'extrait de code.
00:02:59
Et on va mettre ce code e.
00:03:06
Je suis horrifié où j'avais mis
00:03:08
parce que là je suis plus très sûr,
00:03:10
donc j'avais injecter ce code.
00:03:16
Alors? Je vais prendre mon fichier
00:03:19
d'exemple. Je regardais comment
00:03:21
j'avais fait dans celui là.
00:03:23
Donc j'avais ajouté ça en dessous du live.
00:03:28
Okay, donc en dessous de ce dives,
00:03:30
donc ça veut dire juste avant ce petit
00:03:32
commentaire qui ont séparé de toi,
00:03:33
il faut rajouter en fait le.
00:03:35
Euh, le code, ce code suivant,
00:03:37
donc vous pouvez trouver dans
00:03:39
l'archive un dans l'archive en
00:03:41
pièce jointe sur sur l'article du.
00:03:44
Sur l'article 18 du billet qui
00:03:46
parle de de de de cette intégration?
00:03:49
Donc si vous êtes sur youtube,
00:03:50
vous cliquez en dessous dans la description.
00:03:52
Vous avez le lien vers le billet.
00:03:54
Donc je fais ça.
00:03:56
Et aussi ce qu'il faut faire,
00:03:59
c'est il faut ajouter à.
00:04:02
Alors? Retourner dans plus loin
00:04:04
dans le répertoire du thème,
00:04:07
donc ça veut dire dans le fichier temp
00:04:09
point CSS qui se trouve donc toujours,
00:04:12
si je reprends au début de
00:04:14
la relation système.
00:04:15
Classiques, template.
00:04:19
Euh, non là, je me trompe, hein?
00:04:23
Donc ce thème classique, c'est à 76 6S.
00:04:28
Et puis au fond en fête de ces,
00:04:31
est-ce vous avez fichier TMC SS.
00:04:33
Là on a le tutoriel précédent
00:04:36
qu'on avait fait quelque chose.
00:04:39
Donc je rajoute en fait les nouvelles règles.
00:04:43
Oe nouvelles règles en fait,
00:04:44
en fait, vous permettre de
00:04:47
faire afficher un logo.
00:04:48
Donc je mets toujours un
00:04:49
petit commentaire comme ça.
00:04:50
Je sais exactement qu'est-ce que ça fait?
00:04:52
Donc c'est les règles.
00:04:53
Pour afficher le logo et
00:04:55
ça concerne le tutoriel 9.
00:05:00
Ensuite. Ce qu'on va faire,
00:05:02
c'est qu'on va peut-être
00:05:03
ajouter maintenant le logo,
00:05:04
donc moi, ce que j'ai fait c'est,
00:05:06
j'ai fait juste de logo là.
00:05:11
Alors pourquoi je ne vois pas?
00:05:13
Je sais pas si c'est parce
00:05:15
qu'il est peut-être transparent.
00:05:17
Je devrais peut-être Photoshop.
00:05:25
Donc j'en ai fait 2 comme ça.
00:05:30
La journée fait, j'ai préparé 212 logo.
00:05:33
D'ailleurs, il y aura le fichier pst.
00:05:36
Avec eux, il y a le modèle de D 2 logo
00:05:40
dedans, ça en fait j'étais chercher
00:05:43
directement sur vous pour aller
00:05:45
sur sur sur flat icône par exemple.
00:05:48
Pour chercher exemple, je sais pas.
00:05:51
Bon coin ailleurs. Alors il trouve pas,
00:05:54
je mets banque, par exemple.
00:05:58
Et puis vous avez des icônes, et cetera,
00:06:00
donc il faut aller sur un site déco.
00:06:02
Ne vais essayer d'avoir des icônes,
00:06:04
IE uniformes pour que ça ça
00:06:06
pour que ça se présente bien.
00:06:09
C'est pas ça, donc ici en fait dans dans
00:06:13
ce que je montre c'est on a fait 2 icônes.
00:06:17
2 icônes fond noir, donc ça,
00:06:19
c'est un fond noir sur un fond blanc,
00:06:22
mais 2 icônes noir,
00:06:24
donc quelque chose d'assez classique.
00:06:26
Donc, qu'est-ce qu'on fait ensuite?
00:06:29
On va mettre en fait ces fiches,
00:06:32
ces icônes dans le répertoire de votre thème.
00:06:35
Euh. Donc je vais prendre ces 2 icônes.
00:06:40
Je vais aller dans le dossier de mon thème.
00:06:45
Alors je vais vérifier,
00:06:46
donc ça veut dire dans presta shop
00:06:49
TM je vais aller dans classique.
00:06:51
Je suis allé dans Asset,
00:06:52
je vais aller dans IMIMG, donc non,
00:06:54
il n'y a que le logo du thème
00:06:56
et j'ai copié ces 2 images.
00:06:59
Notez bien que j'ai pas que
00:07:01
j'ai pas mis en fin.
00:07:04
J'ai mis un an à sexe pistols.
00:07:07
Image s'appelle paiement hop trait d'union
00:07:10
option trait d'unionun.png paiement trait
00:07:12
d'union option trait d'uniondeux.png.
00:07:17
Euh, je recharge ma page.
00:07:21
Les logos sont apparus.
00:07:24
Euh, par contre,
00:07:25
on voit que la mise en forme
00:07:26
ne correspond pas vraiment.
00:07:28
Si vous êtes sous, euh, chrome,
00:07:29
des fois il faut vider le cache alors on
00:07:31
peut faire comme ça, on appuie sur F 12.
00:07:34
Une console qui s'ouvre.
00:07:39
On regarde ce que je cache bien désactivé.
00:07:43
Il y a bien là, coche, je recharge la page.
00:07:45
Et ça fonctionne.
00:07:49
Qu'est-ce qu'on peut constater,
00:07:53
Personnellement, je trouve.
00:07:54
Ça fait toute la différence à un client
00:07:56
qui voit ça qu'une présentation.
00:07:57
Je trouve que ça fait quand même
00:07:59
vraiment mieux pour le paiement.
00:08:01
ici si on analyse juste la source
00:08:04
juste pour comprendre comment
00:08:06
comprendre quand même ce qu'on a fait.
00:08:10
Le les logo sont déterminés en
00:08:12
fonction de le nom du logo est
00:08:14
déterminé en fonction de la
00:08:15
position de la méthode de paiement,
00:08:17
c'est-à-dire si vous faites le tri
00:08:19
au niveau des méthodes de paiement,
00:08:21
il faudra inverser aussi le nom d logo.
00:08:23
Là, j'ai pas pu faire autrement.
00:08:25
Donc en fait si on regarde dans notre
00:08:28
fichier qu'on a qu'on a modifié.
00:08:32
on voit qu'on appelle juste le
00:08:35
url de notre thème,
00:08:36
donc le le url de de du dossier du thème.
00:08:40
Puis après on nous disait
00:08:41
leurs options ai dit,
00:08:43
ça veut dire le le numéro en fête de la
00:08:45
méthode de paiement paiement une 234,
00:08:48
et cetera. Donc là j'en ai fait avec 2
00:08:51
mais si on avait en plus on aurait pu
00:08:53
juste en aurait eu qu'a rajouter un autre
00:08:56
logo là-dedans dans notre répertoire
00:08:58
ING paiement option 23 et cetera. Euh,
00:09:02
donc si si ça s'affiche pas correctement,
00:09:04
pensez donc à juste vider le cache où
00:09:07
vider le cache de votre navigateur.
00:09:09
Si vous avez pas réussi à activer la
00:09:12
console avec F 12 et aller là-dedans,
00:09:15
donc Network désactiver le cache.
00:09:18
C'est vrai que ça semble un détail
00:09:20
comme ça d'avoir le logo niveau
00:09:22
de la méthode de paiement,
00:09:23
mais je trouve que c'est vraiment important.
00:09:25
Euh. Ici, j'ai utilisé des logo
00:09:28
qui sont noires pour un souci,
00:09:30
on va dire esthétique pour rester
00:09:33
dans un peu l'uniforme avec avec
00:09:35
le l'ensemble du temp late.
00:09:37
Mais ça peut être une bonne
00:09:39
idée aussi d'utiliser des logo.
00:09:40
On va dire de en couleur,
00:09:41
surtout par exemple pour les
00:09:43
cartes de crédit, et cetera.
00:09:45
il voit les couleurs du visa mastercard.
00:09:47
Il comprend qu'il peut payer avec
00:09:48
la carte de crédit et je trouve
00:09:50
que c'est toujours beaucoup plus
00:09:52
explicite quand on a le logo.
00:09:56
Donc vous allez retrouver
00:09:57
toutes les ressources là,
00:09:58
directement sur le sur le billet du blog.
00:10:01
Elle était chargée,
00:10:02
où faire des copier coller? Euh.
00:10:04
Finalement, c'est on va dire que
00:10:07
c'est une petite optimisation.
00:10:10
À mon avis sont importants.
00:10:11
C'est parce que la première fois
00:10:13
que j'ai fait le que j'ai fait
00:10:15
le le processus de commande,
00:10:16
je me suis dit, mais il y a un problème,
00:10:19
il est où le logo du de
00:10:20
la méthode de paiement?
00:10:22
Puis après, je me suis dit,
00:10:24
Ah non mais c'est peut-être
00:10:25
une nouvelle option.
00:10:26
C'est peut-être un nouveau design comme ça.
00:10:28
Et ça, c'est vrai que c'est quelque chose.
00:10:30
Un des éléments qui m'avait
00:10:31
moyennement convaincu.
00:10:32
Du coup, cette petite mise en forme,
00:10:34
vraiment, un simple donc juste
00:10:35
ajouter ça dans le fichier paiement,
00:10:37
point tpl et modifiée,
00:10:38
juste le thème CSS en ajoutant ces 2 règles.
00:10:41
Eh bien, ça permet de de compenser.
00:10:43
On va dire sa petite, ce petit détail.
00:10:48
il reste plus qu à faire la même
00:10:50
chose de votre côté.
00:10:52
si vous avez des suggestions ou des remarques
00:10:54
par rapport à cette manière de faire,
00:10:56
je n'étais pas à laisser un commentaire.
00:10:59
vous avez peut-être d'autres suggestions
00:11:01
pour pour la suite ou d'autres éléments
00:11:04
que vous dites que c'est important
00:11:05
d'optimiser dans la version un point.
00:11:08
7 hésitez pas à laisser un message.
00:11:10
Je vous remercie de toujours
00:11:12
me suivre et et d'être fidèle.
00:11:14
Et si vous aimez les vidéos,
00:11:16
hésitez pas à vous abonner à la
00:11:19
chaîne youtube et moi je vous
00:11:22
dis à la semaine prochaine.
Il n’existe aucun élément correspondant à votre recherche dans cette vidéo...
Effectuez une autre recherche ou
retournez au contenu !