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

1 Answer 1

Reset to default
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 Commented Oct 6, 2020 at 5:05
  • as per your code you have written daily in requirejs which will throw error.. remove that and try Commented Oct 6, 2020 at 6:25
  • tried that too then i got this error Uncaught TypeError: jQuery(...).owlCarousel is not a function Commented Oct 6, 2020 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. Commented Oct 6, 2020 at 6:51

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.