Instalacja Prestashop

Instalacja wtyczki

Krok 1: Instalacja wtyczki DockWCAG

Wtyczkę DockWCAG można łatwo zainstalować za pomocą repozytorium modułów Prestashop. W celu pobrania modułu przejdź do marketplace prestashop: https://addons.prestashop.com/promocje-prezenty/dockwcag.html, zaloguj się i pobierz darmowy moduł. W panelu administracyjnym Prestashop, przejdź do zakładki Moduły” następnie “Menadżer modułów”  w lewym menu, a następnie kliknij „Załaduj moduł” u góry strony. Przeciągnij i upuść plik modułu lub wyszukaj go na dysku i wybierz, a następnie automatycznie zostanie zainstalowany moduł. Po instalacji modułu kliknij “Konfiguruj”.

Krok 2: Rejestracja witryny i uzyskanie tokenu

Jeśli masz już konto w DockWCAG, po prostu zaloguj się, 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 zalogowaniu, wprowadź adres swojej witryny (pamiętaj, aby uwzględnić subdomenę www, np. www.example.com) i zaakceptuj warunki korzystania z DockWCAG. Po zapisaniu, na stronie pojawi się twój unikalny token, który możesz skopiować.

Krok 3: Aktywacja widżetu dostępności

Po uzyskaniu tokenu, wróć do panelu prestashop, przejdź do sekcji konfiguracji wtyczki DockWCAG i włącz widżet. 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 DockWCAG na stronie internetowej prestashop

Jeśli wolisz ręcznie zainstalować widżet DockWCAG na swojej stronie internetowej, 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 zapisaniu adresu pojawi się unikalny token, który możesz skopiować do schowka.

Krok 2: Osadzenie kodu w PrestaShop

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', '***', {});
</script>

Więcej na temat konfiguracji widgetu znajdziesz tutaj.

Przejdź do folderu z szablonem, znajdź plik footer.tpl i rozpocznij jego edycję:
/path/to/project/themes/[szablon]/templates/_partials/footer.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.