DOCUMENTATION KAOLEY PETITES ANNONCES PARAMETRAGE DU SITE

Transcription

1 DOCUMENTATION KAOLEY PETITES ANNONCES PARAMETRAGE DU SITE

2 SOMMAIRE SOMMAIRE... 2 SELECTION CATEGORIE... 3 FORMULAIRE ANNONCE... 4 FORMULAIRE OPTION... 6 FORMULAIRE PAIEMENT... 8 MENU LIGNE... 9 CARTE INTERACTIVE - options LISTE DES ANNONCES DETAIL DE L ANNONCE INSCRIPTION CONNEXION TELECHARGEMENT PHOTOS CONTACT ANNONCEUR MODIFICATION ANNONCE (1) MODIFICATION ANNONCE (2) SUPPRESSION ANNONCE AJOUT OPTION OUBLI MOT DE PASSE LIGNE RECHERCHE Mon compte Liste annonces Liste factures ANNEXES Notion de base du CSS Valeurs par défaut

3 SELECTION CATEGORIE PublierCat.asp Module qui permet à l internaute de sélectionner une catégorie avant de publier une annonce. Présentation du module PublierCat.kp9 Perso.css cherchez : publiercat.asp Tutoriel vidéo Dans le fichier de mise en forme Perso.css. PublierCatTab01 tableau principal. PublierCatTab01Titre Ligne 1 du fichier texte. PublierCatTab01Td01 Cellule du tableau qui contient la liste des catégories. PublierCatTab01ListCat01 Zone de sélection qui contient les catégories 3

4 FORMULAIRE ANNONCE publierstd.asp Module principal de la publication d une annonce. Il arrive après la sélection de la catégorie dans laquelle l internaute va publier son annonce. Présentation du module PublierStd.kp9 Perso.css cherchez : PublierStd.asp Tutoriel vidéo Première partie du formulaire : les zones fixes obligatoires 4

5 Deuxième partie : Les zones paramétrables. Vous les paramétrez dans le back-office «CATEGORIE» ou «FIC FORM» Deuxième partie : Les images. Vous choisissez le nombre d images autorisées par annonce dans les préférences (ligne 10) Dans le fichier de mise en forme Perso.css.PublierStd0 Titre (VOS PHOTOS). Il est également défini pas la balise H7.PublierStd1 Titre des zones (Votre nom).publierstd1b Pas utilisé.publierstd1x «Cellule» des zones.publierstd2 Les zones de saisie.publierstd3 Idem, pour des zones plus longues (Titre).MsgPro Zones indiquant qu il faut être connecté.pubstdtdphoto1 Zones des photos (entourage).pubstdimg1 L image.pubstdcomment Les commentaires ou explications 5

6 FORMULAIRE OPTION publieroption.asp Ce module fait partie du processus de publication de l annonce. On a y arrive après avoir rempli le formulaire principal. Ici l internaute choisi ses options. Présentation du module PublierOption.kp9 Perso.css cherchez : publieroption.asp Tutoriel vidéo Dans la première partie de cette page où est affiché le récapitulatif de l annonce, on reprend la présentation de la page précédente PublierStd0 et PublierStd1. Pour la suite, on utilise des définitions spécifiques (voir le tableau ci-dessous).pubopt0 tableau principal.pubopt1 Définition des lignes TITRE.PubOpt1b ligne (chexbox).pubopt1c Autres lignes.pubopt2 Nom de l option et prix 6

7 .PubOpt4 Texte explicatif de l option.pubopt6 Le lien «En savoir +» Dans ce module, on affiche le prix des annonces et des options lié à la catégorie dans laquelle on publie l annonce. Ceci se paramètre dans le back-office «CATEGORIE» ou «FIC FRIX» 7

8 FORMULAIRE PAIEMENT publierfin.asp La dernière page du dépôt d annonce. Il comprend, soit un récapitulatif de la commande et éventuellement une confirmation qu un mail a été envoyé pour confirmer l annonce, soit le formulaire de paiement de l annonce et des options. Présentation du module PublierFin.kp9 Perso.css cherchez : publieroption.asp Ce module utilise la même présentation que le module PublierOption.asp Par défaut nous avons installé «PAYPAL». Pour le mettre en place, il vous suffit de saisir votre Paypal (celui avec lequel vous avez ouvert votre compte Paypal) dans les préférences du site (ligne 121) Ouvrir un compte Paypal : Nous pouvons également installer d autres modes de paiement, pour cela contactez-nous! 8

9 MENU LIGNE ListeLien1.asp Vous avez la possibilité de paramétrer 3 menus ligne différents. Tout se paramètre depuis le backoffice. La présentation est pilotée par un fichier «Css» construit automatiquement depuis le backoffice. Comment paramétrer le menu? Dans le back-office, cliquez sur «MODULE», onglet «AUTRES», «Menu Ligne N x» Tri : permet de classer les différentes lignes du menu Titre : c est le texte affiché <b>titre</b> met ce titre en gras Style texte : police taille et couleur du titre Style cellule : définit les paramètres de la cellule dans laquelle est inscrit le titre Les zones importantes sont hauteur et largeur. La somme des largeurs de toutes les cellules ne doit pas être supérieure à la largeur totale du site (1000 pixels). Style Image : définit l image de fond de la cellule Lien Html : lien vers la page quand on clique sur le titre Cliquez sur la petite image pour ouvrir la liste des liens possibles Destination : même cadre ou nouvelle page Une fois que vous avez paramétré une ligne cliquez sur «ENREGISTER» et vérifiez le résultat. Pour ajouter un nouveau choix au menu cliquez sur «NOUVEAU». 9

10 CARTE INTERACTIVE - options selcarte.asp Ce module est une option payante. Les textes du module sont paramétrables directement au niveau du module. Pour y accéder depuis le back-office : «MODULE», onglet «PAGE», cliquez sur «Modifier» sur la ligne «Carte Interactive». Il y a 3 textes modifiables : 1. Au-dessus de la carte, 2. A droite de la carte, 3. Au-dessous de la carte Les couleurs de la carte sont modifiables, mais uniquement par un technicien. Si vous souhaitez les changer, veuillez nous contacter par mail en nous indiquant les couleurs souhaitées. 10

11 LISTE DES ANNONCES PageSearch.asp Ce module affiche la liste des annonces. Ont y accède de 2 façons différentes : avec le formulaire de recherche ou par lien direct. Comment doit être construit le lien direct? Une région : ex : /petites-annonces/alsace html ALSACE : texte libre (pas d espace, pas de caractère spéciaux) 21 : n de la région (voir liste en annexe) Un département : ex : /petites-annonces/tarn html TARN : texte libre (pas d espace, pas de caractère spéciaux) 81 : n du département Une ville : ex : /petites-annonces/castres html CASTRES : texte libre (pas d espace, pas de caractère spéciaux) : code postal de la ville Une catégorie : ex : /petites-annonces/petites-annonces-voitures html petites-annonces-voitures : texte libre (pas d espace, pas de caractère spéciaux) 2632: n de la catégorie Il est important que toutes les autres zones restent identiques Présentation du module PageSearch.kp9 Perso.css cherchez : PageSearch.asp 11

12 Description des zones de mise en forme dans le fichier Perso.css.ListTab tableau principal.listcol1 Description de la colonne date. ListImg Description de la colonne Image. ListDet Description de la colonne Détail. ListLienTitre Style du lien (uniquement sur le titre). ListPrix Style de la zone prix Si option encadré OP1.ListCol1OP1 Description de la colonne date. ListImgOP1 Description de la colonne Image. ListDetOP1 Description de la colonne Détail. ListLienTitreOP1 Style du lien (uniquement sur le titre). ListPrixOP1 Style de la zone prix Si option fluo OP2.ListCol1OP2 Description de la colonne date. ListImgOP2 Description de la colonne Image. ListDetOP2 Description de la colonne Détail. ListLienTitreOP2 Style du lien (uniquement sur le titre). ListPrixOP2 Style de la zone prix pagination Style des boutons pour passer d une page à l autre.paginationactif Page active 12

13 DETAIL DE L ANNONCE annoncecontact.asp Détail de l annonce. On accède à cette page en cliquant sur les liens dans la liste des annonces ou dans les annonces «A la UNE». Vous pouvez aussi faire un lien direct. Voici comment construire ce lien : /detail-annonces/titre html TITRE : texte libre (pas d espace, pas de caractères spéciaux) 2632: n de l annonce Présentation du module AnnonceContact.kp9 Perso.css cherchez : AnnonceContact.asp Sur cette page les visiteurs voient le détail de l annonce, ils peuvent également prendre contact avec l annonceur ainsi que partager l annonce sur leurs réseaux sociaux. Le «propriétaire» de l annonce peut gérer son annonce (modifier, supprimer, etc.) Description des zones de mise en forme dans le fichier Perso.css. DetAH1 Titre de l annonce. DetAL1 Juste en dessous du titre «mise en ligne». DetATabPrinc tableau principal 13

14 . DetAImg Zone de l image. DetImg Style grande image. DetAVignette Style de la zone des vignettes. DetAInfos1 Style de la zone «prix». DetAInfos2 Style du prix. DetAInfos1b Style des autres zones (texte). DetAInfos2b Style des autres zones (données). DetADescript Style de la zone description. DetACarte Style de la zone «carte Google». DetATabPrincTd Style de la colonne de droite. DetATabContact Style du tableau «contactez l annonceur» et «gérez votre annonce». DetATabContactL1 Style du titre. DetATabContactLa Style de la colonne image. DetATabContactLb Style de la colonne données pagination Style des boutons pour passer d une page à l autre.paginationactif Page active Pour paramétrer la pub sous la table «Gestion», allez dans le back-office, «GESTION PUB» et créez un nouvel enregistrement. Paramétrage des zones : Nom du programme Emplacement Catégorie Département Code HTML k=detail-annonces Colonne2 Vide (s affichera quelle que soit la catégorie de l annonce) ou une catégorie. Vide (s affichera quel que soit le département de l annonce) ou un département. La publicité à afficher. Si vous avez un script ou du code HTML avant de le «coller», cliquez sur source 14

15 INSCRIPTION inscription.asp Ce module permet la création d un compte client. Présentation du module PageAccesClient.kp9 Perso.css cherchez : Inscription.asp Description des zones de mise en forme dans le fichier Perso.css. TabInscrip Table principale. TdTabInscrip1 Colonne des libellés des zones. TdTabInscrip2 Colonne des zones de saisie. TabInscripX1 Style de la zone de saisie 15

16 CONNEXION PageAccesClient.asp Ce module permet au client de se connecter. Dès que l on veut accéder à une page pour laquelle on doit être connecté, si ce n est pas le cas, on est automatiquement redirigé vers cette page de connexion. Présentation du module PageAccesClient.kp9 et Module Perso.css cherchez : PageAccesClient.asp Description des zones de mise en forme dans le fichier Perso.css. AccesClient01 Colonne connexion. AccesClient02 Colonne texte inscription 16

17 TELECHARGEMENT PHOTOS Upload9.asp Ce module est appelé quand l internaute veut télécharger une image. Ce module n est pas paramétrable. Si vous voulez modifier quelque chose, contactez-nous 17

18 CONTACT ANNONCEUR envoimail.asp On accède à cette page depuis la page détail annonce. Elle permet au visiteur de contacter le «propriétaire de l annonce» AnnonceContact.kp9 (à partir de la ligne 30) Présentation du module Perso.css cherchez : EnvoiMail.asp Ce module est divisé en 2 parties : 1. Le formulaire d envoi dans cette partie les styles sont spécifiques. 2. Le récapitulatif de l annonce ici on reprend la même présentation que pour le détail de l annonce. Description des zones de mise en forme dans le fichier Perso.css (partie spécifique). EnvoiMailTab Tableau principal. EnvoiMailTd1 Style de la 1ère colonne. EnvoiMailTd2 Style de la colonne 2. EnvoiMailTd3 Style du 1 er avertissement. EnvoiMailTd4 Style du 2 ième avertissement. EnvoiMailText Style de la zone de texte 18

19 MODIFICATION ANNONCE (1) MajAnnonce.asp On accède à cette page depuis la page détail annonce. Ceci est la première partie du module, il permet de modifier, supprimer et d ajouter des options à l annonce. Pour la modification et la suppression, il faut donner le mot de passe pour pouvoir continuer. L ajout d options est libre il est peu probable que quelqu un paye pour ajouter des options sur une annonce qui n est pas la sienne. Présentation du module MajAnnonce.kp9 Présentation identique au module PublierOption (page 6) 19

20 MODIFICATION ANNONCE (2) MajAnnonce2.asp On accède à cette page depuis la page modification annonce (1), après que le mot de passe ait été saisi et qu il soit valide. Ce module utilise le même paramétrage de texte que le module de publication d annonce. Les textes spécifiques se trouvent à partir de la ligne 61. Idem pour la présentation Présentation du module PublierStd.kp9 Perso.css identique à publier annonce cherchez : PublierStd.asp 20

21 SUPPRESSION ANNONCE MajAnnonce2.asp Il s agit du même module que pour la modification. 21

22 AJOUT OPTION MajOption2.asp On accède à cette page depuis la page modification annonce (1), après avoir choisi une ou plusieurs options. Ce module utilise le même paramétrage de texte que le module de Publication Paiement. Idem pour la présentation Présentation du module PublierFin.kp9 Perso.css identique à publier paiement cherchez : PublierFin.asp 22

23 OUBLI MOT DE PASSE OubliMdp.asp On accède à cette page depuis la page d identification client. Ce module utilise le même paramétrage de texte que le module Identification Client (page 000). PageAccesClient.kp9 23

24 LIGNE RECHERCHE ModuleSearch.asp Ce module s affiche uniquement dans la liste des annonces. La première ligne représente la base du module. Les textes se trouvent dans le fichier LigneSearch.kp9. La deuxième partie est construite automatiquement à partir des fichiers paramètres (.kp5) des zones complémentaires (Voir doc en annexe) Présentation du module LigneSearch.kp9 Perso.css cherchez : ModuleSearch.asp Description des zones de mise en forme dans le fichier Perso.css (partie spécifique). TabSearch Tableau principal. TdSearch3 Style des cellule standard. TdSearch4 Style de la cellule «CHERCHER». TdSearchAide Style des cellules «Aide» (en dessous de zones). TabSearchComp Table des données complémentaires. TdSearchLib Cellule du libellé de la zone. TabSearchComp Cellule des données 24

25 Mon compte MonCompte.asp Ce module permet la gestion du compte client. A partir de là, le client peut gérer ses annonces et ses informations personnelles. Pour y accéder, il faut être connecté. Présentation du module MonCompte.kp9 et module Perso.css cherchez : MonCompte.asp C est un module général qui appelle d autres modules pour gérer: Les annonces : voir Liste Annonce Compte (page 26) Les informations personnelles : Inscription (page 15) Description des zones de mise en forme dans le fichier Perso.css (partie spécifique). MonCompteTab01 Tableau principal. MonCompteTd01 Ligne des onglets. MonCompteTd02 Ligne des «données». Onglet L onglet. OngletActif L onglet actif 25

26 Liste annonces PageSearchc.asp Ce module permet la gestion du compte client. A partir de là le client peut gérer ses annonces et ses informations personnelles. Pour y accéder il faut être connecté. Présentation du module PageSearch.kp9 Perso.css cherchez : PageSearchC.asp Description des zones de mise en forme dans le fichier Perso.css (partie spécifique). MonComteLtd1 1ère colonne (Titre). MonComteLtd2 Colonne prix 26

27 Liste factures factures.asp Ce module affiche la liste des factures du client. Pour qu une facture soit faite au client, il faut que celui-ci ait un compte ouvert. Si le client achète des options sans avoir de compte client, la facture ne pourra pas être générée. Présentation du module factures.kp9 Perso.css cherchez : factures.asp Description des zones de mise en forme dans le fichier Perso.css (partie spécifique). FactTab1 Tableau principal. FactTd1 Ligne 1 (Titre colonne). FactTd2 Ligne données Quand on clique sur la référence, la facture détaillée s affiche au format PDF (facilement imprimable et téléchargeable par le client) Le format de cette facture n est pas paramétrable. Si vous voulez le modifier, contactez-nous pour un devis. Les textes se trouvent dans le fichier factures.kp9 27

28 28

29 ANNEXES Notion de base du CSS Appelé également : Feuille de style ou CSS. Qu est-ce que c est? CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et est pris en charge par les navigateurs web depuis les années Quelques notions de base du CSS Pour chaque commande, il y a 2 parties séparées par deux points ( : ) Les commandes sont séparées par des points-virgules ( ;) Voici la structure : Commande : valeur ; commande 2 : Valeur Voici les commandes de base qui vous seront utiles. Si vous avez un doute, n hésitez pas à nous contacter pour nous dire ce que vous souhaitez faire et nous vous guiderons. font-family:verdana font-size:10px color:#0000ff font-weight:bold background-color:#e2eafb border:1px solid #bfd0f5 height:37px vertical-align:middle vertical-align:middle width:250px la police du texte est Verdana La taille du texte est de 10 pixels. Peut aussi être exprimée en points : pt La couleur du texte est le code Hexadécimal 0000FF Le style du texte est bold gras La couleur du fond est e2eafb La bordure fait 1 pixel, est pleine (pas de pointillés) et la couleur est bfd0f5 Cellule du libellé de la zone Hauteur de 37 pixels (d une cellule par exemple) L alignement vertical se fait au milieu Largeur de 250 pixels (d une cellule par exemple) Pour approfondir : 29

30 Valeurs par défaut Liste des valeurs par défaut. Utilisées dans les données complémentaires et la recherche. dim atabtyp1(19) ' type1 (O3) atabtyp1(0) = " ;0;" atabtyp1(1) = " ;20;" atabtyp1(2) = " ;25;" atabtyp1(3) = " ;30;" atabtyp1(4) = " ;35;" atabtyp1(5) = " ;40;" atabtyp1(6) = " ;50;" atabtyp1(7) = " ;60;" atabtyp1(8) = " ;70;" atabtyp1(9) = " ;80;" atabtyp1(10) = " ;90;" atabtyp1(11) = " ;100;" atabtyp1(12) = " ;110;" atabtyp1(13) = " ;120;" atabtyp1(14) = " ;130;" atabtyp1(15) = " ;140;" atabtyp1(16) = " ;150;" atabtyp1(17) = " ;200;" atabtyp1(18) = " ;300;" atabtyp1(19) = " ;500;" dim atabtyp2(12) ' type2 (O4) atabtyp2(0) = " ;0;" atabtyp2(1) = " ;10 000;" atabtyp2(2) = " ;20 000;" atabtyp2(3) = " ;30 000;" atabtyp2(4) = " ;40 000;" atabtyp2(5) = " ;50 000;" atabtyp2(6) = " ;60 000;" atabtyp2(7) = " ;70 000;" atabtyp2(8) = " ;80 000;" atabtyp2(9) = " ;90 000;" atabtyp2(10) = " ; ;" atabtyp2(11) = " ; ;" atabtyp2(12) = " ; ;" Liste des prix par défaut. Utilisé dans les données complémentaires et la recherche. dim atabprix1(25) ' Prix 1 (p1) atabprix1(0) = " ;0;" atabprix1(1) = " ;25 000;" atabprix1(2) = " ;50 000;" atabprix1(3) = " ;75 000;" atabprix1(4) = " ; ;" atabprix1(5) = " ; ;" atabprix1(6) = " ; ;" atabprix1(7) = " ; ;" atabprix1(8) = " ; ;" atabprix1(9) = " ; ;" atabprix1(10) = " ; ;" atabprix1(11) = " ; ;" atabprix1(12) = " ; ;" atabprix1(13) = " ; ;" 30

31 atabprix1(14) = " ; ;" atabprix1(15) = " ; ;" atabprix1(16) = " ; ;" atabprix1(17) = " ; ;" atabprix1(18) = " ; ;" atabprix1(19) = " ; ;" atabprix1(20) = " ; ;" atabprix1(21) = " ; ;" atabprix1(22) = " ; ;" atabprix1(23) = " ; ;" atabprix1(24) = " ; ;" atabprix1(25) = " ; ;" dim atabprix2(20) ' Prix 2 (p2) atabprix2(0) = " ;0;" atabprix2(1) = " ;250;" atabprix2(2) = " ;500;" atabprix2(3) = " ;750;" atabprix2(4) = " ;1000;" atabprix2(5) = " ;1500;" atabprix2(6) = " ;2000;" atabprix2(7) = " ;2500;" atabprix2(8) = " ;3000;" atabprix2(9) = " ;3500;" atabprix2(10) = " ;4000;" atabprix2(11) = " ;4500;" atabprix2(12) = " ;5000;" atabprix2(13) = " ;5500;" atabprix2(14) = " ;6000;" atabprix2(15) = " ;6500;" atabprix2(16) = " ;7000;" atabprix2(17) = " ;7500;" atabprix2(18) = " ;8000;" atabprix2(19) = " ;8500;" atabprix2(20) = " ;9000;" dim atabprix3(18) ' Prix 3 (p3) atabprix3(0) = " ;0;" atabprix3(1) = " ;10;" atabprix3(2) = " ;20;" atabprix3(3) = " ;30;" atabprix3(4) = " ;40;" atabprix3(5) = " ;50;" atabprix3(6) = " ;60;" atabprix3(7) = " ;70;" atabprix3(8) = " ;80;" atabprix3(9) = " ;90;" atabprix3(10) = " ;100;" atabprix3(11) = " ;150;" atabprix3(12) = " ;200;" atabprix3(13) = " ;250;" atabprix3(14) = " ;300;" atabprix3(15) = " ;400;" atabprix3(16) = " ;500;" atabprix3(17) = " ;750;" atabprix3(18) = " ;1000;" 31