Personalizzazione dei Template

La modifica dei Template richiede un minimo di conoscenza di HTML / CSS e Javascript. Purtroppo non siamo in grado di darvi supporto nella personalizzazione di un template se non conoscete le basi dei suddetti linguaggi. Consigliamo di rivolgermi ad uno Sviluppatore Web per la configurazione dei Template a vostro piacimento. Qualora lo sviluppatore avesse dubbi / domande potrà contattarci per supporto.

E' possibile personalizzare gli stili della lista offerte (Pagina Offerte e Shortcode Offerte) e della Pagina Articolo nella sezione "Template" delle impostazioni del Plugin.

Esistono due tipologie di Template:

• Template Offerta: sono i Template utilizzati per le Liste Offerte (Pagina Offerte e Shortcode Offerte)

• Template Articolo: sono i Template utilizzati per le Pagine degli Articoli del sito, aperta in seguito al Click di un'offerta nella Lista Offerte.

E' possibile creare nuovi Template selezionando i due pulsanti in alto, in base alla tipologia di Template che si vuole creare.

Verrà quindi aperto l'Editor per il nuovo Template creato che verrà inizialmente popolato con il Template di default:

Per ogni template ci sono diverse tipologie di Formati (tab in alto):

• Normale: utilizzato per le Offerte Normali (no coupon)

• Normale Senza Prezzo: utilizzato per le Offerte Normali (no coupon), che non hanno un prezzo precedente (non hanno un vero e proprio sconto)

• Coupon: utilizzato per le Offerte Coupon (con codice)

• Coupon Senza Prezzo: utilizzato per le Offerte Coupon (con codice), che non hanno un prezzo precedente

• CSS: contiene gli stili CSS applicati alle classi / elementi definiti nelle sezioni precedenti

Similmente a come avviene sui BOT, è necessario modificare ogni Formato del template.

La lista dei TAG disponibili è elencata in alto (con sfondo arancione).

Per salvare il nuovo Template è necessario assegnarli un nome (casella in alto a destra) e premere il pulsante "Salva".

Una volta effettuato il salvataggio sarà possibile applicare il nuovo template tramite le impostazioni viste precedentemente. Comparirà inoltre l'ID Template da utilizzare per gli Shortcode:

Utilizzo di Javascript

E' possibile utilizzare Javascript all'interno dei template per definire classi / azioni dinamiche sulla base dei dati ritornati.

Nel template Offerte di default, Javascript è utilizzato per visualizzare l'icona del fulmine (accanto al titolo) per i prodotti che sono Offerte lampo.

Una parte del codice aggiunto al template (all'interno dell'elemento <a> della singola offerta) è il seguente:

<a ...>

    <svg class="lightning_deal" style="display: none;" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 384 512">
                        <path
                            d="M0 256L28.5 28c2-16 15.6-28 31.8-28H228.9c15 0 27.1 12.1 27.1 27.1c0 3.2-.6 6.5-1.7 9.5L208 160H347.3c20.2 0 36.7 16.4 36.7 36.7c0 7.4-2.2 14.6-6.4 20.7l-192.2 281c-5.9 8.6-15.6 13.7-25.9 13.7h-2.9c-15.7 0-28.5-12.8-28.5-28.5c0-2.3 .3-4.6 .9-6.9L176 288H32c-17.7 0-32-14.3-32-32z" />
    </svg>

    <script>
        if ('{is_lightning_deal}' == '1') {
            document.currentScript.parentElement.getElementsByClassName('lightning_deal')[0].style.display = "inline-block";
        }
    </script>
</a>

Il TAG {is_lightning_deal} viene sostituito con il valore 1 nel caso in cui l'offerta corrente sia una Offerta Lampo.

L'IF precedente aziona la visibilità dell'oggetto SVG con classe "lightning_deal" (notare il display:none; di default).

NOTA IMPORTANTE: essendo questo template utilizzato per ogni singola offerta della Lista Offerte, è necessario l'utilizzo di document.currentScript.parentElement per accedere SOLAMENTE all'elemento con classe lightning_deal dell'offerta corrente.

Utilizzando, ad esempio, document.getElementsByClassName('lightning_deal") modificheremmo tutte le offerte della pagina "in un colpo solo" (cosa che non vogliamo).

Da evitare inoltre l'utilizzo di document.write, in quanto in caso di Paginazione Scrolling può causare problemi nella visualizzazione della pagina web.

Ogni "Lista Offerte" è wrappata da un elemento <div id="deals">.

E' pertanto possibile definire la disposizione delle offerte al suo interno tramite il selector CSS #deals.

Scadenza Offerte

Quando un'offerta scade, il TAG {deal-expired} viene sostituito con il testo deal-expired (altrimenti con stringa vuota).

Nei template di default il TAG {deal-expired} viene inserito all'interno dell'attributo class dell'HTML in questo modo:

<a href="{link}" target="_blank" class="deal-product-link">
    <div class="deal-product {deal-expired}">
    ...
    </div>
</a>

Pertanto, in caso di offerta scaduta, verrà applicata al <div> la classe deal-expired, che nell'esempio di default è:

#deals .deal-expired {
    opacity: 0.7;
    filter: grayscale(100%);
}

Questo selector ingrigisce l'offerta terminata.