Issue with slick slider
Hi, so I'm making an e-commerce website (swimwear) using 100% Livewire.
I'm using a theme that uses slick slider for displaying product images
This is my first experience with livewire and for the most part, it's all working good.
But, I'm having a specific issue now.
Setup :
I have SKUs based on the color and sizes and have various relationships linking the Product, ProductSKUs,ProductImages and ProductPrice.
So basically a Product hasMultiple SKUs and hasOne Price. Every SKU hasMany SKUImages, hasMany ProductImages and hasOne Price
What I'm trying to do :
On clicking any color option, load that SKU and check if there are SKUImages, if yes then display those, else display the ProductImages(mostly the existing ones).
Current State :
- I know that you have to re-initialize JS plugins on every round trip, and I have done that, by using the same function that has been used in the theme's JS files.
- I know for sure that the new SKU is getting loaded, as the SKU
stringon the page changes. - The images do change.
The problem : When the images change, the plugin is loaded, but it is "shrunken", but when I click back to the original color, the old photos are loaded and displayed properly and after that when I click the other color again, it is loaded correctly. I know that sounds confusing, so I made a video.
Also, I get this JS error everytime i choose a color, but the display issue happens only the first time.
plugins.js:374 Uncaught (in promise) TypeError: Cannot read property 'add' of null
at Object.e.initADA (plugins.js:374)
at Object.e.init (plugins.js:374)
at new <anonymous> (plugins.js:374)
at w.fn.init.i.fn.slick (plugins.js:374)
at HTMLDivElement.<anonymous> (1:1626)
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at elementCarousel (1:1489)
at 1:1690
at MessageBus.js:17
The problem is... I am not sure if it's a Livewire issue, a JS issue or a CSS issue. Hence, I'm not posting all my code, in order to keep this clean. Let me know if you need to see something specific.
Blade
<div class="product-gallery__thumb">
<div class="product-gallery__thumb--image">
<div class="airi-element-carousel nav-slider slick-vertical" data-slick-options='{
"slidesToShow": 3,
"slidesToScroll": 1,
"vertical": true,
"swipe": true,
"verticalSwiping": true,
"infinite": true,
"focusOnSelect": true,
"asNavFor": ".main-slider",
"arrows": true,
"prevArrow": {"buttonClass": "slick-btn slick-prev", "iconClass": "fa fa-angle-up" },
"nextArrow": {"buttonClass": "slick-btn slick-next", "iconClass": "fa fa-angle-down" }
}' data-slick-responsive='[
{
"breakpoint":992,
"settings": {
"slidesToShow": 2,
"vertical": false,
"verticalSwiping": false
}
},
{
"breakpoint":575,
"settings": {
"slidesToShow": 1,
"vertical": false,
"verticalSwiping": false
}
},
{
"breakpoint":480,
"settings": {
"slidesToShow": 1,
"vertical": false,
"verticalSwiping": false
}
}
]'>
<figure class="product-gallery__thumb--single">
<img src="{{ $primaryImage->image }}" alt="Product"
class="product-page-img-sidebar tw-object-cover" style="max-height:190px;">
</figure>
<figure class="product-gallery__thumb--single">
<img src="{{ $secondaryImage->image }}" alt="Product"
class="product-page-img-sidebar tw-object-cover" style="max-height:190px;">
</figure>
@foreach ($otherImages as $image)
<figure class="product-gallery__thumb--single">
<img src="{{ $image->image }}" alt="Product"
class="product-page-img-sidebar tw-object-cover" style="max-height:190px;">
</figure>
@endforeach
</div>
</div>
</div>
<div class="product-gallery__large-image">
<div class="gallery-with-thumbs">
<div class="product-gallery__wrapper">
<div class="airi-element-carousel main-slider product-gallery__full-image image-popup"
data-slick-options='{
"slidesToShow": 1,
"slidesToScroll": 1,
"infinite": true,
"arrows": false,
"asNavFor": ".nav-slider"
}'>
<figure class="product-gallery__image zoom">
<img src="{{ $primaryImage->image }}" alt="Product" class="product-page-img-main">
</figure>
<figure class="product-gallery__image zoom">
<img src="{{ $secondaryImage->image }}" alt="Product" class="product-page-img-main">
</figure>
@foreach ($otherImages as $image)
<figure class="product-gallery__image zoom">
<img src="{{ $image->image }}" alt="Product" class="product-page-img-main">
</figure>
@endforeach
</div>
<div class="product-gallery__actions">
<button class="action-btn btn-zoom-popup"><i class="dl-icon-zoom-in"></i></button>
{{-- <a href="https://www.youtube.com/watch?v=Rp19QD2XIGM" class="action-btn video-popup"><i
class="dl-icon-format-video"></i></a> --}}
</div>
</div>
</div>
</div>
Method To Load new SKU and Set Images
private function setImages()
{
if ($this->selectedSKU->skuImages->count() > 0)
{
$this->otherImages = $this->selectedSKU->skuImages;
}
else
{
$this->otherImages = $this->selectedSKU->productImages;
}
foreach ($this->otherImages as $index => $image)
{
if ($image["type"] != "other")
{
if ($image["type"] == "primary")
{
$this->primaryImage = $image;
}
elseif ($image["type"] == "secondary")
{
$this->secondaryImage = $image;
}
unset($this->otherImages[$index]);
}
}
}
public function updateColor($id)
{
if ($this->selectedSKU->id != $id)
{
$this->selectedSKU = ProductSKU::with("price")->find($id);
$this->setImages();
}
}
BTW, I can avoid this by setting a min height on the images themselves, but that makes them non-responsive, which is undesirable and leads to squeezing of the images.
Please help!!
Please or to participate in this conversation.