How to extend Venia theme rather than overriding it
-
15-03-2021 - |
Pregunta
In the latest version of PWA Studio most Venia components is separated to UI library.
See the git commit: https://github.com/magento/pwa-studio/commit/fa0a4c9b45757c272f6b745c546e8b61b1da40db
What is the good approach to extend the venia theme ?
I have had a look at fallback studio but it seems out of date with the latest version https://github.com/Jordaneisenburger/fallback-studio
Solución
With the most current work on the develop branch you now have a folder called venia-concept, this is where all your custom work will go. Similar to a theme, but not exactly the same.
The pwa app is pointing to the index.js file in venia-concept
as it's entry point. The way you use this is to replace the call to app
from venia-ui
to venia-concept
. You can just copy the whole App
folder into venia-concept
and update the index.js file like such:
import App, { AppContextProvider } from './components/App';
This now points to an app file that you have copied over.
pwa-studio/packages/venia-concept/src/components/App/app.js
You will need to update the import
statements along the way as you add in more components to override. So in your app file you will have something like this:
import React, { Fragment, useCallback, useEffect, useMemo } from 'react';
import { array, bool, func, shape, string } from 'prop-types';
import { HeadProvider, Title } from '@magento/venia-ui/lib/components/Head';
import Main from '../Main';
import Mask from '@magento/venia-ui/lib/components/Mask';
import MiniCart from '../MiniCart';
import Navigation from '../Navigation';
import renderRoutes from './renderRoutes';
import errorRecord from '@magento/peregrine/lib/util/createErrorRecord';
import ToastContainer from '@magento/venia-ui/lib/components/ToastContainer';
import Icon from '@magento/venia-ui/lib/components/Icon';
You can see that i'm now pointing to the local copy of Minicart in this file, it's no longer pointing to venia-ui
. In case where you want to point to the core file, not your override, you use import Mask from '@magento/venia-ui/lib/components/Mask';
From here you can add in more and more components as you customize your shop.