Templates & Components

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;

Folder Name	Corresponding URL
account	/users/
auth	/users/login, /users/register, /users/auth
basket	/baskets/basket
flatpages	Custom URL from Omnitron
layout	/(entry)
list	/list
orders	/orders/checkout
product	/product/:id
stores	/stores
styleguide	/styleguide

And folders / files without a direct URL:

Folder Name	Purpose
analytics	Templates for analytics data
assets	Fonts, images, icons
cms	Templates for SEO
components	Components used throughout project
emails	Emails used for various actions
partials	Partial templates such as header / footer
registration	Emails for registration actions
socialaccount	Templates for social register / login (e.g. facebook)
utils	Various JS utility files
webpack	Webpack config files
widgets	Templates for widgets created via Omnitron
tailwind	Tailwind config files
test	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.

Component	Description
accordion	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.
breakpoint	A sub-component for pz-carousel. Allows for passing different carousel settings per breakpoint. Used in /product/:id.
button	A custom button element. Has multiple pre-defined appearance options, supports icons, links and form submissions. Used in almost every page.
carousel	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.
combine-item	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.
expandable	A component for creating expandable content areas via click events. Supports title, subtitle, icon, toggle icon, max breakpoint setting and more. Used in /list.
form	A custom form element. Supports validation, serialization and fires custom events. Used in any page with forms, login, register, profile etc.
input	A custom input element. Supports all standard input attributes plus icon, width, mask, validation. Used in almost every page.
label	A custom label element, used to wrap pz-input elements. Supports auto-linking inputs and labels, position for label appearance and inline variants.
loader	A loader element, in the form of a spinning circle. Supports color and size options, show and hide methods. Used in many other components.
mini-basket	The component responsible for the mini basket found on header. Has methods for show / hide as well as highlighting a product.
modal	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.
pagination	A pagination component, used in listing pages. Supports per page, total, navigation, threshold, history API options and more.
select	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.
share	A component for share buttons to easily integrate it on any page. Supports icons, text, level and sub-items. Used in /product/:id.
tab	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.
textarea	A custom textarea element. Supports all standard attributes of textarea. Used within forms.
variant	A component for displaying product variants. Used in /product/:id.
date	A component for formatting dates.
price	A component for formatting prices.