Skip to main content

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 NameCorresponding URL
auth/users/login, /users/register, /users/auth
flatpagesCustom URL from Omnitron

And folders / files without a direct URL:

Folder NamePurpose
analyticsTemplates for analytics data
assetsFonts, images, icons
cmsTemplates for SEO
componentsComponents used throughout project
emailsEmails used for various actions
partialsPartial templates such as header / footer
registrationEmails for registration actions
socialaccountTemplates for social register / login (e.g. facebook)
utilsVarious JS utility files
webpackWebpack config files
widgetsTemplates for widgets created via Omnitron
tailwindTailwind config files
testTest 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.

accordionA 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.
breakpointA sub-component for pz-carousel. Allows for passing different carousel settings per breakpoint. Used in /product/:id.
buttonA custom button element. Has multiple pre-defined appearance options, supports icons, links and form submissions. Used in almost every page.
carouselA 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-itemIt 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.
expandableA component for creating expandable content areas via click events. Supports title, subtitle, icon, toggle icon, max breakpoint setting and more. Used in /list.
formA custom form element. Supports validation, serialization and fires custom events. Used in any page with forms, login, register, profile etc.
inputA custom input element. Supports all standard input attributes plus icon, width, mask, validation. Used in almost every page.
labelA custom label element, used to wrap pz-input elements. Supports auto-linking inputs and labels, position for label appearance and inline variants.
loaderA loader element, in the form of a spinning circle. Supports color and size options, show and hide methods. Used in many other components.
mini-basketThe component responsible for the mini basket found on header. Has methods for show / hide as well as highlighting a product.
modalA 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.
paginationA pagination component, used in listing pages. Supports per page, total, navigation, threshold, history API options and more.
selectA custom select element. Differs on desktop and mobile. Supports event handlers, dynamic option add / remove and more. Used in forms and many other places.
shareA component for share buttons to easily integrate it on any page. Supports icons, text, level and sub-items. Used in /product/:id.
tabA 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.
textareaA custom textarea element. Supports all standard attributes of textarea. Used within forms.
variantA component for displaying product variants. Used in /product/:id.
dateA component for formatting dates.
priceA component for formatting prices.