Business Profile & Branch

Directory

File	Folder Link
M - BusinessProfile.php & BusinessBranch.php	\\SYNAS\Allan\DOCUMENTATION\Module\Business Profile\rckuc\wolf\app\models
V - All files	\\SYNAS\Allan\DOCUMENTATION\Module\Business Profile\rckuc\wolf\app\views
C - BusinessProfileController.js & BusinessBranchController.js	\\SYNAS\Allan\DOCUMENTATION\Module\Business Profile\rckuc\wolf\app\controllers
backend.php	\\SYNAS\Allan\DOCUMENTATION\Module\Business Profile\rckuc\wolf\app\layouts
style.css	\\SYNAS\Allan\DOCUMENTATION\Module\Business Profile\rckuc\wolf\admin\themes\black_and_white
backend.js, business.js & img_handler.js & bulk_action.js	\\SYNAS\Allan\DOCUMENTATION\Module\Business Profile\rckuc\wolf\admin\javascript
wolf_business_profile.sql & wolf_business_branch.sql	\\SYNAS\Allan\DOCUMENTATION\Module\Business Profile

Step 1

Update: backend.php

Insert scripts file in <head> section
Add new tab for "Business Profile"

<head>
    <link href="<?php echo URI_PUBLIC; ?>wolf/admin/themes/<?php echo Setting::get('theme'); ?>/switch_button.css" id="css_theme" media="screen" rel="Stylesheet" type="text/css" />
    
    ...
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/business.js"></script>
</head>

<!-- Add 'Business Profile' Tab -->
<body id="body_<?php echo $ctrl.'_'.Dispatcher::getAction(); ?>">
    <ul>
        <li id="page-plugin" class="plugin"><a href="<?php echo get_url('business_profile'); ?>"<?php if ($ctrl=='business_profile' || $ctrl=='business_branch' || $ctrl=='business_document') echo ' class="current"'; ?>><?php echo __('Business Profile'); ?></a></li>
    </ul>
</body>

<head>
    <link href="<?php echo URI_PUBLIC; ?>wolf/admin/themes/<?php echo Setting::get('theme'); ?>/switch_button.css" id="css_theme" media="screen" rel="Stylesheet" type="text/css" />
    
    ...
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/business.js"></script>
</head>

<!-- Add 'Business Profile' Tab -->
<body id="body_<?php echo $ctrl.'_'.Dispatcher::getAction(); ?>">
    <ul>
        <li id="page-plugin" class="plugin"><a href="<?php echo get_url('business_profile'); ?>"<?php if ($ctrl=='business_profile' || $ctrl=='business_branch' || $ctrl=='business_document') echo ' class="current"'; ?>><?php echo __('Business Profile'); ?></a></li>
    </ul>
</body>

Step 2

Update: style.css

/* Business Profile */
#tab_container {
  display: flex;
  flex-direction: column;
  padding: 5px 10px 0 10px;
}

#tab_container > #mainTabs {
  height: auto;
  margin: 0.5rem 0 0 0;
}

#tab_container > #mainTabs li a {
  text-shadow: none;
  border: none !important;
}

#tab_container > #mainTabs li a:hover {
  background-color: white;
  color: black;
}

#tab_container > #mainTabs li a.current {
  background-color: white;
  color: black;
  font-weight: 700;
}

.view_link {
  display: none;
}

.website_link_validation p,
.contact_number_validation p {
  color: red;
  display: none;
  margin: 0 3px;
}

i.drag {
  display: none;
  cursor: grab;
}

i.drag:hover {
  color: blue;
}

.contact_information > div > div,
.social_account > div > div {
  display:flex;
  align-items: flex-start;
  margin: 3px 0;
}

span.add_contact,
span.add_social_account {
  width: 150px;
}

.contact_input_container > *,
.social_input_container > * {
  margin-right: 3px;
}

.website_link_validation {
  position: relative;
}

.website_link_validation i.error {
  right: 0;
}

a.textbox {
  font-size: 94%;
  text-decoration: none;
  color: black;
  margin: 0 3px;
}

select.textbox {
  padding: 4.5px 10px;
}

.add_contact:hover,
.add_social_account:hover {
  color: green;
}

.remove_contact:hover,
.remove_social_account:hover,
.remove_hour:hover {
  color: red;
}

.country_code_option {
  width: 100px;
  height: 27px;
  border-right: none;
  margin: 0;
}

.contact_template,
.social_template {
  display: none;
}

span.icon_style {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding-left: 3px;
}

span.remove_icon {
  padding-left: 0;
  padding-right: 6px;
}

span.remove_icon i {
  font-size: 18px;
}

.float_right_photo {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 70px;
}

.float_right_photo input[value='Click to Upload'] {
  cursor: pointer;
}

.time_container,
.added_hour {
  display: flex;
  align-items: center;
}

.time_container {
  margin-top: 1rem;
  align-items: flex-start;
}

.custom_note {
  display: flex;
  flex-direction: column;
}

.hour_container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.weekday_container {
  width: 220px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.weekday_container > * {
  margin: 0.5rem;
}

.hour_container > div {
  margin-top: 0.5rem;
}

.time_container > *,
.hour_container > div:first-child > *,
.added_hour > * {
  margin: 0 3px;
}

.time_container > span,
.added_hour > span {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.time_container > .weekday {
  width: 90px;
}

.text_grey {
  color: #ccc;
}

i.error {
  color: red;
  position: absolute;
}

input.error,
textarea.error {
  border: 1px solid red !important;
  outline-color: red;
}

span.add_hour {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

i.remove {
  margin: 0 0.5rem 0 1rem;
}

.change_icon:hover,
.reset_icon:hover {
  color:green;
}

.add_hour:hover {
  cursor: pointer;
  color: green;
}

.add_hour.error:hover,
span.error:hover {
  cursor: no-drop;
  color: black;
}

.on_off_label {
  width: 30px;
}

span.reset_icon {
  display: none;
}

.inactive *,
.inactive {
  color : #ccc;
}

.profile_data_social {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.profile_data_social > div,
.switch_container {
  display: flex;
  align-items: center;
}

.profile_data_social .preview_icon {
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
}

.switch_container {
  margin: 5px 0;
}

#website_label,
#social_label,
#operating_hour_label {
  margin: 0 0.5rem;
}

.switch_label {
  margin: 0 0.5rem;
}

.profile_data_social div:nth-child(1) h5:nth-child(1), 
.social_type {
  width: 80px;
} 

.social_type {
  margin: 0 5px;
}

.social_col_1 {
  width: auto;
}

.profile_data_social div:nth-child(1) h5:nth-child(2) {
  width: 257px;
} 

.social_link {
  width: 200px;
}

.operating_hour_from_profile label:nth-child(1) {
  display:inline-block;
  width: 90px;
  margin-bottom: 10px;
}

.dropdown_icon:hover {
  cursor: pointer;
  color: green;
}

.dropdown_icon.down {
  transform: rotate(-180deg);
}

.dropdown_icon {
  transition: transform .3s ease-in-out;
}

p.buttons {
  margin: 1rem 0;
}

#button_container {
  display: flex;
  align-items: center;
}

input[type='file'].input_type_file {
  display: none;
}

input[type='button'].click_to_upload {
  cursor: pointer;
}

input[type='button'].view_image_container {
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 90%;
  margin: 0 auto;
}

.social_input_container input[type='button'].view_image_container {
  width: 28px;
  height: 28px;
  border: 1px solid #ccc;
  margin: 0;
}

.sort_by_column {
  cursor: pointer;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: black;
}

.sort_by_column:hover {
  color: green;
}

.geographic_coordinate {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.geographic_coordinate h5 {
  margin: 0 0.5rem;
  width: 150px;
}

.latitude,
.longitude,
.map_marker_image {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0.5rem 0;
}

  .map_marker_image {
  align-items: flex-start;
}

.geographic_coordinate i.error {
  left: auto;
  right: 0.1rem;
}

.operating_hour {
  display: flex;
}

.operating_hour > div:nth-child(2) {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.operating_hour > div:nth-child(2) > label {
  margin-left: 0.5rem;
}

/* ------------ Business Document ------------ */
.dropdown-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dropdown-title > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dropdown-title > img {
  height: 15px;
  width: 15px;
  cursor: pointer;
}

.template_div {
  display: none;
}

.section_div > textarea {
  display: none;
  margin-bottom: 1rem;
}

.dropdown-icon {
  cursor: pointer;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid black;
  transition: all 0.3s ease-in-out;
}

.dropdown-icon.down {
  transform: rotate(180deg);
}


.page-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.page-container > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dt_layout {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.dt_layout > div {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.dt_layout > div > label {
  cursor: pointer;
}

/* Business Profile */
#tab_container {
  display: flex;
  flex-direction: column;
  padding: 5px 10px 0 10px;
}

#tab_container > #mainTabs {
  height: auto;
  margin: 0.5rem 0 0 0;
}

#tab_container > #mainTabs li a {
  text-shadow: none;
  border: none !important;
}

#tab_container > #mainTabs li a:hover {
  background-color: white;
  color: black;
}

#tab_container > #mainTabs li a.current {
  background-color: white;
  color: black;
  font-weight: 700;
}

.view_link {
  display: none;
}

.website_link_validation p,
.contact_number_validation p {
  color: red;
  display: none;
  margin: 0 3px;
}

i.drag {
  display: none;
  cursor: grab;
}

i.drag:hover {
  color: blue;
}

.contact_information > div > div,
.social_account > div > div {
  display:flex;
  align-items: flex-start;
  margin: 3px 0;
}

span.add_contact,
span.add_social_account {
  width: 150px;
}

.contact_input_container > *,
.social_input_container > * {
  margin-right: 3px;
}

.website_link_validation {
  position: relative;
}

.website_link_validation i.error {
  right: 0;
}

a.textbox {
  font-size: 94%;
  text-decoration: none;
  color: black;
  margin: 0 3px;
}

select.textbox {
  padding: 4.5px 10px;
}

.add_contact:hover,
.add_social_account:hover {
  color: green;
}

.remove_contact:hover,
.remove_social_account:hover,
.remove_hour:hover {
  color: red;
}

.country_code_option {
  width: 100px;
  height: 27px;
  border-right: none;
  margin: 0;
}

.contact_template,
.social_template {
  display: none;
}

span.icon_style {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding-left: 3px;
}

span.remove_icon {
  padding-left: 0;
  padding-right: 6px;
}

span.remove_icon i {
  font-size: 18px;
}

.float_right_photo {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 70px;
}

.float_right_photo input[value='Click to Upload'] {
  cursor: pointer;
}

.time_container,
.added_hour {
  display: flex;
  align-items: center;
}

.time_container {
  margin-top: 1rem;
  align-items: flex-start;
}

.custom_note {
  display: flex;
  flex-direction: column;
}

.hour_container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.weekday_container {
  width: 220px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.weekday_container > * {
  margin: 0.5rem;
}

.hour_container > div {
  margin-top: 0.5rem;
}

.time_container > *,
.hour_container > div:first-child > *,
.added_hour > * {
  margin: 0 3px;
}

.time_container > span,
.added_hour > span {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.time_container > .weekday {
  width: 90px;
}

.text_grey {
  color: #ccc;
}

i.error {
  color: red;
  position: absolute;
}

input.error,
textarea.error {
  border: 1px solid red !important;
  outline-color: red;
}

span.add_hour {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

i.remove {
  margin: 0 0.5rem 0 1rem;
}

.change_icon:hover,
.reset_icon:hover {
  color:green;
}

.add_hour:hover {
  cursor: pointer;
  color: green;
}

.add_hour.error:hover,
span.error:hover {
  cursor: no-drop;
  color: black;
}

.on_off_label {
  width: 30px;
}

span.reset_icon {
  display: none;
}

.inactive *,
.inactive {
  color : #ccc;
}

.profile_data_social {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.profile_data_social > div,
.switch_container {
  display: flex;
  align-items: center;
}

.profile_data_social .preview_icon {
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
}

.switch_container {
  margin: 5px 0;
}

#website_label,
#social_label,
#operating_hour_label {
  margin: 0 0.5rem;
}

.switch_label {
  margin: 0 0.5rem;
}

.profile_data_social div:nth-child(1) h5:nth-child(1), 
.social_type {
  width: 80px;
} 

.social_type {
  margin: 0 5px;
}

.social_col_1 {
  width: auto;
}

.profile_data_social div:nth-child(1) h5:nth-child(2) {
  width: 257px;
} 

.social_link {
  width: 200px;
}

.operating_hour_from_profile label:nth-child(1) {
  display:inline-block;
  width: 90px;
  margin-bottom: 10px;
}

.dropdown_icon:hover {
  cursor: pointer;
  color: green;
}

.dropdown_icon.down {
  transform: rotate(-180deg);
}

.dropdown_icon {
  transition: transform .3s ease-in-out;
}

p.buttons {
  margin: 1rem 0;
}

#button_container {
  display: flex;
  align-items: center;
}

input[type='file'].input_type_file {
  display: none;
}

input[type='button'].click_to_upload {
  cursor: pointer;
}

input[type='button'].view_image_container {
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 90%;
  margin: 0 auto;
}

.social_input_container input[type='button'].view_image_container {
  width: 28px;
  height: 28px;
  border: 1px solid #ccc;
  margin: 0;
}

.sort_by_column {
  cursor: pointer;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: black;
}

.sort_by_column:hover {
  color: green;
}

.geographic_coordinate {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.geographic_coordinate h5 {
  margin: 0 0.5rem;
  width: 150px;
}

.latitude,
.longitude,
.map_marker_image {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0.5rem 0;
}

  .map_marker_image {
  align-items: flex-start;
}

.geographic_coordinate i.error {
  left: auto;
  right: 0.1rem;
}

.operating_hour {
  display: flex;
}

.operating_hour > div:nth-child(2) {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.operating_hour > div:nth-child(2) > label {
  margin-left: 0.5rem;
}

/* ------------ Business Document ------------ */
.dropdown-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dropdown-title > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dropdown-title > img {
  height: 15px;
  width: 15px;
  cursor: pointer;
}

.template_div {
  display: none;
}

.section_div > textarea {
  display: none;
  margin-bottom: 1rem;
}

.dropdown-icon {
  cursor: pointer;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid black;
  transition: all 0.3s ease-in-out;
}

.dropdown-icon.down {
  transform: rotate(180deg);
}


.page-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.page-container > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dt_layout {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.dt_layout > div {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.dt_layout > div > label {
  cursor: pointer;
}

Step 3

Copy all related files to your project and import sql table

Component

Module

Business Profile & Branch

Directory

Step 1

Step 2

Step 3