How to implemnet following code from a tutorial

Shopify Discussion
1

https://barstool.engineering/product-image-slider-for-shopify-dawn-theme/

  • link to the tutorial and I’m not sure about the procedure.

  1. Paste the liquid mockup for the image slider into the theme.liquid file.

  2. Paste the CSS into the base.css file

  3. Paste the web component into where?

Are steps 1 and 2 correct? and what do I do with the web component code(step 3)???

I am using Dawn 2.0 theme which the tutorial is for.

Thank you, I appreciate any help! Will accept and like the solution once solved!!!

2 Likes
2

@jecbon
Follow the Doc properly you will achieve it.
Thank you.

3

Hi @jecbon

you need to add this code into the

theme/sections/main-product.liquid

open this file and find


find this line past code reference the above the code and check the your product page

```javascript

i hope now this solution was work for you

4

@Zworthkey “Follow the Doc properly you will achieve it.”>??? as per my question im not sure how to follow it properly.

1 Like
5

Hi, thank you for the reply.

What do I do with the following code? The Web Component for the slider?

class ProductGallery extends HTMLElement {
  constructor() {
    super();
    this.init()

    // Add resize observer to update container height
    const resizeObserver = new ResizeObserver(entries => this.update());
    resizeObserver.observe(this);

    // Bind event listeners
    this.navItems.forEach(item => item.addEventListener('click', this.onNavItemClick.bind(this)))
    this.prevButton.addEventListener('click', this.onButtonClick.bind(this));
    this.nextButton.addEventListener('click', this.onButtonClick.bind(this));
    // Listen for variant selection change to make current variant image active
    window.addEventListener('message', this.onVariantChange.bind(this))
  }

  init() {
    // Set up our DOM element variables
    this.imagesContainer = this.querySelector('.product-gallery__images');
    this.navItems = this.querySelectorAll('.product-gallery__nav-item');
    this.images = this.querySelectorAll('.product-gallery__image');
    this.prevButton = this.querySelector('button[name="previous"]');
    this.nextButton = this.querySelector('button[name="next"]');
    // If there is no active images set the first image to active
    if (this.findCurrentIndex() === -1) {
      this.setCurrentImage(this.images[0])
    }
  }

  onVariantChange(event) {
    if (!event.data || event.data.type !== 'variant_changed') return 
    const currentImage = Array.from(this.images).find(item => item.dataset.mediaId == event.data.variant.featured_media.id)
    if (currentImage) {
      this.setCurrentImage(currentImage)
    }
  }

  onNavItemClick(event) {
    const mediaId = event.target.closest('li').dataset.mediaId
    this.images.forEach(item => item.classList.remove('product-gallery__image--active'))
    this.setCurrentImage(Array.from(this.images).find(item => item.dataset.mediaId === mediaId))
  }

  update() {
    this.style.height = `${this.imagesContainer.offsetHeight}px`
    this.prevButton.removeAttribute('disabled')
    this.nextButton.removeAttribute('disabled')
    if (this.findCurrentIndex() === 0) this.prevButton.setAttribute('disabled', true)
    if (this.findCurrentIndex() === this.images.length - 1) this.nextButton.setAttribute('disabled', true)
  }

  setCurrentImage(elem) {
    this.images.forEach(item => item.classList.remove('product-gallery__image--active'))
    elem.classList.add('product-gallery__image--active')
    this.update()
  }

  findCurrentIndex() {
    return Array.from(this.images).findIndex(item => item.classList.contains('product-gallery__image--active'))
  }

  onButtonClick(event) {
    event.preventDefault();
    let index = this.findCurrentIndex()
    if (event.currentTarget.name === 'next') {
      index++
    } else {
      index--
    }
    this.setCurrentImage(this.images[index])
  }
}

customElements.define('product-gallery', ProductGallery);
6

@jecbon there three simple steps to add that solution.

if can not figure out from your end share the store with US we will help to fixed the.

1 Like
7

What are the 3 simple steps??? That is what i am asking? Thank you.

1 Like
8

@jecbon I already shared the solution.

https://community.shopify.com/c/shopify-discussions/how-to-implemnet-following-code-from-a-tutorial/m-p/1425400/highlight/true#M272032

9

@jecbon share the store access with my email id below our team will look into issue

10

@jecbon
Then hire A expert they will surly help you.
thank you.