ROZWIĄZANE Zdjęcie kategorii + górne poziome menu

Cześć,

Buduję swój sklep pod adresem:

https://sklep.odkurzacze-centralne.org

Dzięki temu co wyczytałem na tym forum udało mi się już kilka rzeczy zmienić, ale utknąłem w miejscu, z którym nie mogę sobie poradzić ani nic znaleźć.

1. Czy jest możliwość aby klknięciu w kategorię i po przeładowaniu strony nad produktami wyświetlały się miniatury podkategorii, dokładnie tak jak w tym sklepie:

http://www.sklepcomes.pl/category/dom-i-ogrod-ogrod

To jest mój ideał, ale nie clickshopowy więc pewnie będzie ciężko...

2. NA forum w innym wątku natknąłem się na inny problem, któy co prawda mnie nie dotyczył, ale zaintrygowało mnie menu, w którym po najechaniu myszką widać całe drzewo, podoba mi się to, a też tego nie mogę ogarnąć.

https://lapuella.pl/

Sklep clickshop z tą samą skórką co u mnie, pomożecie?

 

a. prosta sprawa, robisz opis kategorii głównej w którym umieszczasz obrazki z linkami do kategorii podrzędnych
b. prosta sprawa, ale nie mam teraz tak długiej chwili aby to opisać zrób najpierw pierwszy punkt

 

Drzewko kategorii podrzędnych robisz tak:

Wchodzimy do panelu CS
wybieramy
zawartość>>nagłówek i stopka

Wybieramy nagłówek

Po prawej stronie wybieramy u góry link do kategorii która ma kategorie podrzędne.
Wtedy po najechaniu myszką na kategorię włączy się drzewko w sklepie.

 

@TheL Dzięki bardzo, dzisiaj się za to zabiorę i zamelduję jak mi poszło

@papux To juź przecież mam, ale po najechaniu na którąkolwiek kategorię ma się rozwinąć całe drzewo podkategorii.

 

to wszystko jest robione stylami, i o ile dobrze pamiętam to ukryte do czasu hovera, więc można to odkryć i wymusić przez !important ech gdybym ja miał trochę czasu na takie rzeczy

 

Próbowałem zrobić te zdjęcia i linki do podkategorii ale nie ogarniam.

Wstawiona tabela nie jest responsywna. Skrypt z tej strony:

https://forum.home.pl/threads/responsywne-tabele.58/

Nie działa. Dodawanie jednego zdjęcia po drugim mija się z celem. W jaki sposób mogę dodać trzy zdjęcia obok siebie żeby zachować responsywność?

 

to zrób to klasami, nie tabelami, zrób ileś tam klas ile potrzebujesz z odpowiednim wyrównaniem i potem każdy obrazek i podpis włóż w te klasy.

 

Niestety nie wiem o czym piszesz Staram się nie być ignorantem, wychowałem się przed erą internetu i zanim zadam jakieś pytanie pięć razy sprawdzam, czy ktoś już poruszył wcześniej mój problem. Ale chyba będę musiał złożyć rękawice i zrobić to wszystko tak jak przewidzieli projektanci clickhopa... Chyba że znajdziesz troszkę czasu żeby rozwinąć swoją podpowiedź?

 

to chwila roboty, a u mnie ostatnio jak widać z czasem krucho, jak sobie nie poradzisz to może jutro znajdę chwilę aby to w kilku słowach opisać wraz z kodem.

 

Podczas edycji wybranej kategorii głównej w Twoim sklepie (np. Rośliny), będziesz mógł umieścić pryz tej kategorii jej opis. W tym opisie możesz umieścić obrazki wybranych podkategorii z odpowiednimi linkami kierującymi do nich. Nie jest to może idealne rozwiązanie i wymaga ono ręcznego dodawania tych podkategorii w opisach kategorii nadrzędnych, ale uda Ci się uzyskać tym sposobem zamierzony efekt (po wybraniu kategorii głównej, w górnej części ekranu zostaną wyświetlone obrazki podkategorii z linkami do nich).

 

Tak @Mariusz ale jeśli umieści to w tabeli to strona przestanie być responsywna, dlatego nie polecam tabeli, a niezależne klasy dla obrazków.

 

@Mariusz O Twoim pomyśle napisał Thel w pierwszej odpowiedzi, te kategorie nie są rozwojowe więc jednorazowe ogarnięcie wszystkiego po kolei miało by sens Ale właśnie ta tabela...

Dlatego właśnie dużą nadzieję pokładam w tym, że @TheL rozjaśni mi temat tych klas

Będę zobowiązany, a w zasadzie już jestem, bo to jedno z niewielu forów gdzie faktycznie problem da się rozwiązać!

 

zrób tak:
we własnym stylu:

Code:

.kategoriakontener {
float:left;
padding:10px;
}

następnie w opisie kategorii zrób:

Code:

<div class="kategoriakontener"><a href="linkdokategorii"><img src="linkdozdjecia"><br>Opis fotki</a></div>

to tak na szybko bez uładniania tego powinno działać

 

Ups, nie zauważyłem, gdy miałem otwarty temat podczas odpowiadania, to jeszcze jej nie było (moja odpowiedź została opublikowana kilka minut po @TheL).

Co do divów to materiały z opisem jak umieścic kilka blokowych elementów HTML obok siebie znalazłem np. tutaj: http://webkod.pl/kurs-css/lekcje/dzial-1/kilka-blokowych-elementow-html-obok-siebie

edit: znowu to samo, Thel mnie wyprzedził , podany przez ze mnie link potraktuj jako uzupełnienie

 

Done!

Myślałem że jest jakiś błąd, że wyświetlają się tylko dwa obrazki w jednej linii, niezależnie od powiększenia strony...

Domyślna szerokość miniatur w katalogu clickshop to 300px, i takie też dodałem próbne zdjęcia.
Najpierw zmieniłem padding na 1, potem całkiem go usunąłem. Skoro 3 produkty 300px mieszczą się obok siebie, czemu nie 3 grafiki 300px? Dziwne.

W każdym razie jeśli grafika jest węższa niż 300, mieszczą się trzy obok siebie.

Dzięki @Mariusz za ten link do kursu, z niego przeniosłem się na inny i wiem już coś więcej niż wczoraj

Na razie wygląda to tak:

https://sklep.odkurzacze-centralne.org/pl/c/Odkurzacze-Centralne/1

Byłem prawie pewien że zamiana float:left na float:center ułoży wszystko po środku (szczególnie widać na telefonie i przy powiększeniu strony), ale nie trybi (right już tak)

Czy wycentrowanie tego będzie tak trudne jak tutaj:
http://stackoverflow.com/questions/4767971/how-do-i-center-float-elements

Czy da się to zrobić łatwiej?

 

nie patrz na wielkość miniatur, daj im 10% mniej wielkości nawet w stylu prosto przy img

Code:

<img src="linkdoobrazka" style="width:270px;">

albo zrób nową klasę dla tego.
Pamiętaj, że tam wchodzą w grę jeszcze paddingi.
Jeśli chcesz to wyśrodkować zrób inaczej
Całość zapakuj do:

Code:

<div class="centerobrazka">
...
</div>

a w swoim stylu dodaj:

Code:

.centerobrazka {
display: flex; justify-content: center;
}

nie testowane ale powinno zadziałać
a jak nie to w

Code:

.kategoriakontener {
float:left;
padding:10px;
}

dodaj

Code:

.kategoriakontener {
float:left;
padding:10px;
width:27%;
}

ale daj to tylko dla rozdzielczości powiedzmy ponad 700px
przy mniejszych daj width:100%

mam nadzieję, że nie pokomplikowałem za bardzo

 

Zadziałało już przy pierwszej wersji, z tym że kod trzeba otwierać i zamykać co tyle obrazków ile ma być w jednej linii. Inaczej wszystkie obrazki zawsze ładował do jednej linii

Działa perfect

Kłaniam się w pas!

 

A ja mam z tym problem.
Wszystkie obrazki są tego samego rozmiaru a w widoku na telefonie wysokości są różne
https://sklep.techsad.pl/pl/c/jednorecznych/89
ale tu
https://sklep.techsad.pl/pl/c/brzeszczoty-pil/93
już działa choć kod ten sam, czemu?

 

@Bekon dodanie tabeli w ten sposób rozwaliło wygląd RWD, sugeruję zamiast tabelki wykorzystać kolumny z RWD, czyli:

Code:

<div class="f-row >
<div class="f-grid-3"><a href="/#"><img src="link-do zdjecia" alt="" /></a></div>
(powtarzamy f-grid-3)
</div>

Pełna dokumentacja o innych wymiarach kolumn dostępna jest pod adresem https://tech.clickshop.pl/theme-development/rwd

 

Dziękuję za wyjaśnienie i link do dokumentacji. Troszkę się pobawiłem. Efekty widać
https://sklep.techsad.pl/pl/c/jednorecznych/89
jednak nie mam nadal rozwiązania, jak wstawić w widoku na komórkę szereg obrazków obok siebie. Nie mam także pojęcia jak wyrównać tekst pod obrazkami.