# Personalizzazione dei Template {% hint style="warning" %} 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. {% endhint %} 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 `` 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). {% hint style="warning" %} **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. {% endhint %} {% hint style="info" %} Ogni "*Lista Offerte*" è wrappata da un elemento `
`. E' pertanto possibile definire la disposizione delle offerte al suo interno tramite il selector CSS **#deals**. {% endhint %} #### 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: ```
...
``` Pertanto, in caso di offerta scaduta, verrà applicata al `
` la classe `deal-expired`, che nell'esempio di default è: ``` #deals .deal-expired { opacity: 0.7; filter: grayscale(100%); } ``` Questo selector ingrigisce l'offerta terminata. [^1]: Altro codice... [^2]: Altro codice... --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.dealsbot.io/integrazioni/plugin-wordpress/personalizzazione-dei-template.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.