At project root, you will see a standard set of config files. Frontend work is exclusively done inside the /templates folder while /omnife_project/omnife/ is the base for Django backend. You will notice that there’s also a folder called /omnife_base. This folder includes Django backend files too but they are specific to this project, while /omnife_project is a submodule shared between all websites made with Project Zero.
Inside /templates folder, you will find folders for each section of the website. First, let’s look at the folders that correspond a URL;
|/users/login, /users/register, /users/auth
|Custom URL from Omnitron
And folders / files without a direct URL:
|Templates for analytics data
|Fonts, images, icons
|Templates for SEO
|Components used throughout project
|Emails used for various actions
|Partial templates such as header / footer
|Emails for registration actions
|Templates for social register / login (e.g. facebook)
|Various JS utility files
|Webpack config files
|Templates for widgets created via Omnitron
|Tailwind config files
|Test cases and configs
Now, let’s take a look inside the /components folder.
As listed above, this folder includes all kinds of components which are used throughout the project. As subfolders, there are components in the form of Jinja macros. While you can use these if you must, keep in mind that they are considered mostly deprecated and their web components counterparts should be preferred.
With Project Zero, we try to take advantage of the latest technologies whenever possible. This includes using web components. Inside /components, you will find a folder called /web-components. For detailed information about each component, you can refer to their own documentation. We will only take a brief look at them here.
|A wrapper component for pz-expandable and when used, it changes expandable behaviour to be like an accordion; only one item may be expanded at a time. Used in /list.
|A sub-component for pz-carousel. Allows for passing different carousel settings per breakpoint. Used in /product/:id.
|A custom button element. Has multiple pre-defined appearance options, supports icons, links and form submissions. Used in almost every page.
|A component for creating sliders. Supports essential slider configuration options such as navigation, controls, space-between, loop, autoplay, items per view and more. Used in /product/:id.
|It is a component that is used to create the group products given in the combined product page. It also automatically shows variants and other features of the products.
|A component for creating expandable content areas via click events. Supports title, subtitle, icon, toggle icon, max breakpoint setting and more. Used in /list.
|A custom form element. Supports validation, serialization and fires custom events. Used in any page with forms, login, register, profile etc.
|A custom input element. Supports all standard input attributes plus icon, width, mask, validation. Used in almost every page.
|A custom label element, used to wrap pz-input elements. Supports auto-linking inputs and labels, position for label appearance and inline variants.
|A loader element, in the form of a spinning circle. Supports color and size options, show and hide methods. Used in many other components.
|The component responsible for the mini basket found on header. Has methods for show / hide as well as highlighting a product.
|A custom modal. Supports themes, with 4 of them pre-defined. Supports titles, icons, buttons, no buttons, confirmations and has methods for show / hide. Used for showing success / error information and more.
|A pagination component, used in listing pages. Supports per page, total, navigation, threshold, history API options and more.
|A custom select element. Differs on desktop and mobile. Supports event handlers, dynamic option add / remove and more. Used in forms and many other places.
|A component for share buttons to easily integrate it on any page. Supports icons, text, level and sub-items. Used in /product/:id.
|A component for tab menus. Supports themes with 2 of them pre-defined. Includes sub-components for menu, content, menu item and content item. Used in /users/auth and /account pages.
|A custom textarea element. Supports all standard attributes of textarea. Used within forms.
|A component for displaying product variants. Used in /product/:id.
|A component for formatting dates.
|A component for formatting prices.