There is a tabbed section near the bottom of the page (see "tabbed section.png")
There are 5 tabs for (Grades 1-5)
I've been asked tocreate 5 different jumplinksthat will link to the corresponding Grade/Tab and show at the top of the browser window when clicked on. (see screenshot Need Links for TabsGrades.png).
Here is the HTML code for the Product V1 S2 - Supplemental Products Tabs
Aug 5, 202110:17 AM - edited Aug 5, 202110:27 AM
Top Contributor | Platinum Partner
How do I create 5 jump links (referencing tab categories) to show at the top of the browser.
SOLVE
Hello @gramirez , thank you for writing in the blog.
In order to accomplish that, you will need to create a module somewhere in the template where you want the jumplinks to live, then in the module create an html template and finally use javascript to create the jumplinks that will take you to the portion of the page where the content is and change the slide to the correct one. This will be done firstly by using javascript to dynamically create the jumplinks from a template and secondly by using the built in functions of slick carousel to make a custom button to change the slide on click.
I will not be covering creating a module as you probably know how to do that already, in any case if there is something you don't understand don't hesitate to write it here.
So roll up you sleeves and bear with me as I explain the code below:
1. This first part goes to the new module you will create and will hold the jumplinks
<!-- this ul will contain the final items -->
<ul class="slick-dots js-slider-dots show-for-small-only" role="tablist"></ul>
<!-- this is the template for the javascript -->
<template id="customSliderLinks">
<li role="presentation">
<!-- DON'T FORGET TO CHANGE THE ID TO BE THE ID OF THE CONTAINER OF THE SLIDES SO PAGE WILL SCROLL TO -->
<a href="#{ THIS WILL BE THE ID OF THE CONTAINER OF THE SLIDES }" type="button" role="tab" tabindex="-1"></button>
</li>
</template>
2. The code below, need to be inside your existing module where you create the sliders.
<!-- now this script is added below your existing script where you create the carousels -->
<script>
// first we get the slick that contains the slides so we can count them with .slick.slideCount
const sliderItemsCount = document.querySelector('#{{ module.section_id }} .product-tabmain .page-center').slick.slideCount;
// next we get the ul that will hold our final produced jumplinks
const sliderLinksContainer = document.querySelector('.js-slider-links');
// and finally we get the template we created earlier
const sliderLinksTemplate = document.querySelector('#customSliderLinks');
// now we loop through each slide creating an appropriate jumplink for it
// I'm not going to dig into this for this case but you should probably take a look
// at the MDN documentation about <template> tags and cloning nodes
for (let sliderItem = 0; sliderItem < sliderItemsCount; sliderItem++) {
const clone = sliderLinksTemplate.content.cloneNode(true);
const sliderLinkButton = clone.querySelector('a');
sliderLinkButton.setAttribute("id", "slick-slide-control"+sliderItem+1);
sliderLinkButton.setAttribute("aria-controls", "slick-slide"+sliderItem+1);
sliderLinkButton.setAttribute("aria-label", sliderItem+1+" of "+sliderItemsCount);
sliderLinkButton.setAttribute("data-slide-target", sliderItem);
sliderLinkButton.textContent = `Grade ${sliderItem+1}`;
sliderLinksContainer.appendChild(clone);
}
// next we create a function that will change the slide
function changeSlide(){
const slideToShow = this.dataset.slideTarget;
document.querySelector('#{{ module.section_id }} .product-tabmain .page-center').slick.slickGoTo(slideToShow);
}
// and finally we bind all the links with the click event so they actually change to the appropriate slide
const sliderButtons = sliderLinksContainer.querySelectorAll('a');
sliderButtons.forEach(element => element.addEventListener("click", changeSlide));
</script>
Aug 5, 202110:17 AM - edited Aug 5, 202110:27 AM
Top Contributor | Platinum Partner
How do I create 5 jump links (referencing tab categories) to show at the top of the browser.
SOLVE
Hello @gramirez , thank you for writing in the blog.
In order to accomplish that, you will need to create a module somewhere in the template where you want the jumplinks to live, then in the module create an html template and finally use javascript to create the jumplinks that will take you to the portion of the page where the content is and change the slide to the correct one. This will be done firstly by using javascript to dynamically create the jumplinks from a template and secondly by using the built in functions of slick carousel to make a custom button to change the slide on click.
I will not be covering creating a module as you probably know how to do that already, in any case if there is something you don't understand don't hesitate to write it here.
So roll up you sleeves and bear with me as I explain the code below:
1. This first part goes to the new module you will create and will hold the jumplinks
<!-- this ul will contain the final items -->
<ul class="slick-dots js-slider-dots show-for-small-only" role="tablist"></ul>
<!-- this is the template for the javascript -->
<template id="customSliderLinks">
<li role="presentation">
<!-- DON'T FORGET TO CHANGE THE ID TO BE THE ID OF THE CONTAINER OF THE SLIDES SO PAGE WILL SCROLL TO -->
<a href="#{ THIS WILL BE THE ID OF THE CONTAINER OF THE SLIDES }" type="button" role="tab" tabindex="-1"></button>
</li>
</template>
2. The code below, need to be inside your existing module where you create the sliders.
<!-- now this script is added below your existing script where you create the carousels -->
<script>
// first we get the slick that contains the slides so we can count them with .slick.slideCount
const sliderItemsCount = document.querySelector('#{{ module.section_id }} .product-tabmain .page-center').slick.slideCount;
// next we get the ul that will hold our final produced jumplinks
const sliderLinksContainer = document.querySelector('.js-slider-links');
// and finally we get the template we created earlier
const sliderLinksTemplate = document.querySelector('#customSliderLinks');
// now we loop through each slide creating an appropriate jumplink for it
// I'm not going to dig into this for this case but you should probably take a look
// at the MDN documentation about <template> tags and cloning nodes
for (let sliderItem = 0; sliderItem < sliderItemsCount; sliderItem++) {
const clone = sliderLinksTemplate.content.cloneNode(true);
const sliderLinkButton = clone.querySelector('a');
sliderLinkButton.setAttribute("id", "slick-slide-control"+sliderItem+1);
sliderLinkButton.setAttribute("aria-controls", "slick-slide"+sliderItem+1);
sliderLinkButton.setAttribute("aria-label", sliderItem+1+" of "+sliderItemsCount);
sliderLinkButton.setAttribute("data-slide-target", sliderItem);
sliderLinkButton.textContent = `Grade ${sliderItem+1}`;
sliderLinksContainer.appendChild(clone);
}
// next we create a function that will change the slide
function changeSlide(){
const slideToShow = this.dataset.slideTarget;
document.querySelector('#{{ module.section_id }} .product-tabmain .page-center').slick.slickGoTo(slideToShow);
}
// and finally we bind all the links with the click event so they actually change to the appropriate slide
const sliderButtons = sliderLinksContainer.querySelectorAll('a');
sliderButtons.forEach(element => element.addEventListener("click", changeSlide));
</script>