23 wrz 2021

#shorts - modal

modal
Dzisiaj będzie o tym jak najszybciej i najprościej zrobić warstwę modalną, a dokładnie taką która ma ładną animacje opacity gdy warstwa się pojawia jak i gdy znika.
Pierwsza część, np. kliknięcie na element oraz pojawienie się warstwy modalnej jest proste do wykonania. Mamy div na stronie który jest naszą warstwą ukrywaną przez display: none do niej jest również ustawione transition oraz opacity: 0. Kliknięcie w element powoduje dodanie klasy do body, która to klasa zmienia display na block a także opacity ustawi na 1. No i mamy ładną animację opacity.

1 wrz 2021

blur/focus jak podglądnąć dane które znikają?

Zapewne się spotkałeś/łaś z tym, że czasami chcąc podglądnąć dane które pojawiają się np. na warstwie nagle znikają. Wszystko jest dobrze do czasu gdy klikniesz w menu kontekstowe w Chrome - ostatni element "zbadaj" otwiera się DevTools w chrome i ta warstwa znika.

Posłużę się przykładem a dokładnie stroną z takim zachowaniem, będzie to www.algolia.com. Nie będę tutaj opisywał czym jest "algolia" bo to można znaleźć na tejże stronie, a przejdę od razu do zachowania "Autocomplete".

Poniżej tak wygląda autocomplete gdy kliknę w pole input.
agolia autocomplete

12 maj 2021

Dodanie niestandardowych przycisków za pomocą QuickTag w WordPress

wstaw kod
Najpierw co to jest QuickTag?. Jest to API w wordpressie, które umożliwia dodanie przycisków (button) do edytora tekstu w panelu administratora.
Przydaje się na takich stronach jak ta 😉

Aby dodać szybki tag, musisz podłączyć niestandardową funkcję do hooka admin_print_footer_scripts. Chodzi o dodanie niestandardowego kodu javascript w stopce administratora. Interfejs API udostępnia wbudowaną funkcję o nazwie addButton:

1 maj 2021

Proste udostępnianie w sieci dzięki navigator.share

Metoda navigator.share() jest częścią interfejsu API Web Share. Na czym to polega? Z poziomu strony mamy dostęp do mechanizmu udostępniania, które to występuje w aplikacjach natywnych.

Poniżej przykład jak to wygląda w praktyce.
metoda navigator.share() jest częścią interfejsu API Web Share

Mamy przycisk "podziel się", kliknięcie w niego otwiera nam natywne menu, a z niego mamy możliwość wybrania interesującej nasz aplikacji.

11 gru 2020

Jak najprościej do WooCommerce dodać InPost

Wordpress + WooCommerce
Jest to najprostszy sposób na dodanie paczkomatów InPost do sklepu - Woocommerce. Nie użyjemy tutaj żadnego dedykowanego pluginu. Przykład ten dodaje jedynie pole gdzie możemy wybrać, czy wyszukać nasz paczkomat. Dodamy te dane do zamówienia ale ich nie przeliczymy. Informacje o paczkomacie pojawiają się również w zamówieniu oraz mailu który jest wysyłany do właściciela sklepu.