Slick Slider + Buy Button Embed?

epet
New Member
6 0 0

Hi! I've been messing around with embedding a collection on my website with the buy button. The process itself is easy, but the result looks UGLY. I'm talking rows and rows and rows of products stacked on top of each other. 

Instead, I decided to implement slick slider to keep everything to only one row. 

And it works! Well... kind of anyways. The products are added to one row as designed, and everything scrolls as designed, but the second I try to select a different variant for one of the products in the collection everything breaks. 

The reason is because once that update is called the slick classes that keep that particular product in line with the rest are removed and replaced. 

It goes from this before the variant update:

<div class="has-image shopify-buy__layout-vertical shopify-buy__product slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="0" style="width: 249px;">

To this

<div class="has-image shopify-buy__layout-vertical shopify-buy__product">

Which stinks! So I tried to see if I can modify the template to just include the slick classes to begin with. 

 Unfortunately, it doesn't seem like you can edit that line... it actually stops at the element just underneath it!

const productTemplate = {
  img: '{{#data.currentImage.srcLarge}}<div class="{{data.classes.product.imgWrapper}}" data-element="product.imgWrapper"> <--This is the div JUST below the one we need to modify. 

So, I'm stumped. I mean I can always try using jQuery to get the parent element of any list item/variant that was clicked by the user and try to add the classes manually. Or maybe I can just use the same listener and reslick the entire element, but both ideas seem like a patch job. 

Any ideas? I feel like this would be REALLY cool to have!

0 Likes
balancewebdev
New Member
1 0 0

This Would Be a Slick Function to Have.  I am experiencing the same problem with the seemingly endless rows of products. I can always create a specific collection for only 4 featured items at a time in a row but, would be nice to include a method of showcasing all products in a single row customers can scroll through.

0 Likes