How does it all work?

As discussed previously, we use html files for different pages, products page has its own html file, similarly for categories page and so on. But how are all these pages related and linked to each other? The answer to that is a templating engine. We could also put all the .html into a single file layout.html but that would a horibble mess of code and a big huge difficult to read file and if you add dynamic content to it, god bless you and your coders! Hence we split it into different files for easier maintenance and understanding. However with this code could be duplicated across these files and a lot of other issues can arise. Hence to keep things organized, reduce repitition of code, and handle dynamic content we use a templating engine to simplify the things. Dukaan theme uses Nunjucks templating engine, we have explained about it in the next chapter.

🤔 How to know which file to change?

Let's understand with an example. Imagine the layout.html file is like the menu template for a restaurant. It defines the overall design, font, and color scheme of the menu. This template is used by all the different sections of the menu, such as appetizers, main courses, and desserts.

Now, think of the product.html file as the dessert section of the menu. It follows the same menu template (layout.html) but has its unique dessert items and descriptions listed.

In this case, Nunjucks acts like a menu designer who uses the menu template (layout.html) to create the overall look of the menu and then adds the specific items and descriptions for each section, like the desserts in the product.html file.

To customize the restaurant menu, you have two options:

1. If you want to change the overall design, font, or color scheme of the entire menu, you can edit the layout.html file (the menu template). This will affect all sections of the menu that use this template.

2. If you only want to change something specific to the dessert section, like adding a new dessert item or updating its description, you can edit the product.html file. This will only affect the dessert section and leave the rest of the menu untouched.

So, if you wanted to make the product title text bold, you have to goto the products.html page and then find the variable which contains the product title and update its css to bold.