FROM CACHE - en_header

Previous and Next buttons Dawn-Theme

Solved
Bentou
New Member
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)

Accepted Solutions
made4Uo
Shopify Partner
2589 474 703

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

 

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.

View solution in original post

Replies 3 (3)
made4Uo
Shopify Partner
2589 474 703

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

 

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
Bentou
New Member
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
New Member
3 0 0

@made4Uo 

 

Works like a charm! 

 

Thanks again.