PORADNIK - Nowości w głównej części sklepu

Zmiana ma na celu wyświetlenie nowości w inny niż standardowy sposób czyli mniejszych obrazków, mniejszych nazw i mniejszych cen. Jest to rozwojowa wersja poradnika i możliwe, że w przyszłości się jeszcze coś zmieni. Jeśli odpowiadają nam "duże" nowości możemy zostać przy standardowym rozwiązaniu. Poprawnie wyświetla 3/6/9 produktów.

Uwaga - działa poprawnie jedynie jeśli używamy układu 2 kolumnowego.
Uwaga2 - jak nie wiesz co robisz to lepiej zrób sobie standardowy wygląd nowości. Ta modyfikacja wpływa na więcej rzeczy i po niej nie wstawisz już modułu nowości do lewej czy prawej kolumny.

Jako, że potrzebowałem umieścić nowości w środkowej części sklepu, wstawiłem ten moduł na stronę główną pod listę produktów, jednak moduł ten nie wyświetlił mi się tak jakbym chciał i wszystkie produkty były w jednej kolumnie co wyglądało źle. Zmieniłem na widok poziomy jednak były bardzo wielkie co mi się nie podobało. Postanowiłem zmienić układ tych produktów aby były 3 kolumny i produkty w nich były o wiele mniejsze.

Co należy zrobić:
Ustawiamy układ modułów jak poniżej:


Zapisujemy

Klikamy strzałkę przy Nowości i edytujemy ten moduł. Ustawiamy go zgodnie z poniższą grafiką.



Teraz czas na modyfikację pliku NewProducts/box.tpl

Konfiguracja>>Wygląd>>Aktywny styl graficzny>>Edycja zaawansowana

szukamy

Code:

<div class="product row center">

zamieniamy na

Code:

<div class="product row left" style="width:25%;">

szukamy

Code:

<img src="{imageUrl type='productGfx' width=$skin_settings->img->medium height=$skin_settings->img->medium image=$newproduct->mainImageName() overlay=1}" alt="{$newproduct->translation->name|escape}">

zamieniamy na

Code:

<div align="center"><img src="{imageUrl type='productGfx' width=$skin_settings->img->small height=$skin_settings->img->small image=$newproduct->mainImageName() overlay=1}" alt="{$newproduct->translation->name|escape}"></div>

szukamy

Code:

<span class="productname">{$newproduct->translation->name|escape}</span>

zamieniamy na

Code:

<div class="productname" align="center" style="font-size:14px;">{$newproduct->translation->name|escape}</div>

szukamy

Code:

<div class="price row">

zamieniamy na

Code:

<div class="price row" align="center"  style="font-size:12px;">

szukamy

Code:

<button class="addtobasket btn btn-red" type="submit">
<img src="{baseDir}/public/images/1px.gif" alt="" class="px1" />
<span>{if $loyalty_exchange}{translate key="Exchange"}{else}{translate key="Add to cart"}{/if}</span>
</button>

zamieniamy na

Code:

<div align="center">    <button class="addtobasket btn btn-red" type="submit">
<img src="{baseDir}/public/images/1px.gif" alt="" class="px1" />
<span>{if $loyalty_exchange}{translate key="Exchange"}{else}{translate key="Add to cart"}{/if}</span>
</button> 
</div>

Oto jaki efekt uzyskamy:


W razie problemów lub wątpliwości proszę pytać

 

@TheL Niezła oferta w sklepie internetowym . Można chleb, limonki, a nawet konia kupić!!

A tak na poważnie, to dziękuję za opublikowanie poradnika. Pozwolę sobie go sprawdzić dzisiaj wieczorem na testowym sklepie. Przy okazji chciałbym podkreślić, że wspomniana przez użytkownika @TheL modyfikacja wymaga wykonania kopii wybranej skórki, aby móc modyfikować bezpośrednio pliki szablonu.

Globalna aktualizacja Click Shop w przyszłości nie spowoduje nadpisania wprowadzonych zmian, ponieważ aktualizacja szablonów podczas globalnej aktualizacji Click Shop obejmuje tylko pierwotne skórki. Oznacza to, że wykonane i zmodyfikowane kopii skórek Click Shop jest bezpieczną metodą testowania i wprowadzania modyfikacji.

 

Fajny efekt! A czy jest opcja wyróżnienia lub zmiany koloru innej pozycji z w głównym menu? np link prowadzący do wszystkich produktów?

 

Czy chodzi Ci o:

Code:

#headlink6 {color:red;}

?
numer odpowiada numerowi linku w górnym menu.

 

Dzięki @TheL !

 

Ależ proszę bardzo

 

Hej,
zastosowałem wyświetlanie z Twojego poradnika i jest to bardzo przydatne ale mam pytanko odnośnie wyrównania wyświetlanych produktów (np. aby ceny/opisy/guziki "do koszyka" mieściły się na równym sobie poziomie gdyż obecnie jeden ma wyżej a drugi niżej te elementy ) tak jak to ma miejsce po wejściu na dowolną kategorię, jest to możliwe ?

pzdr

 

W sumie myślę, że jest możliwe, postaram się napisać opis

 

zmień w pliku NewProducts/box.tpl linię:

Code:

<span class="boximgsize row">

na

Code:

<span class="boximgsize row" style="height:100px;">

Buttony i ceny się wyrównają ponieważ wysokość boxu z grafiką zostanie ustawiona na sztywno na 100 pixeli, wcześniej bez tego było tak, że grafika jeśli była wąska to podciągała za sobą cały dół.

 

Zastosowałem ale wyrównało to jedynie nazwy produktów - są w jednej linii, dlatego poszedłem dalej i zamiast:

Code:

<div class="productnamewrap row">

dałem

Code:

<div class="productnamewrap row" style="height:30px;">

i jest pięknie, o to chodziło więc dzięki wielkie TheL za pomoc

 

Dziwne, u mnie poszło razem z przyciskami na równo.\

 

Możliwe, że masz zdjęcia tej samej wielkości i dlatego wyszło ok

 

Limonki innej wielkości nawet sprawdziłem, ale w sumie nie ważne, ważne, że się udało

 

Chciałam się pochwalić: A jak można ustalać odstępy między liniami, np zwiększyć odległość pomiędzy nazwą produktu a ceną?

 

gratuluję a czy możesz jakoś narysować o co chodzi ? byłoby łatwiej to zrobić
robi mi się kolejka spraw do zrobienia muszę w miarę możliwości przysiąść do tego

 

Dzięki Wiem, widzę, że wielu forumowiczów liczy na Ciebie. Nie ukrywam, że ja też Powoli wprowadzam zmiany, które tu proponujesz.
Ale, że by nie było, doceniam ekipę home, m.in. @Mariusz, @Grzesiek, bo pomoc zawsze była ok.
Co do odstępów pomiędzy linijkami, to załączam efekt pożądany:

I luz, nie pali się

 

Nie chcę tutaj "przeszkadzać", ale jeśli poza userem @TheL można sugerować odpowiedzi to proponowałbym spróbować w ten sposób:

Code:

<div class="productname" align="center" style="font-size:14px; padding-bottom:15px;">{$newproduct->translation->name|escape}</div>

Innymi słowy fragment, który podał autor "przeróbki" należy wzbogacić właściwością CSS padding-bottom: 15px;

Daj znać czy "działa".

 

@Stau działa! Dziękuję bardzo! Mam nadzieję, że @TheL nie będzie zazdrosny Dla mnie każdy z Was jest bogiem, bo znacie te tajemne skrypty...

 

Ja się cieszę jak ktoś inny pomaga nie tylko ja jestem na tym forum i nie uzurpuję sobie prawa do jedynej słusznej odpowiedzi

 

Da radę aby produkty w boxie "nowości" wyświetlały się w ilości 4 a nie 3 jak to jest obecnie - zachowując format: "lista pozioma, przewijana" (automatycznie) ?

pzdr