Szablony Shoper od GrowCommerce
Koszyk
Zamknij
Kontynuuj zakupy ZAMAWIAM
suma: 0,00 zł
Ulubione produkty
Lista ulubionych jest pusta.

Wybierz coś dla siebie z naszej aktualnej oferty lub zaloguj się, aby przywrócić dodane produkty do listy z poprzedniej sesji.

Szukaj
Menu

Ruszyła nowa szata graficzna naszego sklepu! ❤️ Modern w wersji 3.0 jest live

Nowy produkt: Optymalizacja Shoper Google PageSpeed Insights

Sklep, który obecnie oglądasz oparty jest o szablon Modern 3.0

Zmiana wyświetlanej nazwy kategorii w menu Shopera

Ostatnio przeglądając grupę FB poświęconą Shoperowi trafiłem na zapytanie "W jaki sposób zmienić wyświetlaną nazwę kategorii w belce menu?". 

Generalnie rzecz ujmując cały skrypt jak i edycja jest super łatwa. Dodatkowo instrukcja jest uniwersalna i pozwala na wrzucenie kilku smaczków! Przed przystąpieniem do modyfikacji zadbaj o kopię zapasową obecnego szablonu. Tę możesz wykonać zgodnie z instrukcją z poprzedniego tutoriala. Link tutaj. Lub obejrzyj sam materiał video, jeśli jesteś już ciut bardziej oblatany. Tutaj.

Jeśli masz już wykonany swój backup oto kawałek kodu, który potrzebujesz:


$("li#hcategory_178 > h3 > a > span").text("BLACK FRIDAY");

Najpierw ten kod omówmy. Mamy dwa człony. Pierwszy zaczyna się od "namierzania" naszego elementu i zaczyna się od li#hcategory_178. Wskazujemy o jaki element nam chodzi. Jeśli jesteś zaznajomiony z Shoperem, to wiesz że 178 to numer naszej kategorii.

Przejdź do "Obsługa sklepu" -> "Kategorie" i odnajdź naszą kategorię główną. 
Po kliknięciu w nią zobaczysz jej ID. 

 

Ważne, piszemy o kategorii głównej, a nie podkategorii. Kategoria główna to ta, która widnieje na pasku menu:


 

Bierzemy nasz wzór i podstawiamy ID kategorii pod nasz kod:


$("li#hcategory_178 > h3 > a > span").text("BLACK FRIDAY");

Na końcu naszego kodu mamy miejsce na tekst. Standardowo pomiędzy cudzysłowem wstawiamy tekst. Chcąc pójść o poziom wyżej możemy wsadzić tam za tekstem emoji! Do skopiowania emotki ja używam TEJ strony. Możesz użyć czegokolwiek, albo dosłownie skopiować ją z fb. Zaznacz, skopiuj i wklej 🔥. 


$("li#hcategory_178 > h3 > a > span").text("BLACK FRIDAY 🔥");

Czas na wklejenie naszego kodu. Przechodzimy kolejno do "Wygląd i treści" -> "Obecny szablon graficzny" -> "Własny skrypt JS".
Jeśli masz tu jakiś kod, wklej nasz nowy jako pierwszy element dodając enterów. Ewentualnie jako ostatni. Wklejenie go w losowym miejscu zmieni działanie kodu istniejącego i naszego w jakiś niespodziewany sposób.  Po wklejeniu kliknij "zapisz".

Ten kawałek kodu zadziała dla większości klasycznych szablonów. Dlaczego większości? Bo ustawiliśmy za pomocą znaku > kolejność: li z kategorią o danym ID, dalej MUSI znajdować się H3 (nagłówek menu), dalej (ponownie znak > wymusza) element "a" i finalnie chodzi nam o element "span". Jeśli elementy nie znajdą się idealnie w tej kolejności to nie zadziała.

Jeśli planujesz zmienić nowości lub promocje, to te (jak słusznie zauważył Patryk) nie są widoczne w kategoriach, więc podejrzenie ich ID jest nieco trudniejsze. W związku z tym skorzystaj z uniwersalnego "gotowca".


$('.menu-list a > span:contains("Promocje")').text('BLACK FRIDAY 🔥');

$('.menu-list a > span:contains("Nowości")').text('BLACK FRIDAY 🔥');

Przy tak skonstruowanych nowościach czy promocji nie musisz zmieniać już nic poza swoim tekstem. Skrypt szuka odpowiedniego elementu zawierającego dany tekst, więc bezbłędnie odnajdzie wspomniane i je podmieni w naszym menu.

Jak sprawdzić czy to zadziała? Postępuj zgodnie z instrukcją i wklej swój kawałek kodu. Od razu po odświeżeniu sklepu zobaczysz efekt - działa czy nie. 
Jeśli nie działa, kliknij prawym przyciskiem myszy na element menu i "Zbadaj". 

Następnie krok po kroku sprawdź jakie elementy nachodzą po sobie:

 

Bonusowy kod: jak zmienić tytuł, ale wewnątrz menu?

Przyjmijmy, że nie masz naszego pacjenta  w "belce" menu, a w środku po rozwinięciu. W takiej sytuacji instrukcja będzie identyczna, jedynie odrobinkę zmieni się kod:


$("li#hcategory_238 > span > a > span").text("BLACK FRIDAY");

Sprawdź czy działa jak chciałeś, jeśli nie - podeślij nam maila na biuro@growcommerce.pl, a bezpłatnie pomożemy Ci z taką drobnostką.

Szykując się na Black Friday pamiętaj, że możesz pobrać bezpłatny szablon do grafiki. Szablon jest w formacie PSD, więc wystarczy podmienić tekst (lub nie :). 
Bez problemu zrobisz to sam jeśli masz Photoshopa, lub za kilka złotówek zmieni Ci to każdy student. Przejdź tutaj.

P.S. całość naszego sklepu oparta jest o nasz nowy szablon: Modern 3.0. 
Identyczny możesz zakupić tutaj.

Komentarze do wpisu (0)

Hot items!
Szablon Shoper Modern™ | Standard
Szablon Shoper Modern™ | Standard
1 659,99 zł 982,77 zł 1 349,59 zł 799,00 zł
szt.
Szablon Shoper -  Modern™ 3.0
Szablon Shoper - Modern™ 3.0
2 952,00 zł 2 337,00 zł 2 400,00 zł 1 900,00 zł
szt.
Wymagalny checkbox z regulaminem do Newslettera
Wymagalny checkbox z regulaminem do Newslettera
1,00 zł 0,81 zł
szt.
 Licencja Shoper Platynowy  (12 miesięcy)
Licencja Shoper Platynowy (12 miesięcy)
313,65 zł 255,00 zł
Optymalizacja Shoper Google PageSpeed Insights
Optymalizacja Shoper Google PageSpeed Insights
1 107,00 zł 900,00 zł
szt.
"Wróć do nas" - Dodatek przykuwający uwagę
"Wróć do nas" - Dodatek przykuwający uwagę
60,27 zł 49,00 zł
szt.
 Licencja Shoper Diamentowy (12 miesięcy)
Licencja Shoper Diamentowy (12 miesięcy)
313,65 zł 255,00 zł
Modern 3.0 od GrowCommerce

Chcesz zbudować lepszy sklep na Shoperze? Zacznij tutaj! 👇

Wykonaj pierwszy rok w celu poznania najbardziej zaawansowanego szablonu Shoper

Czytaj więcej
Modern 3.0 od GrowCommerce
Holder do góry
Szablon Shoper Modern 3.0™ od GrowCommerce
Sklep jest w trybie podglądu
Pokaż pełną wersję strony
Sklep internetowy Shoper.pl