Personnaliser un site e-commerce

Architecture des pages

Comme toute application basée sur la techno WebForms, les pages du site e-commerce sont composées de plusieurs éléments :

  • un "modèle", appelé MasterPage, qui contient tous les éléments communs à l'ensemble des pages
  • la page en elle même qui contient le code spécifique
  • un ensemble de contrôles qui permettent de réutiliser du code.

Masterpage

Contrôles

Le module e-commerce étant basé sur WebForms, il contient de nombreux contrôles, dans le namespace Altazion.Commerce.Controls qui sont à utiliser pour afficher des données dynamiques, provenant de la base de données ou d'un calcul serveur. Ces controles sont à "simplement" poser dans le code source de la page.

Par exemple, le code suivant ajoute un controle qui affiche une liste de 10 produits venant d'une "vitrine" (une sélection de produits) :

<div class="leftCol">
   <ecom:VitrinesListeProduits 
       ID="listeVitrine" runat="server" 
       CodeVitrine="CODEVITRINE"
       ProductTemplateSkinID="ProduitSurLaHome"
       NombreArticles="10" TypeAffichage="Flux" />
</div>

Les contrôles spécifiques à la solution ecommerce sont regroupé sous le prefixe <ecom:... /> (là où les contrôles standard ASP.net sont sous <asp:... />). Vous trouverez une liste des éléments disponibles dans la partie "contrôles e-commerce" de la référence de classe.

Warning

Certains contrôles ont des conditions d'utilisations spécifiques qui sont décrit dans la documentation du contrôle.

Pages standards

path description
/default.aspx La home page générale du site

Contenu personnalisable

Publicités

Les publicités sont des emplacements destinés à recevoir du contenu qui changera de façon fréquente en fonction de l'actuatlité commerciale du site. On peut prendre pour exemple un carousel sur une home page, un emplacement de mise en avant promotionnel dans un panier, etc.

N'utilisez pas ce type de personnalisation si vous souhaitez simplement pouvoir configurer dans le back-office le contenu d'un bloc, préférez dans ce cas des espaces SEO (cf. ci-dessous).

Il existe plusieurs types de publicités :

  • les blocs "images"
  • les blocs "Google Ads-format"
  • les blocs "template html5"

Espaces SEO

Les espaces SEO sont des emplacements personnalisables dans vos pages qui, à la différences ces publicités ci-dessus, ne sont pas destinés à être modifiés en fonction d'un planning commercial. On peut par exemple retrouver dans ces emplacements un contenu de footer, de la rassurance, des contenus spécialisés dans le référencement, etc. Pour déclarer un emplacement SEO, vous devez l'insérer dans le fichier de thème (cf. ci-dessous) et l'intégrer dans vos fichiers de personnalisations.

Prenons comme exemple un espace de bas de page destiné à fournir des informations sur votre société :

<p>
    <ecom:SeoContent runat="server" 
      CodeEmplacement="DescSocieteFooter"  />
</p>

En complément de l'ajout dans vos fichiers de personnalisations .skin, vous devez déclarer l'emplacement dans votre fichier de thème, cf. ci-dessous

Themes

La personnalisation de l'aspect général d'un site e-commerce se fait via la création d'un thème. Comme le module e-commerce est basé, plus ou moins, sur asp.net webforms, la création d'un thème se base sur les "skins" de cette technologie. Pour définir l'apparence d'un site, il "suffit" de :

  • créer un ensemble de .skin personnalisant la présentation du contenu
  • ainsi que les css et les js correspondants
  • ajouter d'éventuels controles personnalisés spécifiques
  • compléter le tout par un fichier de description et des images illustrant le thème

Skins

Il est assez simple de modifier l'apparence d'un site en utilisant un ensemble de fichier .skin dans lequel vous pouvez placer des apparences "remplaçant" celles présentes dans les différentes pages.

Si l'on prend une page telle que la home, son contenu par défaut est extrêmement réduit : 

<asp:Content ContentPlaceHolderID="BeforeContent" 
runat="server" ID="BeforeContent1">
   <ecom:ThemablePanelControl 
       ID="ThemablePanelControl1" runat="server" SkinID="HomePageBeforeContent">
   </ecom:ThemablePanelControl>
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
   <asp:ScriptManagerProxy 
       ID="ScriptManagerProxy1" runat="server">
   </asp:ScriptManagerProxy>
   <ecom:ThemablePanelControl runat="server" 
       SkinID="HomePagePanel" ID="HomePagePanel">
       <Content>
           <!-- placez le contenu de votre home ici -->
       </Content>
   </ecom:ThemablePanelControl>
</asp:Content>

<asp:Content 
   ContentPlaceHolderID="AfterContent" runat="server" ID="Content2">
   <ecom:ThemablePanelControl 
       ID="ThemablePanelControl2" 
       runat="server" SkinID="HomePageAfterContent">
   </ecom:ThemablePanelControl>
</asp:Content>

Pour placer du contenu dans cette page via un fichier skin, il faut reprendre le contrôle de type <ecom:ThemablePanelControl /> et de l'utiliser dans un fichier .skin (si le contrôle d'origine a un ID, vous devrez l'omettre dans ce fichier). Par exemple :

Fichier home.skin :

<ecom:ThemablePanelControl runat="server" 
   SkinID="HomePagePanel">
   <Content>
       <div class='home-main-pub'>
           <ecom:CampagnePublicite runat="server"
               TypeOperation="CARROUS"  />
       </div>
   </Content>
</ecom:ThemablePanelControl>

Pour connaitre les noms des différentes zones personnalisables, il vous faudra regarder dans le fichier .aspx que vous souhaitez personnaliser. Tous les contrôles portant un SkinID sont personnalisables de façon spécifique.

A l'intérieur de ces personnalisations, vous pouvez poser :

  • du code HTML simple
  • des contrôles WebForms
  • des contrôles spécifiques au module e-commerce
  • des controles personnalisés (.ascx)

Apparence des pages

Page Détails
MasterPage Contient les éléments communs à toutes les pages (header et footer par exemple)
Home La page d'accueil du site
Descente Les pages de listes de produits (descentes multi-facettes, recherches, etc.)
Fiche produit La fiche produit
Panier
Login
Confirmation Commande
Recu Commande
Espace Client
Suivi Commandes

Apparence multiples pour les produits

Il existe plusieurs emplacements où il est possible d'avoir une liste de produits :

  1. dans la descente / page de recherche
  2. dans un bloc d'affichage d'une selection

Pour pouvoir définir des affichages différents en fonction de où se trouve affichés ces produits, il suffit de créer plusieurs templates en leur donnant des noms de SkinID différents. cf. Personnaliser les affichages des produits

Le même principe est utilisé pour créer des modèles de fiches produits.

CSS

Javascript

Contrôles personnalisés

Fichier de thème

Templates de publicités

Images

HTML5

Emplacements SEO

Pour définir un emplacement utilisables dans les blocs SEO, vous devez décrire les différents emplacements et leur cas d'utilisation, dans le fichier de thème.

<Theme xmlns="http://simplement-e.com/ecommerce/theme/theme.xsd">
...
<Seo>
    <Emplacement code="DESCBLOCFOOTER" libelle="Emplacement description dans le footer">
      <SurTypePage type="Page" />
    </Emplacement>
</Seo>
...

Le code sera à réutiliser dans le contrôle d'affichage et doit être unique. Vous devez ensuite définir sur quel(s) type(s) de pages le contrôle peut s'afficher, vous pouvez utiliser :

  • Descente pour les pages de recherches et de descentes produits. La configuration du contenu se fera, dans ce cas, dans la partie "SEO"
  • Article pour une fiche produit, vous devrez saisir les informations de ces blocs, directement dans les pages d'édition e-commerce de chaque produit
  • Home : pour affichage uniquement sur la HomePage
  • Page : pour un bloc qui sera affiché sur toutes les pages incluant le tag (utilisez aussi cette valeur si vous souhaitez positionner le contrôle sur toutes les pages)

Une fois cette définition créée, les contrôles vu précédemment affiche le contenu personnalisé:

  • <ecom:SeoContentTitle runat="server" /> affichera l'information "Titre" saisie dans la page de configuration
  • <ecom:SeoContent runat="server" /> affichera le contenu du bloc

Par exemple, pour le thème suivant :

<Seo>
    <Emplacement code="DESCBLOCHOME" libelle="Emplacement description sur la home">
      <SurTypePage type="Page" />
    </Emplacement>
</Seo>