custom widget

Własny widget

Widżet (ang. widget) to komponent z dodatkowymi funkcjonalnościami, który możemy wstawić do strony CMS lub bloku, np: lista produktów z danej kategorii, galeria. Przycisk „Wstaw Widget” znajduje się w pasku narzędziowym edytora treści. Po otwarciu panelu, do wyboru mamy kilka gotowych widżetów: Aby dodać własny widżet do tej listy, musimy przygotować nowy moduł: – utwórz …

Własny widgetczytaj więcej »

react js

Stan komponentu – przykład kalkulatora

Jeśli odrobiłeś poprzednią lekcję to teraz zrobimy prosty kalkulator i utrwalimy wiedzę związaną ze stanami komponentów. Analogiczny kalkulator, ale w języku JavaScript opisałem w tutorialu: „KALKULATOR W JS”. Porównaj oba rozwiązania 🙂 Gotowy kod:

Wyjaśnienie: W konstruktorze ustawiamy początkowe stany (state) dla pól tekstowych (input type=”text”): a, b i result. Wiążemy (bind) funkcje (handleChangeA, …

Stan komponentu – przykład kalkulatoraczytaj więcej »

react js

STATE – wewnętrzny stan komponentu

State służy do przechowywania wewnętrznego stanu komponentu, np: ilość kliknięć w dany element na stronie. Stan jest aktualizowany w czasie rzeczywistym za pomocą metody setState(). Aby to zrozumieć zobacz prosty przykład, który przygotowałem. W przykładzie – użytkownik wprowadza treść do pola tekstowego input ; łańcuch znaków jest „na bieżąco” przepisywany do paragrafu <p></p>, a po …

STATE – wewnętrzny stan komponentuczytaj więcej »

react js

Klasy jako komponenty

W poprzednim rozdziale „WPROWADZENIE DO REACT JS” opisałem podstawy biblioteki, m.in budowę komponentów funkcyjnych i argumenty przekazywane do nich. Teraz zajmiemy się klasami, są one ciekawsze 🙂 i posiadają większe możliwości, np: definiowanie wewnętrznego stanu komponentu, funkcji pomocniczych, pozwalają tworzyć interakcje, reagować na zdarzenia itd. Przykład:

Klasa Hello dziedziczy (extends) po React.component. Funkcja render() …

Klasy jako komponentyczytaj więcej »

motyw w Magento 2

Własny motyw

W tym temacie pokażę w jaki sposób utworzyć własny motyw w Magento 2. Domyślnie mamy do wyboru dwa motywy: Blank i Luma. Możesz je podejrzeć po zalogowaniu się do panelu admina – w sekcji „Motywy”: Menu -> Content -> Design -> Themes. Po co nam własny motyw? A po to, by aktualizować lub modyfikować wygląd …

Własny motywczytaj więcej »

kalkulator javascript

Kalkulator w JS

Przykład prostego kalkulatora z podstawowymi operacjami matematycznymi: dodawanie, odejmowanie, mnożenie i dzielenie. Rozwiązanie:

Formularz składa się z trzech pól tekstowych (<input type=”text” />): a i b – do wprowadzania wartości liczbowych oraz result , w którym wyświetlane są wyniki operacji matematycznych. Każdy przycisk (button) reaguje na zdarzenie onClick (kliknięcie), które uruchamia funkcję Calculator. Funkcja …

Kalkulator w JSczytaj więcej »

react js

Wprowadzenie do React JS

ReactJS to biblioteka języka JavaScript stworzona przez Facebook do budowy elastycznych interfejsów. Oficjalna strona projektu: reactjs.org. React opiera się o tzw. komponenty (fragmenty kodu), które reagują na zdarzenia, mogą pobierać dane i utrzymywać ich wewnętrzny stan poza drzewem DOM. Komponenty są skalowalne i przenośne, bez problemu komunikują się z innymi bibliotekami i frameworkami. Oczywiście zalet …

Wprowadzenie do React JSczytaj więcej »

magento2

Nadpisywanie szablonów Admina przy użyciu własnego modułu

W poprzednim rozdziale opisałem jeden ze sposobów nadpisywania szablonów Magento na „frontendzie”, wykorzystując do tego celu własny motyw. Jest to najprostsza metoda, którą można wykorzystać również do przysłaniania „backendu”. Oczywiście nie zawsze, czasem będziemy zmuszeni skorzystać z własnego modułu aby rozszerzyć funkcjonalność danego widoku. Jest to druga najczęściej używana metoda, którą pasuje znać 😉 . …

Nadpisywanie szablonów Admina przy użyciu własnego modułuczytaj więcej »

magento2

Nadpisywanie szablonów Magento we własnym motywie

Nadpisywanie szablonów Magento (plików phtml) lub jego fragmentów we własnym motywie to jeden ze sposobów zmiany wyglądu strony bez ingerowania w oryginalne pliki. Zaleta takiego podejścia jest oczywista: przy aktualizacji silnika Magento nie utracimy zmian w wyglądzie strony lub nie będziemy musieli przywracać tych zmian na nowo. Przykład 1: Nadpisanie szablonu z opisem kategorii: – …

Nadpisywanie szablonów Magento we własnym motywieczytaj więcej »