WebSite X5Help Center

 
Francesco Tedeschi
Francesco Tedeschi
User

Pulsante Aggiungi al Carrello a Capo  it

Auteur : Francesco Tedeschi
Visité 1421, Followers 2, Partagé 0  

Buongiorno,
sto cercando il modo di portare a capo il pulsante aggiungi al carrello presente nei prodotti del mio ecommerce a questa pagina, perchè, come si evince dallo screen sottostante, i campi "prezzo, quantità, aggiungi al carrello" sono tutti sulla stessa riga e da mobile risulta essere un problema a livello di visualizzazione

In questo topic https://helpcenter.websitex5.com/fr/post/234207
Giuseppe Guida ha suggerito correttamente un codice valido all'autore del topic per un problema simile al mio.
Il codice di Giuseppe Guida però manda a capo un singolo pulsante aggiungi al carrello (individuato di volta in volta).

Mi chiedevo quindi se qualcuno potesse aiutarmi tramite codice extra a mandare a capo tutti i pulsanti aggiungi al carrello con un codice unico.....

Posté le
16 RéPONSES - 4 UTILE - 1 CORRECT
Giancarlo B.
Giancarlo B.
User

a parte il codice, ma forse a livello mobile potrebbe bastare una sola scheda prodotti per riga.

Lire plus
Posté le de Giancarlo B.
Giuseppe Guida
Giuseppe Guida
User

Prova questo codice e, se dovesse funzionare, tieni conto che va bene solo per tutti i pulsanti di quella specifica pagina del tuo esempio...

Dovrebbe far andare capo il pulsante subito sotto i 480px:

<style>
@media (max-width: 479.9px) and (min-width: 200px) {
div[id^='imProductList_299_'] .imProductListCard {
display: table !important;
}
.imProductListButton {
width: 30% !important;
}
}
</style>

Se vuoi che il pulsante sia sempre visibile "a capo" in ogni risoluzione, allora togli la media query e il codice diventa:

<style>

div[id^='imProductList_299_'] .imProductListCard {
display: table !important;
}
.imProductListButton {
width: 30% !important;
}

</style>

Lire plus
Posté le de Giuseppe Guida
Francesco Tedeschi
Francesco Tedeschi
User
Auteur

Ciao Giuseppe, grazie mille x la dritta...
Ho inserito il primo codice (quello subito sotto ai 480px)

I pulsanti "aggiungi" li manda tutti a capo ma non so perchè questi pulsanti non sono più visibili e risultano tagliati dalla "cella del prodotto" il codice è online sulla stessa pagina di riferimento

Lire plus
Posté le de Francesco Tedeschi
Giuseppe Guida
Giuseppe Guida
User

Devi dare più altezza alle schede prodotto nelle impostazioni dell'Oggetto Catalogo Prodotti...

Lire plus
Posté le de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

se dai l'altezza giusta li dovresti vedere i pulsanti a capo e NON tagliati...

Lire plus
Posté le de Giuseppe Guida
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Francesco Tedeschi
... ... ... ... Mi chiedevo quindi se qualcuno potesse aiutarmi tramite codice extra a mandare a capo tutti i pulsanti aggiungi al carrello con un codice unico.....

... prova con questo:

<style> @media (max-width: 479px) { .imProductListCard {display: table !important } } </style>

... oppure, se preferisci con questo:

<style> @media (max-width: 479px) { .imProductListCard {display: table !important;height:auto !important } } </style>

*

*

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Francesco Tedeschi
Francesco Tedeschi
User
Auteur
Giuseppe Guida
se dai l'altezza giusta li dovresti vedere i pulsanti a capo e NON tagliati...


Si Giuseppe, grazie, è da sistemare l'altezza

KolaSim grazie per l'intervento.... ho provato anche i tuoi codici:
il primo codice  <style> @media (max-width: 479px) { .imProductListCard {display: table !important } } </style>
lo  trovi a questa pagina , si, diciamo che è tipo quello che ha fornito Giuseppe Guida, c'è il problema del campo quantità che graficamente non va bene, potrebbe andar meglio se il campo quantità sia affianco al prezzo.....

Il secondo codice 
<style> @media (max-width: 479px) { .imProductListCard {display: table !important;height:auto !important } } </style>
lo trovi a questa pagina
questo codice invece non fa vedere le immagini dei prodotti.....

Sarebbe interessante il primo codice se solo il campo "aggiungi" andasse a capo e non anche il campo quantità

Lire plus
Posté le de Francesco Tedeschi
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Francesco Tedeschi
... ... [...] ... ... KolaSim ... ... [...] ... ... Sarebbe interessante il primo codice se solo il campo "aggiungi" andasse a capo e non anche il campo quantità

... (1) senza e (2) con height:auto !important

<style>
@media (max-width: 479px) {
.imProductListCard { display: table !important; height: auto !important }
.imProductListButton { max-width: 60% !important; margin: auto !important; margin-bottom: 5px !important; text-align: center !important }
.imProductListPrice { float: left !important }}
</style>

... simulazione:

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Giuseppe Guida
Giuseppe Guida
User

Kol, ciao. Però spariscono le immagini del prodotto, anche nella tua simulazione le immagini non sono visibili...

Lire plus
Posté le de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

Francesco prova ad aggiunger al codice di Kol la seguente stringa:

.imProductListImage {
height: 200px !important;
}

Il codice completo diventerebbe:

<style>
@media (max-width: 479.9px) {
.imProductListCard {
display: table !important;
height: auto !important;
}
.imProductListButton {
max-width: 60% !important;
margin: auto !important;
margin-bottom: 5px !important;
text-align: center !important;
}
.imProductListPrice {
float: left !important;
}
.imProductListImage {
height: 200px !important;
}
}
</style>

Lire plus
Posté le de Giuseppe Guida
Francesco Tedeschi
Francesco Tedeschi
User
Auteur

Grazie per i suggerimenti.... allora:
in pagina 1 c'è il codice di kol senzaheight:auto !important
in pagina 2 c'è il codice di kol CONheight:auto !important

iN ENTRAMBI LE PAGINE LE IMMAGINI DEI PRODOTTI NON SI VEDONO e la visualizzazione dei contenuti è ottima (solo il tasto aggiungi a capo)

In pagina 3 c'è il codice di Giuseppe Guida e la visualizzazione è ottima le immagini si vedono

Lire plus
Posté le de Francesco Tedeschi
Giuseppe Guida
Giuseppe Guida
User

Grazie per il riscontro wink

Lire plus
Posté le de Giuseppe Guida
A. Kris
A. Kris
User
Giuseppe Guida
Kol, ciao. Però spariscono le immagini del prodotto, anche nella tua simulazione le immagini non sono visibili...
per gli utenti che capiscono poco di codici esterni, incomedia dovrebbe rivisionare tutte le impostazioni del carello e metterlo a posto, e non dover modidifcare sempre tutto con i codici esterni wink

Lire plus
Posté le de A. Kris
Francesco Tedeschi
Francesco Tedeschi
User
Auteur

Quindi nel codice presente in pagina 3 mi sembra di aver capito che ora oltre al tasto "aggiungi" che va a capo,
l'altezza di tutti i prodotti diventa automatica, giusto ???

Per togliere l'altezza automatica di tutte le celle dei prodotti e quindi essere io ad impostare l'altezza di ogni singolo prodotto, cosa dovrei eliminare dal codice ??

Lire plus
Posté le de Francesco Tedeschi
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Francesco Tedeschi
... ... ... essere io ad impostare l'altezza di ogni singolo prodotto, ... ... ... 

... per esempio, clicca con il destro del mouse sul primo prodotto, e troveri il relativo DIV:

<div id="imProductList_302_237">

... quindi, sempre per esempio, potresti controllarlo con questa stringa:

#imProductList_302_237 > div { height: 600px !important }

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Francesco Tedeschi
Francesco Tedeschi
User
Auteur

Bene, il mio problema è risolto grazie all intervendo di KolaSim e G.Guida
lascio il "risolto" all'ultimo codice che ha funzionato meglio (suggerito da guida)
So benissimo che l'aiuto di KolaSim  è stato fondamentale e grazie anche a te caro :)

Lire plus
Posté le de Francesco Tedeschi