ScandiPWA (deprecated)
User ManualGitHubSlack
  • ScandiPWA (deprecated)
  • React & PWA for dummies
    • Setting Up Environment and Talking Theory
    • Learning React Hands-on
    • Styling It
    • Learning ScandiPWA Way
  • START & UPGRADE
    • Linux Docker setup
    • Mac Docker setup
    • Setting up the theme with remote M2 server
    • Theme Upgrade to the latest version
    • Automated setup (BETA)
  • A TO Z OVERVIEW
    • Motivation
    • Challenges
    • File structure and UI components
    • Rewriting and Extending A Theme
  • DESCRIPTION OF CONTAINERS
    • Ngrok
  • FAQ
    • Development
    • Installation
    • Billing and license
    • Product support
    • What is PWA?
  • HOW-TO TUTORIALS - INTRODUCTORY
    • Base template
    • Connecting to the GraphQL resolver
    • Extension mechanism
    • Creating GraphQL resolver
    • Debugging and Inspecting
    • Setting Up Frontend
    • File Structure
    • Data Flow
    • Technology Stack
    • Changing environment
    • Theme Build and Configuration
    • Implementing Caching for New Caching Identities
    • Implementing a parent theme
  • HOW-TO TUTORIALS - INTERMEDIATE
    • Debugging in Chrome
    • Configuring XDebug
    • CLI in Docker
    • Postman & GraphQL Playground
    • VSCode Extensions
    • Plugins: implementing
    • Plugins: using and publishing
    • ESlint & StyleLint
    • How To Contribute
    • Migrating to a Newer Version
    • Installation on Existing Magento 2 Sever
    • BEM and Coding Standards
    • Tools of ScandiPWA
    • React Best Practices
  • FAQ
    • Untitled
Powered by GitBook
On this page
  1. HOW-TO TUTORIALS - INTRODUCTORY

Implementing a parent theme

PreviousImplementing Caching for New Caching IdentitiesNextDebugging in Chrome

Last updated 4 years ago

ScandiPWA v3 supports implementing parent themes, which allow extending some custom theme that extends vendor theme. This functionality is convenient if one likes to use his own theme that extends scandipwa/source as the project’s base instead of scandipwa/source itself.

A step-by-step algorithm of implementing a parent theme

  1. Implement your custom theme, you can refer to .

  2. Create a parent theme directory: app/design/frontend/<vendor>/<themename> or use the default app/design/frontend/Scandiweb/pwa_parent.

  3. Reference that directory in the scandipwa.json file in the root of your project, field parentRoot. The path should be relative to app/design/frontend directory.

{
    "parentRoot": "<vendor>/<themename>"
}

4. Move your custom theme’s contents there (mv -r pwa/* pwa_parent/*) and then erase the pwa directory.

5. Restart the project in order to re-create the pwa folder from scratch.

6. If in your custom theme you had anything changed in the files that now populate the pwa directory, migrate the changes back.

7. Start implementing a theme on top of your theme! Work in the pwa directory just as you are used to.

8. Implement desired logic!

  • Extending files. First you need to import something you want to extend. To import files from parent theme use the alias Parent<...>, to import from source theme use the alias Source<...>. E.g. to import AddToCart component (and extend it) use the following:

    // To extend source component
    import SourceAddToCart from 'SourceComponent/AddToCart';
    class AddToCart extends SourceAddToCart { ... }

    // Or to extend parent theme's component
    import ParentAddToCart from 'ParentComponent/AddToCart';
    class AddToCart extends ParentAddToCart { ... }
  • Using components. To import component and use it somewhere in your application (not to extend it) use the regular Component/<ComponentName> alias. When resolving a file, Fallback plugin is going to look in the following directories subsequently:

  • Custom theme (app/design/frontend/.../pwa)

  • Parent theme (parentRoot in scandipwa.json)

  • Vendor theme (src/scandipwa/source)

this guide