0

Hi i have custom product slider which is not working below is my code

<?php  
$dailydeal_products = $block->getProductCollection();
 $_helper = $this->helper('Magento\Catalog\Helper\Output');
       $imageBlock = $block->getLayout()->createBlock('Magento\Catalog\Block\Product\Image');
?>

<div id="daily-products" class="owl-carousel owl-theme daily-products">
<?php

    foreach($dailydeal_products as $product)
    {
            $product_data = $block->getProductById($product->getId());
            $product_url = $product_data->getProductUrl();
            $imageUrl = $this->helper('Magento\Catalog\Helper\Image')
                ->init($product_data, 'product_page_image_large')
                ->constrainOnly(FALSE)
                ->keepAspectRatio(TRUE)
                ->keepFrame(TRUE)
                ->resize(256, 329)
                ->getUrl();
               
        
?>
        <div class="daily-deal-items" class="owl-carousel owl-theme daily-deal-products" id="daily-deal-item">
            <a href='<?php echo $product_url ?>' class='daily-deal-img'>
                <img src="<?php echo $imageUrl ?>" alt="<?php echo $product_data->getName() ?>" />
            </a>   

            <a href='<?php echo $product_url ?>' class='daily-deal-name'>
                    <?php echo $product_data->getName() ?>
            </a>

           <div class="daily-deal-detail">
                <div class="daily-deal-price">
                    <?php  echo $block->getProductPrice($product_data);?>
                </div>

                <div class="daily-deal-action">
                    <div class="daily-deal-addtocart">
                            <?php if ($product_data->getTypeInstance()->hasRequiredOptions($product_data)): ?>
                                <button class="action tocart primary" data-mage-init='{"redirectUrl":{"url":"<?php /* @escapeNotVerified */ echo $block->getAddToCartUrl($product_data) ?>"}}'
                                        type="button" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>">
                                    <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
                                </button>
                            <?php else: ?>
                            <?php
                                $postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
                                $postData = $postDataHelper->getPostData($block->getAddToCartUrl($product_data), ['product' => $product_data->getEntityId()]);

                            ?>
                                <button class="action tocart primary" data-post='<?php /* @escapeNotVerified */ echo $postData; ?>' type="button" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>">
                                    <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
                                </button>
                            <?php endif; ?>
                        </div> 
                    </div> 
            </div>
        </div>      
<?php } ?>        
        
    </div>
</div>
                            </div>

<script>
    require([
        'jquery',
        'daily'
        ], function () {
            'use strict';
            jQuery("#daily-products").owlCarousel({
                autoPlay: 3000, //3000 Set AutoPlay to 3 seconds
                margin:10,
                items : 4,
                itemsDesktop : [1199,4],
                itemsDesktopSmall : [979,3],
                itemsTablet : [768,2],
                itemsMobile : [479,1],
                navigation : true,
                pagination : false
          });
    });
</script>

error in console log

require.js:1895 GET http://127.0.0.1:96/m2dev/pub/static/version1601956943/frontend/Magento/luma/en_US/daily.js net::ERR_ABORTED 404 (Not Found)
req.load @ require.js:1895
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
window.require @ mixins.js:245
(anonymous) @ (index):1047
require.js:166 Uncaught Error: Script error for: daily
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:166)
    at HTMLScriptElement.onScriptError (require.js:1681)
makeError @ require.js:166
onScriptError @ require.js:1681
error (async)
req.load @ require.js:1883
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
window.require @ mixins.js:245
(anonymous) @ (index):1047

**Unable to resolve the source file for 'frontend/Magento/luma/en_US/daily-deal-item.js'

#1 Magento\Framework\App\StaticResource->launch() called at [vendor\magento\framework\App\Bootstrap.php:261]
#2 Magento\Framework\App\Bootstrap->run(&Magento\Framework\App\StaticResource#000000006d6f5c42000000003da72a7f#) called at [pub\static.php:13]
**
Improve this question
0
0

Add owl.carousel.min in your theme web/js/owlcarousel/ and add below requirejs in app/design/frontend/your/theme/theme_name/requirejs-config.js

requirejs-config.js

var config = {
  map: {
        "*": {
            "owlslider" : "js/owlcarousel/owl.carousel.min"
        }
    },
    paths:  {
        "owlslider" : "js/owlcarousel/owl.carousel.min",
    }
};

Deploy your static content properly.

now use RequireJs function like below in your phtml.

<script>
    require([
        'jquery',
        'owlslider'
        ], function ($) {
            'use strict';
            $("#daily-products").owlCarousel({
                autoPlay: 3000, //3000 Set AutoPlay to 3 seconds
                margin:10,
                items : 4,
                itemsDesktop : [1199,4],
                itemsDesktopSmall : [979,3],
                itemsTablet : [768,2],
                itemsMobile : [479,1],
                navigation : true,
                pagination : false
          });
    });
</script>
Improve this answer
4
  • i have already done the steps you mentioned i think the issue is with this script only – Pramod Oct 6 '20 at 5:05
  • as per your code you have written daily in requirejs which will throw error.. remove that and try – Rizwan Khan Oct 6 '20 at 6:25
  • tried that too then i got this error Uncaught TypeError: jQuery(...).owlCarousel is not a function – Pramod Oct 6 '20 at 6:36
  • yes, because you are Jquery direct instead use $ as per my answer and also make sure owl carousel js is loaded properly via requirejs... which I have stated in my above answer. – Rizwan Khan Oct 6 '20 at 6:51

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.