PORADNIK Wprowadzenie do edycji zaawansowanej skórki sklepu Click Shop

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.

• https://pomoc.home.pl/baza-wiedzy/wprowadzenie-do-edycji-zaawansowanej-skorki-sklepu-internetowego

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.

 

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.

 

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:

Code:

/* to jest komentarz */

czyli komentarz otwieramy używając

Code:

/*

a zamykamy używając

Code:

*/

komentarz pomiędzy tymi znacznikami może mieć wiele linii

 

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

 

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?

 

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

 

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)

 

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

 

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ć?

 

da się to zrobić jednak jest z tym nieco zabawy
css:

Code:

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

Code:

  {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:

Code:

 {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:

Code:

<p>{translate key='Click "Place an order" button'}</p>

dajemy

Code:

<br><br>

W tłumaczeniu

Code:

Wybierz przycisk "Złóż zamówienie"

zmieniamy na

Code:

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
działa to

 

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?

 

Czy oby na pewno robisz podgląd kopii? tą lupką? Sprawdź też na google chrome, mi czasami nie pokazuje podglądu na firefoxie.

 

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.

 

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.

 

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.

 

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.

 

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?