Wiki.cerpeg : Page créée avec «  fichier:home2.png Accueil > CMS Prestashop > L’entreprise & ses informations == LES COORDONNÉES == {| border="0" |'''CONFIGURER / Paramètres de la boutiques / Contacts''' Il convient de renseigner les coordonnées de l’entreprise, elles apparaitront sur les documents commerciaux générés (factures, avoirs, etc.). |Fichier:Ent1.png|vignette... »

2022-10-14T19:21:16Z

Page créée avec «  fichier:home2.png Accueil > CMS Prestashop > L’entreprise & ses informations == LES COORDONNÉES == {| border="0" |'''CONFIGURER / Paramètres de la boutiques / Contacts''' Il convient de renseigner les coordonnées de l’entreprise, elles apparaitront sur les documents commerciaux générés (factures, avoirs, etc.). |Fichier:Ent1.png|vignette... »

Nouvelle page

[[fichier:home2.png]] [[Accueil|Accueil]] > [[ Magasins en ligne|CMS Prestashop]] > L’entreprise & ses informations

== LES COORDONNÉES ==
{| border="0"
|'''CONFIGURER / Paramètres de la boutiques / Contacts''' 

Il convient de renseigner les coordonnées de l’entreprise, elles apparaitront sur les documents commerciaux générés (factures, avoirs, etc.).

|[[Fichier:Ent1.png|vignette|200 px |Menu d'accès 1]]
|[[Fichier:Ent3.png|vignette|200 px |Menu d'accès 2]]
|-
|Il convient d’indiquer le nom de l’entreprise, son immatriculation, son adresse et son téléphone.
|
|[[Fichier:Ent2.png|vignette | BACK OFFICE Coordonnées de la boutique]]
|-
|VUE DU SITE
|
|[[Fichier:Ent4.png|FRONT OFFICE Coordonnées de la boutique|vignette]]
|}
{{#evt:service=youtube|id=https://youtu.be/Bittjy4mSTY|dimensions=380x220}}
 

== LE LOGO ==

{| border="0"
|'''PERSONNALISER / APPARENCE / Thème et logo''' 

Attention à la taille du logo, elle doit correspondre à l’endroit où il sera visible.
|
[[Fichier:Ent5.png|vignette| Accès]]
|-
|Il convient d'importer le fichier en respectant la taille <4>. Le logo apparait dans l'en-tête du site. Il convient <5> d'enregistrer les changement pour les voir apparaitre.

|[[Fichier:Ent6.png|vignette|LOGO du site]]
|-
| Il est possible d'insérer un logo dans les mails envoyés depuis la boutique et sur les factures générées. Ces logos peuvent être différents du précédent.

|[[Fichier:Ent7.png|vignette|LOGO des mails et des factures]]
|-
|Le favicon est une icône informatique symbolisant un site internet. Ici, le logo du site marchand.
Il est possible de modifier directement l'extension du fichier en .ico (la transformation du fichier image en .ico peut se faire à l'aide d'un convertisseur en ligne)
|[[Fichier:Ent8.png|vignette|BACK OFFICE Favicon]]
|-
|[[Fichier:Ent8-1.png|vignette|100 px|Vue en front Office]]
|[[Fichier:Ent8-2.png|vignette|Vue en front Office]]
|}
{{#evt:service=youtube|id=https://youtu.be/ZDf_i_I-8Qg|dimensions=380x220}} 

== LA PAGE D'ACCUEIL ==
{|border="0"
|-
|
Il convient d'informer le visiteur sur l'entreprise, les produits, etc. Le "Footer" ou pied de page permet d'avoir accès à ces informations sur toutes les pages éventuellement.
|
|[[Fichier:foot01.png|vignette|FRONT OFFICE Page d'accueil - renseignements]]
|-
|
'''PERSONNALISER / Apparence / Pages'''
 

====A propos ou nous connaitre====

Le contenu de la page est important puisqu'il doit renseigner le visiteur sur l'entreprise. La balise titre et l'URL simplifiées sont renseignées par défaut, il convient éventuellement de modifier ces mots clés pour optimiser le référencement ([[Les URL et le référencement|cf URL & référencement]]).
|
|[[Fichier:foot02.png|vignette|Page d'accueil - A propos ou Nous connaitre]]
|-
|
====Mentions légales====

Tous les sites internet édités à titre professionnel, qu'ils proposent des ventes en ligne ou non, doivent obligatoirement indiquer les mentions légales. [https://www.service-public.fr/professionnels-entreprises/vosdroits/F31228 Lire...].
|
|[[Fichier:foot03.png|vignette|Page d'accueil - Mentions légales]]

|-
|

====RGPD - Politique de confidentialité====
La politique de confidentialité est une forme de contrat qui explique en détail le mode de collecte, le classement, le traitement ainsi que la publication et la suppression des données à titre personnel transmises par les utilisateurs dans le cadre d’une relation commerciale.

Cette politique est adoptée dans le cadre du RGPD et de la loi dite « informatique et libertés » (la loi n°2018-493 du 20 juin 2018 relative à la protection des données personnelles pour les questions de traitement de données à caractères personnels) pour garantir une information concise, transparente et compréhensible pour le client ou l’utilisateur qui transmet ses informations à caractère personnel. Elle permet aux personnes concernées de :
* connaître les raisons de la collecte d’information personnelle ;
* s’informer sur les procédés de traitement appliqués à leurs données ;
* vérifier la sécurité de leurs données sensibles ;
* faciliter l’exercice de leurs droits.
|
|
[[Fichier:RGDP-confidentialite.png|vignette|Page d'accueil - Politique de confidentialité RGPD]]
|-
|
* Exemple d'une publication sur un site marchand de politique de confidentialité
::7. Article Gestion des données personnelles
:::7.1 Responsables de la collecte des données personnelles
:::7.2 Finalité des données collectées
:::7.3 Droit d’accès, de rectification et d’opposition
:::7.4 Non-communication des données personnelles
:::7.5 Types de données collectées
::8. Notification d’incident
::9. Liens hypertextes « cookies » et balises (“tags”) internet
:::9.1. « COOKIES »
:::9.2. BALISES (“TAGS”) INTERNET

::'''Téléchargez un exemple de politique de confidentialité [http://54.38.225.88/videos/documents/exemple-RGPD.pdf]'''
|-
|

====Conditions de vente CGV====
Les sites commerciaux de vente de biens ou de services sur internet sont soumis à une réglementation identique à celle de la vente à distance ou par correspondance (VPC), comprenant des obligations déclaratives (protection des consommateurs, TVA), des mentions obligatoires, des règles précises de prospection, par exemple. [https://www.service-public.fr/professionnels-entreprises/vosdroits/F23455 Lire....]
|
|
[[Fichier:foot04.png|vignette|Page d'accueil - Conditions générales de vente]]
|-
|

::'''Téléchargez un exemple de CGV Conditions Générales de Vente [http://54.38.225.88/videos/documents/exemple-CGV.pdf]'''
|-
|

====Paiements sécurisés====
Le paiement peut être effectué lors de la commande ou à la livraison contre remboursement (dans ce cas des frais supplémentaires peuvent être appliqués).
Le vendeur peut proposer différents types de paiement : paiement crypté, par carte bleue (CB), par porte-monnaie électronique, par SMS, par le fournisseur d'accès à internet (FAI), notamment.Pour le paiement par CB, le commerçant doit souscrire un contrat de vente à distance avec sa banque. [https://www.service-public.fr/professionnels-entreprises/vosdroits/F23455 Lire...]. Il est alors recommandé d'informer l'internaute des moyens de règlement.
|
|[[Fichier:foot05.png|vignette|Page d'accueil - Paiement sécurisé]]
|-
|

====Positionner les éléments de la page====

'''PERSONNALISER / Apparence / Position''' 
|-
|Les éléments des pages et plus précisément ici de la page d'accueil peuvent être disposés selon l'effet recherché. 
* <1> Afficher tout ou partie des pages du site 
* <2> Cliquer/glisser pour déplacer les éléments de la page
|[[Fichier:acc01.png|vignette|Position des blocs 1]]
|[[Fichier:acc02.png|vignette|Position des blocs 2 clic-glissé]]
|-
|
====Afficher les liens dans le Footer====
 

'''PERSONNALISER / Modules / Modules manager''' Le '''Footer''' constitue le pied de page du site. Une fois les informations saisies dans les CGV, la politique de confidentialité, etc. il faut les afficher sur le site en pied de page.
* <1> Rechercher dans la liste le module '''Liste de liens'''
* <2> Configurer le module
* <3> Modifier "Notre société"
* <4> Cocher les informations à afficher

|
[[Fichier:footer01.png|vignette|Gestionnaire de modules - Liste des liens 1]]
|[[Fichier:footer02.png|vignette|Gestionnaire de modules - Liste des liens 2]]
|-
|Ce module est aussi accessible à partir du menu '''Thème et logo'''/ Configuration page d'accueil / Footer
* <1> Accéder à la configuration
* <2> Sélectionner "configuration page d'accueil"
* <3> Dérouler "Footer"
* <4> Configurer les liens
|[[Fichier:footer03.png|vignette|apparence / thème et logo Configuration page d'accueil]]
|}

== LES MOYENS DE RÈGLEMENT==
 
{| border="0"
|
'''PERSONNALISER / Modules > Chèque ou Virement ou CB''' 

La configuration du virement ou du règlement par chèque <3> est indispensable au bon fonctionnement du module et à la bonne information du client. Cette configuration se fait à partir des modules <Personnaliser/Modules -1- >. L'onglet <Notification -2-> alerte sur la configuration du module <4>.
|
|[[Fichier:Ent14.png|vignette|Accès au module]]
|-
|La configuration du module diffère selon le type de règlement par virement ou par chèque.

|[[Fichier:Ent14-1.png|vignette|200 px|Configuration règlement par chèque]]
|[[Fichier:Ent14-2.png|vignette|200 px|Configuration du règlement par virement]]
|-
|Il convient de faire avancer le statut de la commande pour la confirmer (voir [[Les commandes]]). 
<1> Le règlement par chèque est "En attente de paiement par chèque". <2> Une fois le chèque reçu, le statut doit être changé manuellement "Paiement accepté". <3> Il convient de "Mettre à jour l'état" pour rendre visible l'avancement du règlement dans le compte client et générer la livraison-facturation.
|
|[[Fichier:Ent17.png|vignette|Suivi du statut du règlement du la commande]]
|}

{{#evt:service=youtube|id=https://youtu.be/ZeHSVEop75w/ZS6jwWheTWU|dimensions=380x220}}

== LA GESTION DES MENUS==

'''PERSONNALISER / Modules ''' 
{| border="0"
|
'''Onglet Modules installés ''' 
* <1> Recherche du module "MENU" dans la liste des modules installés
* <2> Configuration du menu pour ajouter des menus
* <3> Visualisation de la liste des menus affichés
* <4> Ajout d'un menu à la liste existante
|[[Fichier:menu1.png|vignette|Modules MENU]]
|[[Fichier:menu2.png|vignette|Configuration du menu]]
|}

Cette vidéo présente la création d'une catégorie et son rattachement au menu du site à l'aide de 2 exemples
* Exemple 1 : deux catégories existantes (épicerie et produits du marché) doivent être rattachées à une nouvelle catégorie "alimentation". Cette nouvelle catégorie doit s'afficher sur le menu du site. Il convient de retirer les 2 catégories existantes du menu du site.
* Exemple 2 : une catégorie "Offres promotionnelles" doit s'afficher sur le site. Les produits en promotion doivent apparaître lorsque l'internaute accède à ce menu.
{{#evt:service=youtube|id=https://youtu.be/NUTGJMGplx8|dimensions=380x220}}

== LE CARROUSEL ==
{| border="0"
|
'''PERSONNALISER / Modules ''' 
|-
|
'''Onglet "Modules installés" ''' 
|-
|-
|Le slideshow contient par défaut 3 images qui défilent selon les actions définies dans le paramétrage. Il est recommandé de ne pas utiliser plus de 7 slides.
|-
|

* <1> Recherche du module "CARROUSEL" dans la liste des modules installés
* <2> Configuration du carrousel
|
|[[Fichier:carrousel1.png|vignette|Modules CARROUSEL]]
|-
|
* <3> Paramétrage des actions des slides
* <4> Ajout des slides. La taille de l'image doit être de 1110 x 340 pixels. Il est possible d'ajouter du texte à l'image mais le référencement ne pourra pas se faire à ce niveau.
|
[[Fichier:carrousel2.png|vignette|Configuration CARROUSEL1]]
|[[Fichier:carrousel3.png|vignette|Configuration CARROUSEL2]]
|}

{{#evt:service=youtube|id=https://youtu.be/bTZK5OboaBc|dimensions=380x220}}

== LA BANNIÈRE ==

Une bannière web (ou publicité Internet) est une image Internet (souvent animée). Elle est en général en haut de page, bas de page et côté latéral
d'un site Internet. Son but est de promouvoir un produit, un site, un service lors d'une campagne publicitaire en ligne. 
{| border="0"
|
Sa position en TOP de page bénéficie d'une excellente lisibilité de l'internaute. Cette zone permet d'annoncer une promotion.
* <1> Cherche du module dans la liste
* <2> Configuration du module BANNIERE
|
[[Fichier:ban01.png|vignette|Modules BANNIERE]]
|-
|
* <3> Image de la bannière : taille recommandée 1110 x 214 pixels
* <4> Lien de la bannière : lorsque le un visiteur clique sur la bannière, le lien défini renvoie sur une autre page. A défaut, le renvoi se fait sur la page d'accueil.
* <5> Description pour la bannière : accroche client

|[[Fichier:ban02.png|vignette|configuration de la bannière]]
|}

== LA GESTION DES IMAGES ==

Une image trop lourde impacte sur la vitesse de chargement de la page. Il s'agit d'un critère important puisqu'il va non seulement décourager
l'internaute mais aussi les robots (spiders).
 
OpenSource de gestion de l'image : Xconvert[https://www.xnview.com/fr/xnconvert/], PhotoFiltre [http://www.photofiltre-studio.com/download.htm], Paint.net [https://www.getpaint.net/], Paint pour windows
 

=== Formats, dimension & poids d'images===
{| border="0"
|
3 formats de fichiers sont privilégiés :
* JPEG : format compressé, fichier léger, mais avec perte de qualité de résolution et pas de transparence. '''À utiliser pour les photos'''
* PNG : format recommandé par le W3C (World Wide Web Consortium[https://www.w3c.fr/a-propos-du-w3c-france/la-mission-du-w3c/]). Ce format conserve la transparence de l'image mais il est un peu lourd. '''À utiliser pour les logos en transparence et images avec très peu de couleurs'''
* GIF : moins utilisé que les 2 précédents, il permet de prendre en charge l'animation. '''À utiliser occasionnellement en raison du poids du fichier'''

Si le fichier image est trop lourd, il existe des compresseurs en ligne assez efficaces selon le format de fichier.
* compresser un fichier PNG [https://compresspng.com/fr/]
* compresser un fichier JPEG[https://compressjpeg.com/fr/]
* convertir png en jpeg[https://png2jpg.com/] ou jpeg en png[https://jpg2png.com/]
* I-IMG [https://www.iloveimg.com/fr] : outil en ligne pour travailler l'image (compresser, redimensionner, recadrer, convertir un format jpg en png, etc)
|}
La résolution, les dimensions et le poids du fichier (données indicatives)
{| class="wikitable alternance"

! scope=col | Résolution
! scope=col | Dimension H x L
! scope=col | Poids du fichier
|-
! width="50%" | 100 dpi
| 364 x 559 px
| 596 ko
|-
! width="10%" | 200 dpi
| 728 x 1118 px
| 2,33 Mo
|-
! scope="row" |300 dpi
| 1092 x 1677 px
| 5,24 Mo
|-
! scope="row" |800 dpi
| 2912 x 4472 px
| 37,3 Mo
|}

=== Dimension des images===

* '''résolution d'une image''' : nombre de pixels à savoir sa "dimension informatique". WordPress redimensionne automatiquement les images trop grandes. Il est donc inutile de téléverser une image d'une largeur de 2000 px si la largeur maximale prise en compte par le site est de 720 px en raison de son poids. Le poids d'origine est conservé malgré l'adaptation de l'image : difficulté d'affichage, lenteur.
:: Redimensionner une image avec Paint
:: Redimensionner une image avec Paint.net
:: Redimensionner un lot d'images avec XnConvert[https://www.xnview.com/fr/xnconvert/].

* '''nommage de l'image''' : il ne faut pas négliger le nommage puisqu'il participe activement au référencement du site. Le nommage doit décrire l'image. Le téléversement de fichier impose de bannir : espaces, accents, majuscules et autres caractères exotiques (ex : image_amenagement-du-pres_2020.png)
WordPress propose une extension facilitatrice du nommage des images pour un meilleur référencement et éviter les oublis[https://fr.wordpress.org/plugins/media-file-renamer/]
 
 

=== Quelques astuces techniques ===
{| border="0"
|
* '''Connaitre les propriétés de l'image'''
:: '''clic droit''' sur l'image pour accéder au menu contextuel
:: Sélectionner '''"Propriétés"'''
:: '''-1- Général''' Taille 1,14 Mo. Ce fichier est trop lourd, l'image ne va pas s'afficher correctement c'est-à-dire avec fluidité
:: '''-2- Détails''' cette image est trop grande d'où son poids. Elle fait H (height) 6000 x L (width)4058 px. Il faut modifier ses dimensions
|
[[Fichier:Wp-image proprietes.png|vignette|Propriété d'un fichier]]
|-
|
* '''Modifier les dimensions de l'image H x L''' 
La modification des dimensions peut se faire avec paint très rapidement.
:: '''-1-''' Ouverture du fichier image, '''Redimensionner'''
:: '''-2-''' Pourcentage ou Pixels selon l'action à mener.
:: '''-3-''' 500 px de hauteur en laissant les proportions. Le réglage de la largeur se fait automatiquement
:: '''-4-''' Sélection de la conservation des proportions ou non
:: '''-5-''' Affichage de l'image redimensionnée
:: '''-6-''' Visualisation des propriétés de ce nouveau fichier : 627 Ko et 749 x 500 px
|
[[Fichier:wp-dimension1.png|vignette|Paint - Redimensionner une image]]
|-
|Le fichier est encore un peu lourd 627 ko, il faut le compresser à l'aide d'une compresseur en ligne
:: '''-7-''' Téléversement du fichier dans l'application en ligne permettant la compression (ici, à 75 %)
:: '''-8-''' Poids après '''compression 135 ko'''. Ceci est parfait pour l'affichage sur le site
|
[[Fichier:wp-dimension2.png|vignette|Compression du png]]
|-
|
* Ajouter une transparence à l'image
|}
{{#evt:service=youtube|id=https://youtu.be/c4vphUrkpWE|dimensions=380x220}}

L’entreprise & ses informations - Historique des versions