Vous êtes ici Forums
  |  Connexion
 Forums
HomeHomeProjetsProjetsStore : dévelop...Store : dévelop...Quelques captures dQuelques captures d'écran du skin par défaut en préparation
Précédente
 
Suivante
Nouveau message
28/04/2007 21:44
 

Ecran général :

Détail d'un produit :

Bouttons (les images seront également traduisibles et le PSD sera fourni, on prépare aussi un effet hover) :

 
Nouveau message
29/04/2007 08:56
 
Seb, si tu travail seulement avec des images, on aura le problème de la langue car des boutons sont "hard-localized".
Par contre, si tu penses ton bouton comme un container en construisant un tableau et en plaçant le token [PURCHASE] ou [ADDTOCART] dans la cellule centrale, tu obtiens visuellement le même résultat et ton bouton a la faculté de changer de langue tout seul !
Le problème qui subsiste alors et la différent de taille d’occupation du texte entre un « Add to cart » et « Ajouter au panier » ou un « Purchase » et un « Acheter maintenant » (qui peut être remplacer par « Acheter » tout seul d’ailleurs)

<table border="0" cellspacing="0" cellpadding="0">
       <tr>
              <td height="30"><img src="/Portals/0/WWStore/Images/BckPurchaseImg1.gif" width="6" height="30"></img></td>
              <td background="/Portals/0/WWStore/Images/BckPurchaseImg2.gif" height="30" "style="background-repeat: repeat-x;">[PURCHASE]</td>
              <td height="30"><img src="/Portals/0/WWStore/Images/BckPurchaseImg3.gif" width="9" height="30"></td>
       </tr>
</table>

Bien construit, il est même possible d'utiliser le token [PURCHASEIMG] dans une 4ème cellule, comme on le fait avec l'icône des containers sous DNN !

Le travails réalisé sur le passage des styles CSS de la boutique dans le CSS du portail facilitera d'autant la personnalisation des couleurs et autres fontes.

David.


"Qui ne connait pas l'Histoire ne connait rien".
 
Nouveau message
29/04/2007 14:00
 

Oui mais ce que tu ne sais pas David, c'est qu'on en a beaucoup parlé avec Gilles Pillocher hier, et décidé qu'il serait judicieux de préparer le terrain à la full localization en intégrant plusieurs TOKENS vraiment utiles pour le skinning, et par exemple :
[LOCALE] : renvoie la locale,
[ADDCARTURL] : renvoie l'url contenant les bons paramètres pour ajouter un produit au panier,
[PURCHASEURL] : pareil sauf qu'ici on achète directement,
[PRODUCTDETAILURL] : Renvoie l'url vers le détail du produit
[TEMPLATEBASEURL] : renvoie l'url vers le dossier template utiisé, ceci sera utile pour l'ajout de fichiers CSS ce qui n'est pas possible aujourd'hui (enfin pas proprement),
[ENLARGEIMAGE] : une fonction  permettant d'élargir l'image du produit, très bien pour le détail d'un produit,
[PRICELABEL] : Renvoie le texte "Notre prix",
[VATPRICELABEL] : Renvoie le texte "TTC",
[SPECIALPRICELABEL] : Renvoie le texte "Promotion".
[ADDTOCARTLABEL] : Renvoie le texte "Add to cart".
[PRODUCTDETAILLABEL] : Renvoie "Détail du produit".

Avec ça on fait une template comme on les aime, comme ça par exemple :

<style media="all" title="Nested CSS firts node" type="text/css">
@import ([TEMPLATEBASEURL]/Ressources/StyleSheet/central.css);
</style>
<div class="NewProduct-Entity" lang="[LOCALE]">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td class="NewProduct-Title"><a title="[MODELNAME]" href="[PRODUCTDETAILURL]" class="NewProduct-Title" lang="[LOCALE]">[MODELNAME]</a></td>
    </tr>
    <tr>
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td class="NewProduct-Image"><a title="[MODELNAME]" href="[PRODUCTDETAILURL]" class="NewProduct-Title" lang="[LOCALE]">[IMAGE::BorderWidth=0::AlternateText=Product Image]</a></td>
            <td class="NewProduct-Summary">[SUMMARY]</td>
          </tr>
        </table></td>
    </tr>
    <tr>
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td class="NewProduct-Price">[PRICE][EDIT]</td>
            <td class="NewProduct-AddToCart"><a title="[ADDTOCARTLABEL]" href="[ADDTOCARTURL]" class="NewProduct-Title" lang="[LOCALE]"><img alt="[ADDTOCARTLABEL]" src="[TEMPLATEBASEURL]/Ressources/Images/addToCart_[LOCALE].jpg" border="0" lang="[LOCALE]" /></a></td>
          </tr>
        </table></td>
    </tr>
    <tr>
      <td class="NewProduct-LinkDetail">[LINKDETAIL][LINKDETAILIMG]</td>
    </tr>
  </table>
</div>

 

Pour le boutton qui s'adapte au texte à l'intérieur, crois en mon expérience il ne faut pas faire comme ça. Les utilisateurs vont mettre un texte de 3km de long, d'autres vont changer la taille de la typo... il vaut mieux fournir une url d'image dans laquelle on peut glisser le locale [TEMPLATEBASEURL]/Ressources/Images/addToCart_[LOCALE].jpg et le fichier PSD des bouttons. La même template sera fournie avec uniquement le texte et un autre style pour le boutton.

Pour info j'étais d'abord parti sur une template utilisant les règles CSS 2 et le standard optimal en terme d'architecture HTML à savoir un ensemble de DIVs et un positionnement CSS, mais je suis revenu sur une architecture en TABLE car je crois que celle-ci tout le monde la comprend. On fera néanmoins une template et des CSS valides W3C.

 seb

 
Nouveau message
29/04/2007 14:12
 

Pour info la liste des TOKENS actuelle :

/DNNDNN TOKENs for WWStore 2.0.7 DNNDNN/


/DNNDNN Usuable TOKENS (use it everywhere in a template) DNNDNN/

[EDIT] : Edit button, shows only in EditMode.

[MODELNAME] : Model/Product Name
[MANUFACTURER] : Model/Product Manufacturer's Name
[MODELNUMBER] : Model/Product Number
[TITLE] : [MANUFACTURER] + [MODELNAME] + [MODELNUMBER] + Link to Product Details

[SUMMARY] : Model/Product Summary. Displays the short description if exists, or the full description.
[DESCRIPTION] : Model/Product Description. Displays the full description.

[WEIGHT] : Weight
[HEIGHT] : Height
[LENGTH] : Lenght
[WIDTH] : Width
[SURFACE] : Surface (Length * Width)
[VOLUME] : Volume (Length * Width * Width)

[PRICE] : Price wihout VAT
[VATPRICE] : Price including VAT

[ADDTOCART] : Add to cart only
[ADDTOCARTIMG] : Icon (Images/addtocartimg.gif) - Add to cart only
[PURCHASE] : Add and go to cart
[PURCHASEIMG] : Icon (Images/purchaseimg.gif) - Add and go to cart

[LINKDETAIL] : Link to Product Detail
[LINKDETAILIMG] : Icon (Images/linkdetailimg.gif) - Link to Product Detail



/DNNDNN SPECIAL TOKENS DNNDNN/

List Container :

[LISTTITLE] : List Title (New Products, Featured Products, etc.)
[PRODUCTS] : List Products


Category Container :

[LISTTITLE] : List Title (New Products, Featured Products, etc.)
[PAGENAV] : Page Navigation Controler (<< 1 2 3 >>)
[PAGEINFO] : Page Numbering (Page n of m)
[PRODUCTS] : List Products

 
Nouveau message
30/04/2007 17:16
 

 
BRAVO ! je vois qu'on me cache de BONNES choses !
Continuez dans votre coins ! Continuez !

M'en fout, Gilles à skype et je vais essayer de lui faire faire encore 2 3 trucs inutiles.... et toc !

David

 


"Qui ne connait pas l'Histoire ne connait rien".
 
Nouveau message
30/04/2007 18:18
 

Mes amis,

Si vous saviez ! Je m'étais dis qu'avec Seb ce serait plus cool, car il sait aussi bien développer un module que faire du css (il a fait css première langue dans son cycle universitaire ).

Et bien c'est pire ! Seb a lui aussi de très bonnes idées, justifiées par des arguments imparables. Alors je dois me plier à leurs demandes. Que voulez-vous, chui-trop-gentil.

Gilles

 
Nouveau message
30/04/2007 20:12
 

Ahah

En attendant y'a que l'autre là avec son TShirt Oxbow qui ne tient pas le pinceau ;) (il se reconnaîtra, pas vrai DAVID)

 

seb

 
Précédente
 
Suivante
HomeHomeProjetsProjetsStore : dévelop...Store : dévelop...Quelques captures dQuelques captures d'écran du skin par défaut en préparation