How to install a slider between two sections of an existing modular page

Support Plugins
1

Hello, here is what I implemented to install a slider on the page " 01.home " between " _pricing " and " _callout " of the Woo skeleton, its folder is named " 05._sliderial " and I gave it a page " sliderial.md ":

1/I created the folder in " 01.home " :
image

image
2/ I created the “slider” folder in “pages” with its images and lightslider.md file inside (copied and pasted from Shop).

3/ I modified the “modular.md” file in “01.home” and added “- _sliderial”.
image
3/ I pasted in " /user/plugins " the lightslider folder (copied from the skeleton Shop).

4/ I added a file " sliderial.html.twig " in /woo/templates/modular with this inside :

image
image931×133 13.1 KB

5/ the slider is in the right place but not well arranged:
image
I’d love some feedback on what I’ve forgotten, and thank you in advance for your help. jef

2

@jefrey, Plugin Lightslider is designed for modular pages.

In your previous attempt to add plugin Lightslider to skeleton Shop, you had to use a trick to inject Lightslider into non-modular pages because skeleton Shop does not use modular pages.

Now you have switched to skeleton Woo, which does use modular pages. You should now use Lightslider as a module the way it was build to be used.

After adding Lightslider the correct way as module, you will notice the slider is not working and the slides are shown vertically.

Have a look at the developer console in the browser. You’ll notice an error:

Uncaught ReferenceError: $ is not defined at (index):419

This is typically an issue of jQuery being loaded too late. In Woo, jQuery is loaded at the bottom of the page, while the script for Lightslider is run earlier.

Fix:

  • Copy file user/plugins/lightslider/templates/modular/lightslider.html.twig into your own child theme: user/themes/mywoo/templates/modular/lightslider.html.twig
  • In the copied template change <script>...</script> into:
    <script type="text/javascript">
  document.addEventListener("DOMContentLoaded",  () => {
     --- insert original javascript here ---
  });
</script>

The code document.addEventListener("DOMContentLoaded", () => { --original script-- }) will cause the original script to be executed when the entire page (and also jQuery) has been loaded.