In ScandiPWA, it is common practice to enhance your store with additional functionalities.
Extensions enable developers to easily add plug-and-play features to a store. These extensions can either be built from scratch or installed from the official marketplace.
How to work with ScandiPWA extensions?
Most ScandiPWA extensions are so-called compatibility extensions, developed based on existing Magento 2 modules. These are created by migrating the original Magento 2 module logic into ScandiPWA, following a set of pre-defined rules.
How to create a ScandiPWA extension from Magento 2 modules?
To fully utilize the customization possibilities and best practices of ScandiPWA, it is essential to have a thorough understanding of how it works. This will enable you to effectively tailor the platform to your specific needs.
React components are reusable pieces of UI logic that may be shared across many pages in our application and must share the same structure.
<aside> ℹ️ If you want to style a component, please check out our styling tutorials!
</aside>
ScandiPWA components are used in various ways to add functionalities:
CMS:
Magento widgets are an extension of HTML syntax that allows embedding and configuring dynamic data in HTML.
Checkout:
Payment methods and checkout are crucial parts of any Magento site.
Routes:
ScandiPWA routes are ScandiPWA components that are rendered on the client to display particular pages.
Requests allow ScandiPWA to communicate with a remote server. These requests can be for various purposes, such as requesting a list of products to display on the product listing page or sending a request to the backend to add an item to the cart.
To work with requests in ScandiPWA, it is important to have an understanding of the following topics:
Graphql Resolver:
To make GraphQL requests, you must ensure that the server implements a resolver for the query/mutation you want to execute.
Query document:
To make GraphQL requests, you must make use of ScandiPWA query documents to define extensible queries and mutations dynamically.
State management is an important aspect of React applications because it allows you to handle, organize, and share data within the application.
There are several approaches to state management in ScandiPWA, each with its own benefits and use cases:
Redux Stores:
ScandiPWA uses Redux as its state management library. Redux allows you to create actions and define global states. It provides data mappers that map state and data handlers to the props of your components in a neat way.
Context API:
If you need to pass data down to children components, you can avoid the problem of increasing complexity with props drilling by using Context to share this data.
React provides a built-in tool that is integrated by design and does not affect the final bundle size.
How to work with React Context API?
When building web applications for a global audience, it’s important to provide translated content to users in different languages. This helps ensure that your application is accessible and inclusive to users from different countries and cultures.
How to work with translations?
A service worker is a fundamental part of a Progressive Web App (PWA). It acts as a network proxy, intercepting requests and serving responses.
How to work with Service Worker?
A key aspect of ScandiPWA is the use of plugins, which allow for the addition of new functionalities without the need to modify the existing code base.
<aside> ➡️ In the previous step, you learned how ScandiPWA features work. Within each page, you may encounter some common features, and tutorials to integrate them using plugins.
</aside>