Dawn Slide Component

[FervEngineering]

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.

[sapiens_sapiens]

Great, thanks. My goal is to enable desktop slider too, like in featured collection. Could you tell me how to do it?

[shadowsfall118]

@sapiens_sapiens If you follow my instructions this works on Dawn 9.0 theme. I tested as you can see below:

Otherwise you may have some CSS overriding it. If you install a fresh dawn theme and test it should work fine.

[sapiens_sapiens]

Thank u

[StewartM]

Thanks @shadowsfall118 for also looking into it. 

I posted my code on here but it got flagged as potential spam so that was useful - i dont know if you were able to save it before it was removed - so @made4Uo i tried to replace the code you posted with what i had but it is the same outcome. I also tried to do the walkthrough once again just in case i missed something - but still got the same result, no large image, some thumbnails and no slider activity. I have tried it over 10 times now with the same outcome sadly so i have to come to the conclusion there is something wrong 😞 

Hopefully this dropbox link might work...

https://www.dropbox.com/sh/3rxwwufxg5sn8rl/AAAlY82qoOXDtsGJHUY7ZFSMa?dl=0 

Thanks. 

[made4Uo]

Hi @StewartM  I fix it. Please check my website

[made4Uo]

I was able reproduce the problem. With my intention on mostly keeping the original Dawn code cause the elements to be hidden. Fixed code available in the website. Let me know if you still have issues

I just deleted the code following code in the large image

{%- assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' -%}
{%- if product.selected_or_first_available_variant.featured_media != null -%}
{%- assign media = product.selected_or_first_available_variant.featured_media -%}

[made4Uo]

@shadowsfall118  Thanks for posting the file. I was able to find the problem

[made4Uo]

Thank you for the like. Yes. That is the other way

[shadowsfall118]

Thanks @made4Uo for the slider!!!! I can confirm it's working.

Another addition to @made4Uo code is to hide the slider buttons if there is less than 4 images.

global.js inside the INT() function right after this.update(); add the following: 

const thumbCount = this.pageTotal.textContent;
if (thumbCount <= 4) {
document.getElementsByClassName('slider-buttons')[0].style.visibility = 'hidden';
} else {
document.getElementsByClassName('slider-buttons')[0].style.visibility = 'visible';
}
}

[made4Uo]

Thank you @shadowsfall118  never think of hiding the slider 😁

[made4Uo]

Hi @shadowsfall118 . You do not need to add javascript code. Just change the product.media.size < 5 in the slider-buttons so the "small-hide" get activated. See the bold code. I updated my code in the website too. Thank you again

<section class="page-width">

        <div class="product grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">

          <div class="grid__item product__media-wrapper">

            <div class="slider-container" >

            <a class="skip-to-content-link button visually-hidden" href="#ProductInfo-{{ section.id }}">

            {{ "accessibility.skip_to_product_info" | t }}

            </a>

            <ul class="large-image" id="large-image">

                {%- for media in product.media -%}

                <li class="large-image-item product__media-item grid__item slider__slide

                    {% if media.media_type != 'image' %}

                    product__media-item--full{% endif %}"

                    data-media-id="{{ section.id }}-{{ media.id }}">

                    {% render 'product-thumbnail', media: media, position: forloop.index, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true %}

                    </li>

                {%- endfor -%}

                </ul>

      <slider-component >

                <ul class="product-slider-box slider" role="list">

                    {%- for media in product.media -%}

                    <li class="product-slider slider__slide">

                        <img class="slide-image"

                        onclick="newLargeImage(this)"

                        data-thumb-id="{{ section.id }}-{{ media.id }}"

                        src="{{ media.preview_image | img_url: 'large', scale: 4 }}"

                        alt="{{ thumbnailAlt }}">

                    </li>

                {% endfor %}

                </ul>

          <div class="slider-buttons no-js-hidden{% if product.media.size < 2 %}

            small-hide{% endif %}">

            <button type="button" class="slider-button slider-button--prev bigger-slider" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>

              <div class="slider-counter caption">

              <span class="slider-counter--current">1</span>

              <span aria-hidden="true"> / </span>

              <span class="visually-hidden">{{ 'accessibility.of' | t }}</span>

              <span class="slider-counter--total">{% if section.settings.hide_variants %}{{ product.media.size | minus: variant_images.size | plus: 1 }}{% else %}{{ product.media.size }}{% endif %}</span>

              </div>

            <button type="button" class="slider-button slider-button--next bigger-slider" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>

          </div>

          </slider-component>

      </div>

[shadowsfall118]

@made4Uo thanks for pointing this out. Although the "small-hide" css class does not seem to do anything on my vanilla (plain) shop. Maybe replace "small-hide" with "visually-hidden"?

OLD:

<div class="slider-buttons {% if product.media.size < 5 %}
small-hide{% endif %}">

NEW:

<div class="slider-buttons {% if product.media.size < 5 %}
visually-hidden{% endif %}">

[made4Uo]

@shadowsfall118 . If you go to the asset folder and open the base.css folder you see the visually hidden there (see below). This is not really what we want. I was able to find the small-hide and it only works in small screen. We can use 'hidden' instead. I updated my code in the website again. Code should look like this

<div class="slider-buttons {% if product.media.size < 5 %}hidden{% endif %}">

.visually-hidden {
position: absolute !important;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
word-wrap: normal !important;
}

[shadowsfall118]

@made4Uo I think this line needs to be 4 not 3.

this.totalPages = sliderItemsToShow.length - this.slidesPerPage + 4;

I had a product with 5 images and the last was not showing / could not click the right arrow to reveal it.

[made4Uo]

You are right! Thank you

[StewartM]

Thanks both of you for looking into to this so quickly and investigating, its much appreciated. 

I know this will help an awful lot of people who are looking to get the same functionality with the theme 🙂 

Thanks again @made4Uo and @shadowsfall118 

[made4Uo]

No problem at all. Glad to help. Thank you @shadowsfall118 for helping me modify the code

[HamishDavisonIC]

@made4Uo Could I ask your permission to make a YouTube video using this method? I have people literally begging me to find a solution and I've been looking for a week and finally got it working thanks to your guide

[made4Uo]

I did create a YouTube video in my website but due to some code changes, you might not able to follow. I will be creating a YouTube video in a few. Stay tuned. 

[made4Uo]

Hi, 

For people that are looking to convert the Dawn product page with slider, please see video. Link with code in the video description. NO APP needed

[JohnFromJotting]

 

For those who want a more intuitive slider, with actual slide functionality, I've created a blog on how to add flickity onto the dawn theme, found here https://www.bluish.io/shopify/how-to-create-a-product-image-slider-on-dawn-theme

You can test it out here - https://shopify.bluish.io/products/example

It's the bare minimum, so I can take any suggestions on what functionality you'd like, and I'll keep updating it.

[King-Kang]

Slider works really well!

Nice discovery! Some fresh air 🙂
Congratulations with your blog.
I will definetely follow.
Now it's time to learn a bit more with your tutorials!

Thank you

[j1419]

@JohnFromJotting 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

[LIxiao]

Mouse can't slide

[Menibig]

I followed the instructions, and the slider itself works great.

But I have a problem with the slider-counter. Since I edited my Dawn theme code and changed it to Right-to-Left, I believe it's making it a little bit mixed up.

For some reason it's not showing me all numbers, but only the total-media, while the current image number is different everytime.

I added a short video to demonstrate.

Help would be appreciated.

[made4Uo]

Hi, 

Please update your codes. Transform you Dawn Theme in Debut theme product page for free.

Enjoy this features below:

Product slider working.
Zoom feature working.
Variant buttons connected to the large image and the product slider.
Resize your thumbnail images.
No more massive images in the product page.

Check the code here for free. No app needed. Check the video for preview

[akatev]

@made4Uo 

Hi, would you be able to help with creating a second product template for pre-order?  I had it with the old theme but unable to recreate one for the new Dawn theme.  It's pretty much another template to change the button from add to cart to Pre-order.

Also, is there a way to have a pop up alert when customer adding both pre-order and in tock items in the same cart?

Thanks.

[made4Uo]

@akatev 

Can you tell me more about it?

[akatev]

@made4Uo 

-I'm looking to have a separate product template for my pre-orders.  So instead of the Add to Cart button, we will have a Pre-order button instead.  

-The second part is for a possible pop-up alert for the shopping cart when a pre-order item is added to the cart that contain in stock item.  Typically, with mix items (in stock & Pre-order), we will have to wait until the pre-order to arrive and ship the whole order at once.  This pop up alert is to remind the buyer to not expecting the in stock items to ship right away when they are being carted and purchased along with pre-order items.  

[Menibig]

@made4Uo  Thanks! I did it and it works just fine.

The only problem is when picking a variant it is not changing the large image. What did I do wrong and how should I fix it?

And one more thing, how can I use the same slider (without numbers/pagination) with collections on the home page?

[made4Uo]

@Menibig 

You might have miss the step for the variant image. It is in global.js. I have a different slider for home page here

[Menibig]

@made4Uo  Thanks for the fast reply.

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

[made4Uo]

@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?

[smj_90]

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

[made4Uo]

@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)
});
}
}