0

I am trying to override the swatch-renderer.js file in my custom Magento 2 theme. I have created the required directories and the custom JavaScript file but it doesn't seem to work. Here is what I have done so far:

  1. Created the directory structure: app/design/frontend/Vendor/theme/Magento_Swatches/web/js/swatch-renderer.js

  2. Copied the original swatch-renderer.js to this directory and made my changes.

  3. Updated the requirejs-config.js in my theme as follows:

var config = { map: { "*": { 'Magento_Swatches/js/swatch-renderer': 'js/custom-swatch-renderer' } } };

But the changes do not seem to reflect on the frontend. Can anyone help me identify what I might be doing wrong? Thank you.

Improve this question
2

3 Answers 3

Reset to default
0

as the requirejs-config.js file is in theme folder, Try updating the path to include the folder name.

var config = { map: { "*": { 'Magento_Swatches/js/swatch-renderer': 'Magento_Swatches/js/custom-swatch-renderer' } } };
Improve this answer
0

To override the Magento_Swatches/web/js/swatch-renderer.js file in a custom theme in Magento 2, follow these steps:

Step 1: Create the Required Directory Structure

In your custom theme, create the necessary directory structure to place your override file. Assuming your theme is located at app/design/frontend/[Vendor]/[Theme], the structure would be:

app/design/frontend/[Vendor]/[Theme]/Magento_Swatches/web/js/

Step 2: Copy the Original File to Your Theme

Copy the original swatch-renderer.js file from the Magento core module to your custom theme.

  • Source file (Magento core):

    vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js

  • Destination in your custom theme:

    app/design/frontend/[Vendor]/[Theme]/Magento_Swatches/web/js/swatch-renderer.js

Step 3: Modify the JavaScript File

Now that the file is in your theme, you can edit swatch-renderer.js as needed. Make your customizations directly in this file.

Step 4: Clear Cache and Deploy Static Content

After making your changes, clear the cache and redeploy the static content:

php bin/magento cache:flush php bin/magento setup:static-content:deploy

Step 5: Verify the Changes

After clearing the cache and deploying static content, check the frontend of your store to ensure that your changes to the swatch-renderer.js file are taking effect.

Summary

  • Path to Override: app/design/frontend/[Vendor]/[Theme]/Magento_Swatches/web/js/swatch-renderer.js
  • Clear Cache and Deploy: Always flush cache and redeploy static content after making changes.

This method ensures that your customizations are applied and won't be overwritten by future Magento updates, as they reside within your custom theme.

Improve this answer
0

Setting Up The Directory Structure

1- Navigate your topic listing:

 app/design/frontend/Vendor/theme/

2- create the following sub directories, if doesn't exist:

 Magento_Swatches/net/js/

3- Copy the authentic swatch-renderer.Js record from the Magento module on your topic’s/theme’s directory:

 Cp seller/magento/module-swatches/view/frontend/internet/js/swatch-renderer.Js app/layout/frontend/Vendor/subject matter/Magento_Swatches/net/js/

Once you have copied the authentic document on your subject matter’s listing, you may begin making your customizations.

Updating requirejs-config.Js

1- Navigate on your subject listing

app/layout/frontend/Vendor/subject/

2- Open/create requirejs-config.Js in the following route:

app/layout/frontend/Vendor/subject matter/requirejs-config.Js

3- Add the trails configuration to map the unique record for your custom file:

var config = { map: { '*': { 'Magento_Swatches/js/swatch-renderer': 'Vendor_ThemeName/Magento_Swatches/js/swatch-renderer' } } };

Run the static content material command:

bin/magento setup:static-content:deploy

Clean cache: bin/magento cache:clean

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.