[RFC] Customization

[leomp12]

How Storefront V2 may be customized (from easier to harder) and TODOs:

1. Insert HTML, JS and CSS with specified files predefined at Storefront Starter:

   • Split views in new partials to make possible to insert HTML in more (any) places;
   • Update Storefront Starter pages with new insert partials and respective imports;

:no_entry_sign: Update: new (better) approach with Storefront Starter git update https://github.com/ecomplus/storefront-starter/issues/119

2. Edit prerendered HTML through EJS or dynamically update DOM with custom JS (can use jQuery):

   • Template EJS components may have predefined places for additional HTML;
   • Vue components must have slots to support most common additional HTML cases (https://github.com/ecomplus/storefront/issues/167);
   • Widgets must try to keep custom prerendered HTML, preferably trough respective component slots;

Update: tracked on https://github.com/ecomplus/storefront/issues/191

3. Use Webpack aliases on storefront.webpack.js to make deeper edits on Vue component parts (HTML, JS or SCSS);

[leomp12]

@matheusgnreis take a look here please

[leomp12]

@thiagoabreudev @ThaisChaves just a note, it'll also be included to docs (https://github.com/ecomplus/storefront/issues/169)

[matheusgnreis]

Only one of them? I think they complete each other, with storefront.webpack.js we can do deeper edits, just like you said.

• Split views in new partials to make possible to insert HTML in more (any) places, i think is important too. Today is only at top or bottom. Shoppers like to insert some banners between some stuff, like 'vitrine' or between them and slide. -Use of jquery for some shoppers, may be helpful

[leomp12]

@matheusgnreis not only one, all of 3 ways, I've just listed sorted by easier to harder (in my vision), but idea is to support all those customization strategies with easy (as possible).

[leomp12]

Related to EJS includes for our widgets and components customization (such as Vue slots) https://github.com/mde/ejs/issues/500

Edit: Using views EJS option (not documented)

[leomp12]

Thinking about moving entire EJS (pages) to Storefront Starter and use Git programmatically to make updates, it would prevent needing to copy and paste EJS code to edit.

Show me the code:

• git subtree pull https://github.com/ecomplus/storefront-starter master --squash
• grep -lr '<<<<<<<' . | xargs git checkout --ours

I'm just not sure yet if it can be consistent without having to do lot of work to implement :thinking: