2

We use Magento2.3.1, in product list page showing error like

Uncaught TypeError: $(...).lazyload is not a function.

While using Porto theme of Magento 2.x.

  • @PrathapGunasekaran, This function already working in Magento2.3.0 but 2.3.1 not working. – Soundararajan m Apr 1 at 12:05
  • Not sure about it, but with above information I could only sense there much be dependency issue – Prathap Gunasekaran Apr 1 at 12:38
  • can you share the code where you called $(SOMETHING).lazyload – Shoaib Munir Apr 11 at 5:37
  • Once include lazyload function then automaticallyy its working. define([ 'jquery', 'Mageplaza_AjaxLayer/js/action/submit-filter', 'Magento_Catalog/js/price-utils', 'jquery/ui', 'accordion', 'js/jquery.lazyload', 'productListToolbarForm' ], function ($, submitFilterAction, ultil) { "use strict"; }); – Soundararajan m Apr 11 at 15:00
2

To complete this Answer. Soundararajan m is correct but he doesn't specify which files to update. They're located at

app/design/frontend/Smartwave/porto/Mageplaza_AjaxLayer/web/js/view/layer.js app/design/frontend/Smartwave/porto/Mageplaza_LayeredNavigation/web/js/view/layer.js

Update the top of the layer.js file to this


define([
    'jquery',
    'Mageplaza_AjaxLayer/js/action/submit-filter',
    'Magento_Catalog/js/price-utils',
    'jquery/ui',
    'accordion',
    'js/jquery.lazyload',
    'productListToolbarForm'
], function ($, submitFilterAction, ultil) {
...

This will solve this error.

1

I got solution for this question after refer my code.

Once include lazyload function then automaticallyy its working. File Location:

app/design/frontend/Smartwave/porto/Mageplaza_AjaxLayer/web/js/view/layer.js 
app/design/frontend/Smartwave/porto/Mageplaza_LayeredNavigation/web/js/view/layer.js
define([ 'jquery', 'Mageplaza_AjaxLayer/js/action/submit-filter', 'Magento_Catalog/js/price-utils', 'jquery/ui', 'accordion', 'js/jquery.lazyload', 'productListToolbarForm' ], function ($, submitFilterAction, ultil) { "use strict"; });
  • Hi, I am facing the same issue using weltpixel theme lazyload extension. Can anyone tell where to include the above line to resolve the issue. – chanchal Jun 10 at 9:52
  • @chanchal Sorry no one answered this for you. There's two files where this is missing. app/design/frontend/Smartwave/porto/Mageplaza_AjaxLayer/web/js/view/layer.js app/design/frontend/Smartwave/porto/Mageplaza_LayeredNavigation/web/js/view/layer.js – Reginald Goolsby Jul 11 at 20:21
0

In you extension add below js:

view/frontend/web/js/jquery.lazyload.js

view/frontend/web/js/lazyload.js

now configure requirejs:

view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            LazyLoad: 'Vendor_Module/js/lazyload'
        }
    }
};

Add below code in phtml file

<script type="text/x-magento-init">
{
    "*": {
        "LazyLoad": {}
    }
}
</script>

You can try this extension as well: https://www.weltpixel.com/magento-2-lazy-load-product-extension.html

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.