We want to change our Theme to something more deep...
# suitecommerce
a
We want to change our Theme to something more deeply customizable. Steve Goldberg mentioned the new V4 themes would be a good place to look. However, I don't know how to find those. Are they out yet? Usually I search the SuiteBundles to find SuiteCommerce themes.
1
s
v4 base theme is available
1
The others are expected to be released over the next couple of months
I think Summit is in final QA and will be the first one out
a
Thanks!
s
There is also a PDF copy of the presentation our team did at SuiteWorld available on SuiteAnswers
a
This sounds really good!
So, in order to use the V4 themes do I need to create a theme using the theme developer tools, and that will provide the V4 base theme as the fallback theme, and then I can deploy and activate that as-is, or customize a custom theme on top of it? Or is that instructions on how to build custom themes on top of V4 basic fallback theme, and not instructions on how to get the V4 basic theme in the first place?
I think I understand now. I already have Bridge installed via bundle (so that's probably Managed), but it's V3.1.1 and Summit will be the first non-base theme out, but it's not out yet. So yeah, I'll have to remove Bridge to fall back to Base V4 and/or create my own, or wait.
s
Install the base v4 base theme and activate it. In your extension tools, fetch it. Then use the local server to start your dev environment.
If you like Bridge and would want to go on from there, then you'll need to wait.
p
Hey @Steve Goldberg, I'm working on creating a new theme that follows the fallback architecture using
gulp theme:create
with the SuiteCommerce Theme Developer Tools. However, I'm using some extension overrides, and after running
gulp theme:deploy
, the SuiteCommerce Base Theme does not contain these overrides. As a result, when I run
gulp theme:local
, my changes are not applied correctly. Am I missing a step in ensuring that the extension overrides are properly included? Any guidance would be greatly appreciated! Thanks!
👀 1
image.png
s
In the manifest.json, is the
override
property have an array of files with the correct paths?
p
image.png
thanks @Steve Goldberg,I believe the
gulp theme:create
command should pull this information so that when
gulp theme:deploy
fetches the base theme, it also includes the overrides. Currently, using
gulp theme:fetch
instead of
gulp theme:create
does pull the overrides, and it works with
gulp theme:local
. However, my goal is to create a new theme that extends the base theme, not just a completely new theme. I hope this makes sense. Let me know if you need any clarification!
s
Well, I'm a little confused because you said in your original message that you were using extension overrides but I can't see any extension overrides in your source code
p
I'm a bit confused as well. We have a few extensions that override the normal theme behaviour. When creating a theme, should these extensions be pulled into the
extras
folder to ensure they run locally? Is that what we are seeing in the console under extensions?
image.png
s
That's different 🙂
Extensions that override templates in the theme is not something we have officially supported
It was something that was (is?) technically possible because of the way compilation worked. If it has stopped working then you may be out of luck, but it could be because you haven't found the right hack. Either way, it is not something I recommend and is not something we've documented as a supported feature.
The documented way of 'overriding' a template in the theme is to use an extension to register a new page layout, and then use the SMTs to set this layout.
This won't work with child views, but it looks like you're changing the invoice details layout in this example, so that would work.
A really dirty hack would be to write an extension that includes the core module to which the template belongs to then and then modify its prototype, either setting the
template
property or overriding the
childViews
property. I would really not want you to do that, and I don't know if it would actually work.
p
I think I understand what you’re saying. But let’s say I want to create a new skin for a new theme based on the Base theme—what would be the best way to set it up so I can develop locally? Any recommendations?
s
Skins, again, different.
I don't think that there is a super easy to develop a skin locally. You typically just start with the JSON file, include it in your manifest, deploy, activate, and then use the SMTs to play around with it
p
Understood. One last question: What is the purpose of Theme Developer Tools if you can't create a template to override a base theme template? If I only need to remove some HTML from the invoice module, for example, should I create an extension instead? From what I understand from your answer, the documented way to "override" a template in a theme is to use an extension to register a new page layout and then configure the SMTs to use this layout. I'm a web developer but new to SuiteCommerce. I feel like I'm close to understanding how everything connects, but I need some clarification. I've read a lot about setting up the development tools, but I still don't feel confident developing locally in a maintainable and upgradeable way.
s
What is the purpose of Theme Developer Tools if you can't create a template to override a base theme template?
This isn't what I said 🙂
The fallback themes kinda work like overrides, in the sense that you only specify the templates you want to change (and these 'override' the ones in the base theme or whatever theme you are building on)
So you can 'override' a theme template file with another theme file. But that is not what we call template overrides in SuiteCommerce development