Inserire etichetta descrizione varianti

[Emanuele]

Salve a tutti,


è possibile inserire una "etichetta" o descrizione sopra le varianti per indicare la selezione da fare nel carrello?


Per esempio se la tendina variabile contiene 3 voci "Rosso, Verde, Blu" appena sopra la tendina una piccola scritta "Colore:"


Grazie mille


ciao

[lemonsong]

Potresti inserire il testo delle varianti, per esempio, così: colore rosso, colore verde e colore blu.
Se invece vuoi proprio una sorta di etichetta sopra la select, puoi provare con i selettori CSS ::after o ::before per l'Oggetto Elenco Prodotti e i vari passi del carrello.

In alternativa, per l'Oggetto Elenco Prodotti, puoi provare con jQuery ed i vari metodi .append(), .prepend(), etc...

Sarebbe anche buona cosa dare un riscontro alle risposte ricevute, esempio: http://www.unofficialwsx5.com/index.php?topic=2184.0

[Emanuele]

Potresti inserire il testo delle varianti, per esempio, così: colore rosso, colore verde e colore blu.
Se invece vuoi proprio una sorta di etichetta sopra la select, puoi provare con i selettori CSS ::after o ::before per l'Oggetto Elenco Prodotti e i vari passi del carrello.

In alternativa, per l'Oggetto Elenco Prodotti, puoi provare con jQuery ed i vari metodi .append(), .prepend(), etc...

Sarebbe anche buona cosa dare un riscontro alle risposte ricevute, esempio: http://www.unofficialwsx5.com/index.php?topic=2184.0

Hai perfettamente ragione e mi scuso per il mancato feedback nell'altro topic, ho provveduto e mi scuso ancora.


Per quanto riguarda le soluzioni proposte purtroppo (per la tipologia di varianti che uso) non posso indicare direttamente nel testo della variante stessa la "tipologia".


Per quando riguarda i selettori CSS e jQuery sicuramente troverò come adoperarli, ti chiedo solo se puoi dirmi dove andare ad inserire in codice in website x5...considera che nella parte dell'elenco prodotti ho nascosto le varianti che vengono selezionate solo nel "CARRELLO ECOMMERCE" ovvero http://www.vostrosito.it/cart/index.html#step1 .


Grazie ancora per la disponibilità

[lemonsong]

Se devi "raggiungere" solo il Passo 1 del carrello, ti consiglio di cercare soluzioni con i CSS perché quella "sezione", essendo generata da JavaScript, è abbastanza ostica da modificare.

Visto che la sezione head della pagina speciale "Carrello e-commerce" è bloccata, per scrivere codice "pulito", inseriscili in Impostazioni Generali - Esperto - Prima della chiusura del tag HEAD

Grazie ancora per la disponibilità

Prego.

[Emanuele]

Grazie, farò delle prove con i CSS allora.




Pensi invece che sia possibile modificare il testo ed eventualmente la dimensione del carattere della scritta "La seguente lista visualizza tutti i prodotti che sono stati inseriti nel Carrello e il totale dell'Ordine."?

[lemonsong]

E' tutto scritto nella guida:

• il testo lo cambi in Impostazioni Generali - Lingua dei contenuti (apri la finestra Gestione Contenuti in Lingua)
• la formattazione viene gestita in Impostazioni Avanzate - Stili e Modelli - Testo della Pagina

Se invece vuoi formattare solamente quella scritta, puoi inserire codice html nel testo da cambiare (punto 1), esempio:

Codice:

Only registered users can see contents. Please click here to Register or Login.
Con i CSS formatti come preferisci.

[Emanuele]

Grazie, ho fatto un po' di prove con CSS e :Before e qualcosa ho ottenuto ma (vista la mia totale ignoranza dell'argomento purtroppo) non sono arrivato ad un risultato completo.


Il codice che inserisco è il seguente:

Codice:

Only registered users can see contents. Please click here to Register or Login.

Il primo problema che riscontro è che non riesco a applicare il codice dove vorrei perchè così facendo lo applico all'elenco prodotti e non al "Riepilogo Ordine"  ovvero http://www.vostrosito.it/cart/index.html#step1 . Immagino perchè indicando ".product-options" vado a beccare proprio le tendine di selezione nel riepilogo ordine. Mi chiedo allora se esista un modo per capire come si chiama un elemento della pagina (tipo .product-options) in modo da lavorarci con i CSS.

Il secondo problema è che comunque il before (come l'ho impostato) funziona solo sulla prima voce "Colore". Per scrivere quel codice o preso da esempio quanto avevi indicato per nascondere le tendine con il comando "hidden..."

[lemonsong]

Quei selettori non si trovano al Passo 1 del carrello.

Per individuare elementi, classi, id etc.. presenti al Passo 1 del carrello devi usare strumenti tipo Firebug o anche gli strumenti di sviluppo di default dei vari browser.

I selettori ::after e ::before non credo possano essere applicati all'elemento select

Prova a vedere se un risultato del genere può andare:

[ Guests cannot view attachments ]

Una cosa fondamentale è che tutti i prodotti dovranno avere la stessa tipologia di varianti e sotto-varianti, altrimenti intervenire diventa molto complesso.

[Emanuele]

Si certo, una soluzione del genere andrebbe benissimo

[lemonsong]

Premesso che io e stesil NON abbiamo la 10 Professional ma solamente una versione DEMO, questo è un CSS che dovrebbe funzionare anche nel tuo progetto, salvo impostazioni particolari da te usate:

<style>
#imCartContainer table:nth-child(1) p[style*="display"]:nth-child(2)::before {
 content: "colore -> ";
}
#imCartContainer table:nth-child(1) p[style*="display"]:nth-child(2)::after {
 content: " <- taglia";
}
</style>

Qui un esempio: http://quellidelcucuzzolo.altervista.org/appunti/ws-testo-varianti-cart/

Nota:
Non so se dipende dalla versione DEMO ma ci siamo accorti che se si modifica, al Passo 1 del carrello, solo la variante (in questo esempio il colore) non viene visualizzata la relativa sotto-variante (in questo esempio la taglia) al Passo 3 del carrello.
Questa anomalia non è dovuta al CSS inserito.

[Emanuele]

Funziona perfettamente, l'unico problema è che purtroppo, malgrado tutti i prodotti possiedano la stessa tipologia di varianti e sotto-varianti, alcuni hanno solo la variante senza avere la sotto-variante. Ne consegue che, quando la sotto-variante non è presente, appare solo la scritta "<--taglia" senza la presenza della sotto-variante


L'ideale sarebbe fare un "if" che mostra o meno la scritta dopo la sotto-variante solo se questa viene mostrata/è presente.


Ovviamente non conoscendo i css potrei aver detto una bestialità irrealizzabile e in tal caso mi scuso in anticipo