How to fix previous and next button error in Dawn theme?

Store Design
1

Hello,

i have encounterd an error with the previous and next buttons on my secondary product pictures on the product page.

https://online-glutenfrei.myshopify.com/products/schokoladen-brownie

pass: gluten

I used the code provided here:

https://made4uo.com/blogs/dawn-theme-tweaks-and-trick/convert-dawn-to-debut-product-page

main-product.liquid

global.js

class SliderComponent extends HTMLElement {
constructor() {
    super();
    this.slider = this.querySelector('[id^="Slider-"]');
    this.sliderItems = this.querySelectorAll('[id^="Slide-"]');
    this.enableSliderLooping = false;
    this.currentPageElement = this.querySelector('.slider-counter--current');
    this.pageTotalElement = this.querySelector('.slider-counter--total');
    this.prevButton = this.querySelector('button[name="previous"]');
    this.nextButton = this.querySelector('button[name="next"]');

     this.productSlider = this.querySelector('.product-slider-box');
    
    if (!this.slider || !this.nextButton) return;

    this.initPages();
    const resizeObserver = new ResizeObserver(entries => this.initPages());
    resizeObserver.observe(this.slider);

    this.slider.addEventListener('scroll', this.update.bind(this));
    this.prevButton.addEventListener('click', this.onButtonClick.bind(this));
    this.nextButton.addEventListener('click', this.onButtonClick.bind(this));
  }
.
.
.

also gobal.js

onButtonClick(event) {
event.preventDefault();

if (this.productSlider) {
const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + (this.slider.clientWidth): this.slider.scrollLeft - (this.slider.clientWidth);
this.slider.scrollTo({
left: Math.floor(slideScrollPosition)
});

this.currSlide = Math.round(slideScrollPosition / this.slider.clientWidth);
if (this.currSlide === 0 ) {
this.prevButton.setAttribute('disabled', true);
} else {
this.prevButton.removeAttribute('disabled');
}
if (this.currSlide === this.totalPages / 3 ) {
this.nextButton.setAttribute('disabled', true);
} else {
this.nextButton.removeAttribute('disabled');
}
} else {
const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + this.sliderLastItem.clientWidth : this.slider.scrollLeft - this.sliderLastItem.clientWidth;
this.slider.scrollTo({
left: Math.floor(slideScrollPosition)
});
}
}

I am trying my best to wadethrough the code, but I dont seem to find the part which matters, the eventlisteners and the binding seem to be right?

Thank you for taking the time to read.

2

Hi,

The code that you are using does not work with the updated version of Dawn theme. It looks like you have theme version 2.5, which they already provided a product carousel. Check the video for more info

1 Like
3

Hey @made4Uo ,

thank you for your reply!

Here and on your own Website. Great information and a heap of useful tips and tricks. I recommend everyone to check it out.

And thank you shopify! Great product.

I will try the method you provide in your video, eager to try out the other things too!

Cheers. :slightly_smiling_face:

4

@made4Uo

Works like a charm!

Thanks again.