0

I am not very familiar with JQuery but am attempting to run this piece of code in html that requires JQuery.

<div>
  <h4><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapse">Lorem Ipsum</a></h4>
</div>
<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne">
  <div class="panel-body">
    <a href="#">Lorem ipsum</a><br>
   <a href="#">Lorem ipsum</a><br>
   <a href="#">Lorem ipsum</a>
  </div>
</div>

This code requires JQuery 3.3.1 which conflicts with the built-in JQuery that Magento 2 has. If I include Jquery 3.3.1 in the head then my product page stops working. Any ideas?

  • Not sure that I can add html code in require(['jquery', 'jquery/ui'], function($){ //your js code here }); – Josiah Jun 4 at 20:01
0

You trying to implement a jquery accordian

https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/widgets/widget_accordion.html

<div id="element">
    <div data-role="collapsible">
        <div data-role="trigger">
            <span>Title 1</span>
        </div>
    </div>
    <div data-role="content">Content 1</div>

    <div data-role="collapsible">
        <div data-role="trigger">
            <span>Title 2</span>
        </div>
    </div>
    <div data-role="content">Content 2</div>

    <div data-role="collapsible">
        <div data-role="trigger">
            <span>Title 3</span>
        </div>
    </div>
    <div data-role="content">Content 3</div>
</div>

<script>
    require([
        'jquery',
        'accordion'], function ($) {
        $("#element").accordion();
    });
</script>
  • Do I need to link to Magento 3.3.1 at all in my head? – Josiah Jun 4 at 20:22
  • No. Supplied jquery in magento should be enough. – Dominic Xigen Jun 4 at 20:55
  • I added the script to the head and changed the "element" to fit my id, but its still throwing an error that says Javascript requires JQuery at bootstrap.min.js:6 – Josiah Jun 4 at 21:06
0

to use jQuery 3 you would need to remove the version of jQuery that Magento loads then load your own, as you have found out this breaks some core functionality so you would then need to resolve those issues.

So you would be better off using the core plugins or using a different jQuery plugin.

You can use the jQuery migrate plugin which should workaround those errors but it is only intended as a temporary measure, although I'm aware of some sites that have used jQuery migrate for years.

Upgrading libraries such as jQuery can be a lot of work, when breaking changes have been introduced. jQuery Migrate makes this easier, by restoring the APIs that were removed, and additionally shows warnings in the browser console (development version of jQuery Migrate only) when removed and/or deprecated APIs are used.

That way you can spot and fix what otherwise would have been errors, until you no longer need jQuery Migrate and can remove it.

NOTE: To upgrade to jQuery 3.0, you first need version 1.12.x or 2.2.x. If you're using an older version, first upgrade to one of these versions using jQuery Migrate 1.x, to resolve any compatibility issues. For more information about the changes made in jQuery 3.0, see the upgrade guide and blog post.

Not the answer you're looking for? Browse other questions tagged or ask your own question.