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.
