Magento Question posted in
The official documentation can be found here.

jQuery DOM element not defined AFTER page load? (Magento 2)

I am working in Magento 2 with jQuery and I have the following code:

require(["jquery"], function($) {
    var productCarousel = $('.product-carousel-slideshow');
    console.log(productCarousel);
}

The element logs to the console as expected, however once the page is loaded I can’t do anything with the element, and if I type productCarousel in to the console it is not defined, what could cause this?

Tags:

2

Answers


  1. 0

    The productCarousel is defined locally to the require callback, just move the definition globally and you will be able to access it after the load.

    Login or Signup to reply.
  2. 0

    If you are overriding magento module then you can simple change in the file Path app/design/frontend/vendor name/theme name/Module name/requirejs-config.js. If You Have created custom module then app/code/Vendor Name/custom Module/view/frontend/requirejs-config.js

    var config = {
   paths: {            
     'Owlcarousel' : 'VendorName_ModuleName/js/owl.carousel.min'     
  },   
  shim: {
    'Owlcarousel': {
        deps: ['jquery']
     }
  }
}

    Script for phtml:

     <script>
   require([
      'jquery',
      'Owlcarousel'
     ], function ($, Owlcarousel) {
       $('#.product-carousel-slideshow-<?php echo $productsliderId;?>').owlCarousel(<?php echo ($block->getAllOptions())?>);
   });

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search