Instalacja modułu dostępności Prestashop
Front: https://wcag-demo.dock.codes/
Zaplecze: https://wcag-demo.dock.codes/admin2138o5iqkvvvy3kc7ao/
E: demo@demo.com
P: demodemo
Krok 1: Instalacja modułu
Pobierz darmowy moduł z ze strony DockWCAG – assistforwcag.zip.
W panelu administracyjnym PrestaShop, przejdź do zakładki „Moduły” w lewym menu, a następnie kliknij „Menadżer modułów”.
Po przejściu do zakładki „Menadżer modułów”, w górnej części strony kliknij „Załaduj moduł”, a następnie przeciągnij i upuść lub wybierz z dysku wcześniej pobrany plik .zip z modułem.
Instalacja rozpocznie się automatycznie. Po zainstalowaniu kliknij przycisk „Konfiguruj”.
Krok 2: Rejestracja witryny i uzyskanie tokenu
Jeśli masz już konto, zaloguj się do DockWCAG, przejdź do swojego konta i skopiuj wygenerowany token.
Jeżeli instalujesz wtyczkę po raz pierwszy, zarejestruj się za pomocą Google, Facebooka lub użyj własnego adresu e-mail i hasła.
Po założeniu konta przejdź do zakładki „Moje tokeny”, a następnie kliknij przycisk „Dodaj nowy”.
W formularz dodawania nowego tokena podaj adresy stron internetowych, na których chcesz zastosować ten token. Jeśli twoja strona działa na domenie np. example.com i www.example.com to konieczne jest dodanie obu adresów. Więcej na ten temat w dokumentacji.
Podczas tworzenia tokena oraz później podczas edycji możesz zaznaczyć opcję, aby dla twoje strony internetowej została wygenerowana deklaracja dostępności. Deklaracja dostępności to dokument wymagany dla instytucji publicznych w Unii Europejskiej. Jeśli dotyczy to twojej strony, to włącz deklarację dostępności i uzupełnij wymagane pola. Więcej na ten temat w dokumentacji.
Na koniec kliknij przycisk „Zapisz” i skopiuj wygenerowany token.
Krok 3: Aktywacja widżetu dostępności
Po uzyskaniu tokenu, wróć do panelu PrestaShop, przejdź do sekcji konfiguracji wtyczki i upewnij się, że opcja „Załaduj widget” ma zaznaczoną wartość TAK. Wprowadź skopiowany token w odpowiednie pole, a następnie dostosuj kolorystykę, położenie widżetu oraz dostępne opcje. Pamiętaj, aby zapisać zmiany po zakończeniu konfiguracji.
Krok 4: Podgląd witryny
Po zakończeniu instalacji i konfiguracji, przetestuj widżet na swojej stronie, aby upewnić się, że działa prawidłowo i jest zgodny z wymaganiami WCAG.
Ręczna instalacja widżetu dostępności w sklepie internetowym PrestaShop
Jeśli wolisz ręcznie zainstalować widżet w swoim sklepie internetowym, postępuj zgodnie z poniższymi krokami:
Krok 1: Rejestracja witryny i uzyskanie tokenu
Zaloguj się lub zarejestruj na stronie DockWCAG, a następnie wprowadź adres swojej witryny.
Po zalogowaniu się lub założeniu konta przejdź do zakładki „Moje tokeny”, a następnie kliknij przycisk „Dodaj nowy”.
W formularz dodawania nowego tokena podaj adresy stron internetowych, na których chcesz zastosować ten token. Jeśli twoja strona działa na domenie np. example.com i www.example.com to konieczne jest dodanie obu adresów. Więcej na ten temat w dokumentacji.
Podczas tworzenia tokena oraz później podczas edycji możesz zaznaczyć opcję, aby dla twoje strony internetowej została wygenerowana deklaracja dostępności. Deklaracja dostępności to dokument wymagany dla instytucji publicznych w Unii Europejskiej. Jeśli dotyczy to twojej strony, to włącz deklarację dostępności i uzupełnij wymagane pola. Więcej na ten temat w dokumentacji.
Na koniec kliknij przycisk „Zapisz” i skopiuj wygenerowany token.
Krok 2: Osadzenie kodu w WordPress
Aby zainstalować widżet, musisz dodać odpowiedni skrypt do kodu HTML swojej witryny. Pamiętaj, aby nie usuwać żadnych elementów z istniejącego kodu, ponieważ mogłoby to wpłynąć na działanie strony.
Skopiuj poniższy kod:
<script>
(function (w, d, s, l, t, c = {}) {
w[l] = c;
w[l].token = t;
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
a = new Date().getTime();
j.async = true;
j.src = '//wcag.dock.codes/accessibility/' + t + '/start.js?t=' + a;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'accessibility', '***', {widget: true});
</script>
Więcej na temat konfiguracji widgetu znajdziesz dokumentacji.
Przejdź do folderu z szablonem, znajdź plik head.tpl i rozpocznij jego edycję:
/path/to/project/themes/[szablon]/templates/_partials/head.tpl
Wstaw skrypt na końcu pliku .tpl.
Wklej kod i zastąp *** swoim unikalnym tokenem, który został wygenerowany w poprzednim kroku.
Na koniec zapisz plik i wyczyść cache z zaplecza PrestaShop: zakładka “Zaawansowane” => “Wydajność”.
Następnie w górnym prawym rogu kliknij przycisk “Wyczyść pamięć podręczną”.
Możesz również wyczyścić cache ręcznie usuwając folder prod lub dev z katalogu /path/to/project/var/cache/[prod/dev].
Krok 3: Podgląd witryny
Po dodaniu skryptu, przetestuj swoją stronę, aby upewnić się, że widżet jest prawidłowo zainstalowany i działa zgodnie z oczekiwaniami. Sprawdź wszystkie funkcje widżetu, aby zweryfikować, że instalacja przebiegła pomyślnie.
