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.

dodaj do przechowalni
Menu

🎄 Świąteczna promocja -10% z kodem XMAS10 🎄

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

Nowy dodatek: 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)

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