Prezzi barrati e sconti in VirtueMart

Uno degli argomenti che ciclicamente si presentano nel forum di Joomla, di cui sono uno dei moderatori, è come visualizzare i prezzi barrati, in VirtueMart, quando  sono presenti degli sconti, e come indicare lo sconto in termini di percentuale. A dire il vero l'attuale template del nostro e-shopping ha quasi risolto il primo problema, ma diversi template commerciali mantengono ancora la vecchia impostazione.

VirtueMart 2 e la modifica dei templates

Come detto in altri articoli, è importante lavorare a regola d'arte, cominceremo quindi da un ovveride per il template della view che andremo a modificare.

All'interno della cartella del nostro template accediamo alla cartella "html" e creiamo, se già non esistono, prima la cartella "com_virtuemart" e poi, al suo interno la cartella "productdetails".

Per maggiori informazioni sulla tecnica degli override fate riferimento alla documentazione di joomla.

Copiamo ora dalla cartella di VirtueMart, o editiamo, se già esiste, il file "default_showprices.php" che è l'estensione (il sub template) del template "default.php" che si occupa di visualizzare i vari prezzi associati ai prodotti.

 

I prezzi in Virtuemart

All'interno dei prodotti di VirtueMart i prezzi sono conservati nell'array associativo $product->prices, ove $product è una istanza di un prodotto, che contiene tutti i valori pre-calcolati. Nell'ipotesi più comune, ovvero quella di negozio che vende al pubblico, quindi con prezzi IVA compresa, tre sono gli indici che ci interessano:

• [basePriceWithTax]
  Il prezzo a cui sarebbe venduto il prodotto se non ci fosse lo sconto
• [discountAmount]
  L'importo dello sconto, indicato come valore negativo
• [salesPrice]
  Il prezzo effettivo di vendita tenendo conto dello 

I tre valori sono legati tra loro dalla relazione:

prices['basePriceWithTax'] + prices['discountAmount'] = prices['salesPrice']

ricordatevi che lo sconto è espresso come valore negativo.

 

Modificare Il template default_showprices

Di seguito riporto uno spezzone semplificato del codice che si trova in ogni template, in cui sono state lasciate solo le parti di codice di interesse per la nostra trattazione; ovviamente una volta capito il ragionamento sarà facile applicare la modifica a qualsiasi template.

//inizio
<div class="product-price" id="productPrice<?php echo $this->product->virtuemart_product_id ?>">
 <?php
 // codice semplificato
 echo $this->currency->createPriceDiv ('basePriceWithTax', 'COM_VIRTUEMART_PRODUCT_BASEPRICE_WITHTAX', $this->product->prices);
 echo $this->currency->createPriceDiv ('discountAmount', 'COM_VIRTUEMART_PRODUCT_DISCOUNT_AMOUNT', $this->product->prices);
 echo $this->currency->createPriceDiv ('salesPrice', 'COM_VIRTUEMART_PRODUCT_SALESPRICE', $this->product->prices);
 ?>
</div>
 

 Il metodo CurrencyDisplay::createPriceDiv() serve a formattare il testo secondo le specifiche di visualizzazione impostate in VirtueMart (valuta, decimali, separatori). Inoltre il prezzo viene raccolto all'interno di un tag div a cui viene aggiunta una classe il cui nome è composto da 'Price' seguito dal nome dell'indice di riferimento, ecco come appare il primo prezzo (in versione Inglese):

<div class="PricebasePriceWithTax" style="display : block;">Base price with tax: <span class="PricebasePriceWithTax">244,00 €</span></div>

A noi interessa  che questo prezzo sia barrato solo quando è presente uno sconto, ovvero quando il valore associato all'indice [discountAmount] è diverso da zero. Il metodo più semplice per fare ciò è aggiungere una classe, in modo da poter pilotare la rappresentazione semplicemente con i css. A differenza di ciò che fa Virtuemart, noi però vogliamo la libertà di agire sull'aspetto di tutti i prezzi, non solo su quello di base (ricordate che avevo detto che nei nuovi templates il problema era quasi risolto?).

Provvederemo pertanto a modificare il codice del nostro template, cambiando la classe del div che raccoglie tutti i prezzi, nel seguente modo:

//inizio
<div class="product-<?php echo ($this->product->prices['discountAmount']?'discount':'price'); ?>" id="productPrice<?php echo $this->product->virtuemart_product_id ?>">
 <?php
 // codice semplificato
 echo $this->currency->createPriceDiv ('basePriceWithTax', 'COM_VIRTUEMART_PRODUCT_BASEPRICE_WITHTAX', $this->product->prices);
 echo $this->currency->createPriceDiv ('discountAmount', 'COM_VIRTUEMART_PRODUCT_DISCOUNT_AMOUNT', $this->product->prices);
 echo $this->currency->createPriceDiv ('salesPrice', 'COM_VIRTUEMART_PRODUCT_SALESPRICE', $this->product->prices);
 ?>
</div>
 

In questo modo se è presente uno sconto la classe del contenitore sarà 'product-discount', altrimenti resterà la classe di default 'product-price'.

Una analoga modifica è necessaria per la visualizzazione dell'elenco dei prodotti che si trova nel template 'default' della vista 'category'.  

 

Il css con il prezzo barrato

Con poche righe di css possiamo ora definire la visualizzazione dei nostri prezzi:

/* prezzo senza sconto*/
.product-price .PricebasePriceWithTax{
}
.product-price .PricediscountAmount{
   display:none;
}
.product-price .PricesalesPrice{
}
 
/* prezzi con lo sconto*/
.product-discount{
  /* qui ci sta bene una immagine di sfondo, come l'etichetta rossa presente sotto */
}
.product-discount span.PricebasePriceWithTax{
   text-decoration: line-through;
}
.product-discount .PricediscountAmount{
}
.product-discount span.PricesalesPrice{
   color: red;
   font-size: 140%;
}

In questo modo nascondiamo la visualizzazione dello sconto nel caso non ci sia (sconto: 0%, sta proprio male), mentre in caso di sconto il normale prezzo di vendita risulterà barrato ed il nuovo prezzo di vendita apparirà in rosso e di dimensione maggiore rispetto agli altri prezzi. Prestate attenzione all'uso del tag span nelle definizioni dei prezzi con lo sconto: è necessario per applicare la formattazione al solo prezzo e non anche alla stringa descrittiva.

 

Sconti in percentuale

Vediamo ora il secondo aspetto: come indicare lo sconto in termini di percentuale e non di importo.

Dalle proprietà delle proporzioni sappiamo che :

[prezzo di vendita normale] : [importo sconto] = 100 : [percentuale sconto]

risolvendo la proporzione per il parametro cercato

[percentuale sconto] = ( [importo sconto] * 100 ) / [prezzo di vendita normale] 

trasformato in php, da inserire nel blocco di cui sopra, abbiamo:

$discountRate = abs( $this->product->prices['discountAmount'] * 100 / $this->product->prices['basePriceWithTax'] );
  echo '<div class="PricediscontRate" style="display : block;">' . JText::_('COM_VIRTUEMART_PRODUCT_DISCOUNT_RATE') . '<span class="PricediscountRate">'. sprintf("%0.1f %%", $discountRate) . '</span></div>';
 

Ricordatevi che l'importo dello sconto è negativo, pertanto abbiamo usato la funzione abs() per ottenere il valore assoluto dello stesso, ma ciò non è assolutamente necessario, anzi molte persone potrebbero gradire maggiormente lo sconto espresso in termini negativi, in tal caso basta rimuove la funzione.

Ricordatevi anche di inserire il valore di COM_VIRTUEMART_PRODUCT_DISCOUNT_RATE attarverso il pannello di gestione degli ovverride delle lingue di joomla; l'uso di una costante di traduzione invece del testo permette di mantenere la traducibilità del testo.

Per quanto riguarda i css vale il discorso fatto poco prima.

 

Ma è così difficile?

Questa domanda sorge dalla constatazione che chi solleva il problema, quasi sempre, identifica se stesso come un operatore professionista. Che un imprenditore, che si occupa di tutt'altro, ponga domande del genere non sarebbe fonte di alcuna perplessità, magari vuole solo verificare se è un'operazione fattibile e se è fattibile rapidamente.

Ma quando sono persone che si identificano come professionisti a porre domande del genere, sorgono veramente terribili sospetti sul livello di competenza di certi se dicenti operatori del settore. Queste persone, al fine del loro mal operare, gettano discredito su tutto il settore, rendendo difficile, anche ad operatori seri, professionali ed operanti sul mercato da anni risultare credibili di fronte a un cliente che è stato 'scottato' da questi informatici improvvisati.

È capibile che in un momento di crisi si guardi con molta attenzione al prezzo, ma si valuti la qualità del servizio che viene offerto; andreste da un dentista che non ha mai studiato medicina e che fino al giorno prima ha svolto il lavoro di commercialista?

Pertanto parlate con il vostro interlocutore del vostro progetto e lasciate che vi esponga le sue considerazioni, è un buon modo per valutarne l'esperienza. Valutate il suo sito web, valutate il portfolio e le attività già svolte. e per lo meno assicuratevi che abbia terminato le scuole medie e che sappia impostare una proporzione!

Valutate attentamente la persona a cui state affidando il futuro della vostra azienda: non è che non lo si può fare con il vostro programma, è molto spesso chi avete davanti che non lo sa fare!

 

Buon e-commerce a tutti,

marco maria leoni