Nu reusesc sa repar layout-ul paginii, afiseaza gresit produsele

[lanterneled]

Buna ziua,

 

De curand am integrat pe site un widget care permiite utilizatorilor sa sc rie pareri si sa dea nota produselor pe care le cumpara din magazin. Yotpo se numeste widgetul acesta.

Nu au fost probleme pana in momentul cand au aparut primele comentarii la produse.

Astfel ca dupa ce un produs primeste o ratificare, sunt afisate numarul de stele acordate in lista de produse,imediat sub poza produsului. Problema este ca produsul de sub el este decalat si acolo ramane un spatiu gol cum este aici http://www.elanterna.ro/10-incarcatoare-si-acumulatori- si aici http://www.elanterna.ro/6-lanterne-led .

Am incercat sa fac cateva modificari in product-list.tpl si product-list.css dar nu reusesc sa repar aceasta problema.

Ma puteti ajuta va rog cu o indurmare la ce anume trebuie sa modific?

Multumesc anticipat.

[cristic]

Problema vine din faptul ca stelele sunt prea mari si astfel casuta produsului se duce in jos.

 

Pentru ca fisierul CSS e unul generat automat si se poate modifica ulterior, cel mai bine este sa modifici in unul din tpl-uri, unde ai ceva de genul:

<span class="stars">

 

Modifica cu urmatorul cod CSS:

 

<span class="stars" style="height:13px;">

 

Nu stiu exact daca sunt cumva si alte setari ale modulului care sa dea acelasi rezultat, dar in felul asta sigur va merge.

Edited March 19, 2013 by cristic (see edit history)

[lanterneled]

cam asta am eu in product-list.tpl:

 

<div class="yotpo bottomLine"

data-appkey="{$yotpoAppkey}"

data-domain="{$yotpoDomain}"

data-product-id="{$product.id_product}"

data-product-models=""

data-name="{$product.name|escape:'htmlall':'UTF-8'}"

data-url="{$product.link|escape:'htmlall':'UTF-8'}"

data-image-url="{$link->getImageLink($product.link_rewrite, $product.id_image, '')}"

data-description="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}"

data-bread-crumbs="">

</div>

 

sistemul asta de ratificat produsele este extern paginii mele

[lanterneled]

nu pot modifica dimensiunea stelutelor. ele sunt preluate de pe un site extern.

aici sunt stelutele https://d25s9xenjt5udi.cloudfront.net/assets/widget/star_full.png

[cristic]

Nu e problema de dimensiune a stelutelor, ci de dimensiunea <span>-ului in care sunt ele puse.

 

Incearca alta solutie - sa faci toate casutele produselor sa fie de aceeasi dimensiune.

 

Cauta fisierul CSS in care ai definit .ajax_block_product .container_product

Adauga:

 

min-height: 182px;

 

si sterge cache-ul.

 

Acum vad ca el este luat din http://www.elanterna.ro/themes/leoshoes/cache/eee7aee34f10cdf01c9a78e455d4ca0b_all.css dar daca modifici aici, se va rescrie.

[cristic]

A, si vezi ca trebuie sa ai grija ca acest min-height nu merge in IE. Vezi http://css-tricks.com/snippets/css/cross-browser-min-height/

[lanterneled]

oricum IE este depasit si nu prea utilizat. Si oricum altereaza putin doar asezarea produselor dar este functional magazinul.

 

Multumesc mult pentru ajutor.

A functionat folosind min-height:

[cristic]

Perfect.

Verifica totusi, ca IE inca mai e folosit - fiind pe locul 3 (http://www.w3schools.com/browsers/browsers_stats.asp)

[lanterneled]

am verificat, in IE imi apare pagina la fel cum aparea inainte si pe celalalte browsere. acolo nu are efect modificarea . Dar este functional magazinul chiar si in IE.

Pana gasesc alta solutie o sa il las asa. Macar acum se vad aiurea produsele doar intr-un browser, nu in toate

[cristic]

Foloseste chestia asta (http://www.dustindiaz.com/min-height-fast-hack/), ca sa rezolvi problema:

 

min-height:182px;
height:auto !important;
height:182px;

[lanterneled]

Asta a rezolvat complet problema.

Funtioneaza perfect si in IE.

 

Multumesc mult pentru ajutor.