Theme folder structure

A Dukaan theme primarily consists of three types of files:

1. HTML (.html)

2. CSS (.css)

3. Javascript (.js)

When you open the code editor, you can view the folder structure of a theme, which is organized as follows:

public/
│
├── css/
├── dist/ (ignore this folder for now, you won't need to change any files here)
├── js/
├── index.html
├── layout.html (root HTML file, also known as the parent HTML file)
├── product.html (contains code for the products page; it inherits layout.html)
├── search.html (contains code for the search page; it inherits layout.html)
├── category.html (contains code for the category products page; it inherits layout.html)
├── categories.html (contains code for the categories page; it inherits layout.html)
├── subcategories.html (contains code for the subcategories page; it inherits layout.html)
├── coupon.html (contains code for the coupons page; it inherits layout.html)
├── advance-category-templates.html
└── product-variant-templates.html

layout.html serves as the main parent file and is considered the root HTML file. All other files can be thought of as child files. The layout.html file is the base template that contains the common structure and elements for your website. You can use blocks in this file, which can then be customized in child templates.

For each specific page, there is a separate HTML file that extends the layout.html file. For example:

• For the products page, there is a products.html file.

• For the categories page, there is a categories.html file.

• Similarly, there are separate files for other pages like search, category products, subcategories, and coupons.

By organizing the theme in this manner, you can maintain a clean and modular code structure, making it easier to develop, customize, and maintain your website.

🤔 How is it different from frameworks like React?

In the Dukaan theme, files are organized based on pages rather than components, which is different from a component-based framework like React. In React, each component is usually defined in a separate file, allowing for reusability and a modular structure. However, in the Dukaan theme structure, one file corresponds to one page.

This means that the products.html file contains the entire code for the products page, the categories.html file contains the entire code for the categories page, and so on. This approach is more focused on organizing the code based on pages, rather than breaking down the code into smaller, reusable components.

Despite this page-based organization, templates can still be reused across multiple pages by using the layout.html file. This file serves as the base template for the entire website and contains the common structure and elements that are shared across different pages. By defining reusable templates in the layout.html file, you can ensure that these templates only need to be defined once and can be extended or customized by the child pages (e.g., products.html, categories.html, etc.) as needed.

In summary, while the Dukaan theme does not follow a component-based structure like React, it still allows for template reusability and modularity by utilizing the layout.html file as the base template for all pages.