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:27

Là il y en a 2.

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:19

La méthode?

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

Euh,

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

Donc ici,

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:03

Normalement.

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:08

Vous voyez ici.

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

C'est en.

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:14

Je fais ça.

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:37

On va.

00:07:39

Donc Network.

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:48

Donc, euh.

00:07:49

Qu'est-ce qu'on peut constater,

00:07:51

c'est que, euh.

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

Euh,

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:09

Euh.

00:08:09

En 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:20

vous inversé,

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:30

Celui-là.

00:08:31

En fait,

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:44

Dans le client,

00:09:45

il voit les couleurs du visa mastercard.

00:09:46

Tout de suite.

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:09

Mais qui a qui?

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:47

Donc voilà,

00:10:48

il reste plus qu à faire la même

00:10:50

chose de votre côté.

00:10:51

Euh,

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:58

Si vous,

00:10:59

euh,

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.

L'étape du paiement

LES COURS ASSOCIÉS

Création d'une boutique de E-commerce