Magento 2 – Fix ReferenceError: jQuery is Not Defined

jquerymagento2

I am trying to add custom jquery code into my module but it is not working.

app/code/Custom/Module/view/frontend/web/js/my.js

jQuery.noConflict();
jQuery(document).ready(function(){
    alert('ok');
});

app/code/Custom/Module/view/frontend/layout/default.xml

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Custom_Module::js/my.js"/>
    </head> 
</page>

In console, I am getting the error message

ReferenceError: jQuery is not defined

How to fix this issue.

Best Answer

Magento2 use requirejs concept (lazy load) so load jquery first then write your jquery code.

e.g)

require(['jquery'],function($){

    $(document).ready(function(){

       alert('ok');

    });

});

Related Solutions

Magento 2 – How to Add Custom JS in Head

if want to add js file then try this

 <head>
        <link src="Xanka_Slider::js/slider/jquery.themepunch.plugins.min.js"/>
    </head>

Here instead of use using

Magento 2 – How to Rewrite TierPrice Block

Suppose package:Learning and module: Custom

Module.xml looks like

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Learning_Custom" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

And then create a layout xml following path -> app/code/Learning/Custom/view/frontend/layout/catalog_product_prices.xml

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/layout_generic.xsd">
    <referenceBlock name="render.product.prices">
        <arguments>
            <argument name="default" xsi:type="array">
                <item name="prices" xsi:type="array">
                    <item name="tier_price" xsi:type="array">
                        <item name="render_template" xsi:type="string">Learning_Custom::product/price/tier_prices.phtml
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</layout>

Create template inside your module or copy base template file inside your module path should be -> app/code/Learning/Custom/view/frontend/templates/product/price/tier_prices.phtml

Best Answer

Related Solutions

Magento 2 – How to Add Custom JS in Head

Magento 2 – How to Rewrite TierPrice Block

Related Topic