WORDPRESS Espace client sous Wordpress

Ce module a été développé pour que vous puissiez proposer à vos clients un espace membre sur votre site, dans lequel ils pourront trouver :

• Les coordonnées que vous avez enregistrées (utile s'il déménage et qu'il ne sait pas sous quelle adresse il est connu)
• Ses devis
• Ses factures (avec un lien vers un paiement Paypal)
• Ses documents
• Ses commandes
• Ses interventions

Acheter en ligne sur la boutique LCP Studio Extension LCP Studio proposée au prix de 290€ HT.

Dans Gestan, vous créez pour un contact un accès à son espace client. Il sera alors automatiquement reporté dans Wordpress. Une fois que le client se connecte à votre site, il pourra voir les informations qui le concernent : coordonnées, devis, factures, commandes, documents et interventions.

Voilà une présentation en video de la simplicité d'utilisation.

(vous pouvez mettre cette video en plein écran.)

Vous pouvez installer librement l'extension, disponible via l'écran de gestion des ressources Gestan dans une version valable 30 jours. Si elle vous convient, passez commande de la version de production, via ce formulaire. Nous vous enverrons la version de production, qui sera valide pour toutes les machines de votre entreprise, et la facture correspondante.

L'installation et le paramétrage sont décrits en détail dans le tutorial ci-dessous, conçu pour que vous puissiez réaliser l'opération tout seul. Cependant, nous pouvons aussi réaliser l'installation et le paramétrage, selon deux formules :

• une formule comprenant l'installation sur votre site Web, et la mise en cohérence graphique du plugin wordpress si elle est nécessaire
• une formule comprenant la création ou la reprise de votre site web sous wordpress, avec l'intégration du module wordpress pour Gestan.

Voir conditions sur la page de commande sur le site de Gestan (ce lien).

Il vous faut :

• Un site sous Wordpress
• Un accès FTP
• L'extension Gestan pour Wordpress disponible ici gestan.zip

Il faut que votre base MySql soit accessible depuis l'extérieur, ce qui n'est pas toujours le cas chez tous les hébergeurs. Il vous faut aussi un peu d'espace disque (1 facture~=60Ko), mais ce point est très rarement bloquant.

Installez normalement l'extension “Gestan pour Wordpress”.

• connectez-vous comme administrateur au backoffice de votre site (habituellement, “www.votresite.fr/wp-admin”)
• allez sur la page des extensions puis cliquez sur le bouton “ajouter”.
• cliquez sur le bouton “Mettre une extension en ligne” puis sélectionnez le fichier “Gestan.zip” précédemment téléchargé.
• enfin, activez l'extension.

Cette extension va créer 7 tables dans la base de données de votre site Wordpress: une pour les clients, une pour les factures, une pour les devis, une pour les interventions, une pour les commandes, une pour les documents et enfin une pour les paramétrages.

Elle créée également des shortcodes (Un shortcode dans Wordpress est un petit code entre crochets ([ ]) qui permet une multitude de fonctionnalités. Vous pouvez placer ces shortcodes n'importe où : dans une barre latérale, une page, un article, etc… avec toute la puissance de Wordpress).

Concrètement, vous pouvez utiliser les shortcodes Gestan pour afficher les données qui seront envoyées par Gestan. Par exemple, si vous mettez “[Gestan_Prenom]” dans une page, il remplacera ce shortcode par le prénom de l'utilisateur connecté.

En voici la liste complète:

• [Gestan_Email]: Email du contact
• [Gestan_Civilite]:Civilité courte du contact
• [Gestan_Prenom]: Prénom du contact
• [Gestan_Nom]: Nom du contact
• [Gestan_Raison_Sociale]: Raison sociale de la société
• [Gestan_Adresse1]: 1ère ligne d'adresse du contact
• [Gestan_Adresse2]: 2ème ligne d'adresse du contact
• [Gestan_CP]: Code postal du contact
• [Gestan_Ville]: Ville du contact
• [Gestan_Telephone_Portable]: Téléphone portable du contact
• [Gestan_Telephone_Fixe]: Téléphone fixe du contact
• [Gestan_Date_Naissance]: Date de naissance du contact
• [Gestan_Coordonnees]: L'ensemble des coordonnées du contact (les éléments non-renseignés ne seront pas affichés)
• [Gestan_Factures]: Affiche un tableau contenant un résumé des factures, avec la possibilité de les télécharger et/ou de les payer
• [Gestan_Factures telechargeable=“faux”]: Affiche un tableau contenant un résumé des factures, sans possibilité de les télécharger
• [Gestan_Facture tri=“vrai”]: Tri les factures par raison sociale de société.
• [Gestan_Devis]: Affiche un tableau contenant un résumé des devis, avec la possibilité de les télécharger
• [Gestan_Devis telechargeable=“faux”]: Affiche un tableau contenant un résumé des devis, sans possibilité de les télécharger
• [Gestan_Devis tri=“vrai”]: Tri les factures par raison sociale de société.
• [Gestan_Interventions]: Affiche un tableau contenant un résumé des interventions, avec la possibilité de les télécharger
• [Gestan_Interventions telechargeable=“faux”]: Affiche un tableau contenant un résumé des interventions, sans possibilité de les télécharger
• [Gestan_Commande]: Affiche un tableau contenant un résumé des commandes, avec la possibilité de les télécharger
• [Gestan_Commande telechargeable=“faux”]: Affiche un tableau contenant un résumé des commandes, sans possibilité de les télécharger
• [Gestan_Commande tri=“vrai”]: Tri les factures par raison sociale de société.
• [Gestan_Commande livraison=“faux”]: Affiche un tableau contenant un résumé des commandes, sans affichage de la date de livraison
• [Gestan_Document]: Affiche un tableau contenant un résumé des documents, avec la possibilité de les télécharger
• [Gestan_Document tri=“Projet”]: Affiche un tableau contenant un résumé des documents, triés par projet.

TIP Les options sont cumulables: vous pouvez par exemple faire un shortcode [Gestan_Commande telechargeable=“faux” livraison=“faux”] !

Les pages sont automatiquement créées depuis la version 1.4 de l'extension (mais vous pourriez aussi tout mettre sur une seule page, ou ajouter d'autres pages selon les besoins), par exemple :

une page coordonnées

Bonjour [Gestan_Prenom],

Bienvenue dans votre espace client, dans lequel vous pourrez retrouver devis et factures émis par blabla, et régler en ligne si vous possédez une carte bancaire ou un compte Paypal.

Voici vos coordonnées telles que nous les avons enregistrées. Si elles sont inexactes, demandez-nous de les corriger.

[Gestan_Civilite] [Gestan_Prenom] [Gestan_Nom]
[Gestan_Coordonnees]

une page devis

Voici la liste des devis établis à votre intention :

[Gestan_Devis]

une page factures

Voici la liste des factures établies pour votre compte.

[Gestan_Factures]

Créez les menus pour afficher ces trois pages (Selon votre thème WordPress, vous pouvez utiliser une extension comme Widget Logic pour afficher ce menu sur certaines pages et pas d'autres).

Pour gérer l'aspect Espace Membre, vous pouvez utiliser le suffixe wp-admin sur votre site ou une extension faite pour cela (Vous pouvez utiliser “Member Access”)

Pour la page de connexion, faites une page “Espace Membre”, avec par exemple ce simple formulaire :

<form name="loginform" id="loginform" action="http://www.blabla.com/wp-login.php" method="post"> 
<p class="login-username">
<label for="user_login">Identifiant</label>
<input type="text" name="log" id="user_login" class="input" value="" size="20">
</p>

<p class="login-password">
<label for="user_pass">Mot de passe</label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20">
</p>

<p class="login-remember">
<label><input name="rememberme" type="checkbox" id="rememberme" value="forever"> Se souvenir de moi</label> | <a href="http://www.blabla.com/wp-login.php?action=lostpassword">Mot de passe oublié</a>
</p>

<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Se connecter">
<input type="hidden" name="redirect_to" value="http://www.blabla.com/vos-coordonnees/">
</p> 
</form>

WARNING N'oubliez pas de déclarer la visibilité de ces pages comme privées !

Installez l'extension Gestan. Pour cela, via Outils > Administration > Ressources complémentaires et cherchez le module nommé “GESTAN_WORDPRESS”, puis cliquez sur “Install”. Il sera alors automatiquement téléchargé et installé. Pensez à l'activer !

Les extensions, qu'elles soient de démonstration ou de production, sont installées dans le répertoire des ressources du programme “Data Utilisateur” (vous pouvez ouvrir ce répertoire via Outils > Administration > Répertoires et fichiers, cf ci dessous).

Ouvrez la fenêtre de paramétrages via Outils > Paramètre de l'application > Paramétrage des Add-Ons > Espace client Wordpress.

Vous avez la possibilité de recevoir des paiements Paypal depuis votre site. Pour cela, vous devez indiquer:

• Adresse Paypal de réception des paiments : un email rattaché à un compte Paypal sur lequel vous recevrez les paiements.
• Page de retour si le paiement est accepté : l'URL complète de retour si le paiement a abouti (une page créée disant au client que le paiement a bien été reçu)
• Page de retour si le paiement est refusé : l'URL complète de retour si le paiement est refusé ou qu'il a été annulé (une page créée disant au client que le paiement n'a pas abouti)
  

Dans cet onglet, créez un message-type qui pourra être envoyé au client une fois son accès créé.

Là aussi, utilisez les mots-clés disponibles de Gestan :

• %CIVILITE%: Civilité courte du contact
• %PRENOM%: Prénom du contact
• %NOM%: Nom du contact
• %EMAIL%: Email du contact
• %TELEPHONE_PORTABLE%: Téléphone portable du contact
• %TELEPHONE_DOMICILE%: Téléphone domicile du contact
• %ADRESSE1%: 1ère ligne d'adresse du contact
• %ADRESSE2%: 2ème ligne d'adresse du contact
• %CP%: Code postal du contact
• %VILLE%: Ville du contact
• %CHAINE_ALEATOIRE%: Mot de passe généré aléatoirement

Cet onglet vous permet d'entrer les accès à la base SQL.

• Adresse du serveur: Adresse URL ou IP de votre serveur de base de données
• Nom de la base de données: Nom de la base de données Worpdress
• Utilisateur: Nom d'utilisateur ayant accès à la base (avec droits de lecture et d'écriture)
• Mot de passe: Mot de passe de l'utilisateur lié à la base
• Préfixe de la base: Préfixe de la base Wordpress, “wp_” par défaut

Afin d'envoyer les factures et devis sur le serveur, le module a besoin d'un accès FTP.

• Serveur FTP: L'adresse ftp de votre serveur (souvent le nom de domaine précédé de “ftp.”)
• Nom d'utilisateur: Le nom d'utilisateur de l'accès FTP
• Mot de passe: Le mot de passe lié à l'utilisateur pour l'accès FTP
• Numéro de port: Le port utilisé pour l'accès FTP (par défaut, 21, qui correspond à une connexion non-sécurisée)

La case “Afficher un popup en fin d'opération” permet d'afficher une fenêtre discrète en bas à droite de votre écran pour vous signaler la fin du traitement de transmission des factures et devis.

Les pièces seront uploadés dans des dossiers nominatifs (“Factures” par exemple), puis classés par ID de contact Gestan.

Vous pouvez voir via Métier > Espace client Wordpress > Liste des accès la liste des accès en cours.

Vous pouvez également supprimer l'accès d'un client via cette fenêtre.

Le bouton “Ajouter” permet d'accéder à la …

Qui permet de créer un accès pour un nouveau client ou un client existant.

En cochant la case “envoyer un mail de création de compte”, un aperçu d'email sera visible avec les mots de passe client.

Les factures et devis existants pour ce client seront également automatiquement télé-versés vers Wordpress (cela peut prendre un certain temps suivant votre ordinateur et votre connexion Internet).

Toutes les 30 minutes, une routine exportera automatiquement vos pièces pour les accès existant. Vous n'avez donc rien à faire. Elle est pas belle la vie ?

Via Métier > Espace client Wordpress > Outils, vous avez accès à un écran qui permet de vérifier quels sont les pièces/documents/interventions à synchroniser. Trois états sont disponibles à la lecture des enregistrements:

• A jour: Tout va bien, la pièce a déjà été transmise et est à jour.
• A importer : La pièce nécessite d'être synchronisée, et cela n'a jamais été fait auparavant.
• Mise à jour : La pièce a déjà été envoyée vers Wordpress, mais a été modifiée dans Gestan depuis.

Vous pouvez décider de ne lire qu'uniquement les pièces d'un contact via le bouton “Vérifier pour un contact” et en saisissant son ID (que vous pouvez trouver dans la table des contacts de Gestan).

Une fois la lecture effectuée, cochez les cases des pièces à transférer, puis cliquez sur “Synchroniser”.

ATTENTION: ces manipulations sont réservées à ceux qui en sont capables ! Nous ne serons pas tenus pour responsables si vous faites des bêtises !

Déjà, vous pouvez décorer votre page login.php à votre souhait: c'est toujours plus chouette pour les clients (plusieurs plugins existent pour cela).

Vous pouvez également ajouter ces différentes fonctions dans votre fichier function.php:

Verrouiller l'accès à une page

add_action( 'template_redirect', 'private_page' );
function private_page() {
	if ( is_page(15617) && ! is_user_logged_in() ) {
		wp_redirect( wp_login_url( get_permalink(5) ) );
		exit();
	}
}

Redirection après déconnexion

function jul_logout_redirect()
{
wp_redirect(home_url());
exit;
}

add_action('wp_logout', 'jul_logout_redirect');

Redirection après connexion

add_filter("login_redirect", "roles_login_redirect", 10, 3);

function roles_login_redirect($redirect_to, $request, $user)
{
if (is_array($user->roles))
if (in_array('administrator', $user->roles)) return admin_url(); // Page -> Tableau de bord
return home_url("/espace-membre/"); // Les abonnés sont redirigés en Page d'accueil
}

Vous pouvez changer les couleurs du tableau, en mettant dans votre page un CSS personnalisé.

Par exemple, pour obtenir le tableau ci-dessous, utilisez le CSS suivant :

<style type="text/css">  
  <!-- 
  table.Gestan { 
    margin-bottom: 21px; 
    width: 100%; 
    text-align: center; 
  } 
  th { 
    background: #045D9F; 
    color: #FFF; 
    line-height: 30px; 
    font-weight: bold; 
    font-size: 13px; 
    vertical-align: top; 
    margin-right:7px; 
    margin-left:7px; 
    padding-right:7px; 
    padding-left:7px; 
  } 
  tr { 
    background: #dce2e5; 
    line-height: 30px; 
    border-top: 1px solid darkgrey; 
    border-bottom: 1px solid darkgrey; 
    font-size: 13px; 
  } 
  tr:nth-child(even) { 
    background-color:#E5F2FA; 
  } 
  tr:nth-child(odd) { 
    background-color:#C1E3FA; 
  } 
  tr:hover{ 
    background-color: #F2F2F2; 
  } 
  td { 
    vertical-align: top; 
    font-size: 14px; line-height: 24px; 
    text-align: center; 
    padding-left:7px; } 
    td.Factures_Libelle, td.Devis_Libelle{ 
    text-align: left; 
    padding-left: 5px; 
  } 
    td.Factures_Montant, td.Devis_Montant{ 
    text-align: right; padding-right: 5px; 
  } 
  -->
</style>

Vous pouvez changer les icones de statut : il s'agit des fichiers Check.png et Paiement.png situés dans /wp-content/plugins/Gestan/img

Autres articles “Extensions”