Jak zainstalować widżet dostępności w Prestashop

Demo: Front: https://wcag-demo.dock.codes/ (otwiera nową kartę) Zaplecze: https://wcag-demo.dock.codes/admin2138o5iqkvvvy3kc7ao/ (otwiera nową kartę) 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żeli instalujesz wtyczkę po raz pierwszy, zarejestruj się (otwiera nową kartę) za pomocą Google, Facebook, GitHub lub własnego adresu e-mail i hasła.

Po założeniu konta przejdź do zakładki „Moje strony”, a następnie kliknij przycisk „Dodaj stronę” (otwiera nową kartę).

W formularzu dodawania nowej strony podaj adresy stron internetowych, na których chcesz zastosować token. Jeśli Twoja strona działa np. na domenie example.com oraz www.example.com, dodaj oba adresy. Więcej na ten temat w dokumentacji (otwiera nową kartę).

Na koniec kliknij przycisk „Zapisz” i skopiuj wygenerowany token z pola „Twój token”.

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

Po uzyskaniu tokenu, wróć do panelu PrestaShop, przejdź do sekcji konfiguracji wtyczki i wklej wcześniej skopiowany token w odpowiednie pole. Pamiętaj, aby zapisać zmiany.

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

Jeżeli instalujesz wtyczkę po raz pierwszy, zarejestruj się (otwiera nową kartę) za pomocą Google, Facebook, GitHub lub własnego adresu e-mail i hasła.

Po założeniu konta przejdź do zakładki „Moje strony”, a następnie kliknij przycisk „Dodaj stronę” (otwiera nową kartę).

W formularzu dodawania nowej strony podaj adresy stron internetowych, na których chcesz zastosować token. Jeśli Twoja strona działa np. na domenie example.com oraz www.example.com, dodaj oba adresy. Więcej na ten temat w dokumentacji (otwiera nową kartę).

Na koniec kliknij przycisk „Zapisz” i skopiuj wygenerowany token z pola „Twój token”.

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 (d, s, t) {
        var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s);
        j.async = true;
        j.src = '//dockaccess.org/accessibility/' + t + '/start.js';
        f.parentNode.insertBefore(j, f);
    })(document, 'script', '_TOKEN_');
</script>
Skopiuj tekst

Więcej na temat konfiguracji widgetu znajdziesz dokumentacji (otwiera nową kartę). 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 _TOKEN_ 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.