Dawn Slide Component

Solved
shadowsfall118
Excursionist
37 0 16

@made4Uo on your latest guide for step 4 is <div class="slider-container" > block missing? Just trying to keep on top of what has changed in your latest updates.

Also I noticed you are pulling pretty large images for the thumbnails.

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

 

Maybe change to:

src="{{ media.preview_image | img_url: 'medium', scale: 1 }}"

 

Ref - Product Slider Guide: https://made4uo.com/blogs/journey-to-awesome-shopify-website/product-slider-for-dawn-theme

0 Likes
made4Uo
Trailblazer
269 10 64

Hi @shadowsfall118 ,

Thanks for the suggestion. Actually, we do not have to scale it, since we are pulling large images already. I am sorry about the missing code. I updated the code now at https://made4uo.com/blogs/journey-to-awesome-shopify-website/product-slider-for-dawn-theme. Thank you for letting me know with the issues

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
shadowsfall118
Excursionist
37 0 16

@made4Uo I followed your latest guide with a brand new dawn theme and the images don't change. I'm getting the following console error Uncaught TypeError: Cannot read properties of null (reading 'parentElement'). Please debug.

Please take a look at:

let clickedImage = x.dataset.mediaId;

 

when I change to below used in your previous versions it works

let clickedImage = x.dataset.thumbId;

 

Regarding the image size thanks for removing scale: 4 at the end. This fixed the issue I was talking about. 

0 Likes
Charles121
Excursionist
24 0 3

Thank you, @made4Uo. It's a great job! I finally made it work after going over all your versions. I made a little change to make clicking thumbnails underneath to update the top large featured image work: replacing the "data-thumb-id"  with "data-media-id".

I think this is by far the best working solution for the product page slider. I have a little suggestion: it would be better if you could add a simple desktop click/mouse over effect and mobile touch effect on the thumbnail image. Thanks.

 

 

0 Likes
akatev
New Member
7 0 0

@made4Uo That worked.  Thank you very much!

0 Likes
made4Uo
Trailblazer
269 10 64

@Charles121 Hi, sorry about the dataset confusion. I was updating with several versions and decide to change the thumbnail id to mediaID since it does make a different. Naming convension should match the HTML dataset name to the javascript code.

 

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
made4Uo
Trailblazer
269 10 64

@akatev Np. Be noted that I have been updating the code like everyday (",)

@Charles121 I will look on the hover effect in a few

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
sakku_9090
Excursionist
16 0 3

@made4Uo do you have any idea where to change this line from?

label": "t:sections.header.settings.logo_position.options__1.label"

This is in header.liquid file in the schema section. It's translation i believe but I want to add other translations too!

Any idea where the texts for it comes from?

0 Likes
made4Uo
Trailblazer
269 10 64

@sakku_9090 Hi. I believe your translations are from settings. Check this website https://help.shopify.com/en/manual/online-store/themes/language/translate-theme

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
akatev
New Member
7 0 0

@made4Uo Would you have time to look at the possibility of adding a slideshow section for the theme?  I have heard this may hinder the performance of Dawn 2.0 a bit.

0 Likes