Personalizzazione dei Template

Warning

La modifica dei Template richiede conoscenze di HTML, CSS e JavaScript. Non possiamo darti supporto sulla personalizzazione se non conosci le basi di questi linguaggi: rivolgiti a uno Sviluppatore Web (che, in caso di dubbi, può contattarci).

Personalizza gli stili della Lista Offerte (Pagina Offerte e Shortcode Offerte) e della Pagina Articolo nella sezione Template del Plugin.

Due tipologie:

Template Offerta — per le Liste Offerte (Pagina Offerte e Shortcode);
Template Articolo — per le Pagine degli Articoli (aperte cliccando un'offerta).

Creando un nuovo template (pulsanti in alto) si apre l'editor, popolato col template di default:

Ogni template ha più Formati (tab in alto):

Formato	Per
Normale	offerte normali (no coupon)
Normale Senza Prezzo	offerte normali senza prezzo precedente
Coupon	offerte con coupon codice
Coupon Senza Prezzo	offerte coupon codice senza prezzo precedente
CSS	stili applicati agli elementi dei formati sopra

Modifica ogni Formato del template. I TAG disponibili sono elencati in alto (sfondo arancione). Per salvare, assegna un nome (in alto a destra) e premi Salva.

Salvato, il template è applicabile dalle impostazioni viste prima e compare l'ID Template da usare negli shortcode:

Utilizzo di JavaScript

Puoi usare JavaScript nei template per classi/azioni dinamiche basate sui dati. Nel template Offerte di default, JS mostra l'icona del fulmine accanto al titolo per le Offerte Lampo. Parte del codice (dentro l'<a> della singola offerta):

<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} vale 1 se l'offerta è una Offerta Lampo. L'IF mostra l'SVG con classe lightning_deal (di default display:none;).

Warning

Essendo il template usato per ogni offerta della lista, usa document.currentScript.parentElement per accedere solo all'elemento dell'offerta corrente. Con document.getElementsByClassName('lightning_deal') modificheresti tutte le offerte insieme (cosa indesiderata).

Evita document.write: con la paginazione scrolling può rompere la pagina.

Note

Ogni Lista Offerte è racchiusa in <div id="deals">: puoi disporre le offerte col selettore CSS #deals.

Scadenza Offerte

A offerta scaduta, il TAG {deal-expired} diventa deal-expired (altrimenti stringa vuota). Nei template di default è inserito nella class:

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

Così, a offerta scaduta, il <div> riceve la classe deal-expired, che di default è:

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

Questo selettore ingrigisce l'offerta terminata.