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

Zmiana wyświetlanej nazwy kategorii w menu Shopera

blog GrowCommerce
Cotygodniowa dawka eksperckiej wiedzy na tematy Shoperowe jak i ogólno e-commercowe. W końcu liczy się sprzedaż!

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 [email protected], 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)

Submit
Bestsellery
Sprawdź nasze najlepsze pozycje do Shopera. Tysiąc zrealizowanych zamówień!
Zobacz więcej
Modern 3.0 od GrowCommerce

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

Wykonaj pierwszy krok 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