Favourite Services
Now, users can mark services as favourites from the services page, and they will be able to see these favourites under the "Favourite Services" category in the new order page.
To add this feature to your theme, copy and paste the code of the services pages provided here into the respective theme. For example, if you are using the "eternity" theme, copy the code and paste it into your "eternity" theme. Please note that there may be custom changes in your own theme, and we do not want to override them.
It would be best if you update the services page for all themes, one by one, by allocating 3-5 minutes for each theme.
Simply copy these codes to your theme and paste them. Additionally, incorporate any custom changes you have already made, if applicable.
If you have a custom theme, please DM us and we will share the codes with you.
Bootstrap Theme
{% include 'header.twig' %}
<style>
.modal-backdrop {
opacity: 0.8 !important;
}
</style>
{% if contentText is not empty %}
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="well ">
{{ contentText }}
</div>
</div>
</div>
</div>
{% endif %}
<!-- Main variables *content* -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-pills ">
<li>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fas fa-filter"></span>
<span data-filter-active-category="true"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="max-height:400px; overflow-y:scroll;">
<li>
<a class="dropdown-item" href="javascript:void(0)" data-filter-category-id="All" onclick="show()">All</a>
</li>
{% for category in serviceCategory %}
<li>
<a class="dropdown-item" href="javascript:void(0)" onclick="show({{ category["category_id"] }})" data-filter-category-id="{{ category["category_id"] }}" data-filter-category-name="OWN SERVICES">{{category["category_name"] }}</a>
</li>
{% endfor %}
</ul>
</div>
</li>
<li class="pull-right search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" data-search-service="#service-table">
<span class="input-group-btn">
<button type="button" class="btn btn-default" data-filter-serch-btn="true">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</span>
</div>
</li>
</ul>
<div class="well well-float">
<table class="table" id="service-table">
<thead>
<tr>
<th style="max-width: 32px;"></th>
<th>{{lang["services.id"]}}</th>
<th class="">{{lang["services.name"]}}</th>
<th class="">{{lang["services.price"]}}</th>
<th class="">{{lang["services.min"]}}</th>
<th class="">{{lang["services.max"]}}</th>
{% if settings["service_avg_time"] != 1 %}
<th class="">{{lang["services.average_time"]}}</th>
{% endif %}
<th class="hidden-xs hidden-sm service-description__th">{{lang["services.desc"]}}</th>
</tr>
</thead>
<tbody>
{% for category in serviceCategory %}
<tr data-filter-table-category-id="{{category["category_id"] }}">
<td colspan="7">
<i class="{{ category["category_icon"] }}"></i>
<strong>{{ category["category_name"] }}</strong>
</td>
</tr>
{% for service in category['services'] %}
<tr data-filter-table-category-id="{{ category["category_id"] }}">
<td data-label="Favourite Service">
{{service["service_favourite"]}}
</td>
<td data-filter-table-service-id="{{ service["service_id"] }}">{{ service["service_id"] }}</td>
<td class="service-name" data-filter-table-service-name="true">{{ service["service_name"] }}</td>
<td>
{{convert_currency(service["service_price"])}}
</td>
<td>{{ service["service_min"] }}</td>
<td>{{ service["service_max"] }}</td>
{% if settings["service_avg_time"] != 1 %}
<td>
{{ service["service_avg_time"] }}
</td>
{% endif %}
<td class="service-description">{{service["service_description"]}}</td>
</tr>
{% endfor %}
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
{% include 'footer.twig' %}
<script>
function show(cat_id) {
var tbody = $("tbody tr");
if (cat_id === undefined) {
tbody.map(function (idx, el) {
var id = $(el).attr('data-filter-table-category-id');
$(el).show();
});
} else {
tbody.map(function (idx, el) {
var id = $(el).attr('data-filter-table-category-id');
if (cat_id == id) {
$(el).show();
} else {
$(el).hide();
}
});
}
}
</script>
Eternity Theme
{% include 'header.twig' %}
<div class="wrapper-content">
<div class="wrapper-content__header"></div>
<div
class="wrapper-content__body">
<!-- Main variables *content* -->
{% if user["auth"] != 1 %}
{% if contentText is not empty %}
<div id="block_334">
<div class="services-list">
<div class="bg"></div>
<div class="divider-top"></div>
<div class="divider-bottom"></div>
<div class="container-fluid">
<div class="row add-funds__form-alignment px-lg-4">
<div class="col-lg-8 col-md-offset-2">
<div class="component_card">
<div class="card">
{{ contentText }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
<div id="block_334">
<div class="services-list ">
<div class="bg"></div>
<div class="divider-top"></div>
<div class="divider-bottom"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="services_filters services_filter-margin component_filter_button component_filter_form_group component_filter_card">
<div class="card">
<div class="row">
<div class="col-md-auto mb-3 mb-md-0">
<div class="dropdown">
<a class="btn filter-primary w-sm-auto w-100 dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="far fa-filter"></span>
<span class="services-filter__active-category" data-filter-active-category="true"></span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" data-filter-category-id="All">All</a>
{% for category in serviceCategory %}
<a class="dropdown-item" data-filter-category-id="{{ category["category_id"] }}" data-filter-category-name="{{ category["category_name"] }}">{{ category["category_name"] }}</a>
{% endfor %}
</div>
</div>
</div>
<div class="col">
<div class="input-group">
<input type="text" class="form-control" data-search-service="#service-table-21">
<span class="input-group-append component_button_search">
<button class="btn btn-secondary" type="button" data-filter-serch-btn="true">
<i class="far fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="services-list__table">
<div class="table-bg component_table" id="service-table-21">
{% for category in serviceCategory %}
<div class="table-wr table-responsive mb-3" data-filter-table-wrapper="{{ category["category_id"] }}">
<table class="table">
<thead>
<tr>
<th style="max-width: 32px;"></th>
<th>{{lang["services.id"]}}</th>
<th class="nowwrap">{{lang["services.name"]}}</th>
<th class="nowwrap">{{lang["services.price"]}}</th>
<th class="nowwrap">{{lang["services.min"]}}</th>
<th class="nowwrap">{{lang["services.max"]}}</th>
{% if settings["service_avg_time"] != 1 %}
<th class="nowrap">{{lang["services.average_time"]}}</th>
{% endif %}
<th class="hidden-xs hidden-sm service-description__th">{{lang["services.desc"]}}</th>
</tr>
</thead>
<thead>
<th colspan="8" class="styles-services-default services-category">
<i class="{{ category["category_icon"] }}"></i>
{{ category["category_name"] }}
</th>
</thead>
<tbody>
{% for service in category['services'] %}
<tr data-filter-table-category-id="{{ category["category_id"] }}">
<td data-label="Favourite Service">
{{service["service_favourite"]}}
</td>
<td data-label="ID" data-filter-table-service-id="{{ service["service_id"] }}">{{ service["service_id"] }}</td>
<td data-label="Service" class="table-service" data-filter-table-service-name="true">{{ service["service_name"] }}</td>
<td data-label="Rate per 1000">
{{convert_currency(service["service_price"])}}
</td>
<td data-label="Min order">{{ service["service_min"] }}</td>
<td data-label="Max order">{{ service["service_max"] }}</td>
{% if settings["service_avg_time"] != 1 %}
<td>
{{ service["service_avg_time"] }}</td>
{% endif %}
<td>
{% if service["service_description"] %}
<!-- Modal -->
<div class="modal fade" id="servis{{ service[" service_id"] }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{ service["service_name"] }}
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left">
<p class="detail-data details-split-959">
{{ service["service_description"] }}
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-actions" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="btn btn-actions " data-toggle="modal" data-target="#servis{{ service[" service_id"] }}">
View
</a>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper-content__footer"></div>
</div>
</div>{% else %}
{% if contentText is not empty %}
<div id="block_334">
<div class="services-list">
<div class="bg"></div>
<div class="divider-top"></div>
<div class="divider-bottom"></div>
<div class="container-fluid">
<div class="row add-funds__form-alignment">
<div class="col-lg-12">
<div class="component_card">
<div class="card">
{{ contentText }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
<!-- Main variables *content* -->
<div id="block_334">
<div class="services-list ">
<div class="bg"></div>
<div class="divider-top"></div>
<div class="divider-bottom"></div>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="services_filters services_filter-margin component_filter_button component_filter_form_group component_filter_card">
<div class="card">
<div class="row">
<div class="col-md-auto mb-3 mb-md-0">
<div class="dropdown">
<a class="btn filter-primary w-sm-auto w-100 dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="far fa-filter"></span>
<span class="services-filter__active-category" data-filter-active-category="true"></span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="max-height:400px; overflow-y:scroll;">
<a class="dropdown-item" data-filter-category-id="All">All</a>
{% for category in serviceCategory %}
<a class="dropdown-item" data-filter-category-id="{{ category["category_id"] }}" data-filter-category-name="{{ category["category_name"] }}">{{ category["category_name"] }}</a>
{% endfor %}
</div>
</div>
</div>
<div class="col">
<div class="input-group">
<input type="text" class="form-control" data-search-service="#service-table-334">
<span class="input-group-append component_button_search">
<button class="btn btn-secondary" type="button" data-filter-serch-btn="true">
<i class="far fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="services-list__table">
<div class="table-bg component_table " id="service-table-334">
<div class="table-wr table-responsive mb-3 " data-filter-table-wrapper="{{ category["category_id"] }}">
{% for category in serviceCategory %}
<div class="table-wr table-responsive mb-3" data-filter-table-wrapper="{{ category["category_id"] }}">
<table class="table">
<thead>
<tr>
<th style="max-width: 32px;"></th>
<th>{{lang["services.id"]}}</th>
<th class="nowwrap">{{lang["services.name"]}}</th>
<th class="nowwrap">{{lang["services.price"]}}</th>
<th class="nowwrap">{{lang["services.min"]}}</th>
<th class="nowwrap">{{lang["services.max"]}}</th>
{% if settings["service_avg_time"] != 1 %}
<th class="nowrap">{{lang["services.average_time"]}}</th>
{% endif %}
<th class="hidden-xs hidden-sm service-description__th">{{lang["services.desc"]}}</th>
</tr>
</thead>
<thead>
<th colspan="8" class="styles-services-default services-category">
<i class="{{ category["category_icon"] }}"></i>
{{ category["category_name"] }}
</th>
</thead>
<tbody>
{% for service in category['services'] %}
<tr data-filter-table-category-id="{{ category["category_id"] }}">
<td data-label="Favourite Service">
{{service["service_favourite"]}}
</td>
<td data-label="ID" data-filter-table-service-id="{{ service["service_id"] }}">{{ service["service_id"] }}</td>
<td data-label="Service" class="table-service" data-filter-table-service-name="true">{{ service["service_name"] }}</td>
<td data-label="Rate per 1000">
{{convert_currency(service["service_price"])}}
</td>
<td data-label="Min order">{{ service["service_min"] }}</td>
<td data-label="Max order">{{ service["service_max"] }}</td>
{% if settings["service_avg_time"] != 1 %}
<td>
{{ service["service_avg_time"] }}</td>
{% endif %}
<td>
{% if service["service_description"] %}
<!-- Modal -->
<div class="modal fade" id="servis{{ service['service_id']}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{ service["service_name"] }}
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left">
<p class="detail-data details-split-959">
{{ service["service_description"] }}
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-actions" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="btn btn-actions " data-toggle="modal" data-target="#servis{{ service['service_id'] }}">
View
</a>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade " tabindex="-1" role="dialog" id="service-description-334">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<i style="color: #b4c6d3;" class="fas fa-times"></i>
</button>
<div class="service-description-content"></div>
</div>
</div>
</div>
</div>
</div>{% endif %}{% include 'footer.twig' %}
Simplyfy Theme
{% include 'header.twig' %}
<br>
<div class="wrapper-content__header"></div>
<div
class="wrapper-content__body">
<!-- Main variables *content* -->
<div id="block_31 " class="container-fluid col-lg-8" style=" margin:0 auto;">
{% if contentText is not empty %}
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-12">
<div class="faq-block__card">
<div class="card">
<div class="faq-block__header collapsed" data-toggle="collapse" data-target="#faq-block-252-4" aria-expanded="false" aria-controls="#faq-block-252-4">
<div class="faq-block__header-title">
<h4>INFORMATION</h4>
</div>
<div class="faq-block__header-icon">
<div class="style-text-dark faq-block__icon" style></div>
</div>
</div>
<div class="faq-block__body collapse" id="faq-block-252-4">
<div class="faq-block__body-description" style="padding-top: 8px">
{{ contentText }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
<br>
<div class="services-list ">
<div class="bg"></div>
<div class="divider-top"></div>
<div class="divider-bottom"></div>
<div class="container-fluid">
<div class="row">
<div class="col ">
<div class="services-filters component_filter_form_group component_filter_card mb-3">
<div class="card">
<div class="row">
<div class="col-md-auto mb-3 mb-md-0">
<div class="component_filter_button">
<div class="dropdown">
<a class="btn btn-big-primary w-sm-auto w-100 dropdown-toggle" href="#" role="button" id="dropdown-category-filter-251" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fal fa-filter"></span>
<span class="services-filter__active-category" data-filter-active-category="true"></span>
</a>
<div class="dropdown-menu" style="max-height:400px; overflow-y:scroll;">
<a class="dropdown-item" data-filter-category-id="All">All</a>
{% for category in serviceCategory %}
<a class="dropdown-item" data-filter-category-id="{{ category["category_id"] }}" data-filter-category-name="{{ category["category_name"] }}">{{ category["category_name"] }}</a>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col">
<div class="input-group">
<input type="text" class="form-control" data-search-service="#service-table-21">
<span class="input-group-append component_button_search">
<button class="btn btn-big-secondary" type="button" data-filter-serch-btn="true">
<i class="fas fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="services-list__table">
<div class="table-bg component_table ">
<div class="table-wr ">
<table class="table" id="service-table-21">
<thead>
<tr>
<th style="max-width: 32px;"></th>
<th>{{ lang['services.id'] }}</th>
<th class="width-service-name">{{ lang['services.name'] }}</th>
<th class="nowrap">{{ lang['services.price'] }}
per 1000</th>
<th class="nowrap">{{ lang['services.min'] }}</th>
<th class="nowrap">{{ lang['services.max'] }}</th>
{% if settings["service_avg_time"] != 1 %}
<th class="nowrap">Service Avg. Time</th>
{% endif %}
<th class="nowrap">Description</th>
</tr>
</thead>
<tbody>
{% for category in serviceCategory %}
<tr class="services-list-category-title" data-filter-table-category-id="{{ category["category_id"] }}">
<td colspan=" {% if settings["service_avg_time"] %} 8 {% else %} 7 {% endif %}">
<div class="w-100 ">
<div class="style-bg-primary-alpha-20 style-text-primary services-category text-center" style="font-size:23px; font-weight:bold;">
<i class="{{ category["category_icon"] }}"></i>
{{ category["category_name"] }}
</div>
</div>
</td>
</tr>
{% for service in category['services'] %}
<tr data-filter-table-category-id="{{ category["category_id"] }}">
<td data-label="Favourite Service">
{{service["service_favourite"]}}
</td>
<td data-filter-table-service-id="{{ service["service_id"] }}">{{ service["service_id"] }}</td>
<td class="table-service" data-filter-table-service-name="true">{{ service["service_name"] }}</td>
<td>
{{convert_currency(service["service_price"])}}
</td>
<td>{{ service["service_min"] }}</td>
<td>{{ service["service_max"] }}</td>
{% if settings["service_avg_time"] != 1 %}
<td>{{ service["service_avg_time"] }}</td>
{% endif %}
<td>
<!-- Modal -->
<div class="modal fade" id="servis{{ service["service_id"] }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{ service["service_name"] }}
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left">
<p class="detail-data details-split-959">
{{ service["service_description"] }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-actions" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="btn btn-actions " data-toggle="modal" data-target="#servis{{service["service_id"] }}">
View
</a>
</td>
</tr>
{% endfor %}
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br><br><br>
{% include 'footer.twig' %}
Radiance Theme -
{% include 'header.twig' %}
<!-- Main variables *content* -->
{# <style>
@media only screen and(min-width: 992px) {
.services-wrapper .s-col:last-child {
display: none
}
}
</style> #}
<style>
.fav-icon span i{
color:#fff;
}
</style>
<main>
<div class="container-fluid mt-3">
<div class="row">
<div class="col-lg-12">
<div class="card p-4">
<div class="row align-items-center">
<div class="col-md-auto col-12 d-flex align-items-center">
<div class="scrollt">
<ul class="platforms">
<li>
<button data-platform="all" data-filter-category-id="All" class="all active">
<i class="ri-list-ordered"></i>
</button>
</li>
<li>
<button data-platform="Instagram" data-filter-category-id="Instagram" class="instagram">
<i class="fab fa-instagram"></i>
</button>
</li>
<li>
<button data-platform="TikTok" class="tiktok">
<i class="fab fa-tiktok"></i>
</button>
</li>
<li>
<button data-platform="Twitter" class="twitter">
<i class="fab fa-twitter"></i>
</button>
</li>
<li>
<button data-platform="YouTube" class="youtube">
<i class="fab fa-youtube"></i>
</button>
</li>
<li>
<button data-platform="Telegram" class="telegram">
<i class="fab fa-telegram"></i>
</button>
</li>
<li>
<button data-platform="Facebook" class="facebook">
<i class="fab fa-facebook"></i>
</button>
</li>
<li>
<button data-platform="Spotify" class="spotify">
<i class="fab fa-spotify"></i>
</button>
</li>
<li>
<button data-platform="Discord" class="discord">
<i class="fab fa-discord"></i>
</button>
</li>
<li>
<button data-platform="Twitch" class="twitch">
<i class="fab fa-twitch"></i>
</button>
</li>
<li>
<button data-platform="Reddit" class="reddit">
<i class="fab fa-reddit"></i>
</button>
</li>
<li>
<button data-platform="Snapchat" class="snapchat">
<i class="fab fa-snapchat"></i>
</button>
</li>
<li>
<button data-platform="LinkedIn" class="linkedin">
<i class="fab fa-linkedin"></i>
</button>
</li>
<li>
<button data-platform="SoundCloud" class="soundcloud">
<i class="fab fa-soundcloud"></i>
</button>
</li>
<li>
<button data-platform="Pinterest" class="pinterest">
<i class="fab fa-pinterest"></i>
</button>
</li>
<li>
<button data-platform="Tumblr" class="tumblr">
<i class="fab fa-tumblr"></i>
</button>
</li>
<li>
<button data-platform="fav" class="all">
<i class="fab fa-gratipay"></i>
</button>
</li>
</ul>
</div>
</div>
<div class="col-lg">
<div class="search-services">
<div class="icon">
<i class="ri-search-line"></i>
</div>
<input type="text" class="textbox" name="query" id="filterServicesInput" placeholder="Search services" data-search-service="#service-table">
</div>
</div>
<div class="col-md-auto col-12">
<button class="btn btn-primary dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fal fa-filter"></span>
<span data-filter-active-category="true">Select Catogery</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#" data-filter-category-id="All">All</a>
{% for category in serviceCategory %}
<a class="dropdown-item" href="services#" data-filter-category-id="{{ category["category_id"] }}" data-filter-category-name="{{ category["category_name"] }}">{{ category["category_name"] }}</a>
{% endfor %}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="page overflow-hidden">
<div class="page-body pb-xl-6 mt-4">
<div class="services-head-row">
<div class="si-wrapper">
<div class="service-item mb-4">
<div class="s-row s-title">
<div class="s-col s-col-sm">
Fav
</div>
<div class="s-col s-col-sm">
ID
</div>
<div class="s-col s-title">
Service
</div>
<div class="s-col s-col-md">
Rate per 1
</div>
<div class="s-col s-col-md">
Min order
</div>
<div class="s-col s-col-md">
Max order
</div>
<div class="s-col s-col-lg">
Average time
</div>
<div class="s-col s-col-md"></div>
</div>
</div>
</div>
</div>
<div class="nothing-found" style="display: none;">
<div class="card card-bg">
<div class="card-body p-4 p-lg-5 text-center">
<div style="font-size: 64px;">
<i class="ri-search-eye-line w-color"></i>
</div>
<h3>There were no results!</h3>
<p>
We searched everywhere but found nothing. Try with different keywords.
</p>
</div>
</div>
</div>
<!-- start -->
{% for category in serviceCategory %}
<div class="category-card" data-category="{{ category["category_id"] }}">
<div class="si-header" data-filter-table-category-id="{{ category["category_id"] }}">
<h2 class="si-title">
{{ category["category_name"] }}
</h2>
</div>
<!-- end -->
{% for service in category['services'] %}
<div class="">
<div class="services-wrapper">
<div class="si-wrapper" data-filter-table-category-id="{{ category["category_id"] }}">
<div class="service-item" data-service-id="{{ service["service_id"] }}" data-platform="Instagram">
<div class="s-row">
<div class="s-col s-col-sm s-col-fav fav-icon" data-label="Favourite Service">
{{service["service_favourite"]}}
</div>
<div class="s-col s-col-sm s-col-id">
<span class="sp-serv-sm" data-filter-table-service-id="{{ service["service_id"] }}">{{ service["service_id"] }}</span>
</div>
<div class="s-col s-title">
<span class="sp-serv-title" data-filter-table-service-name="true">{{ service["service_name"] }}
<div class="align-items-center gap-1 mt-3 badgearea"></div>
</span>
</div>
<div class="s-col s-col-md s-col-c" data-title="Price Per">
<span class="sp-serv-sm">
{{convert_currency(service["service_price"])}}
</span>
</div>
<div class="s-col s-col-md s-col-c" data-title="Min order">
<span class="orlc min text-success">{{ service["service_min"] }}</span>
</div>
<div class="s-col s-col-md s-col-c" data-title="Max order">
<span class="orlc max text-danger">{{ service["service_max"] }}</span>
</div>
<div class="s-col s-col-lg s-col-avtime" data-title="Average time">
<span class="sp-serv-sm">{{ service["service_speed"] }}</span>
</div>
<!-- start -->
<td
class="service-description">
<!-- Modal -->
<div class="modal fade" id="servis{{ service['service_id'] }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-box">
<div class="m-header">
<div class="service-modal-id">
<span id="serviceModalID">{{ service["service_id"] }}</span>
</div>
<h5 class="m-title" id="exampleModalLabel">{{ service["service_name"] }}
</h5>
<button type="button" class="m-close" data-dismiss="modal" aria-label="Close">
<i class="ri-close-line"></i>
</button>
</div>
<div class="m-body">
<p id="serviceModalText" class="detail-data details-split-959">
{{ service["service_description"] }}
</p>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn-primary btn-actions" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
<div class="s-col s-col-md s-col-btn">
<button class="btn btn-primary btn-rounded btn-100 btn-sm" href="javascript:void(0)" data-toggle="modal" data-target="#servis{{ service['service_id'] }}">Description</button>
</div>
<a></a>
<div class="s-col s-col-md s-col-btn">
<button class="btn btn-secondary btn-rounded btn-100 btn-sm">
<a href="{{ site['url'] }}/?select_service_id={{ service['service_id'] }}&category_id={{category['category_id']}}">Buy</a>
</button>
</div>
</td>
</div>
</div>
</div>
</div>
<!-- end -->
</div>
{% endfor %}
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- wrapper End -->
{% include 'footer.twig' %}