Question: How to extend theme rather than overwrite.

[dambrogia]

I have been reading through the docs casually for the last week or two. I can see that contributions are being made in bunches in the docs as well as the pwa codebase. Thank you for all of the work you've done. I think this is an awesome move by the Magento team and I think we can all agree it is much needed.

My question is:

Is it going to be possible to extend from the venia theme rather than just build from it and overwrite it? I haven't seen any documentation about this and since I plan on using the PWA in the next few months it is one of the first things I'll be looking to learn how to do if it is possible.

I understand that components/classes can be extended and we can just implement our own versions of them. But it wouldn't be ideal to manually go through and replace a compnent everywhere it is used within my theme. I also would rather not overwrite components completely for future updates and compatibility reasons (no surprises there hopefully).

But, using a cart item for example, I'm imagining one of the following would be possible:

Venia file: <base_dir>/venia/cart-item.js
Custom file: <base_dir>/custom/cart-item.js

// should return custom/cart-item.js since custom file is avail instead of base venia file. 
const CartItem = mage_require('cart-item.js');

Or a JS equivalent of declaring a preference for a class within a di.xml file (Magento backend functionality):

<config>
    <preference for="<base_dir>/venia/cart-item.js" type="<base_dir>/custom/cart-item.js" />
</config>

I know similar functionality is possible within M2 LESS as well. I'm hoping this is possible (and documented) in the PWA as well!

Any insight on this would be greatly appreciated! Thanks!

[Jordaneisenburger]

@dambrogia The idea behind the venia-concept is really a reference theme. It's not meant to be the new Luma. But i understand the reason you ask the question because i had the same question and altho it's not recommended i've created my own theme that uses venia-concept as a fallback so my components, rootComponents, queries folders etc. only have overwritten/extended components from venia-concept or custom components.

This way it's really easy to build a theme without having to do all the config etc. Also updating the pwa-studio repo is a lot easier this way and it doesn't break my custom theme. To accomplish this you need to make changes in webpack.config.js and the root lerna.json,package.json and scripts/watch-all.js. Basically you have to create a fallback structure inside webpack using resolve.alias

Hope this help! once again Magento doesn't approve this way of setting up your app.

[danielvanmil]

For me it's also not very clear what Venia exactly is and/or will be? It is a reference implementation, but can it be used in production as is (by for example changing some colors etc.) or should we start from scratch and use the Peregrine as basis? Using custom css properties would allow us to add a theme for example to the app (don't know whether this is on the roadmap) Although the app is not very complex, it's not that simple to just start from zero. Any thought/documentation on this topic? Thanks

@Jordaneisenburger : is your code in github (fork) somewhere to look at your approach?

[Jordaneisenburger]

I've been working on a wrapper in which you can create a custom theme that will fallback on the venia-concept storefront. The idea is the same as you are used to in regular Magento 2. I find this way of working really easy because when i spin up my own theme i just see the latest version of venia-concept but with my custom overwrites or components. This way i can keep pulling the latest pwa-studio repo without overwriting the components that i've altered from venia-concept.

I'm planning on making the repo public on github at the end of this week. The working alpha version is done. Right now i'm working on proper documentation so everyone can understand why and how it works. When its public i'll post it in the PWA slack channel and this github issue.

**Theme*** venia-concept is not a theme it's a storefront and can stand on its own. The reason i called it themes in my fallback structure is because it uses pwa-studio as a parent and therefore its a theme.

[Jordaneisenburger]

Alpha version is ready check at https://github.com/Jordaneisenburger/fallback-studio

[cherdman]

We have some improved documentation on this now. Feel free to re-open if you still have questions! https://magento-research.github.io/pwa-studio/technologies/theme-vs-storefront/

[margo-nik]

@cherdman Hi! Your link in previous comment is not available. Can you provide this information in other way?

[Jordaneisenburger]

@cherdman Hi! Your link in previous comment is not available. Can you provide this information in other way?

https://magento.github.io/pwa-studio/technologies/theme-vs-storefront/