Magento 2.4.2 : Owl Carousel in Related Products not working

Question

I am facing a strange issue with setup owl carousel slider to related products on PDP. I've added below code to initialise owl carousel at the end of items.phtml file in my custom theme.

app/design/frontend/My_Vendor/mytheme/Magento_Catalog/templates/product/list/items.phtml

<script>
 require([ 'jquery', 'owl.carousel'], function($){
 $(document).ready(function($) {
 $('#related').owlCarousel({
 loop:false, 
 nav: true,
 margin:28,
 dots: true, 
 responsive:{
 0:{
 items:3,
 margin:15
 },
 1025:{
 items:4,
 margin:28 
 }
 }
 });
 });
 });
</script>

It initialize the owl carousel on the element but element nesting is in wrong order as shown in this image

As you can see all the images are nested under one owl-item div, which is breaking the layout and product block is displaying one after one as like this

I've debugged code in items.phtml and when I remove

data-shuffle-group="<?= $block->escapeHtmlAttr($_item->getPriority()) ?>"

from the code on line no 204 it is displaying related product slider without any issue.

So I am not sure about what is the purpose of this code and why it is causing the issue.

Any help will be appreciated. Thanks in advance.

• Mohit Patel: Please help me :- magento.stackexchange.com/q/336115/85907

Answer 1

in vendor/magento/module-catalog/view/frontend/web/js/related-products.js, there's a function _shuffle rearranging the products based on the data-shuffle-group attribute. If this function is called after the owl carousel initialized, it will append the product div one after another, so all product item divs are in one div. I think the best solution is to initialize owl carousel after related-products.js