ScandiPWA introduces the concept of "overriding" files. Overrides are a feature of ScandiPWA themes.
To override a file - means to create a file which will be used instead of some other file. You can override files of any extension or parent theme.
Determine your parent theme location:
Locate package.json
in your theme and pay attention to field scandipwa.parentTheme
Navigate to node_modules/<PARENT THEME NAME>
Locate the file you intend to override in a parent theme folder
Create a new file in your theme, which:
Has the same name as the original file
Is located in the same folder (relative to src
) as the original file
In case the package.json
fieldscandipwa.parentTheme
is empty, your theme is considered to be a root theme. In this case, parent theme overrides will not function, as there is simply no parent theme.
To override a file AddToCart.component.js
:
Check our theme's package.json
file:
The value of scandipwa.parentTheme
is @scandipwa/scandipwa
The location of a parent theme therefore is node_module/@scandipwa/scandipwa
Search for AddToCart.component.js
in a parent theme files:
The file was found in src/component/AddToCart/AddToCart.component.js
Create a new file in our theme:
Filename is AddToCart.component.js
Folder it should be located in is src/component/AddToCart
Determine an extension the file you intend to override belongs to
Run a theme using the start
script
Use the browser's developer console to search for a filename
Locate the file you intend to override in the extension
Create a new folder in your theme's src
folder, which matches the extension name
You can find the extension name in the name
field of the extension's package.json
Create a new file in your theme, which:
Has the same name as the original file
Is located in the same folder (relative to src
) as the original file, but under the newly created extension specific folder. The pattern for the folder to create extension in is src/<EXTENSION NAME>/<PATH AS IS EXTENSION>
.
Extension might also provision a path. In example, the @scandipwa/m2-theme
provision the public/index.php
file. To override this file, you need to create the exact path in your application theme, without creating the folder matching extension name.
To override a file PayPal.component.js
:
Using the Google Chrome, search for the PayPal.component.js
The search results point us to node_modules/@scandipwa/pay-pal/src/component/PayPal/PayPal.component.js
The extension, therefore is @scandipwa/pay-pal
And the file is located in src/component/PayPal/PayPal.component.js
Create a new folder matching the extension name: src/@scandipwa/pay-pal
Create a new file in our theme:
Filename is PayPal.component.js
Folder it should be located in is src/@scandipwa/pay-pal/component/PayPal
The "overrides", however, are optional. You can freely create folders and files in ScandiPWA folder. The override-mechanism will only function for files in the src
and public
folders your theme, parent theme or extensions.
If the file you created will unintentionally match extension's or parent theme's path, it will override it. Be careful not to break the functionality, while creating new files and folders.
ScandiPWA implements following sequence of override preference (from highest priority to lowest):
Your theme files
Your theme's parent themes files
Extensions files
An extension can not override another extension's file. This feature is only available for themes.