Solved

Previous and Next buttons Dawn-Theme

Bentou
Visitor
3 0 0

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 

 

 

<div class="button-wrapper {% if product.media.size < 3 %}hidden{% endif %}" >
<button type="button" class="slider-button slider-button--prev bigger-slider" name="previous" aria-label="zurück">{% render 'icon-caret' %}</button>
<button type="button" class="slider-button slider-button--next bigger-slider" name="next" aria-label="vor">{% render 'icon-caret' %}</button>
</div>

 

 

 

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.

Accepted Solution (1)

made4Uo
Shopify Partner
3807 713 1129

This is an accepted solution.

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

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

Replies 3 (3)

made4Uo
Shopify Partner
3807 713 1129

This is an accepted solution.

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

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Bentou
Visitor
3 0 0

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

 

Bentou
Visitor
3 0 0

@made4Uo 

 

Works like a charm! 

 

Thanks again.