Configuration de la mise en page de la boutique et de l'espace membre

Menu "Boutique > Mise en page"

Si vous souhaitez utiliser la boutique en ligne ou bien l'espace membre intégré, il vous faut configurer la mise en page de ces derniers.
Autrement, cette étape est facultative.

1) Configuration de l'Url de la boutique

Cela s'effectue depuis Boutique > Sites web

2) Mise en page

Par défaut, la boutique intégrée à PMP ne possède aucune mise en page. Il vous faut donc la configurer. Vous pouvez voir un exemple de boutique ICI.

Cliquez sur "Boutique > Mise en page".

Toute la mise en page se configure simplement en entrant le code HTML de la boutique dans la partie "Pages de la boutique". Vous devez au minimum entrer la variable [!contenu!] en cliquant sur le bouton "Contenu de la boutique". Vous pouvez également ajouter le formulaire de connexion des clients en ajoutant la variable [!formulaire_connexion!] en cliquant sur le bouton "Formulaire de connexion".

Voici un exemple simple de mise en page :

Mise en page

Vous pouvez obtenir cette mise en page en entrant le code suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head><title>[!pmp-titre!]</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background-image: url(img/fond_deg.jpg);
background-repeat: repeat-x;
}
div#conteneur {
margin: 0 auto;
width: 965px;
text-align: left;
background-color: #ffffff;
border-left: solid 1px #DDD;
border-right: solid 1px #AAA;
background: url(img/conteneur.gif) repeat-y;
}
#banniere {
background-image: url("img/logo.jpg");
width: 960px;
height: 110px;
margin-left: 3px;
margin-right: 3px;
}
#menugauche {
width: 150px;
float: left;
}
#menu {
background-color: #1F4F71;
padding: 5px;
}
#menudroite {
width: 160px;
float: right;
background-color: #1F4F71;
}
#contenu {
margin-left: 150px;
margin-right: 150px;
padding: 10px;
font-family: Arial;
font-size: 12px;
width: 636px;
}
#categories ul, #categories ul li {
padding: 0px;
margin: 0px;
}
#categories ul li {
list-style-type: none;
margin-left: 0px;
}
#categories ul li a {
display: block;
font-family: tahoma;
font-size: 16px;
text-decoration: none;
color: #AABFCE;
}
#categories ul ul li a {
display: block;
font-family: arial;
font-size: 12px;
text-decoration: none;
color: #FFFFFF;
margin-left: 8px;
font-weight: bold;
}
#categories ul ul li a:hover {
text-decoration: underline;
}
.contenu_produits_detail {
width: 290px;
display: block;
float: left;
margin: 5px;
font-family: arial;
font-size: 12px;
color: #595959;
display: inline;
padding: 5px;
background-color: #FFD;
}
.contenu_produits_detail:hover {
background-color: #DFC;
}
a img {
border: 0px;
}
.contenu_produits_detail .image {
display: block;
}
.contenu_produits_detail .titre {
margin-bottom: 10px;
}
.contenu_produits_detail .description {
margin-bottom: 10px;
}
.contenu_produits_detail .prix {
font-size: 12px;
font-family: verdana;
margin-bottom: 10px;
display: inline;
}
.ajpanier {
display: inline;
margin-left: 25px;
cursor: hand;
}
.ajpanier form {
display: inline;
}
.contenu_produits_detail .plusinfos a {
text-decoration: none;
color: #0186CF;
font-size: 14px;
}
.contenu_produits_detail .plusinfos a:hover {
text-decoration: underline;
}
.contenu_produits_detail .titre a {
text-decoration: none;
color: #595959;
font-weight: bold;
font-family: verdana;
}
.navigation, .navigation a {
font-family: Verdana;
color: #595959;
font-weight: bold;
text-decoration: none;
font-size: 10px;
}
.navigation a:hover {
text-decoration: underline;
}
.navigation_selection {
font-size: 14px;
color: #704D44;
}
.contenu_produits {
margin-top: 20px;
}
.formulaire_connexion {
font-family: arial;
font-size: 12px;
padding: 5px;
color: #fff;
font-weight: bold;
background: url(img/fond_box_M.jpg);
border: solid 1px #0D3B97;
}
.formulaire_connexion form {
margin: 0px;
}
.formulaire_connexion_deja_client {
margin: 0px;
}
#login_connexion, #mdp_connexion {
font-size: 12px;
font-family: verdana;
display: block;
}
#bouton_ok {
background-color: #4E2614;
font-family: vardana;
color: #FFFFFF;
font-size: 12px;
border: solid 1px #000000;
padding: 2px;
font-weight: bold;
}
.mdp_oublie a {
color: #635975;
text-decoration: none;
font-family: arial;
font-size: 13px;
}
.mdp_oublie a:hover {
color: #000000;
text-decoration: underline;
}
.client_box {
color: #F0F0FF;
padding: 3px;
}
.client_bonjour {
font-family: verdana;
font-size: 12px;
display: inline;
}
.client_nom {
font-weight: bold;
display: inline;
}
.client_menu a {
font-family: Arial;
font-size: 12px;
padding-left: 14px;
color: #FFFFF0;
background-image: url("shop/puce.gif");
background-repeat:no-repeat;
background-position: 2px 4px;
display: block;
}
.produit_fiche {
padding: 40px;
}
.libelle {
font-family: verdana;
font-weight: bold;
color: #EE6D10;
margin-bottom: 20px;
}
.produit_fiche .image {
float: left;
}
h1 {
font-weight: bold;
font-size: 24px;
color: #27528D;
background-color: #C0CFE4;
border: solid 2px #27528D;
padding: 6px;
display: block;
}
.produit_detail {
font-family: arial;
font-size: 12px;
color: #595959;
}
#pmp_form_checkout {
display: block;
text-align: left;
background-color: #F8F8F8;
border: solid 1px #DDD;
}
#footer {
clear: both;
text-align: center;
background-color: #333;
color: #FFF;
padding: 8px;
font-family: Arial;
font-size: 12px;
font-weight: 0;
position: relative;
float: bottom;
}
</style>
</head>


<body>
<div id="conteneur">
<div id="banniere">
<div style="font-family: Verdana; font-size: 32px; color: #FFFFFF; padding: 15px;">Mon Site Web !</div>
</div>
<div id="menugauche">
<div id="menu">
[!liste_categories!]
<div style="height: 400px"></div>
</div></div>
<div id="menudroite">
[!panier!]
<br />
[!formulaire_connexion!]
<br /><br />
</div>
<div id="contenu">
[!contenu!]
</div>
<div id="footer">Copyright 2010 - Albovision</div>
</div>
</body>
</html>

Contenu de la page d'accueil :

Insérez le code HTML de votre page d'accueil dans cette partie.

Page de commande :

Insérez le code HTML de votre page de commande dans cette partie. Vous devez entrer au moins la varible [!formulaire!] qui sera remplacée par le formulaire lui-même.
N'oubliez pas également de configurer ce formulaire de commande (Boutique > Formulaire de commande).

>> Etape suivante : Catégories