How to use JQuery client extension?

Issue

• How to upgrade jQuery version using client extension?

Environment

• Liferay DXP 7.4

Resolution

• By using a client extension, user can add new features or customize existing ones without modifying the core code. 
• Using a JavaScript client extension and JS Import MapEntry client extension, the Jquery version can be changed to a newer version.
• These are the steps to follow:
  1. Firstly, download the Liferay workspace for the JavaScript client extension by running the following command:
  curl -o com.liferay.sample.workspace-latest.zip https://repository.liferay.com/nexus/service/local/artifact/maven/content?r=liferay-public-releases&g=com.liferay.workspace&a=com.liferay.sample.workspace&v=LATEST&p=zip
  2. After downloading, unzip the workspace:
  unzip com.liferay.sample.workspace-latest.zip
  3. Navigate to the Liferay JavaScript client extension directory ./client-extensions/liferay-sample-global-js-1 where you'll add a new version of jQuery.
  4. Add the following custom JavaScript to main.js with rquirmed JQuery version liberty.
  

  function () {
      if (typeof jQuery === 'undefined') {
          var script = document.createElement('script');
          script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
          script.type = 'text/javascript';
          script.onload = function () {
              console.log('jQuery loaded successfully.');
              jQuery(document).ready(function () {
                  console.log('jQuery is ready!');
              });
          };
          document.head.appendChild(script);
      } else {
          console.log('jQuery is already loaded.');
      }
  })();

  5. Deploy the client extension to Liferay using the following command: blade deploy
  6. To add the client extension to a site, navigate to: Sitebuilder > Pages > 3 dots on the right side > Configuration > JavaScript Client Extensions > Add the deployed client extension, then save.

Additional Information

• Using a JavaScript Client Extension