Article posted Tue Mar 14 2023

Ecommerce: Migrating a Magento Theme to 2.4.5

Magento is one of the most popular e-commerce platforms in the world, and its latest version, Magento 2.4.5, offers several improvements and bug fixes over the previous version. If you're running a Magento 2.4.0 store, upgrading to 2.4.5 is a good idea to take advantage of these improvements.

Backup Your Files

Before you begin the upgrade process, it's essential to back up your files. This includes both your Magento files and your theme files. In case anything goes wrong during the upgrade process, having a backup will allow you to restore your files to their previous state. Ideally this would be attempted within a local development environment, running through the migration/upgrade process numerous times until any errors or issues are resolved.

Technology Stack Changes

Before we dive into the specifics of upgrading your theme, it's important to understand the technology stack changes between Magento 2.4.0 and 2.4.5. Magento 2.4.5 includes updates to PHP, Elasticsearch, and the MySQL database. These updates can potentially affect your theme if it uses any custom code or extensions that rely on these technologies. It's important to test your theme thoroughly after upgrading to ensure that everything is working as expected.

Update Your Theme's Composer.json File

To upgrade your theme to Magento 2.4.5, you will need to update your theme's composer.json file to include the new version of Magento. To do this, open your theme's composer.json file and update the require section to include "magento/product-community-edition": "2.4.5".

Gallery Updates

To upgrade the imagery gallery in Magento 2.4.0 to the version found in Magento 2.4.5, you will need to follow these steps:

• Backup your website

  Before making any changes, it's essential to back up your website to avoid data loss.

• Download the new version of Magento 2.4.5

  You can download the latest version of Magento 2.4.5 from the Magento website.

• Install Magento 2.4.5

  You can install Magento 2.4.5 on a separate test environment or on a local machine to test the new gallery.

• Copy the new gallery code

  After installing Magento 2.4.5, locate the new gallery code in the following path:

  [magento_root]/vendor/magento/module-catalog/view/frontend/web/js/gallery.js
  

  Copy the entire content of this file and save it to a new file with the same name in your Magento 2.4.0 instance.

  [store_root]/app/design/frontend/[your_theme]/Magento_Catalog/web/js/gallery.js
  

  This will replace the existing gallery code with the new code.

• Copy the new gallery template

  Copy the gallery template files from the following path:

  [magento_root]/vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml
  

  Copy the entire content of this file and save it to a new file with the same name in your Magento 2.4.0 instance.

  [magento_root]/app/design/frontend/[your_theme]/Magento_Catalog/templates/product/view/gallery.phtml
  

  This will replace the existing gallery template with the new template.

• Update your theme's XML files

  If your theme has any XML files that reference the old gallery code, you will need to update those files to reference the new gallery code.

• Test the new gallery

  After completing these steps, you can test the new gallery on your website to ensure that everything is working correctly.

It's essential to test the new gallery thoroughly before making it live to ensure that it works correctly with your website and theme.

Minicart Updates

A very similar to upgrading the gallery, to upgrade the mini cart in a Magento 2.4.0 theme to support Magento 2.4.5, follow these steps:

• Backup your website

  Before making any changes, it's essential to back up your website to avoid data loss.

• Download the new version of Magento 2.4.5

  You can download the latest version of Magento 2.4.5 from the Magento website.

• Install Magento 2.4.5

  You can install Magento 2.4.5 on a separate test environment or on a local machine to test the new mini cart.

• Copy the new mini cart code

  After installing Magento 2.4.5, locate the new mini cart code in the following path:

  [magento_root]/vendor/magento/module-checkout/view/frontend/web/template/minicart/content.html
  

  Copy the entire content of this file and save it to a new file with the same name in your Magento 2.4.0 instance.

  [magento_root]/app/design/frontend/[your_theme]/Magento_Checkout/web/template/minicart/content.html
  

  This will replace the existing mini cart code with the new code.

• Copy the new mini cart JavaScript file

  Locate the new mini cart JavaScript file in the following path:

  [magento_root]/vendor/magento/module-checkout/view/frontend/web/js/view/minicart.js
  

  Copy the entire content of this file and save it to a new file with the same name in your Magento 2.4.0 instance.

  [magento_root]/app/design/frontend/[your_theme]/Magento_Checkout/web/js/view/minicart.js
  

  This will replace the existing mini cart JavaScript file with the new file.

• Update your theme's XML files

  If your theme has any XML files that reference the old mini cart code or JavaScript file, you will need to update those files to reference the new code.

• Clear the cache

  After completing these steps, clear the Magento cache to ensure that the new mini cart is loaded.

  bin/magento c:c && bin/magento c:f
  

• Test the new mini cart

  After clearing the cache, test the new mini cart on your website to ensure that everything is working correctly.

It's essential to test the new mini cart thoroughly before making it live to ensure that it works correctly with your website and theme.

Using Base Files

If you run into any issues with your theme after upgrading to Magento 2.4.5, it may be necessary to revert some of your theme files back to use Magento's base files. To do this, you can follow these steps:

• Locate the file that you want to revert.
• Make a backup of the file.
• Replace the file with the corresponding file from Magento's base files.
• Test your theme to ensure that everything is working as expected.

Conclusion

Magento offers a powerful though cumbersome templating system that easily allows you to replace sections of your own templates with those found in the latest version of Magento. By comparing the files found within vendor, as seen the above gallery and minicart examples, we can migrate updates or changes into our own theme.