Réaliser un site e-commerce

Type de document :

Documentation et tutoriels

Solution(s) :

e-majine

Module(s) :

Ma boutique

Réaliser un site e-commerce

Pour réussir une intégration de qualité pour un site e-commerce, vous devez bien prendre en compte les fonctionnalités disponibles et quels sont les fichiers qui en découlent. Pour réaliser un site de boutique en ligne, vous devez utiliser notre solution e-majine.

Module de base
Module de recherche
Module Catalogue
- Les produits
  - Méthodes de publication et widgets
  - Fiche résumée et détaillée d'un produit
- Le tunnel de commande

Module de base

Il est fourni pour tout type de projet et vous permet de gérer plusieurs fonctionnalités telles que :

Affichage d'une rubrique publiant un article
Affichage d'une rubrique publiant des articles
Affichage d'une rubrique publiant des actualités
Affichage d'une rubrique de formulaire
Gestion de ressources (actualités, articles, préformatés...)
Gestion de médias (images, diaporama, pdf, ...)

Dans le cas d'un site e-commerce, nous allons également mettre en forme toute la partie liée à un compte utilisateur et ses différentes sections :

Widget "Mon compte"
Authentification au compte utilisateur
Liste des actions du compte utilisateur
Modification du mot de passe
Gestion des adresses
Liste des commandes
Gestion de téléchargements

Widget "Mon compte"

(Classe CSS associée : widgetLogin)

Pour accéder à son compte, l'utilisateur passe par le widget "Mon Compte", celui-ci peut s'afficher sous deux formats différents. Le format par défaut correspond au type "Boîte avec des liens", il est géré à l'aide de la structure suivante :

<mx:bloc id="link">
	<div class="widgetLoginLinks">
		<a ><mx:text id="login" /></a>
		<a ><mx:text id="subscribe" /></a>
		<div class="socialNetworkConnect">
			<mx:facebookConnect title="Se connecter avec Facebook" content="Se connecter avec Facebook" />
			<mx:twitterConnect title="Se connecter avec Twitter" content="Se connecter avec Twitter" />
			<mx:googleplusConnect title="Se connecter avec Google Plus" content="Se connecter avec Google Plus" />
		</div>
	</div>
</mx:bloc id="link">

L'autre mode à votre disposition est obtenu avec le type "Boîte avec les formulaires", le code utilisé pour son affichage est celui ci-dessous :

<mx:bloc id="form">
	<form id="loginboxform" method="post" >
		<fieldset>
			<legend><mx:text id="login_legend" /></legend>
			<div class="row">
				<span class="label">
					<label for="username"><mx:text id="username" /></label>
				</span>
				<span class="fields">
	    			<input type="text" name="username" id="username" />
				</span>
    		</div>
			<div class="row">
				<span class="label">
					<label for="password"><mx:text id="password" /></label>
				</span>
				<span class="fields">
					<input type="password" name="password" id="password" />
				</span>
			</div>
			<mx:bloc id="rememberMe">
				<div class="row rememberMe">
					<span class="label">
						<label for="rememberMe"><mx:text id="rememberMe" /></label>
					</span>
					<span class="fields">
						<input type="checkbox" name="rememberMe" id="rememberMe" value="1"/>
					</span>
				</div>
			</mx:bloc id="rememberMe">
			<div class="submit">
				<input type="submit"  />
			</div>
			<input type="hidden" name="manageaccount" value="1" />
		</fieldset>
	</form>
	<div class="widgetLoginLinks">
		<a ><mx:text id="lost_password" /></a>
		<a ><mx:text id="subscribe" /></a>
	</div>
</mx:bloc id="form">

Une fois connecté et selon les modules activés, l'utilisateur connecté a accès à un menu à la place du contenu initial. Voici le code nécessaire à l'affichage de ce menu :

<mx:bloc id="manage">
	<span class="widgetLoginState"><mx:text id="name_label" /></span>
	<span class="widgetLoginUsername"><mx:text id="name" /></span>
	<div class="widgetLoginLinks">
		<a ><mx:text id="logout" /></a>
		<a ><mx:text id="manage" /></a>
		<mx:bloc id="profil"><a  title="Gérer mon profil">Mon profil</a></mx:bloc id="profil">
		<mx:bloc id="contact"><a  title="Mes contacts">Mes contacts</a></mx:bloc id="contact">
		<mx:bloc id="group"><a  title="Mes groupes">Mes groupes</a></mx:bloc id="group">
		<mx:bloc id="messaging"><a  title="Mes discussions">Mes discussions</a></mx:bloc id="messaging">
		<mx:bloc id="update"><a  title="Gérer mon profil">Paramètres</a></mx:bloc id="update">
	</div>
</mx:bloc id="manage">

Les liens "Mon profil, Mes contacts, Mes groupes, Mes discussions" sont liés au module Communauté.

Authentification au compte utilisateur

(Identifiant CSS associé : accountAuthentification)

Vous pouvez vous connecter directement depuis le widget "Mon compte" selon la configuration de ce dernier, sinon vous arrivez sur la page suivante vous permettant de vous connecter ou créer un compte. Le premier élément que l'on peut remonter est le message personnalisé de la d'administrateur du site :

<mx:bloc id="information_message">
	<div id="information_message">
		<mx:text id="message" />
	</div>
</mx:bloc id="information_message">

Le second élément est le formulaire de connexion, avec la possibilité de se connecter également par le biais service tiers, comme Facebook, Twitter et Google+.

<form id="contentLoginForm" method="post" >
	<fieldset>
		<legend><mx:text id="login_legend" /></legend>
		<mx:bloc id="authentificationError">
			<div class="error">
				<mx:text id="errorMessage" />
			</div>
		</mx:bloc id="authentificationError">
		<div class="row username">
			<span class="label">
				<label for="username"><mx:text id="username" /></label>
			</span>
			<span class="fields">
				<input type="text" name="username" id="username" />
			</span>
		</div>
		<div class="row password">
			<span class="label">
				<label for="password"><mx:text id="password" /></label>
			</span>
			<span class="fields">
				<input type="password" name="password" id="password" />
			</span>
		</div>
		<,-- Donne la possibilité d'être déjà connecté à la prochaine visite sur le site -->
		<mx:bloc id="rememberMe">
			<div class="row rememberMe">
				<span class="label">
					<label for="rememberMe"><mx:text id="rememberMe" /></label>
				</span>
				<span class="fields">
					<input type="checkbox" name="rememberMe" id="rememberMe" value="1"/>
				</span>
			</div>
		</mx:bloc id="rememberMe">
		<div class="submit">
			<input type="submit"  />
		</div>
		<input type="hidden" name="manageaccount" value="1" />
		<,-- Lien de connexion par Facebook -->
		<mx:bloc id="facebook">
			<mx:facebookConnect title="Se connecter avec Facebook" content="Se connecter avec Facebook" popup="true" />
		</mx:bloc id="facebook">
		<,-- Lien de connexion par Twitter -->
		<mx:bloc id="twitter">
			<mx:twitterConnect title="Se connecter avec Twitter" content="Se connecter avec Twitter" popup="true" />
		</mx:bloc id="twitter">
		<,-- Lien de connexion par Google+ -->
		<mx:bloc id="googleplus">
			<mx:googleplusConnect title="Se connecter avec Google Plus" content="Se connecter avec Google Plus" popup="true" />
		</mx:bloc id="googleplus">
	</fieldset>
</form>
<,-- Lien pour l'utilisateur ayant perdu son mot de passe -->
<a  class="lostPassword" ><span><mx:text id="lost_password" /></span></a>

La dernière section de ce template est le lien vers la création d'un nouveau compte :

<div id="accountAuthentificationSubscription">
	<mx:text id="subscriptioncomment" />
	<a  class="accountAuthentificationSubscription" ><span><mx:text id="subscribe" /></span></a>
</div>

Liste des actions au compte utilisateur

(Identifiant CSS associé : accountActions)

Dans ce template, retrouvez l'ensemble des actions mises à disposition pour chaque utilisateur connecté affichées avec le code suivant :

<ul>
	<mx:bloc id="general_datas">
		<li id="accountActionsGeneralDatas"><a ><span><mx:text id="general_datas" /></span></a></li>
	</mx:bloc id="general_datas">
	
	<mx:bloc id="password">
		<li id="accountActionsPassword"><a ><span><mx:text id="password" /></span></a></li>
	</mx:bloc id="password">
	
	<mx:bloc id="acces">
		<li id="accountActionsAcces"><a ><span><mx:text id="acces" /></span></a></li>
	</mx:bloc id="acces">
	
	<mx:bloc id="address">
		<li id="accountActionsAdress"><a ><span><mx:text id="address" /></span></a></li>
	</mx:bloc id="address">
	
	<mx:bloc id="order">
		<li id="accountActionsOrder"><a ><span><mx:text id="order" /></span></a></li>
	</mx:bloc id="order">
	
	<mx:bloc id="board_profil">
		<li id="accountActionsBoardProfil"><a ><span><mx:text id="label" /></span></a></li>
	</mx:bloc id="board_profil">
	
	<mx:bloc id="ads_list">
		<li id="accountActionsAdsList"><a ><span><mx:text id="label" /></span></a></li>
	</mx:bloc id="ads_list">
	
	<mx:bloc id="downloads">
		<li id="accountActionsDownloads"><a ><span><mx:text id="label" /></span></a></li>
	</mx:bloc id="downloads">
	<,-- désinscription -->
	<mx:bloc id="unsubscribe">
		<li id="accountActionsUnsubscribe"><a ><mx:text id="label" /></a></li>
	</mx:bloc id="unsubscribe">
	<,-- désinscription -->
	<mx:bloc id="emailing">
		<li id="accountActionsEmailing"><a ><mx:text id="label" /></a></li>
	</mx:bloc id="emailing">
</ul>

Modification du mot de passe

(Identifiant CSS associé : accountChangePassword)

Ce template gère l'affichage du formulaire pour demander un nouveau mot de passe.

Gestion des adresses

(Identifiant CSS associé : accountAddress)

Les adresses associées au compte de l'utilisateur sont listées à l'aide de ce template. Vous y retrouvez plusieurs éléments dont un bouton de création d'adresse supplémentaire :

<mx:bloc id="address_add">
	<a  class="addressAdd" ><span><mx:text id="address_add" /></span></a>
</mx:bloc id="address_add">

Ensuite, vous avez l'affichage de l'adresse par défaut :

<mx:bloc id="default_address">
	<li class="defaultAddress" >
		<dl>
			<dt><mx:text id="label" /></dt> 
			<dd>
				<address><mx:text id="address" /></address>
				<a ><span><mx:text id="edit" /></span></a>
			</dd>
		</dl>
	</li>
</mx:bloc id="default_address">

Suivi des éventuelles adresses supplémentaires :

<mx:bloc id="address_list">
	<mx:bloc id="address">
		<li id="addressList">
			<dl>
				<dt><mx:text id="address_label" /></dt>
				<dd>
					<address><mx:text id="detail" /></address>
					<a  class="addressListTitleEdit" ><span><mx:text id="edit" /></span></a>
	    			<a  onclick="return window.confirm('<mx:text id="confirmation_message" />')" class="addressListTitleDelete" ><span><mx:text id="delete" /></span></a>
    			</dd>
		    </dl>
	    </li>
	</mx:bloc id="address">
</mx:bloc id="address_list">

Liste des commandes

(Identifiant CSS associé : accountOrdersList)

Si un utilisateur connecté a déjà réalisé des commandes sur votre site, ces dernières remonteront sous la forme d'une liste dans cet écran. Dans le cas où aucune commande n'a été réalisée par l'utilisateur connecté, un message apparaît avec le code suivant :

<mx:bloc id="no_result">
	<mx:text id="no_result" />
</mx:bloc id="no_result">

Vous retrouvez deux sections au sein de ce template, la première listant les commandes en cours :

<mx:bloc id="pending_orders">
	<div id="accountPendingOrders">
		<h2><mx:text id="pending_orders_title" /></h2>
		<table>
			<thead>
				<tr>
					<th><mx:text id="order_reference" /></th>
					<th><mx:text id="date" /></th>
					<th><mx:text id="type" /></th>
					<th><mx:text id="etat" /></th>
					<th><mx:text id="infos" /></th>
					<th><mx:text id="ask_for_invoice" /></th>
					<mx:bloc id="follow_up_package">
					<th><mx:text id="package" /></th>
					</mx:bloc id="follow_up_package">
				</tr>
			</thead>
			<tbody>
				<mx:bloc id="order">
					<tr>
						<td><mx:text id="order_reference" /></td>
						<td><mx:text id="date" /></td>
						<td><mx:text id="type" /></td>
						<td><mx:text id="etat" /></td>
						<td><a  class="accountPendingOrdersInfo" ><span><mx:text id="infos" /></span></a></td>
						<td>
							<mx:bloc id="invoice">
								<a  class="accountPendingOrdersInvoice"><span><mx:text id="ask_for_invoice" /></span></a>
							</mx:bloc id="invoice">
						</td>
						<mx:bloc id="follow_up_order">
							<td>
								<mx:bloc id="link">
									<a  class="accountPendingOrdersPackage"><span><mx:text id="package" /></span></a>
								</mx:bloc id="link">
							</td>
						</mx:bloc id="follow_up_order">
					</tr>
				</mx:bloc id="order">
			</tbody>
		</table>
	</div>
</mx:bloc id="pending_orders">

La seconde listant l'historique des commandes déjà réalisées :

<mx:bloc id="history">
	<div id="accountHistoryOrders">
		<h2><mx:text id="history_title" /></h2>
		<table>
			<thead>
				<tr>
					<th><mx:text id="order_reference" /></th>
					<th><mx:text id="date" /></th>
					<th><mx:text id="type" /></th>
					<th><mx:text id="infos" /></th>
					<th><mx:text id="ask_for_invoice" /></th>
				</tr>
			</thead>
			<tbody>
				<mx:bloc id="order">
					<tr>
						<td><mx:text id="order_reference" /></td>
						<td><mx:text id="date" /></td>
						<td><mx:text id="type" /></td>
						<td><a  class="accountHistoryOrdersInfo" ><span><mx:text id="infos" /></span></a></td>
						<td><a class="accountHistoryOrdersInvoice"><span><mx:text id="ask_for_invoice" /></span></a></td>
					</tr>
				</mx:bloc id="order">
			</tbody>
		</table>
	</div>
</mx:bloc id="history">

Gestion de téléchargements

(Identifiant CSS associé : accountDownloadsList)

Avec ce template, l'utilisateur connecté retrouve la liste des téléchargements, présentés dans un tableau avec la possibilité d'effectuer des téléchargements. Dans le cas où aucun téléchargement disponible n'existe, un message est affiché avec le code suivant :

<mx:bloc id="no_result">
	<mx:text id="no_result" />
</mx:bloc id="no_result">

La liste des téléchargements disponible est obtenue à parti du code ci-dessous :

<mx:bloc id="downloads_list">
	<div id="downloadsList">
		<h2><mx:text id="download_list_title" /></h2>
		<table>
			<thead>
				<tr>
					<th><mx:text id="num_order" /></th>
					<th><mx:text id="date" /></th>
					<th><mx:text id="title" /></th>
					<th><mx:text id="type" /></th>
					<th><mx:text id="weight" /></th>
					<th><mx:text id="status" /></th>
					<th><mx:text id="nb_downloads" /></th>
					<th><mx:text id="maximum" /></th>
					<th><mx:text id="duree" /></th>
					<th ><mx:text id="actions" /></th>
				</tr>
			</thead>
			<tbody>
				<mx:bloc id="downloads">
				<tr>
					<mx:bloc id="order">
						<td><a  class="accountDownloadsListOrder" ><span><mx:text id="label" /></span></a></td>
					</mx:bloc id="order"></td>
					<td><mx:text id="date" /></td>
					<td><mx:text id="title" /></td>
					<td><mx:text id="type" /> (<mx:text id="extension" />)</td>
					<td><mx:text id="weight" /></td>
					<td><mx:text id="status" /></td>
					<td><mx:text id="nb_downloads" /></td>
    			<td><mx:text id="maximum" /></td>
    			<td><mx:text id="duree" /></td>
					<mx:bloc id="download">
						<td><mx:bloc id="link"><a  class="accountDownloadsListLink"><span><mx:text id="label" /></span></a></mx:bloc id="link"></td>
					</mx:bloc id="download">
				</tr>
				</mx:bloc id="downloads">
			</tbody>
		</table>
	</div>
</mx:bloc id="downloads_list">

On peut également donner à l'utilisateur le choix de définir le nombre des fichiers à afficher avec la structure HTML suivante :

<,--  Bloc qui affiche un formulaire pour sélectionner le nombre de fichier à afficher  -->
<mx:bloc id="nbFile">
	<div class="row nbFile">
		<form method="post" >
			<label ><mx:text id="label"/></label>
			<select >
				<mx:bloc id="options">
					<option ><mx:text id="option"/></option>
				</mx:bloc id="options">
			</select>
		</form>
	</div>
</mx:bloc id="nbFile">

Enfin, un pager est construit avec le code suivant :

<mx:bloc id="pager">
    <mx:bloc id="first">&lt;&lt;</mx:bloc id="first">
    <mx:bloc id="previous">&lt;</mx:bloc id="previous">
    <mx:bloc id="last">&gt;&gt;</mx:bloc id="last">
    <mx:bloc id="next">&gt;</mx:bloc id="next">
    <mx:bloc id="separator">&nbsp;</mx:bloc id="separator">
    <div class="pager"><mx:bloc id="items"><mx:text id="spacer" /><a ><mx:text id="item" /></a></mx:bloc id="items"></div>
</mx:bloc id="pager">

Liste des fichiers du module nécessaires

(Tous ces fichiers se trouvent dans /modeles/Langue_du_modèle/Nom_du_modele).

/css/styles.css	Feuille de styles CSS pour la mise en forme des éléments HTML
/form/creator_form.html	Structure HTML de la méthode de publication "Publier un formulaire"
/navigation/nested_navigation_elements.html	Structure HTML du menu de navigation standard
/publication_methods/articles/multi_articles.html	Structure HTML de la méthode de publication "Publier des articles"
/publication_methods/articles/multi_articles_detail.html	Structure HTML du résumé d'un article appelé par le fichier multi_articles.html
/publication_methods/articles/single_article.html	Structure HTML de la méthode de publication "Publier un article"
/structure/error.html	Structure HTML de la page d'erreur ou page vide
/structure/error404.html	Structure HTML de la page 404
/structure/mainPage.html	Structure HTML de toute page du modèle de projet
/structure/mainPrint.html	Structure HTML de toute page du modèle de projet lors d'une impression
Fichiers liés à la gestion de compte
/account/login/box_login.html	Widget de connexion à un compte utilisateur
/account/login/content_authentification.html	Strcture HTML de la page de connexion à un compte utilisateur
/account/login/content_actions_list.html	Structure HTML de la page listant les actions possibles du compte utilisateur connecté
/account/login/content_change_password.html	Structure HTML de la page permettant le changement de mot de passe pour le compte utilisateur connecté
/account/login/content_account_modify.html	Structure HTML de la page permettant la modification des informations liées au compte utilisateur connecté
/account/login/content_address.html	Structure HTML de la page listant les adresses associées au compte utilisateur connecté
/account/login/content_orders_list.html	Structure HTML de la page listant les commandes réalisées par le compte utilisateur connecté
/account/login/content_order_detail.html	Structure HTML de la page détaillant une commande réalisée par le compte utilisateur connecté
/account/login/content_downloads_list.html	Structure HTML de la page listant les téléchargements réalisés par le compte utilisateur connecté

Module de recherche

(disponible sous saytup & e-majine)

Comme son nom l'indique, ce module va vous permettre de rechercher parmi les contenus de vos sites et remonter les résultats sous forme d'une liste par ordre de pertinence.

Widget de recherche

(Classe CSS associée : widgetSearch)

Ce widget est composé de deux parties, la première est le formulaire de recherche et la seconde le lien vers la recherche avancée. Le code ci-dessous intègre le formulaire dans le widget :

<form id="searchform" method="post" >
	<fieldset>
		<div class="row">
		    <label for="search_input_box">Rechercher</label>
		    <input type="text" id="search_input_box" name="q" class="wordsbox" />
		    <mx:bloc id="hidden_configuration"><input type="hidden"  /></mx:bloc id="hidden_configuration">
		</div>
	</fieldset>
	<div class="submit">
		<input type="submit" name="searchbutton"  />
	</div>
</form>

Résultats de la recherche

Les résultats de recherche, basés sur le fichier HTML /modeles/Langue_du_site/Nom_du_modele/search/content_results_search.html, se présentent dans une rubrique d'exécution, soit une rubrique (souvent masquée) définie dans l'administration, soit dans la rubrique courante si elle n'est pas précisée. Sur cette rubrique, on retrouve le formulaire de recherche :

<mx:text id="search_form" />

Il y a également un bloc gérant l'absence de résultats de la recherche :

<mx:bloc id="no_match_found">
	<div class="noMatchFound" >
		<p>Aucun document ne correspond aux termes de recherche sp&eacute;cifi&eacute;s <strong><mx:text id="words" /></strong>.<br />
		Aucune page ne contient <strong><mx:text id="words" /></strong>.</p>
		<dl>
			<dt><strong>Suggestions :</strong></dt>
			<dd>- V&eacute;rifiez l'orthographe des termes de recherche.</dd>
			<dd>- Essayez d'autres mots.</dd>
			<dd>- Utilisez des mots plus g&eacute;n&eacute;raux.</dd>
		</dl>
	</div>
</mx:bloc id="no_match_found">

Dans le cas où des résultats sont obtenus, voici le code nécessaire à leur affichage :

<mx:bloc id="results">
	<div class="searchResults">
		<dl>
			<dt>
				<mx:text id="index" />. <a ><mx:text id="title" /></a>
				<small>[<mx:text id="popularity" />]</small>
			</dt>
			<dd>
				<mx:bloc id="content"><small><mx:text id="content" /></small></mx:bloc id="content">
				<ul>
					<li>
						<small>
							<a ><mx:text id="url" /></a>
							<mx:bloc id="content_properties">
								<mx:text id="size" /> bytes [<mx:text id="type" />] 
								<mx:text id="last_modified" />
							</mx:bloc id="content_properties">
						</small>
					</li>
				</ul>
			</dd>
		</dl>
	</div>
</mx:bloc id="results">

Dans le cas où trop de résultats sont remontés par rapport à la configuration dans l'administration, un pager apparaît, géré par le code suivant :

<mx:bloc id="searchpager">
    <,-- Défini le HTML du bouton "Aller au début" -->
	<mx:bloc id="first">&lt;&lt;</mx:bloc id="first">
	
	<,-- Défini le HTML du bouton "Précédent" -->
	<mx:bloc id="previous">&lt;</mx:bloc id="previous<