Add a documentation about Twig compilation

[gusbemacbe]

Hello,.

I have been searching all the documentations of the Brazilian NuvemShop site. It does not explain how to compile a site written in Twig via PHP-based Composer, downloaded from NuvemShop's FTP, for testing before sending back to the site.

[ThomasWicks]

Hi, I'm passing through the same problem. Did you figure it out how can we compile it?

[joaopedroAnelli]

Another one here with the same problem. :(

[marcelodd]

Hi, I'm passing through the same problem.

[vittxr]

Yo. I'm trying to render the templates too. Anyone find a solution?

[aledagostin]

Hey people. Actually there is no way of compile the files locally. All the magic occurs on Nuvemshop servers. Thus said, our only option is FTP.

[felipe-dap]

Wonder if someone came up with a solution for testing locally.
I am not used to php... seemed reasoble that one just can't render a template if the server that has access to the db is not present. But maybe I am missing something...

My workaround is cumbersome af. I download the online version, make the adjustments (html/css) and copy to the tpl and scss files.
Cheers.

[ovr4ulin]

thanks tiendanube for testing my imagination to test .tpl files without a way to compile the files. Best regards.

[felipe-dap]

I am almost done fully customizing an e-commerce page starting from base-theme.
Been working with nextjs and tailwind for the last couple of years, so this FTP stuff is quite cumbersome.
Some things that helped me along the way, when it comes to going back and forward with testing on the actual server:

1. Obviously your e-commerce should be under construction mode. Because you are likely going to break stuff along the way.
2. https://docs.nuvemshop.com.br/help/nosso-cdigo-objetos
   This is your best friend link right there. Without the object schemas it nearly impossible to do anything.
3. Beware of some files that you shall NOT move. cart-item-ajax.tpl and shipping-options.tpl are your worst enemies when it comes to breaking things apart. I did move other files to best fit my needs, but mostly for "componentization" of ui stuff. These two files you should not move around. you can modify them, but keep them in the snipplets folder.
4. Be careful with caching. Sometimes you think things didn't work, but it is actually cached versions - especially css and js files are cached all the time. Renaming those upon changes became essential to my sanity.
5. Avoid changes in store.js and beware that if things are not working (like a button is not recalculating your prices) or something like that, you may need to dig into it because it is likely not finding a js-* class to complete a form or something like that. Notice that any class prefixed with js-* is going to trigger something, so be careful removing or even changing the order of the dom elements because sometimes a button triggers a function that looks for the nearest form or something like that.
6. Having proper shortcuts to upload to server became essential.
7. Using webstorm, I tried some twig extensions to help with syntax highlighting, but probably the best way would be using phpstorm or vscode (I tried vscode, but shortcut differences where killing me so I gave up on that).
8. For sliders and things like that I opted to use the existing solutions from swiperjs because that's what they already used. I did it from scratch instead of relying on their solutions mostly because we wanted more control on stuff. The reason is that I want to avoid touching store.js as much as possible.
9. There a quite a few templates from baires that you can ftp to grab boilerplate stuff. But after all if you really need deep customization I guess that preparing your files locally as much as possible and later merging into the nuvemshop templates is likely better.

This is not my stuff... dealing with php and ftp... but I had and wanted to do this by myself and did not really found much useful help online regarding these templates, so these are some stuff I came up with.
And last but not least, my best friend tailwindjs.
9. I am using tailwindjs cdn to configure things directly in layout.tpl
https://tailwindcss.com/docs/installation/play-cdn
Once finished styling I will take this out by compiling it into a css file, but having this to work around was a blessing.

Cheers.