Plugins
Templates
Blocks
Template Setup Guides

Barberly - Barbershops Template

Template page link: https://zeroqode.com/template/barberly---barbershops-template-1542718479218x638662767384985600

Overview

Barberly is a responsive and stylish no-code template built to help barbershops. It comes with booking and e-commerce functionality, as well as an admin dashboard.

Automate your booking process by building your application without code on top of this template.

Sell your merchandise using an e-commerce page and monitor the activity of the site via the built-in dashboard. This template is ready to be used as is, or can be customized to meet your design needs.

Features

  • Landing Page

  • Booking functionality

  • Admin dashboard

  • Personal Profile

  • Ability to add and remove products to shop

  • Adding and deleting barbers

  • Fully mobile responsive design

Database Structures

User

The user data holds necessary details about users. Some of the fields include Birthdate, description, product, Schedule, profilePhoto, services, userDreamBox (takes a list of products as value), userOrderItems (also takes List of Order Items) and so on.

Addresses

This data type contains the geographical locations of service providers. It has only one field, the adress

Feedback

Feedback holds two fields that include the customer (associated user) and the feedbacktext (body of the feedback).

Hour

In this data structure, there are two fields; the number of hour s and vacant(takes either yes or no as value).

Images

The images displayed on the Barberly is stored and organized inside this data structure. It contains just two fields that include the image itself and the slideNumber (takes a number value).

OrderItem

Barberly also features products that can be purchased by users and this data structure stores the data involved and manages it. It has fields that include the count (quantity of the item), the product and the total amount of selected items.

Product

This structure handles fields like the productFullPrice, productImage, productSalePrice, productDescription, productOrderItem and productTitle.

Reviews

Reviews can be made about a service provider and they are stored and managed within this structure. The Reviews data structure contains two fields; the reviewImage and reviewText.

Schedule

Schedule as a data structure holds fields like the associated barber (user), the associated customer, the day ( takes date as value), hour, service ( this field takes List of Services as value) and comment .

Service

This is the data structure that contains details about the service being offered. The fields within this data type include duration, interval ( takes a date interval as value), name, price and quantity.

Pages

index

This is the landing page for Barberly, with a great look and feel it features an about section, a section showing an overview of services customers should expect to get, expert barbers on the platform, images of satisfied customers and a contact section.

Custom States

States

Elements

Notes

images

Group Our works

This state holds the pictures displayed on the associated element

visible

Group Our works

This state takes a value of either yes or no and displays an image on the view when the value is yes

imageItemNum

RepeatingGroup Images left

imageItemNum takes a number and has a default value of zero. It uses this values to determine how the image changes on the left repeating group element.

imageSlideNum

RepeatingGroup ImagesMiddle, RepeatingGroup Images right,

Uses a number to determine an image's slide number within the associated elements

step

RepeatingGroup ImagesMiddle

step has a default value of zero

count

RepeatingGroup ImagesMiddle

count also takes a number value for the number of slides on this element

visibleImg

RepeatingGroup ImagesMiddle

This holds a text value of the image visible at a given time

slideNum

RepeatingGroup ImagesMiddle

This state simply determines the slide number for the associated element.

currentUser

Group Our Shop

Determines the current user and takes a value of user type.

state

Group 1st barber pic, Group 2nd barber pic, Group 3rd barber pic, Group 4th barber pic,

This state activates when the associated elements are hovered on the page and it displays a view.

visibleGroup

Group Login/signUp/Container/Main, Group userAccount, Group Login, Group SignUp, Popup Login/Signup, FloatingGroup Order

This state is used to bring elements like the Popup for Login/SignUp to view.

visibleGroupCount

FloatingGroup Order, Group orderContainer, Group timeChoice, Group mainDate, Group chosenDay, RepeatingGroup Hour

Used to calculate the total amount of selected services on the FloatingGroup Order

barber

FloatingGroup Order, Group orderContainer, Group timeChoice, Group mainDate, Group chosenDay, RepeatingGroup Hour

Takes a User as value and determines the user on the FloatingGroup Order element.

date

FloatingGroup Order, Group orderContainer, Group timeChoice, Group mainDate, Group chosenDay, RepeatingGroup Hour

Sets and holds the date value selected during a booking

service

FloatingGroup Order, Group orderContainer, Group timeChoice, Group mainDate, Group chosenDay, RepeatingGroup Hour

Determines the services selected

time

FloatingGroup Order, Group orderContainer, Group timeChoice, Group mainDate, Group chosenDay, RepeatingGroup Hour

Sets the time selected during a booking

email

FloatingGroup Order, Group orderContainer, Group timeChoice, Group mainDate, Group chosenDay, RepeatingGroup Hour

Holds the email of the associated user during a booking

monthOffset

RepeatingGroup date, FloatingGroup Order, Group orderContainer, Group Calender, Expression days

Takes a number value used to calculate the monthly offset

myaccount

This page uses a tabbed view to showcase user details that include Appointments, My Bag, DreamBox, Profile and Shop

Custom State

States

Element

Notes

currentUser

myaccount

This state takes a user as value and it is used on the entire page.

order1

myaccount

order1 takes a list as value, determines and displays a list of orders made

showCount

myaccount

This state takes a number value.

tab

myaccount

Takes a text as value with default text of 'appointment'. This state determines which tab item is actively displayed at a given time.

temp

Custom State

States

Element

Notes

date

temp

Uses current date to set and display a view

admin

This provides owner with admin privileges to effect changes on Bookings, Shop and Staff.

Custom State

States

Elements

Notes

count

RG Staff

Used to determine user's number of items.

cellNumber

RG product, RG schedulesActive

This state takes a number value as the index for RepeatingGroup elements

visible

Group blockContainer, Block Bookings, Block Staff, Block Shop

This state also takes a number with a default of 1 and it is used to alternate between views.

store

The store page displays all the featured products for sale.

States

Elements

Notes

showCount

store

determines view that is displayed

currentUser

store

Used to determine the active user

visibleGroup

Group logIn/signUp/Container

This state is used to display hidden elements like the Login/Signup popup views.

order1

store

Takes a list as value and determines the list of items displayed

visible

FloatingGroup menu

This takes yes or no as value and has a default value of False. It determines when the associated element is actively displayed.

loading

FloatingGroup menu

Displays the associated element's view only when true and it has a default value of True

tab

store

Takes a text as value with default text of 'catalog'. This state determines which tab item is actively displayed at a given time.

Specific Reference

Things to note

The Header and Footer are built as Reusable element visible on all pages.

Demo to preview the template