// imporing original function to call
import {
    AddToCartContainer,
    mapStateToProps,
    mapDispatchToProps as sourceMapDispatchToProps
} from 'SourceComponent/AddToCart/AddToCart.container.js';

// importing to replicate original default export
import { connect } from 'react-redux';

// exporting all functions and constants from original file
export * from 'SourceComponent/AddToCart/AddToCart.container.js';

// re-exporting the overriden variable
export const mapDispatchToProps = (dispatch) => {
    // calling the original function to modify the result
    const handler = sourceMapDispatchToProps(dispatch);

    // add custom functionality    
    handler.logProduct = () => {
        console.log('product added to cart');
    };
    
    // returning modified result
    return handler;
}

// exporting default
// (becuase function mapDispatchToProps was used in it)
export default connect(mapStateToProps, mapDispatchToProps)(AddToCartContainer);

https://embed.notionlytics.com/wt/ZXlKd1lXZGxTV1FpT2lJNE1qQmlPVGM1TlRaak9URTBOREU1T0RJeFltWmpPVE16TldNeU5UZ3daU0lzSW5kdmNtdHpjR0ZqWlZSeVlXTnJaWEpKWkNJNklrbGpiM1pzV2pOcU1VUnBRM1ZUUm1WNFRtdHlJbjA9

ScandiPWA is installed as an NPM module in the node_modules directory. This means we can not modify its source directly. We still have to, in order to change the application's appearance or extend its functionality. In order to do it, 2 options exist:

• Create an override - create a new file under the same location as in the original theme. Works only for themes. Works well for UI extension that is not planned to be reused on other projects.
• Create a plugin - create a new plugin file and plugin to some namespace. Works for both themes and extensions. Works well for the extension of the application logic. Can be easily packed and reused on another project if needed.

<aside> ➡️ This guide will focus on overriding files. To extend the logic of the app, please use the plugins. How to create a plugin?

</aside>

What is a file override?

Overriding a file - means creating a file that will be used instead of some other file. ScandiPWA introduces the concept of the "override mechanism", which is used for "overriding" files as a convenient customization feature.

Using the override mechanism, you are able to change any part of a ScandiPWA application, including styling, user interaction, page structure, or custom functionality. Any part of the theme that you don't override will fall back to the default implementation.

What should I override?

You can modify files of any extension or parent theme. You'll mostly need to modify 2 types of files:

• JavaScript files, if you wish to modify components, routes, query files, or functionality.
• Style files, if you want to modify the style of an element.

And most of the time the changes will affect either an extension or the parent theme, changing the looks or the functionality of a component there. What's a component?

What's a parent theme?

Theme - is a collection of components, which implements a presentation layer that is unique to your application. Themes can stack on top of each other. A theme that another theme is based on is called a parent theme. ScandiPWA's parent theme is the default front-end template that you see when you first run scandiPWA.

• Why should I override a parent theme?

How does the override mechanism work?

Think about it as a stack, and each theme is a layer of the stack. ScandiPWA's parent theme is at the bottom layer of the stack and we build the stack from bottom to top, you can have an unlimited stack of themes overriding parts of/adding new functionalities to the previous theme on the stack. Take a look at the diagram here:

In this diagram we have 2 entities:

• The parent theme of My Project is ScandiPWA
• The My Project is a child theme of ScandiPWA