0

i have code

<?php
$filter = 'hompage_feature_2';
$product = $block->getProductCollectionHomepage($filter);
$items = [];
foreach($product as $value){
$items[] = $value;
}
$type = 'widget-new-grid';
?>
<div class="homepage_product_featured_2">
<ul class="product_featured_2">
    <?php for($i=0;$i<count($product);$i++) : ?>
    <li class="item">
        <div class="image">
            <?php
            $imageUrl = $this->helper('Magento\Catalog\Helper\Image')
                ->init($items[$i], 'product_base_image')
                ->constrainOnly(true)
                ->keepAspectRatio(true)
                ->keepTransparency(true)
                ->keepFrame(true)
                ->resize(150, 150)->getUrl();
            ?>
            <a href="<?= $block->getProductUrl($items[$i]); ?>"><?php echo '<img src="' . $imageUrl . '">';  ?></a>
        </div>
        <div class="information">
            <a href="<?= $block->getProductUrl($items[$i]); ?>"><p class="name"><?php echo $items[$i]['name']; ?></p></a>
            <p class="short-desc"><?= $block->shortenText($items[$i]['short_description']) ?></p>
            <?= $block->getProductPriceHtml($items[$i],$type); ?>
            <?= $block->getLayout()->createBlock('Magento\Catalog\Block\Product\ProductList\Item\Container')->setTemplate('Magento_Catalog::product/view/additional_info.phtml')->setProduct($items[$i])->toHtml(); ?>
        </div>
    </li>
    <?php endfor ?>
</ul>
</div>
<script type="text/javascript">
require([
    "jquery",
    'owl_carousel',
], function($) {
    $('.product_featured_2').owlCarousel({
        items:5,
        loop:true,
        margin: 10,
        autoplay: true,
        autoplayTimeout: 3000,
        autoplaySpeed: 300,
        slideTransition: 'linear',
        autoplayHoverPause:true,
        nav: true,
        dots: false,
        navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" 
aria-hidden="true"></i>'],
    });
});
</script>

i want to use owlCarousel js to creat slider product but it not working. Please help me!

1

Try this code

<?php
$filter = 'hompage_feature_2';
$product = $block->getProductCollectionHomepage($filter);
$items = [];
foreach($product as $value){
$items[] = $value;
}
$type = 'widget-new-grid';
?>
<div class="homepage_product_featured_2 owl-carousel owl-theme">
    <div class="owl-stage-outer">   
        <ul id="product_featured_2">
            <?php for($i=0;$i<count($product);$i++) : ?>
            <li class="item">
                <div class="image">
                    <?php
                    $imageUrl = $this->helper('Magento\Catalog\Helper\Image')
                        ->init($items[$i], 'product_base_image')
                        ->constrainOnly(true)
                        ->keepAspectRatio(true)
                        ->keepTransparency(true)
                        ->keepFrame(true)
                        ->resize(150, 150)->getUrl();
                    ?>
                    <a href="<?= $block->getProductUrl($items[$i]); ?>"><?php echo '<img src="' . $imageUrl . '">';  ?></a>
                </div>
                <div class="information">
                    <a href="<?= $block->getProductUrl($items[$i]); ?>"><p class="name"><?php echo $items[$i]['name']; ?></p></a>
                    <p class="short-desc"><?= $block->shortenText($items[$i]['short_description']) ?></p>
                    <?= $block->getProductPriceHtml($items[$i],$type); ?>
                    <?= $block->getLayout()->createBlock('Magento\Catalog\Block\Product\ProductList\Item\Container')->setTemplate('Magento_Catalog::product/view/additional_info.phtml')->setProduct($items[$i])->toHtml(); ?>
                </div>
            </li>
            <?php endfor ?>
        </ul>
    </div>
</div>
<script type="text/javascript">
require([
    "jquery",
    'owl_carousel',
], function($,owlCarousel) {
    $(document).ready(function() {
        $('#product_featured_2').owlCarousel({
            items:5,
            loop:true,
            margin: 10,
            autoplay: true,
            autoplayTimeout: 3000,
            autoplaySpeed: 300,
            slideTransition: 'linear',
            autoplayHoverPause:true,
            nav: true,
            dots: false,
            navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
        });
    });
});
</script>
0

Use owlcarousel instead of owl_carousel.

Your code should:


<script type="text/javascript">
require([
    "jquery",
    'owlcarousel',
], function($) {
    $('.product_featured_2').owlCarousel({
        items:5,
        loop:true,
        margin: 10,
        autoplay: true,
        autoplayTimeout: 3000,
        autoplaySpeed: 300,
        slideTransition: 'linear',
        autoplayHoverPause:true,
        nav: true,
        dots: false,
        navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" 
aria-hidden="true"></i>'],
    });
});
</script>

app/code/Vendor/Module/view/frontend/requirejs-config.js

var config = {
    "map": {
        "*": {
            owlcarousel: 'Vendor_Module/js/owl.carousel'
        }
     }
};
0

Here you are only passing in the jQuery dollar sign alias:

function($)

You need to also pass in the owlCarousel alias:

function($, owlCarousel)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.