How do you handle "Blueprints" with Bricks?

Howdy,

I’m looking for some advice on how to best handle Blueprints – specifically when using WooCommerce.

I’ve currently got a standard Blueprint setup for Bricks - but - it doesn’t have anything for WooCommerce within it. I’m hoping to put something together that’ll include custom templates, classes, and variables to preconfigure WooCommerce how I like but I also don’t want all that bloat in my standard base as most website I work with are not eCommerce.

I’m not sure how to approach this, I don’t really want to manage two separate Blueprints as that sounds like double the work indefinitely, is the best route for me to make a clone of my current base, setup WooCommerce, and then export a bundle of everything that I can install as-needed?

If I do that how will it affect my current variables? I plan on using a mixture of my standard variables as well as some WC specific ones in the templates.

Will it simply pull in the new variables and leave the others as they are - or - will it erase everything an match it to what’s in the bundle?

Would it be safer for me to only use things exclusive to WooCommerce variable/class-wise?

I’m possibly overthinking this and curious to see how someone else handles it.

Thanks!

Hi there,

“Blueprint” as name is a WooCommerce feature - not Bricks; but handy anyway as you do not need to set all WooCommerce options every time as well.

But i think that you want to archieve is to have a “basic” website blueprint and a WooCommerce blueprint with all WooCommerce templates ready. And yes, all classes and stylings are imported as well. That’s quite straightforward to archieve.

Just create 1 WooCommerce and create all default Bricks WooCommerce template files you need. Then select & export these Bricks templates and import them in any new Wordpress instance you create a webshop in.

Jasper

Thanks for your reply!

I wasn’t aware of a Blueprints feature in WooCommerce – looks like it’s in beta – I was just using the term blueprint more as a general concept of a starting point which I think is common. I’ll look into it though unrelated to this as that seems pretty nifty.

Awesome, I’d be happy to proceed that route and just import a ZIP file of all the templates each time I actually need them - but - I do still have a few questions on how that’ll work with CSS Classes and CSS Variables that already exist in the system.

I have a bunch of variables defined in my standard base that I use to quickly configure things many of which are for default spacing, font sizing, etc. If I were to use these variables within my WC templates would it override the values already set on the variables upon input or would the templates inherit what’s already configured?

Hopefully I’m making sense. :sweat_smile:

Yeah, understand. If you want no conflicts at all my suggestion is to use specific WooCommerce naming of classes. For example:

.wc_heading-container
.wc_heading-title
etc.

You can use a framework (Fany Framework / Core Framework / Advanced Themer Framework etc.) which work with variables. I work with Core and i place alle variables inside those classes (visual building, no need to remember the variable names - the popup panel suggests them), like:

.wc_heading-title {
font-size: var(–text-m);
color: var(–primary);
}

Etc.

So if you keep your variables within the same framework all stylin will be automatically set as well when you import the templates.

Jasper

Yeah, I have Advanced Themer and have tried Core Framework but prefer to use my own.

I can totally just use variables prefixed with ‘wc-’ – last thing though, do you happen to know if it would try to import the variables set as values or only the ones specifically defined in Bricks?

For example if I imported a template that had…

VARIABLE = --lt-wc-padding;
VALUE = var(–lt-section-padding);

Would it only import the –lt-wc-padding - or - would it also go for the --lt-section-padding?

If not, I suppose I can just do aliases as needed.

It will import anything what is set within the templates. In a “normal” way ony the car is set by you (VALUE = var(–lt-section-padding)) as the framework is running a-side of it.
But if you set a code block in, for example, the header templte with all your variables inside it will import those as well as code block. But they won’t be registered.

I allways have the framework a-side, just importing the templates and it works. I tend to have as little “workarounds” and keep all ‘to the core’ so maintaining is easier accross all websites.

Jasper