Prestashop installation

Plugin installation

Step 1: Install the DockWCAG plug-in

You can easily install the DockWCAG plugin using the Prestashop module repository. To download the module, go to prestashop marketplace: https://addons.prestashop.com/promocje-prezenty/dockwcag.html, log in and download the free module. In the Prestashop admin panel, go to the Modules tab” then “Module Manager” in the left menu, then click “Load Module” at the top of the page. Drag and drop the module file or search for it on the disk and select it, then the module will be installed automatically. After installing the module, click “Configure.”

Step 2: Register your site and obtain a token

If you already have an account with DockWCAG, simply log in, go to your account and copy the generated token.

If you are installing the plugin for the first time, register with Google, Facebook or use your own email address and password.

After logging in, enter the address of your site (remember to include the www subdomain, e.g. www.example.com) and accept the terms of use of DockWCAG. After saving, your unique token will appear on the page, which you can copy.

Step 3: Activate the accessibility widget

Once you have the token, go back to your prestashop panel, go to the configuration section of the DockWCAG plugin and enable the widget. Enter the copied token into the appropriate field, and then adjust the color scheme, widget position and available options. Remember to save your changes after you finish the configuration.

Step 4: Preview the site

After installation and configuration, test the widget on your site to make sure it works properly and is WCAG compliant.

Manual installation of DockWCAG widget on prestashop website

If you prefer to manually install the DockWCAG widget on your website, follow the steps below:

Step 1: Register your site and obtain a token

Log in or register on the DockWCAG website, then enter your site address.

After saving the address, a unique token will appear, which you can copy to the clipboard.

Step 2: Embed the code in PrestaShop

To install the widget, you need to add the appropriate script to your site’s HTML code. Remember not to remove any elements from the existing code, as this could affect the performance of the site.

Copy the code below:

<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>

You can find more on how to configure the widget here.

Go to the template folder, find the footer.tpl file and start editing it:
/path/to/project/themes/[szablon]/templates/_partials/footer.tpl

Insert the script at the end of the .tpl file. Paste the code and replace *** With your unique token that was generated in the previous step. Finally, save the file and clear the cache from the prestashop backend: tab “Advanced” => “Performance”. Then, in the upper right corner, click the “Clear cache” button.

You can also clear the cache manually by removing the prod or dev folder from the /path/to/project/var/cache/ directory[prod/dev].

Step 3: Preview the site

After adding the script, test your site to make sure the widget is properly installed and works as expected. Check all the widget’s functions to verify that the installation was successful.