Developing with Scandi
Tutorials
Overriding JavaScript
Override JavaScript files using the ScandiPWA Override Mechanism
When developing a ScandiPWA-based theme, you have the ability to override any JavaScript file and its exports. To override a JavaScript file, create a new file in your theme
src directory matching the path of the file you want to override. For example, if you want to override the theme file in component/ProductCard/ProductCard.component.js, create a file with the same path in your theme's source directory, src:override: component/ProductCard/ProductCard.component.js
1
import { PureComponent } from 'react';
2
3
export class ProductCard extends PureComponent {
4
render() {
5
return (
6
<p>
7
We have overridden the ProductCard component!
8
</p>
9
);
10
}
11
}
12
13
export default ProductCard;
Copied!
Now, any import using the alias
Component/ProductCard/Component/ProductCard.component will resolve to your newly-created file. Indeed, if you check the product list page, you will see the updated component:
Detailed overriding examples
Despite the general rule being simple, it is important to learn more details. See the detailed guide on overriding class-based and non-class-based files below.
Overriding Tutorial
Specific examples of how to use the Override Mechanism for common tasks can be found in our tutorial!
Last modified 10mo ago
Copy link