Come aggiungere etichette sconto", "novità" "gratis" e altre al prodotto scelto in un negozio online. Virtuemart 2."

Per attirare l'attenzione dei clienti su certi prodotti in un negozio online posimo aggiungere delle etichette. Possono essere "novità", "saldi", "prodotto del giorno " e altri. Questo trucco permette di evidenziare meglio le offerte del vostro negozio mettere in evidenza prodotti nuovi o scontati. Tutti amano gli sconti. Virtuemart 2 permette abbastanza facilmente introdurrere questo trucco.

ma per qualche motivo su internet e possibile trovare soltanto le soluzioni a pagamento o troppo complicate da realizzare. In questo articolo parlerò come voi da soli, velocemente e gratuitamente potete aggiungere varie etichette a prodotti in Virtuemart 2 senza l'utilizzo di estensioni aggiuntive e senza ricorrere a cambiare il codice base.

1.Aggiungere etichette in Virtuemart 2. Piano.

Prima di cominciare a realizzare, sarebbe bello pianificare tutto. Il processo di aggiunta di etichette consisterà nelle seguenti fasi:

Ho descritto velocemente il piano ma da lo stesso la possibilità di capire cosa dobiamo fare. Sotto vediamo ogni passo in dettaglio e con esempi.

 2.Selezione e preparazione immagini di etichette.

In primo luogo, è necessario decidere quanti etichette vogliamo aggiungere, scegliere immagini adatti e farli uguali di stile e dimensione. Supponiamo che abbiamo bisogno di creare tre diversi etichette con la possibilità di aggiungere qualsiasi di essa per qualsiasi prodotto. In realtà di etichette ne posiamo aggiungere quanto volete. Ho scelto "Sconto", "Novità" e "Gratis". Potete scegliere qualsiasi altra e dopo aver capito come si possono inserire potete aggiungerle in un secondo momento le vostre preferite senza fatica.

Ecco le nostre etichette: etichette

Essi rappresentano le tre immagini in formato PNG di dimensione 48x48 px. Se avete intenzione di mettere le etichette direttamente sulle immagini dei prodotti, le immagini delle etichette devono avere uno sfondo trasparente, e quindi essere nel formato PNG o GIF.

Dopo che le etichette vengono preparati, è necessario caricarle sul sito.

Il modo più semplice per farlo: via FTP caricate le immagini di etichette nella cartella: images \ stories \ virtuemart \ product

Dopo di che andiamo alla Media Manager Virtuemart 2 (Negozio -> Media) e fare clic su "Sincronizzare i media per VirtueMart"

Le immagine di etichette dovrebbero apparire nella lista: 12

Quando le etichette sono pronte e caricate sul sito si puo passare al passo successivo.

3. Creazione  campi personalizzati per etichette in Virtuemart 2.

Le etichette ai nostri prodotti li aggiungeremo con l’aiuto di campi personalizzati di Virtuemart 2. Anche perche avremo bisognio di un solo campo. Passiamo al manager di campi aggiuntivi di Virtuemart 2 e vediamo di creare un nuovo campo di tipo "Immagine" con le impostazioni come indicato in seguito:

dfhgs

Non dimenticare di indicare la posizione del layout. Deve essere unico e utilizzato solo per questo campo.

Dopo aver creato un campo aggiuntivo, passiamo alla creazione del codice con il quale possiamo richiamarlo insieme con il prodotto scelto.

 4.Aggiungiamo codice che richiamera campo aggiuntivo in Virtuemart 2 nelle categorie e per il prodotto.

Si presume che le etichette verranno asegniate ad una categoria di prodotti e sulla pagina del prodotto scelto di questa categoria.

Il codice che richiamerà campo aggiuntivo con le nostre etichette nella pagina di categoria di prodotti.

1. Copiare il file:

components / com_virtuemart / views / category / tmpl / default.php nella cartella:

templates / [il nome del tuo templete] / html / com_virtuemart / category /  (abbiamo copiato solo per avere una copia pero il codice dobiamo inserire nel fail /components / com_virtuemart / views / category / tmpl / default.php)

Se qualche cartella manca dovremo crearla da soli. Se il file è già presente nella cartella di destinazione, non è necessario di sostituirlo.

2. Nel fail che abbiamo copiato (che si trova nella cartella di template), dobbiamo trovare il codice dell'immagine principale del prodotto e aggiungere subito sotto il codice che vediamo sotto:

<div class="product floatleft<?php echo $Browsecellwidth . $show_vertical_separator ?>">
    <div class="spacer">
        <div class="width30 floatleft center">
            <a title="<?php echo $product->product_name ?>" rel="vm-additional-images" href="/<?php echo $product->link; ?>"><?php echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);?>
             </a> <!-- La fine del codice  dell'immagine principale. Dopo è necessario incorporare il codice, che è rappresentato sotto  -->
 <?php // Codice visualizzazione d'etichetta
       if (!empty($product->customfields)) { //controliamo se il prodotto ha dei campi agiuntivi ?>
       <?php foreach ($product->customfields as $field){ // se i campi ci sono, li verifichiamo tutti per trovare campo di eichetta
       if($field->layout_pos == 'product-label'){ // cerchiamo il campo del'etichetta atraverso posizione ?>    
       <div  class="category-product-label"><?php echo $field->display; //mostriamo l'etichetta ?>
       </div>
<?php }}} ?>

5.Il codice che richiama il campo aggiuntivo di etichette sulla pagina del prodotto.

1. Copiare il file: components/com_virtuemart/views/productdetails/tmpl/default_images.php

nella cartella: templates / (il nome del tuo template) / html / com_virtuemart / productdetails /

Se manca qualche cartella provvediamo di crearla da soli. Se il file è già presente nella cartella di destinazione, non è necessario sostituirlo.

2. Nel fail che abbiamo copiato (che si trova nella cartella di template), troviamo il codice dell'immagine principale e aggiungiamo dopo di esso il codice che vediamo sotto:

<div class="main-image"><?php echo $image->displayMediaFull("",true,"rel='vm-additional-images'"); ?>
     <div class="clear"></div>
    <!-- La fine del codice  dell'immagine principale. Dopo è necessario incorporare il codice, che è rappresentato sotto--> 
 <?php if (!empty($this->product->customfieldsSorted['product-label'])) { // Controlliamo se il prodotto ha un'etichetta 
        $this->position = 'product-label'; ?>
    <div class="product-label"><?php echo $this->loadTemplate('customfields'); //mostriamo  l'etichetta ?>
    </div>
 <?php }?>

Prima di modificare il codice, definiamo il modello di layout della categoria e pagina del prodotto nel template scelto da noi in Joomla, che impedirà la scomparsa delle modifiche in caso che si aggiorna Virtuemart 2.

Con questo abbiamo finito di modificare il codice. Procediamo con assegnazione etichette ai prodotti selezionati.

6.Come agiungere campo aggiuntivo con etichetta al prodotto scelto.

E molto semplice. Selezionare gli articoli nel panello di amministrazione di Vm, ai quali abbiamo intensione di aggiungere etichetta. Passiamo alle sue impostazioni. Nella scheda "Campi personalizzati", selezionare il tipo di campo "Etichetta" e scegliamo la immagine desiderata dell'etichetta.

sdgsdfds

Salviamo. Se abbiamo fatto tutto correttamente, allora nella della categoria del prodotto e sulla paggina del prodotto stesso potremmo vedere l’immagine della nostra etichetta.

 7.Creare un collegamento nel contesto del prodotto.

Tutto ciò che riguardava lavoro con i datti, abbiamo fatto. E rimasto solo di metterlo al posto suo con i css. Dato che abbiamo creato dei classi dobbiamo attribuire a questi classi delle proprietà con i valori. Qui sotto do il codice CSS che va benissimo per il modello standard di Virtuemart 2. Potete anche non usarlo. C'e sempre la possibilità di farlo in modo diverso, ma per fare un esempio, lo scrivo lo stesso :

.category-product-label{left: 30px;position: relative;top: -25px;}
.product-label {left: 50px;position: relative;top: -150px;}
.category-product-label img, .product-label img {width:48px;height:48px;}
.category-product-label .vm-img-desc, .product-label .vm-img-desc {display:none;}

Nel mio caso il percorso del fail da inserire codice css sara: \templates\vmbeez5(mio teplate predefenito)\css\position.css

Dopo di che posiamo vedere le nostre etichette simili a queste :

25

Quindi, con questi cambiamenti abbiamo ricevuto la possibilità di inserire una infinita di etichette per prodotti senza aiuto di plugin esterni . In modo simile, è possibile aggiungere e visualizzare non solo le etichette, ma anche altri eventuali dati in qualsiasi posto del nostro layout. Tutto é incredibilmente semplice. Vorrei anche dire che abbimo scritto un articolo che descrive come fare la stessa cosa per Virtuemart 3.

Letto 2967 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso