Opis
Swatch zastępuje domyślne listy rozwijane <select> wariantów WooCommerce widocznymi, dostępnymi próbkami na stronach pojedynczych produktów. Wybierz typ próbki dla każdego atrybutu (kolorowe kropki albo przyciski z etykietą) i przypisz kolor lub etykietę do każdej wartości.
Próbki sterują własnym formularzem wariantów WooCommerce, więc cena, stan magazynowy i przycisk dodawania do koszyka aktualizują się dokładnie tak samo jak przy standardowych listach rozwijanych. Stan wybrany i stan niedostępny w danej kombinacji są odzwierciedlane automatycznie.
Pełny kod źródłowy jest na GitHubie pod adresem github.com/wppoland/plogins-swatch, jeśli chcesz przeczytać kod albo zgłosić problem.
Funkcje
- Typy próbek: kolor oraz przycisk z etykietą.
- Wybór typu dla każdego atrybutu na ekranie atrybutów globalnych.
- Wybrana wartość wyświetla się obok etykiety atrybutu, na przykład „Kolor: Granatowy”, a czytniki ekranu ją odczytują.
- Kolor dla każdej wartości (
sanitize_hex_color) i własna etykieta, zapisywane jako metadane wartości. - Działa w natywnym formularzu wariantów WooCommerce, bez jQuery, w czystym JS.
- Obsługa klawiaturą (semantyka radiogroup, klawisze strzałek) i etykiety dla czytników ekranu.
- Widoczne obramowanie fokusu, odpowiedni kontrast, uwzględnienie ograniczonego ruchu, brak przesunięć układu.
- Płynny powrót do standardowej listy rozwijanej, gdy atrybut nie ma danych próbek.
- Próbki także na listach produktów w sklepie i kategoriach, domyślnie wyłączone, aby strona sklepu nie zmieniła się bez Twojej zgody.
- Strona ustawień w menu WooCommerce: włączanie i wyłączanie, domyślny typ próbki oraz przełącznik list produktów w sklepie.
Samodzielna. Bez usług zewnętrznych, bez konta, bez zależności od firm trzecich.
Swatch Pro
Swatch Pro to osobna płatna wtyczka, która rozszerza wtyczkę Swatch.
Zawarte w Swatch:
- Próbki kolorów i przycisków
- Typ dla każdego atrybutu
- Kolor i etykieta dla każdej wartości atrybutu
- Natywny formularz wariantów
- Obsługa za pomocą klawiatury
Swatch Pro dodaje:
- Próbki graficzne
- Galeria dla każdego wariantu
- Próbki graficzne na listach produktów
- Rozbudowane podpowiedzi
- Własne rozmiary i kształty
Darmowa wersja nie jest wersją próbną, a jej funkcje pozostają dostępne bez ograniczeń czasowych.
- Swatch Pro – plogins.com/plogins-swatch-pro/
- Porównanie wersji i ceny – plogins.com/plogins-swatch-pro/pricing/
- Dokumentacja PRO – plogins.com/plogins-swatch-pro/docs/
Usługi zewnętrzne
Swatch nie łączy się z żadnymi usługami zewnętrznymi. Nie wykonuje wychodzących żądań HTTP, nie wczytuje zdalnych skryptów, czcionek ani zasobów z CDN i nie wysyła żadnej telemetrii ani danych analitycznych. Nie wymaga konta ani klucza API.
Wszystko jest przechowywane w Twojej własnej bazie danych: typ próbki dla każdego atrybutu, ustawienia globalne i wersja schematu są zapisywane w opcjach swatch_attribute_types, swatch_settings i swatch_db_version, a kolor i etykieta każdej wartości są zapisywane jako metadane swatch_color i swatch_label wartości atrybutów WooCommerce. Wtyczka nie wysyła żadnych wiadomości email.
Tłumaczenia
Plogins Swatch można w pełni przetłumaczyć, a wtyczka zawiera szablon plogins-swatch.pot. Tłumaczenia są dostarczane w paczkach językowych WordPress.org z translate.wordpress.org, gdzie powstają tłumaczenia na polski, niemiecki i hiszpański. Sama paczka wtyczki nie zawiera skompilowanych plików tłumaczeń.
Zrzuty ekranu



Instalacja
- Zainstaluj wtyczkę w Wtyczki > Dodaj wtyczkę, wyszukując Plogins Swatch, albo wgraj katalog
plogins-swatchdo/wp-content/plugins/. - Włącz wtyczkę. WooCommerce musi być włączony.
- Przejdź do WooCommerce > Swatch, aby dostosować ustawienia domyślne.
- W Produkty > Atrybuty ustaw kolor lub etykietę próbki dla każdej wartości atrybutu.
Najczęściej zadawane pytania
-
Dokumentacja i odnośniki
-
- Dokumentacja: plogins.com/plogins-swatch/docs/
- Strona wtyczki: plogins.com/plogins-swatch/
- Kod źródłowy: github.com/wppoland/plogins-swatch
- Zgłoszenia błędów i propozycje funkcji: github.com/wppoland/plogins-swatch/issues
- Swatch Pro: plogins.com/plogins-swatch-pro/
-
Czy wymaga WooCommerce?
-
Tak. Swatch rozszerza produkty z wariantami WooCommerce i bez WooCommerce nic nie robi.
-
Co się dzieje z atrybutami, których nie skonfigurowałem?
-
Otrzymują domyślny typ próbki z ustawień wtyczki (na start są to przyciski), tak samo jak każdy atrybut, któremu nie nadano własnego typu. Tylko atrybut koloru bez ustawionych kolorów automatycznie wraca do listy rozwijanej.
-
Czy działa bez jQuery?
-
Tak. Część widoczna w sklepie to czysty JavaScript, który korzysta z własnych zdarzeń wariantów WooCommerce.
-
Czy kupujący mogą wybierać warianty za pomocą klawiatury?
-
Tak. Próbki korzystają z semantyki radiogroup, nawigacji klawiszami strzałek i widocznego obramowania fokusu.
-
Czy działa na urządzeniach mobilnych?
-
Tak. Próbki pozostają w natywnym formularzu wariantów i są wygodne w obsłudze dotykiem. Nie jest potrzebna osobna aplikacja mobilna ani framework skryptowy.
-
Czy ta wtyczka działa w WordPress Multisite?
-
Tak. Ta wtyczka jest zgodna z WordPress Multisite. Włącz ją dla całej sieci lub w poszczególnych witrynach. Każda witryna zachowuje własne ustawienia i dane.
Kontrybutorzy i deweloperzy
„Swatch – Variation Swatches for WooCommerce” jest oprogramowaniem open source. Poniższe osoby miały wkład w rozwój wtyczki.
ZaangażowaniWtyczka „Swatch – Variation Swatches for WooCommerce” została przetłumaczona na 4 języki. Podziękuj tłumaczom za ich wkład.
Przetłumacz wtyczkę “Swatch – Variation Swatches for WooCommerce” na swój język.
Interesuje cię rozwój wtyczki?
Przeglądaj kod, sprawdź repozytorium SVN lub czytaj dziennik rozwoju przez RSS.
Rejestr zmian
1.0.21
- Odnośniki Przejdź na PRO otwierają stronę cennika w języku administratora, jeśli plogins.com ma ją w tym języku, i przekazują plogins.com, z której wtyczki pochodzi wizyta (utm_source, utm_medium i utm_campaign w odnośniku). Z Twojej witryny nic nie jest wysyłane.
- Readme: sekcja PRO wymienia w dwóch listach, co zawiera darmowa wtyczka i co dodaje płatna wersja, ponieważ WordPress.org wyświetla listy (nie wyświetla tabel).
1.0.20
- Tylko readme: sekcja PRO z odnośnikami do płatnej wersji.
1.0.19
- Nowość: wybrana wartość wyświetla się obok etykiety atrybutu, na przykład „Kolor: Czerwony”, więc próbka koloru lub obrazka podaje też swoją nazwę słownie. Znika po kliknięciu „Wyczyść”, podąża za WooCommerce, gdy przywraca on domyślny wybór, a czytniki ekranu ogłaszają zmianę.
1.0.18
- Poprawka: próbki niedostępne w danej kombinacji nigdy nie były wyłączane, a odnośnik „Wyczyść” zostawiał poprzednie próbki podświetlone. WooCommerce wywołuje zdarzenia wariantów przez jQuery, a natywny nasłuch zdarzeń nigdy ich nie odbiera, więc próbki pomijały każdą aktualizację. Teraz nasłuchują przez jQuery używane przez WooCommerce.
- Poprawka: dodanie lub zapisanie dowolnej wartości atrybutu zapisywało czarny kolor próbki, ponieważ pole koloru zawsze przesyła wartość. Wartość, której nigdy nie nadano koloru, wyświetlała wtedy czarną kropkę, a atrybut koloru nie mógł już wrócić do listy rozwijanej. Pole wyboru „Brak koloru” pozwala teraz zostawić wartość bez koloru, a wybranie koloru je odznacza. Wartości zapisane na czarno przez wcześniejsze wersje zachowują ten kolor, dopóki nie zaznaczysz przy nich „Brak koloru”.
1.0.17
- Etykiety „Coming soon” i „Get notified” w powiadomieniu o przejściu na wyższą wersję są angielskimi tekstami źródłowymi dla wszystkich języków. Wcześniej polskie witryny dostawały własny polski tekst źródłowy, który tłumacze innych języków widzieli wtedy jako nieprzetłumaczony.
1.0.16
- Wyświetlana nazwa traci przedrostek „Plogins „. Slug, domena tekstowa i wszystkie klucze opcji pozostają bez zmian, więc w istniejącej instalacji nic się nie zmienia.
1.0.15
- Promocja przejścia na wyższą wersję w panelu bocznym podlega teraz temu samemu odrzuceniu co baner. Wcześniej po odrzuceniu banera na ekranie ustawień na stałe pozostawała reklama na całą wysokość, a nie o to chodzi w wytycznej WordPress.org, według której zachęty do przejścia na wyższą wersję należy stosować z umiarem.
1.0.14
- Bezpieczeństwo (niski priorytet): znaczniki próbek przechodzą teraz przez
wp_kses()z jawną listą dozwolonych elementów w miejscu, w którym są wyświetlane. Każdy renderer zabezpiecza wartości, które zapisuje, ale każdy kończy się filtrem, więc na stronę trafiało to, co zwróciła ostatnia funkcja zwrotna. Dodatek lub cokolwiek innego podpiętego pod te filtry mogło umieścić niezabezpieczone znaczniki na stronie sklepu. Lista dozwolonych obejmuje elementy i atrybuty używane przez próbki, w tymimgdla próbek z obrazkami w wersji płatnej orazdata-*dla wartości odczytywanych przez skrypt. - Uwaga: kolor podany w atrybucie inline, który nie jest wartością szesnastkową, jest usuwany przez WordPressa podczas filtrowania znaczników, więc funkcja zwrotna zwracająca
rgb(...)traci ten kolor. Nie dotyczy to kolorów zapisanych przy wartości atrybutu: przechodzą one przezsanitize_hex_color()przy zapisie i przy odczycie.
1.0.13
- Poprawka: promocja przejścia na PRO była nadal wyświetlana osobom, które już kupiły wersję płatną. Odrzucić można było tylko baner, więc promocja w panelu bocznym i karty zablokowanych funkcji towarzyszyły płacącemu klientowi bez końca. Promocja sprawdza teraz, czy wersja płatna jest włączona, i w takim przypadku się nie wyświetla.
- Poprawka: znaki strzałek w ścieżkach menu administracyjnego i w tekstach przekazywanych tłumaczom. Strzałka w tekście do tłumaczenia sprawia, że ten znak staje się problemem każdego tłumacza, i zmienia układ w każdym języku, który ją pominie.
1.0.12
- Poprawka: instrukcja instalacji kazała wgrać katalog
swatch. Paczka rozpakowuje się doplogins-swatch, odkąd proces budowania bierze nazwę katalogu z domeny tekstowej, więc postępowanie według readme umieszczało wtyczkę tam, gdzie WordPress by jej nie znalazł. - Poprawka: odnośnik do ekranu atrybutów miał znak strzałki w tłumaczonym tekście, przez co strzałka stawała się problemem każdego tłumacza, a nie układu strony.
- Zmiana: lista funkcji wymienia teraz próbki na listach produktów w sklepie i kategoriach. Pojawiły się w wersji 1.0.8, a opis nigdy o tym nie wspominał.
- Zmiana: tłumaczenia na polski, niemiecki i hiszpański są znowu kompletne, 52 z 52 tekstów. Dziesięć tekstów, w tym cała sekcja list produktów w sklepie, nie miało tłumaczenia w żadnym języku.
1.0.11
- Poprawka: usunięcie wtyczki pozostawiało w bazie danych zapisaną dla każdego użytkownika flagę odrzucenia powiadomienia PRO. Odinstalowanie usuwa ją teraz dla wszystkich użytkowników, nie tylko dla tego, który odrzucił powiadomienie.
1.0.10
- Poprawka: powiadomienie PRO na ekranie ustawień nadal przedstawiało próbki na listach produktów jako funkcję płatną. Są one w darmowej wtyczce od wersji 1.0.8, pod polem wyboru Próbki na listach produktów. PRO dodaje tam obrazek wartości zamiast kropki koloru i powiadomienie teraz to mówi.
1.0.9
- Zmiana: Próbki na listach produktów pokazują teraz, że zależą od głównego przełącznika powyżej. Gdy Włącz próbki jest wyłączone, wiersz zostaje wyszarzony i informuje, że listy produktów nie będą jeszcze wyświetlać próbek, zamiast przyjmować zaznaczenie, które nic nie robi. Stan jest wyświetlany na podstawie zapisanych ustawień, więc jest poprawny także przy wyłączonym JavaScripcie, a pole pozostaje dostępne i można je zapisać w obu przypadkach.
- Zmiana: oba przełączniki w tej sekcji wiążą swój tekst pomocy z polem wyboru przez
aria-describedby, więc czytnik ekranu odczytuje wyjaśnienie razem z kontrolką.
1.0.8
- Nowość: Próbki na listach produktów, ustawienie na ekranie Swatch. Renderer list produktów był w tej wtyczce od zawsze, kompletny i działający, ale blokowała go wpisana na sztywno wartość, którą zmieniał wyłącznie płatny dodatek. To czyniło z niego wbudowaną funkcję, której wtyczka nie chciała uruchomić, na co wytyczne WordPress.org nie pozwalają, więc teraz jest to ustawienie. Domyślnie wyłączone, ponieważ zmienia wygląd strony sklepu.
- Próbki kolorów i etykiet wyświetlają się na listach produktów dokładnie tak samo jak na stronie produktu. Próbki z obrazkami na listach to dodatek wersji płatnej.
1.0.7
- Zmiana nazwy na Plogins Swatch – Variation Swatches for WooCommerce, aby nazwa zaczynała się od marki, a nie od ogólnego słowa, o co prosi zespół recenzentów wtyczek WordPress.org. Slug wtyczki pozostaje bez zmian.
1.0.6
- Przetestowano z WordPressem 7.1. Sprawdzono przez włączenie tej wersji na czystej instalacji 7.1 z WooCommerce 11.1, a nie przez zmianę nagłówka.
1.0.5
- Poprawiono promocję PRO na ekranie ustawień, która podawała cenę w złotych. PRO jest wyceniane i rozliczane w euro, więc administrator polskiej witryny widział kwotę w złotych, a płacił w euro, przy czym kwota w złotych wynikała ze stałego przelicznika i wraz ze zmianą kursu rozjeżdżała się z faktyczną opłatą. Promocja pokazuje teraz cenę w euro, która jest faktycznie pobierana.
1.0.3
- Tłumaczenia: uzupełniono polskie, niemieckie i hiszpańskie tłumaczenia panelu przejścia na PRO.
1.0.2
- Dodano dołączone tłumaczenia interfejsu wtyczki na polski, niemiecki i hiszpański.
1.0.1
- Pierwsze stabilne wydanie.
0.1.5
- Zmiana nazwy na Plogins Swatch for WooCommerce, aby nazwa wtyczki była bardziej rozpoznawalna.
0.1.4
- Filtry grupy próbek
swatch/swatch_group_varsiswatch/swatch_group_classesna potrzeby rozmiarów i kształtów w PRO.
0.1.3
- Filtry dla pojedynczej próbki (
swatch/product_swatch_html,swatch/archive_swatch_html) orazswatch/swatch_itemsna potrzeby podpowiedzi w PRO i dodatków.
0.1.2
- Dodano opcjonalny podgląd próbek na listach produktów przez filtry
swatch/archive_enablediswatch/archive_htmlna potrzeby dodatków.
0.1.1
- Dodano filtr
swatch/variation_galleryi udostępnionoswatch_variation_galleryw danych JSON wariantu na potrzeby dodatków.
0.1.0
- Pierwsze wydanie.
