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...

PORADNIK Wprowadzenie do edycji zaawansowanej skórki sklepu Click Shop

Dyskusja w 'Poradniki, gotowe rozwiązania' rozpoczęta przez użytkownika Grzesiek, 29 Styczeń 2016.

  1. Grzesiek

    Grzesiek Centrum Pomocy/BOK home.pl Administrator forum

    Wiadomości:
    3 357
    Docenione treści:
    316
    W związku z dużym zainteresowaniem tematem edycji zaawansowanej skórek sklepu, przedstawiamy Wam krótki artykuł, dostępny w naszej dokumentacji, opisujący metody wykonania zmian w wyglądzie sklepu. Artykuł, przy wykorzystaniu narzędzia dostępnego w przeglądarce Google Chrome, pokazuje w jaki sposób zbadać wybrany element, który chcemy poddać edycji, tj. poznać jego właściwości np. kolor i rozmiar czcionki, a także jak dokonać zmian i wprowadzić je w samym sklepie.

    Tego typu poradnik odpowiada na większość pytań, dotyczących drobnych modyfikacji wyglądu sklepu. Aby w pełni wykorzystać jego możliwości, warto uzupełnić go np. informacjami dostępnymi w wyszukiwarce Google dotyczącymi stylów CSS, ich właściwości oraz wartości.

    WAŻNE! Przed rozpoczęciem wprowadzania zmian w sklepie, sugerujemy w sekcji Konfiguracja --> Wygląd --> Aktywny styl graficzny, skorzystać z przycisku Utwórz kopię skórki. W ten sposób, w przypadku modyfikacji wpływających na działanie sklepu, możliwe będzie szybkie przywrócenie pierwotnej skórki, sprzed modyfikacji. Tworząc wiele kopii skórki, możemy pracować na kilku wersjach jednocześnie, tworząc np. osobny styl z okazji świąt, nowych promocji czy pór roku. Kopia skórki może zostać utworzona, edytowana i podglądana bez jej aktywacji. W praktyce oznacza to że klient odwiedzający sklep nie będzie widział zmian, do czasu kiedy wybrana skórka nie zostanie ustawiona jako domyślna dla sklepu.

    Warto pamiętać, że edycja zaawansowana czyli wprowadzanie własnego stylu CSS w sklepie, powoduje nadpisanie stylu, który jest domyślnie zmodyfikowany dla wybranej skórki.

    Dla użytkowników początkujących, skorzystanie z dodawania własnego stylu CSS, np. fragmentów kodu/stylu rozwiązanie to będzie prostą metodą na zmianę wybranych elementów skórki. W przypadku braku efektu lub chęci powrotu do stanu pierwotnego, wystarczy usunąć wprowadzony fragment "kodu".

    Dla bardziej zaawansowanych użytkowników, może okazać się prostszym rozwiązaniem bezpośrednia edycja plików skórki i zmiana wartości.
     
    Ostatnia modyfikacja: 19 Wrzesień 2017
    sexylingerie.pl lubi to.
  2. Grzesiek

    Grzesiek Centrum Pomocy/BOK home.pl Administrator forum

    Wiadomości:
    3 357
    Docenione treści:
    316
    Analogicznym narzędziem jest Firebug dostępny dla FireFox, instalujemy go klikając opcje przeglądarki --> Narzędzia --> Pobierz więcej narzędzi. Po instalacji i kliknięciu prawym przyciskiem myszy na wybrany element, pojawi się opcja Zbadaj element za pomocą Firebug. Polecam.

    Ważne! Zwracamy uwagę, że home.pl nie świadczy wsparcia w zakresie edycji wyglądu sklepu realizowanej przy pomocy edycji zaawansowanej oraz własnych skryptów JavaScript i stylów CSS. W związku z powyższym w przypadku pytań i wątpliwości dot. wyglądu/edycji sklepu, prosimy o zakładanie wątków na forum.home.pl, gdzie inni użytkownicy i Klienci home.pl, a także pracownicy, w miarę możliwości pomogą Ci dokonać niezbędnych modyfikacji.
     
  3. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    Bardzo przydatną rzeczą podczas edycji własnego stylu jest dodawanie komentarzy do wprowadzonych zmian, dzięki czemu łatwo potem dotrzeć do konkretnej modyfikacji.
    Komentarze w CSS dodajemy wstawiając następujący kod:
    Kod:
    /* to jest komentarz */
    
    czyli komentarz otwieramy używając
    Kod:
    /*
    
    a zamykamy używając
    Kod:
    */
    
    komentarz pomiędzy tymi znacznikami może mieć wiele linii
     
    doleq i Marand lubią to.
  4. LorK

    LorK Arcymistrz Beta-tester

    Wiadomości:
    962
    Docenione treści:
    84
    @Grzesiek

    > Analogicznym narzędziem jest Firebug dostępny dla FireFox, instalujemy go klikając opcje przeglądarki --> Narzędzia --> Pobierz więcej narzędzi. Po instalacji i kliknięciu prawym przyciskiem myszy na wybrany element, pojawi się opcja Zbadaj element za pomocą Firebug

    klikając na opcje przeglądarki?
    Chodziło CI o wybranie menu Narzędzia -> Dodatki -> wyszukujemy Firebug i klikamy na Zainstaluj.
    IMHO - obecnie nie ma potrzeby instalacji Firebuga, większość podstawowych rzeczy jest już w FF. Wystarczy wcisnąć lub F12 albo prościej: po kliknięciu prawym przyciskiem myszy na wybrany element, pojawi się opcja Zbadaj element :) Takie rozwiązanie jest dostępne w większości (a może nawet wszystkich współczesnych?) przeglądarkach.
     
  5. GD-sklep

    GD-sklep Uczestnik

    Wiadomości:
    29
    Docenione treści:
    3
    Witam,
    zrobiłem kopię. Wchodzę do edycji pliku basket/step2 i w 63 wierszy wpisuję "<P>Zamówienie bez rejestracji</p>" (na początek dla testu), klikam Zapisz. W sklepie idę do kroku drugiego podczas procesu zakupu i nie widzę tego zdania na stronie 'step2'.
    I tutaj proszę o podpowiedź - co robię źle?
     
  6. Mariusz

    Mariusz BOK home.pl home.pl Administrator forum

    Wiadomości:
    3 051
    Docenione treści:
    300
    @GoldDerma.pl pod tym linkiem opublikowaliśmy krótką instrukcje jak dodać nowy moduł w podsumowaniu zamówienia (krok 3) - https://pomoc.home.pl/baza-wiedzy/jak-dodac-modul-w-podsumowaniu-zamowienia/

    Skorzystaj z tej instrukcji i spróbuj dodać moduł do kroku drugiego. Nie sprawdziłem tego dokładnie (odpisuję z pamięci), ale najprawdopodobniej wystarczy w podanym kodzie we Własnym stylu CSS użyć: ".shop_basket_step2" zamiast "shop_basket_step3".
     
  7. GD-sklep

    GD-sklep Uczestnik

    Wiadomości:
    29
    Docenione treści:
    3
    Dziękuję, jest to duże obejście mojej bolączki. Zależało mi na małej i szybkiej zmienia, jak ten czerwony napis na załączonym screenie.
    Powyższy pomysł daje mi wrażenie doładowania strony kolejną porcją informacji do czytania, gdy odnoszę wrażenie klienci nie chcą się zagłębiać i potrzebują jasnego i szybkiego komunikatu (czyli mój nagłówek Zakupy bez rejestracji)
     

    Załączone pliki:

    • screen.png
      screen.png
      Rozmiar pliku:
      32,4 KB
      Wyświetleń:
      293
  8. Mariusz

    Mariusz BOK home.pl home.pl Administrator forum

    Wiadomości:
    3 051
    Docenione treści:
    300
    @GoldDerma.pl powinien napis się poprawnie wyświetlić, jeśli dodałeś go w taki sposób jak to opisujesz. Upewnij się czy później sprawdzasz poprawny szablon, bo może masz aktywny inny szablon graficzny i podczas sprawdzania, możesz wyświetlać niepoprawny szablon na podglądzie (bez wprowadzonych przez Ciebie zmian w pliku: basket/step2.
     
  9. GD-sklep

    GD-sklep Uczestnik

    Wiadomości:
    29
    Docenione treści:
    3
    Dziękuję, rzeczywiście przełączone miałem między kopiami. Tylko ten nagłówek "Zakupy bez rejestracji" jest poziom niżej od tego do założenia konta - czy da się to jeszcze doprecyzować?
     
  10. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    da się to zrobić jednak jest z tym nieco zabawy :D
    css:
    Kod:
    .s-grid-12 .basket-step-border .basket-no-register.register-enabled {
      padding-top:0px;
    }
    .s-grid-12 .basket-step-border div.basket-no-register, .s-grid-12 .basket-step-border div.register {
      border:0;
      margin:0;
    }
    .basket-step-border h3 {
      margin-bottom:5px;
      font-size: 1.6em;
    }
    .basket-step-border {padding:0px;}
    .s-grid-12 .basket-step-border div.basket-no-register, .s-grid-12 .basket-step-border div.register {padding-left:14px;}
    
    }
    
    step2:
    zamieniamy:
    Kod:
      {if $allow_single}
                                        <div class="basket-no-register {if $enable_register} f-grid-4 register-enabled{else} f-grid-6{/if}">
                                            {if $enable_register === false}
                                                <h3>
                                                    <img src="{baseDir}/public/images/1px.gif" alt="" class="px1">
                                                    {translate key="I do not have an account"}
                                                </h3>
                                            {/if}
    
    na:
    Kod:
     {if $allow_single}
                                        <div class="basket-no-register {if $enable_register} f-grid-4 register-enabled{else} f-grid-6{/if}" style="padding-left:14px;">
                                      
                                            <h3>
                                                    <img src="{baseDir}/public/images/1px.gif" alt="" class="px1">
                                                    Kupuję bez zakładania konta
                                                </h3>
                                           
    po:
    Kod:
    <p>{translate key='Click "Place an order" button'}</p>
    
    dajemy
    Kod:
    <br><br>
    
    W tłumaczeniu
    Kod:
    Wybierz przycisk "Złóż zamówienie"
    
    zmieniamy na
    Kod:
    Wybierz przycisk "Złóż zamówienie", a dokonasz zakupu bez rejestrowania się w sklepie.
    
    to ostatnie po to aby dodać jedną linię tekstu która nieco obniży układ :D
    działa to :D


    zam.png
     
    kekos i Mariusz lubią to.
  11. domowykosmetyk

    domowykosmetyk Kandydat

    Wiadomości:
    104
    Docenione treści:
    3
    Ręce mi opadają. Od wczoraj nie mogę zmodyfikować Slider na stronie głównej sklepu. Mam w nim dwa zdjęcia.
    1/
    Mam ustawione w każdym slajdzie :
    animacja od lewej, czas 0
    a ustawienie Slidera :
    automatyczne przewijanie - tak (nie przewija)
    animacja przewijania - przenikanie (nic)
    stronicowanie - punkty (nie ma)
    czas trwania animacji 2000
    czas wyświetlania 3000
    Niestety - zamiast przewijać mogę jedynie myszką przesuwać zdjęcia. (choć nie zaznaczałam tego).
    2/ mam linki przy każdym zdjęciu ale tylko jedno działa. Jeden link wprowadzałam dawno temu i ten działa. ten który wpisałam wczoraj nie działa.
    Zapisywane, kilkanaście razy wszystko i nadal nic. (pracuję na kopii sklepu).
    A może na kopii nie mogę podglądnąć zmian?
     
  12. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    Czy oby na pewno robisz podgląd kopii? tą lupką? Sprawdź też na google chrome, mi czasami nie pokazuje podglądu na firefoxie.
     
  13. domowykosmetyk

    domowykosmetyk Kandydat

    Wiadomości:
    104
    Docenione treści:
    3
    chętnie ale na google w ogóle sklep/panel nie otwiera się. Otworzyłam pocztę home, wp, facebook a mój sklep od kilku minut tylko kręci się kółeczko i nic więcej.
     
  14. domowykosmetyk

    domowykosmetyk Kandydat

    Wiadomości:
    104
    Docenione treści:
    3
    na operze teraz też sklep nie chce "chodzić". Wszystkie strony działają bez zarzutu tylko sklep home nie. Co bym nie zrobiła to zapisanie trwa kilka minut.
    na google panel sklepu nadal nie otwarty.
     
  15. Mariusz

    Mariusz BOK home.pl home.pl Administrator forum

    Wiadomości:
    3 051
    Docenione treści:
    300
    Jeśli taka sytuacja się przedłuża, skontaktuj się z naszym Biurem Obsługi Klienta w celu weryfikacji. Nam na forum będzie ciężko pomóc we wskazanej przez Ciebie sytuacji.
     
    domowykosmetyk lubi to.
  16. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    w takich sytuacjach polecam sprawdzić połączenie internetowe, nie to czy działa, ale jaki jest wynik np polecenia tracert nazwasklepu i wysłanie wyniku do home, będzie im łatwiej zdiagnozować sytuacje.
     
  17. Click Shop user

    Click Shop user Nowicjusz

    Wiadomości:
    23
    Docenione treści:
    1
    Nie znalazłem odpowiedzi, ani bardziej odpowiedniego wątku więc piszę tu:

    Chciałbym, aby link podpięty pod jakiś baner slidera otwierał odnośnik w nowym oknie przeglądarki.
    W szczegółach slajdu edytowalne są pola NAZWA i LINK (a przy linku nie ma opcji "target").

    Jakieś pomysły?
     

Poleć forum znajomym