Dawn Slide Component

Solved
FervEngineering
Excursionist
17 0 9

When reading the link below, it says Dawn will have a slider. Either I can't find it, or it hasn't been shipped in the last version. Does anyone have insight into this?

 

https://ux.shopify.com/next-generation-theme-design-5aae94f6d44c


Edit: I just found a slider example in a section named "featured-blog" which doesn't seem enabled. I don't know if it hasn't been completed yet or if we're supposed to figure out how to implement it on our own.

Replies 59 (59)
Menibig
Tourist
9 0 5

@made4Uo  Thanks for the fast reply.

I just re-did the step with global.js again, but it's still won't work...

made4Uo
Navigator
210 11 77

@Menibig  it's hard to figure which one you did wrong without seeing your code. Can you message me in my website, Made4uo.com with your code?

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
smj_90
Excursionist
21 1 3

@Kumar2573 

Hi there, i checked your code, it's working only for 1st product only. For the rest of the products, it's not working. also the first product pictures keep on changing rest all are static.

i guess you forgot to call 'product unique id' when making that slider, though this approach is amazing!

smj_90
Excursionist
21 1 3

@made4Uo I noticed one thing while working with my theme, your code works fine with the product slider on product page, but you know what the built-in slider component which comes with the dawn theme by default is not working on mobile/tablet. 

change your code line in the slider.

onButtonClick(event) {
event.preventDefault();
const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + this.sliderItems[0].clientWidth : this.slider.scrollLeft - this.sliderItems[0].clientWidth;
this.slider.scrollTo({
left: slideScrollPosition
});
}

to this

it will work then!

you can check on your own, I did it.

smj_90
Excursionist
21 1 3

@marcoswatanabe exactly what i was looking for! GREAT JOB!!

j1419
Excursionist
34 0 10

@Bluish The product image slider works great on desktop but my images are not showing while on the mobile viewer. My store's preview link. 

https://u6upmackdx52944s-41111158934.shopifypreview.com

made4Uo
Navigator
210 11 77

@smj_90 

Just FYI. The code is made to specify the use of the productSlider (the one I added). This is the code that I wrote for the onButtonClick function. 

 

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 do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
Bluish
Shopify Partner
646 92 115

Hi @j1419 

 

I found the problem, seems like there is conflicting css elements being called.

 

In the main-product.liquid, in the product slider code.

 

Delete class="flickity-desktop" in the image tag <img class="flickity-desktop"

 

That will solve the issue. I also updated the blog to have a thumbnail slider. So you should use the new code

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

j1419
Excursionist
34 0 10

@Bluish Thanks for that. The code is working great on mobile now. I like this original code without the thumbnails. Have you thought about making having both versions as separate blogs? Just a thought. Thanks again 

Bluish
Shopify Partner
646 92 115

Hi @j1419 

 

To get rid of thumbnail,

 

Find and delete below

{% if product.images.size > 1 %}
      <div class="carousel product__image-thumbnail">
        {%- for media in product.images -%}
        <div class="carousel-cell">
          <img
               data-flickity-lazyload-srcset="
                                              {{ media | img_url: '1440x' }} 1440w,
                                              {{ media | img_url: '1080x' }} 1080w,
                                              {{ media | img_url: '720x' }} 767w,
                                              {{ media | img_url: '480x' }} 480w"
               sizes="(min-width: 480px) 1440px, 1080px, 767px, 480x"
               data-flickity-lazyload-src="{{ media | img_url: 'master' }}"
               alt="{{ media.alt | escape }}"
               border="0"/>
        </div>
        {%- endfor -%}
        <!--- Coded by bluish.io --->
      </div>
      {% endif %}

 

then go to the script section and replace it to the below

<script>
  var elem = document.querySelector('.carousel.product__image-slider');
  var flkty = new Flickity( elem, {
    contain: true,
    imagesLoaded: true,
    lazyLoad: 1,
    wrapAround: true,
    {% if product.images.size < 2 %}
    prevNextButtons: false,
    {% endif %}
    adaptiveHeight: true
  });
</script>

 

That should bring back the dots and you should no longer have the thumbnail.

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile