Table of Contents
Update 26.07.2024: Adding show more button
As an update, I tried to implement a method to show x amount of autos and a “Show more button” to load more autos on click. I added a message when reaches the end of the list. This code is showing 6 HubDB autos which are checked as active and load more 6 autos when clicking the load more button.
{% require_head %}
{%- import '/@marketplace/maka_Agency/POWER THEME/modules/macros/_image.html' as macros_img -%}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
{% end_require_head %}
{% set dynamic_page_hubdb_table_id = 58713535 %}
<div class="container-fluid">
<div class="row main-container">
{% set total_rows = hubdb_table_rows(58713535, "orderBy=-hs_created_at") %}
{% set initial_limit = 6 %}
{% set current_count = 0 %}
{% for row in total_rows %}
{% if row.active %}
{% if current_count < initial_limit %}
<div class="col-lg-4 col-md-6 col-sm-12 mb-4 card-container" data-active="true">
<div class="card">
{% if row.occasion %}
<div class="ribbon">Occasion</div>
{% endif %}
<div class="card-content">
<img src="{{ row.auto_image_url }}">
<h2>{{ row.name }}</h2>
<h6>{{ row.hs_name }}</h6>
<h4>{{ row.merk }} {{ row.model }}</h4>
<h3>{{ row.price_tag }}</h3><br>
<a class="pwr-cta_button" href="/template-auto-detail/{{ row.hs_path }}?auto_id={{ row.hs_id }}">Bekijk uitvoeringen <span>{{ row.name }}</span></a>
</div>
</div>
</div>
{% else %}
<div class="col-lg-4 col-md-6 col-sm-12 mb-4 card-container" data-active="true" style="display: none;">
<div class="card">
{% if row.occasion %}
<div class="ribbon">Occasion</div>
{% endif %}
<div class="card-content">
<img src="{{ row.auto_image_url }}">
<h2>{{ row.name }}</h2>
<h6>{{ row.hs_name }}</h6>
<h4>{{ row.merk }} {{ row.model }}</h4>
<h3>{{ row.price_tag }}</h3><br>
<a class="pwr-cta_button" href="/template-auto-detail/{{ row.hs_path }}?auto_id={{ row.hs_id }}">Bekijk uitvoeringen <span>{{ row.name }}</span></a>
</div>
</div>
</div>
{% endif %}
{% set current_count = current_count + 1 %}
{% endif %}
{% endfor %}
</div>
{% if total_rows|length > initial_limit %}
<div class="row">
<div class="col-12 text-center">
<div class="pwr-sec-cta__cta--vertical pwr-cta pwr-cta--primary-border aos-init aos-animate" data-aos="fade-in" data-aos-delay="50">
<br><button id="loadMore" class="pwr-cta_button">Meer auto's laden</button></div>
<h3 id="endOfListMessage" style="display: none;">U bent aan het einde van de lijst gekomen.</h3>
</div>
</div>
{% endif %}
</div>
{% require_css %}
<style>
{% scope_css %}
.main-container {
width: 100%;
}
#loadMore {
background-color: #fff;
}
.card {
position: relative;
padding: 16px 16px 32px 16px;
font-size: 24px;
background-color: #EDFFF4;
border-radius: 8px;
display: flex;
flex-direction: column;
border: none;
}
.ribbon {
position: absolute;
background: #171B25;
color: white;
padding: 4px 16px;
font-size: 14px;
font-weight: bold;
border-radius: 16px;
}
@keyframes blinker {
50% { opacity: 0; }
}
.card-content {
position: relative;
z-index: 1;
}
.bekijk {
background: #016894;
color: white;
padding: 10px 16px;
font-size: 16px;
font-weight: bold;
border-radius: 24px;
}
.bekijk:hover {
transition: all .15s linear;
background: #171B25;
color: white;
}
@media only screen and (max-width: 768px) {
.main-container { flex-wrap: wrap; }
}
#endOfListMessage {
margin-top: 20px;
font-size: 18px;
color: #6c757d;
}
{% end_scope_css %}
</style>
{% end_require_css %}
{% require_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
var currentCount = {{ initial_limit }};
var totalRows = {{ total_rows|length }};
var loadMoreBtn = document.getElementById('loadMore');
var endOfListMessage = document.getElementById('endOfListMessage');
loadMoreBtn.addEventListener('click', function() {
var cardContainers = document.querySelectorAll('.card-container[data-active="true"]');
var displayed = 0;
for (var i = currentCount; i < cardContainers.length; i++) {
if (displayed < 6) {
cardContainers[i].style.display = 'block';
displayed++;
} else {
break;
}
}
currentCount += displayed;
if (currentCount >= cardContainers.length) {
loadMoreBtn.style.display = 'none';
endOfListMessage.style.display = 'block';
}
});
// Initially show the first set of cards with animation
var cardContainers = document.querySelectorAll('.card-container[data-active="true"]');
for (var i = 0; i < currentCount; i++) {
cardContainers[i].style.display = 'block';
cardContainers[i].classList.add('show');
}
});
</script>
{% end_require_js %}
Update 03.07.2024: Responsiveness design
I faced a challenge that adding a new row to HubDB crashed the responsiveness. Then I realized that I used a bootstrap class which is not understandable by HubStop. In the code below, I have added the heading that gets the bootstrap library and now the responsiveness also works. I also added a active checkbox in HubDB to show the auto if it is active.
{% require_head %}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
{% end_require_head %}
{% set dynamic_page_hubdb_table_id =58713535 %}
<div class="container-fluid">
<div class="row main-container">
{% for row in hubdb_table_rows(58713535, "orderBy=-hs_created_at") %}
{% if row.active %}
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
{% if row.occasion %}
<div class="ribbon">Occasion</div>
{% endif %}
<div class="card-content">
<img src="{{ row.auto_image_url }}">
<h2>{{ row.hs_name }}</h2>
<h6>{{ row.name }}</h6>
<h4>{{ row.merk }} {{ row.model }}</h4>
<h3>{{row.price_tag}}</h3><br>
<a class="bekijk" href="/auto-detail/{{ row.hs_path }}?ID={{row.hs_id}}" target="_blank">Bekijk uitvoeringen <span>{{ row.name }}</span></a>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% require_css %}
<style>
{% scope_css %}
.main-container {
width: 100%;
}
.card {
position: relative;
padding: 16px 16px 32px 16px;
font-size: 24px;
background-color: #EFFAFF;
border-radius: 8px;
display: flex;
flex-direction: column;
border: none;
}
.ribbon {
position: absolute;
background: #171B25;
color: white;
padding: 4px 16px;
font-size: 14px;
font-weight: bold;
border-radius: 16px;
/*animation: blinker 1.5s linear infinite; */
}
@keyframes blinker {
50% { opacity: 0; }
}
.card-content {
position: relative;
z-index: 1;
}
.bekijk {
background: #016894;
color: white;
padding: 10px 16px;
font-size: 16px;
font-weight: bold;
border-radius: 24px;
}
.bekijk:hover {
transition: all .15s linear;
background: #171B25;
color: white;
}
@media only screen and (max-width: 768px){
.main-container {flex-wrap: wrap;}
}
{% end_scope_css %}
</style>
{% end_require_css %}
Main challenge
For Noordlease the task 1 was to create a HubDB which then the listing page will be filled with the HubDB content and each item will have its own page. For this, I came up with the idea to create a HubDB table and use it in a global module, so they can use it anywhere in the pages. They can also simply add a new auto and it will be added to the content automatically.
The base code which just gets the proper data from HubDB and also have a ribbon which will just show when a car is listed as occasion is as below:
<div class="main-container row">
{% for row in hubdb_table_rows(58713535, "orderBy=-hs_created_at") %}
<div class="card col-lg-4 col-md-6 col-sm-12">
{% if row.occasion %}
<div class="ribbon">Occasion</div>
{% endif %}
<div class="card-content">
<img src="{{ row.auto_image_url }}">
<h2>{{ row.hs_name }}</h2>
<h6>{{ row.name }}</h6>
<h4>{{ row.merk }} {{ row.model }}</h4><br>
<a class="bekijk" href="./test/{{ row.hs_path }}" target="_blank">Bekijk uitvoeringen <span>{{ row.name }}</span></a>
</div>
</div>
{% endfor %}
</div>
{% require_css %}
<style>
{% scope_css %}
.main-container {
width: 100%;
display: flex;
}
.card {
position: relative;
padding: 16px;
font-size: 24px;
margin: 16px;
background-color: #EFFAFF;
border-radius: 8px;
display: flex;
flex-direction: column;
}
.ribbon {
position: absolute;
background: #016894;
color: white;
padding: 4px 16px;
font-size: 14px;
font-weight: bold;
border-radius: 16px;
/*animation: blinker 1.5s linear infinite; */
}
@keyframes blinker {
50% { opacity: 0; }
}
.card-content {
position: relative;
z-index: 1;
}
.bekijk {
background: #016894;
color: white;
padding: 10px 16px;
font-size: 16px;
font-weight: bold;
border-radius: 24px;
}
.bekijk:hover {
transition: all .15s linear;
background: #171B25;
color: white;
}
@media only screen and (max-width: 768px){
.main-container {flex-wrap: wrap;}
}
{% end_scope_css %}
</style>
{% end_require_css %}