Dawn Slide Component

Solved
FervEngineering
Excursionist
17 0 10

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 66 (66)
made4Uo
Navigator
265 19 91

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>
Don't break the bank just to solve the problem. Solve your problem quickly. Visit me at my website.
shadowsfall118
Explorer
10 0 4

@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
Navigator
265 19 91

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

Don't break the bank just to solve the problem. Solve your problem quickly. Visit me at my website.
shadowsfall118
Explorer
10 0 4

@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
Navigator
265 19 91

You are right! Thank you

Don't break the bank just to solve the problem. Solve your problem quickly. Visit me at my website.
StewartM
Tourist
4 0 1

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
Navigator
265 19 91

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

Don't break the bank just to solve the problem. Solve your problem quickly. Visit me at my website.
HamishDavisonIC
Explorer
52 6 48

@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
Navigator
265 19 91

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. 

Don't break the bank just to solve the problem. Solve your problem quickly. Visit me at my website.
made4Uo
Navigator
265 19 91

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

Don't break the bank just to solve the problem. Solve your problem quickly. Visit me at my website.