1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

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

Dyskusja w 'Zmiana wyglądu sklepu i edycja zaawansowana' rozpoczęta przez użytkownika vonmlody, 16 Luty 2017.

  1. vonmlody

    vonmlody Stały bywalec

    Wiadomości:
    37
    Docenione treści:
    2
    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? :)
     
  2. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    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ć :D zrób najpierw pierwszy punkt :)
     
  3. papux

    papux Fachowiec

    Wiadomości:
    387
    Docenione treści:
    107
    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.
     
  4. vonmlody

    vonmlody Stały bywalec

    Wiadomości:
    37
    Docenione treści:
    2
    @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.
     
  5. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    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 :D
     
  6. vonmlody

    vonmlody Stały bywalec

    Wiadomości:
    37
    Docenione treści:
    2
    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ść?
     
  7. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    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.
     
  8. vonmlody

    vonmlody Stały bywalec

    Wiadomości:
    37
    Docenione treści:
    2
    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ź?
     
  9. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    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.
     
  10. Mariusz

    Mariusz BOK home.pl home.pl Administrator forum

    Wiadomości:
    3 051
    Docenione treści:
    300
    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).
     
  11. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    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.
     
  12. vonmlody

    vonmlody Stały bywalec

    Wiadomości:
    37
    Docenione treści:
    2
    @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ć!
     
  13. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    zrób tak:
    we własnym stylu:
    Kod:
    .kategoriakontener {
    float:left;
    padding:10px;
    }
    
    następnie w opisie kategorii zrób:
    Kod:
    <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ć :)
     
    vonmlody lubi to.
  14. Mariusz

    Mariusz BOK home.pl home.pl Administrator forum

    Wiadomości:
    3 051
    Docenione treści:
    300
    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
     
    vonmlody lubi to.
  15. vonmlody

    vonmlody Stały bywalec

    Wiadomości:
    37
    Docenione treści:
    2
    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?
     
  16. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    nie patrz na wielkość miniatur, daj im 10% mniej wielkości nawet w stylu prosto przy img
    Kod:
    <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:
    Kod:
    <div class="centerobrazka">
    ...
    </div>
    
    a w swoim stylu dodaj:
    Kod:
    .centerobrazka {
    display: flex; justify-content: center;
    }
    
    nie testowane ale powinno zadziałać :)
    a jak nie to w
    Kod:
    .kategoriakontener {
    float:left;
    padding:10px;
    }
    
    dodaj
    Kod:
    .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 :D
     
    vonmlody lubi to.
  17. vonmlody

    vonmlody Stały bywalec

    Wiadomości:
    37
    Docenione treści:
    2
    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!
     
  18. Bekon

    Bekon Nowy użytkownik

    Wiadomości:
    2
    Docenione treści:
    0
  19. LukaszC

    LukaszC eCommerce Team home.pl Moderator forum

    Wiadomości:
    752
    Docenione treści:
    86
    @Bekon dodanie tabeli w ten sposób rozwaliło wygląd RWD, sugeruję zamiast tabelki wykorzystać kolumny z RWD, czyli:
    Kod:
    <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
     
  20. Bekon

    Bekon Nowy użytkownik

    Wiadomości:
    2
    Docenione treści:
    0
    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.
     

Poleć forum znajomym