Unofficial WebSite X5
Categoria generale => FAQ - HowTo - Tutorials => Topic aperto da: lemonsong - 16 Luglio, 2020, 16:14:19
-
E' vero che dalla finestra "Gestione Contenuti in Lingua" possiamo personalizzare i vari testi che WS inserisce in automatico esportando/importando un file .xml, ma se vogliamo semplicemente inserire un testo senza utilizzare questa procedura, possiamo farlo anche con solo i CSS senza ricorrere ad altri metodi più o meno complessi.
In ogni step della pagina carrello, il div con id cart-container, ha un attributo data-step con il rispettivo valore che possiamo utilizzare facilmente come selettore per ogni, appunto, step e-commerce.
Per esempio, se vogliamo aggiungere del testo in grassetto, di colore rosso allo step zero, questo sarà il CSS:
<!-- Proprietà Pagina (Carrello e-commerce) - Esperto - Prima della chiusura del tag HEAD -->
<style>
#cart-container[data-step="0"] #cart-header p::after {
content: " Questo testo è stato inserito coi CSS";
color: red;
font-weight: bold;
}
</style>
- 0 (zero) ovviamente è il numero che identifica i vari step
- con after il testo verrà posizionato dopo il testo esistente (before prima) - https://www.w3schools.com/css/css_pseudo_elements.asp (https://www.w3schools.com/css/css_pseudo_elements.asp)
- il valore di content si spiega da solo, come le due proprietà e valori che formattano il testo
Se vogliamo, per esempio, mandare a capo il "nuovo" testo aggiunto con after, basterà aggiungere: display: block;
Viceversa, se abbiamo usato before, sarà il testo già esistente ad andare a capo.
ATTENZIONE: il testo "scritto" in questo modo NON sarà selezionabile.
Se la selezione del testo è importante, l'attributo data-step ci consente facilmente di usare anche JS/jQuery per inserire del testo e altro.
QUESTO (http://quellidelcucuzzolo.altervista.org/appunti/ws-testo-step0-cart-css/) è un esempio, fatto con la 2020.2.5 Professional Demo
-
Interessanti gli appunti sul sito "quelli del cocuzzolo"
:)