Quoi d'nuuf ?
Je prépare un article assez complet sur les classes CSS de Joomla 1.0.x avec comme mot d'ordre "Un petit dessin vaux mieux qu'un long discourt" !
 
Articles les plus lus
Derniers articles
Download
SW Menu Free
OpenSEF 2.0.0 RC5
Jogadget 0.4
gko_neurologeek v0.6

Les "balises" de Virtuemart

Version imprimable Suggérer par mail
10-03-2007

joomlaVirtuemart est LE composant de eCommerce pour Joomla. Le niveau de qualité atteind aujourd'hui en fait même l'une des meilleurs application ecommerce écrite en php. Son efficacité est tel que bon nombres de sites propulsés par Virtuemart fleurissent et cela peut représenter un problème de personnalité. En effet la plupart des intégrateurs se contentent de mettre en place les fichiers de navigation de catégories et de détails de produits fournit d'origine avec Virtuemart. Il en résulte des boutiques stéréotypés avec peu de personnalité.

Je vous propose de decouvrir les balises propre à Virtuemart qui vont vous permettre de réaliser vos propres fichiers de navigation de catégories et vos propres fichiers de détails de produits.

 

Avant propos : Tout d'abord une mise au point sur les termes employés dans cette articles, en effet je parle de "balises" propre à Virtuemart. C'est un abus de langage, pour être précis, le sujet de cette articles porte sur certaines fonctions (d'affichage) de Virtuemart. Le terme de "fonctions" pouvant être confusant pour les personnes non sensibilisé au jargon de la programmation j'utiliserai donc le terme de "balises" tout à long de cette article. En effet, je trouve le terme "balise" plus évocateur.

D'abord commençons par quelques "définitions" afin de comprendre exactement de quoi nous parlons : 

Fichiers de Navigation de Catégories  de Virtuemart :

Une petite image valant mieux qu'un long discours, voyons de quoi je parle :

  Navigaution_categories

Il s'agit du fichier qui permet l'affichage successif des produits dans une pages lorsque l'on clic sur une catégorie de produits dans Virtuemart. En fait chaque produits est afficher dans un "bout de code html" qui se situe dans un fichier php. Le fichier php en question est : /administrator/components/com_cvirtuemart/html/templates/browse/browse_n.php (n étant remplacer par un chiffre de votre choix, il en existe 5 d'origine.
Ce fichier contient tout simplement une sorte de tableau renfermant les balises spécifique de Virtuemart qui permettent d'afficher l'image du produit, son prix, sa description rapide, ajouter au panier etc etc... Ce "bout de code" est affiché dans la page autant de fois que demandé par joomla (oui, par joomla et non pas par Virtuemart, 30 fois par défaut).  

Fichier de détails produits  de Virtuemart :

Même chose, voila une petite capture d'écran :

details_produits

C'est le fichier qui va permettre d'afficher tous les détails de vos produit. En générale il s'affiche après avoir cliquer sur [Détails du produit] dans les pages de navigation de catégories. Il reprend le même principe que le fichier browse_1.php : c'est encore un fois un fichier php qui renferme une petite partie de html (toujours une sorte de tableau) qui permet d'insérer les balises propre à Virtuemart. Ce fichier est : /administrator/components/com_cvirtuemart/html/templates/product_details/flypage.php 

Les balises :

Les balises de Virtuemart vont vous permettre d'afficher soit dans browse_n.php soit dans flypage.php différentes informations relative à vos produits et ce de manière extrêmement simple. Pour appeler un balise il suffit d'ajouter son nom entre accolade : {nom_de_la_balise}. Rien de plus simple ! L'information que vous désirez afficher s'affichera à la place exacte ou vous avez placer votre balise.

Les balises disponible :

  • {product_name} : affiche le nom du produit.
  • {product_price} : affiche le prix du produit (fonction complète incluant, prix HT, TTC, avec ou sans remise, celons la configuration des prix dans Virtuemart.
  • {product_sku} : affiche la référence du produit.
  • {product_flypage} : affiche la feuille de détails du produit, l'interet de cette balise est de pouvoir faire des liens direct vers la flypage correspondant au produit.
  • {product_thumb_image} : affiche l'image miniature de votre produit.
  • {image_height} : hauteur de l'image de votre produit, permet de "construire" proprement certaine expression html (pour faire une popup par exemple)
  • {image_width} : largeur  de l'image de votre produit, permet de "construire" proprement certaine expression html (pour faire une popup par exemple)
  • {product_s_desc} : affiche la description rapide de votre produit.
  • {product_description} : affiche la description complète de votre produit.
  • {product_rating} : affiche la note de votre produit.
  • {form_addtocart} : insert l'ensemble "Ajouter au panier" 
  • {product_availability} : délai de votre produit
  • {related_products} : affiche les produits connexes a votre produit.
  • {manufacturer_link} : affiche un liens vers le fabricant de votre produit.
  • {edit_link} : ajouter un liens permettant aux administrateurs et/ou vendeur d'éditer le produit coté frontend lorsqu'il sont loggé sur le site.
  • {product_packaging} : ajoute les informations relatives au conditionnement de votre produit
  • {file_list} : ??? probablement un balise nécessaire au vendeurs de logiciel.
  • {product_type} : ??? type de produit ? Je ne voit pas...
  • {product_reviewform} : affiche le formulaire de notation pour les utilisateurs enregistrés.

Utilisation :

L'utilisation des balises est extrêmement simple, si on prend l'exemple du fichier de navigation de catégories : Il suffit de créer un tableau (tableau en dur a base de <tr> et de <td> ou à base de <div> peut importe) et d'insérer les balises souhaitées ou l'on veut qu'elle s'affiche. Voila un exemple de fichier de navigation de creer de toute pièce :

<table
 style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td id="image" colspan="1" rowspan="5" width="200px" style="text-align:center;"><a href="{product_flypage}">
          <img src="{product_thumb_image}" {image_height} {image_width} border="0" alt="{product_name}" /></a></td>
      <td id="titre" colspan="2" rowspan="1"><h1><a style="font-size:16px; font-weight:bold;" href="{product_flypage}">{product_name}</a></h1></td>
    </tr>
    <tr>
      <td id="ref" colspan="2" rowspan="1"><p>Réf : {product_sku}</p></td>
    </tr>
    <tr>
      <td id="s_desc" colspan="2" rowspan="1"><p>{product_s_desc}</p></td>
    </tr>
    <tr>
      <td id="detail" colspan="2" rowspan="1"><a href="{product_flypage}">Cliquer içi pour une description détaillée du produit...</a></td>
    </tr>
    <tr>
      <td id="prix"><p>{product_price}</p></td>
      <td id="carte"><div align="right">{form_addtocart}</div></td>
    </tr>
    <tr>
      <td id="spacer" colspan="3" padding-left="50px" rowspan="1"><br><br><hr width="80%"><br><br></td>
    </tr>
</table>
 

Pas besoin des balises html : <html>, <body> ou encore <head> elle sont déjà présente dans la page de destination. Il suffit ensuite d'enregistrer ce contenu dans un fichier .php avec le nom de votre choix puis d'envoyer ce fichier php sur votre serveur dans le répertoire : /administrator/components/com_cvirtuemart/html/templates/browse/. Attention n'oublier pas de dire à Virtuemart d'utiliser votre fichier est pas celui d'origine. Par exemple si vous avez nommé votre fichier navigation.php alors rendez vous dans Virtuemart puis Menu Configuration générale >> Configuration >> Site >> Layout >> Modèle Categorie >> içi renseigner le nom de votre fichier, dans notre cas "navigation" (sans le .php... et sans les guillements).

Voila ce que donne l'exemple ci-dessus :

Exemple de fichier de navigation

Pour réaliser votre fichier de détails de produits le principe sera strictement le même : un tableau html dans lequel on viens placer à l'endroit souhaité la balise correspondante à l'information que l'on souhaite afficher. Le nouveau fichier de détails de produits sera à enregister dans /administrator/components/com_cvirtuemart/html/templates/product_details/.

Ca y est, vous voila prêt pour personnalisé au mieux votre boutique Virtuemart !

 

 
Suivant >