Joomla, Virtuemart - Jak zmienić przycisk 'Dodaj do koszyka' oraz inne elementy

Jakiś czas temu przyszło mi zetknąć się z Virtuemart-em - dodatkiem do Joomli pozwalającym na prowadzenie sklepu internetowego. Narzędzie samo w sobie naprawdę świetne, z bogatymi możliwościami a w dodatku zupełnie za darmo. Przy okazji pracy z tym komponentem zauważyłem, że bywają problemy z dostosowaniem wyglądu elementów sklepu, dostarczanych przez Virtuemart, do wyglądu strony internetowej na której sklep jest umieszczany. Spotkałem się z wieloma radami polecającymi gmeranie przy kodzie Virtuemart-a, żeby osiągnąć to, czy tamto. Podejście to uważam, za rozwiązanie kiepskie, bo nigdy nie mamy pewności, czy zmieniając jedną rzecz, nie psujemy innych, a bądź co bądź, autorami tego komponentu nie jesteśmy i nie znamy go na tyle dogłębnie, żeby potrafić przewidzieć wszystkie możliwości. Dlatego chciałbym w tym artykule pokazać sposób jaki przyjąłem ja, a który na pewno jest znacznie bezpieczniejszy i uniwersalny.

W jaki sposób dostosować wygląd elementów sklepu?

Tak jak wspomniałem we wstępie, manipulacje przy kodzie źródłowym Virtuemart-a, jako sposób do dostosowania wyglądu poszczególnych elementów sklepu, uważam za sposób zły. W zamian tego, proponuję nadpisać style CSS. Najlepiej stworzyć do tego celu osobny arkusz, w którym trzymane będą tylko i wyłącznie zmiany nadpisujące CSS dostarczany przez Virtuemart. Sposób ten jest znacznie prostszy, nie ingeruje w strukturę Virtuemart-a, łatwiej jest nanieść dalsze poprawki, czy nawet zupełnie wrócić do stanu podstawowego, poprzez niedołączenie arkusza do strony internetowej.

No to może konkretniej...

W jaki sposób nadpisywałem style CSS od Virtuemart, chciałbym pokazać na przykładzie przycisku "Dodaj do koszyka". Gdy podejrzymy w kodzie strony jak zbudowany jest ten przycisk (tj. z jakich elementów i z jakimi przypisanymi im klasami), możemy zacząć tworzenie stylu nadpisującego. W poniższym przykładzie chciałbym pokazać jak zmienić ten przycisk na dowolny, przez nas zdefiniowany przycisk graficzny.

Jak widać, nadpisujemy styl zdefiniowany przez Virtuemart (!important zwiększa priorytet definicji stylu), stylem odpowiadającym naszym potrzebom. Wystarczy tę definicję stylu zapisać do nowego arkusza, a ten następnie dołączyć do strony, by zmienić przycisk "Dodaj do koszyka" na pasujący do wyglądu strony.

Co z innymi elementami sklepu?

Z innymi elementami sklepu postępujemy podobnie. Gdy coś nam w ich wyglądzie nie odpowiada to podglądamy kod strony internetowej, sprawdzamy jak ten element jest zbudowany, z jakich znaczników i klas, a następnie nadpisujemy style Virtuemart-a.