Question 37049 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Update jQuery version in Shopware 6

A project I’m working needs a third party javascript snippet which has a dependency on the ‘full’ jQuery framework. Shopware (/bootstrap 4) currently ships with jQuery out of the box, but is using the Slim (and not full) version of it.

Is there a way to upgrade/change the used jQuery version?

Tags:

4

Answers


  1. 0

    In your plugin create a webpack.config.js the directory structure should look something like this:

    ├── MyPlugin
│   └── src
│       └── Resources
│           └── app
│               └── storefront
│                   ├── build
│                   │   └── webpack.config.js
│                   └── src
│                       └── main.js

    The content of webpack.config.js:

    const { join, resolve } = require('path');

module.exports = () => {
    return {
        resolve: {
           alias: {
               '@jqueryNew': resolve(
                   join(__dirname, '..', 'node_modules', 'jquery'),
               ),
           },
        },
    };
};

    Then within the storefront directory install the latest version of jquery or whatever specific version you need:

    npm install jquery

    In your main.js you can then import the newer jquery package from the resolved alias and set it globally:

    import $ from '@jqueryNew';

window.$ = window.jQuery = $;
global.$ = global.jQuery = $;
    Login or Signup to reply.
  2. 0

    jQuery will be removed with the next major. It’s not future-proof to still use it. You should look for alternatives, it’s not so complicated with default javascript

    Login or Signup to reply.
  3. 0

    It is possible to actually replace the slim jQuery with the full version.

    In MyPlugin/src/Resources/app/storefront/build/webpack.config.js put the following:

    const path = require('path');
const projectRootPath = process.env.PROJECT_ROOT
    ? path.resolve(process.env.PROJECT_ROOT)
    : path.resolve('../../../../../../../');

const shopwarePlatformPath = projectRootPath + '/vendor/shopware/platform/';
const nodeModulesPlatformPath = shopwarePlatformPath + '/src/Storefront/Resources/app/storefront/node_modules/';

const shopwarePath = projectRootPath + '/vendor/shopware/';
const nodeModulesPath = shopwarePath + '/storefront/Resources/app/storefront/node_modules/';

let webpack = null;
let fullPath = null;
try {
  require.resolve("webpack");
  webpack = require('webpack');
} catch (e) {
  try {
    require.resolve(nodeModulesPlatformPath + "/webpack");
    webpack = require(nodeModulesPlatformPath + '/webpack');
    fullPath = nodeModulesPlatformPath;
  } catch (e) {
    require.resolve(nodeModulesPath + "/webpack");
    webpack = require(nodeModulesPath + '/webpack');
    fullPath = nodeModulesPath;
  }
}

let webpackConfig = {
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      /jquery.slim/,
      fullPath + 'jquery/dist/jquery'
    ),
    new webpack.NormalModuleReplacementPlugin(
      /jquery/dist/jquery.slim/,
      fullPath + 'jquery/dist/jquery'
    ),
  ],
};
module.exports = function () { return webpackConfig };
    Login or Signup to reply.
  4. 0

    Small additional information:

    If you change the webpack.config.js in ypour plugin make sure to build the frontend afterwards:

    bin/build-storefront.sh

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

Back To Top
Search