Introduction

Starting with version 7.0.0 of the Responsive Starter Store (depending on ICM 7.10.5.0), the current jQuery 3.3.1 is used instead of 1.11.3. All Javascript code of the Responsive Starter Store (a_responsive) was migrated to this new jQuery version.

With this migration all the used third party libaries were updated to their latest versions as well and adapted where necessary.

Javascript Migration

Basically, the following steps have been done for the standard a_responsive code for the jQuery 3 migration:

1. Update jQuery in a_responsive from version 1.11.3 to the latest version 3.3.1.
2. Migrate the Intershop specific Javascript code using the jQuery Migrate Pluginand the jQuery Upgrade Guide.
3. If there are any problems with used third party libraries, update them to the latest version and migrate the code if necessary.
4. Check that the Javascript compression with YUI compressor is still working without problems.

The migration steps 2 to 4 have to be done for project specific Javascript code or customizations of the standard Javascript, too.

jQuery 3.0 Upgrade Guide

jQuery provides an upgrade guide that includes information about important changes in jQuery version 3.x, browser support and the jQuery Migrate Plugin.

jQuery Migrate Plugin

The jQuery Migrate Plugin supports the migration of Javascript code written with previous jQuery versions to be compatible with jQuery version 3.x. It is recommended to use this plugin's uncompressed version as an upgrading tool. When browsing the Responsive Starter Store with the activated jQuery migration plugin, specific advice about most of the major changes that may affect your code is provided (see screenshot).

The use of the jQuery Migrate Plugin is prepared. Both the uncompressed and the compressed version are included in a_responsive and can be activated in the BaseJS.isml file.

Use the following steps to upgrade your javascript code:

1. Add the uncompressed jQuery Migrate Plugin in the BaseJS.isml.
2. Test the page and resolve any warnings that appear on the console, using the JQMIGRATE warning documentation as a guide.
3. Remove the jQuery Migrate Plugin and ensure that the page continues to work properly with the new jQuery 3.3.1 version.

YUI Compressor Issues

The currently still used YUI Compressor for bundling and compressing the Javascript code of a_responsive cannot handle all current ways of writing Javascript. It does not work together with the jquery-3.3.1.js. For that reason the jQuery library is no longer included in the isfilebundle, but directly referenced in its minified version jquery-3.3.1.min.js, see BaseJS.isml. All other standard Responsive Starter Store Javascript code still works fine with the JScompressor.

To work around problems with the YUI Compressor, you can either reference problematic Javascript libraries directly in the ISML or you need to translate to modern Javascript expressions to an older way of implementing the same functionality.

To initially test and migrate your Javascript code without problems introduced by the YUI Compressor, you can disable the processing via development.properties with the following two settings:

intershop.template.isfilebundle.Process=false
intershop.template.isfilebundle.Combine=false

After a successful migration these settings need to be re-enabled to check if the YUI Compressor is still working without any compression errors. To do this, see the server log for errors. In addition to that, the functionality of the compressed Javascript in the browser needs to be checked, too. To do this, check the browser console logs to make sure there are no errors introduced by the compression.