With “Load more” games button, player or visitor can expand a group of games easily.
Let’s get started how to create it. this tutorial require a coding.
Make sure you’re using CloudArcade v1.2.9 or newer
If you’re not familiar with Custom Page, read this tutorial
First step, open your active theme folder, then create a php file called “page-load-more.php”, you can rename “load-more” with other page name you want later.
Put code below inside “page-load-more.php”
<?php
$page_title = 'Load More';
$meta_description = 'Load more';
require_once( TEMPLATE_PATH . '/functions.php' ); //Load theme functions
include TEMPLATE_PATH . "/includes/header.php";
?>
<ul id="game-list"></ul>
<button id="load-more">Load more</button>
<script type="text/javascript">
var last_offset = 0;
var load_amount = 12;
document.addEventListener("DOMContentLoaded", function(event) {
$('#load-more').click(()=>{
fetch_games(load_amount, 'new');
});
function fetch_games(amount, sort_by) {
$.ajax({
url: "/includes/fetch.php",
type: 'POST',
dataType: 'json',
data: {amount: amount, offset: last_offset, sort_by: sort_by},
complete: function (data) {
append_content(JSON.parse(data.responseText));
}
});
}
function append_content(data){
last_offset += data.length;
data.forEach((item)=>{
$("#game-list").append('<li>'+item['title']+'</li>');
});
if(data.length < load_amount){
$('#load-more').hide();
}
}
})
</script>
<?php
include TEMPLATE_PATH . "/includes/footer.php"
?>
Visit the page ( yourdomain.com/load-more ), It will look like this:
If you click “Load more” button, game list will be shown
The looks is very basic, we will make it fit with current theme later.
Let me explain the fuctions
- Number of games you want to load
- Call fetch games function. We want to get 12 games, sort by newest. There also another options ‘new’, ‘random’, ‘popular’ and ‘likes’
- PHP script path to get game list from the database, if you’re installing CloudArcade in a sub-folder, change path to “/your-folder/includes/fetch.php”
- “type” must be “POST” or it will not returning anything
- Get the list or result and append it as HTML
- If there are no more games, remove the “Load more” button
Let’s implement grid for game list to make it match with current theme design
Update all the code from “page-load-more.php” with code below:
<?php
$page_title = 'Load More';
$meta_description = 'Load more';
require_once( TEMPLATE_PATH . '/functions.php' ); //Load theme functions
include TEMPLATE_PATH . "/includes/header.php";
?>
<div class="container">
<div class="game-container">
<div class="row" id="game-list">
<?php
$games = get_game_list('new', 12)['results'];
foreach ( $games as $game ) { ?>
<?php include TEMPLATE_PATH . "/includes/grid.php" ?>
<?php } ?>
</div>
</div>
</div>
<div class="text-center">
<button id="load-more" class="btn btn-primary mb-5">Load more</button>
</div>
<script type="text/javascript">
var last_offset = 12;
var load_amount = 12;
document.addEventListener("DOMContentLoaded", function(event) {
$('#load-more').click(()=>{
fetch_games(load_amount, 'new');
});
function fetch_games(amount, sort_by) {
$.ajax({
url: "/includes/fetch.php",
type: 'POST',
dataType: 'json',
data: {amount: amount, offset: last_offset, sort_by: sort_by},
complete: function (data) {
append_content(JSON.parse(data.responseText));
}
});
}
function append_content(data){
last_offset += data.length;
data.forEach((game)=>{
let html = '<div class="col-md-2 col-sm-3 col-4 item-grid">';
html += '<a href="/game/'+game['slug']+'">';
html += '<div class="list-game">';
html += '<div class="list-thumbnail"><img src="'+game['thumb_2']+'" class="small-thumb" alt="'+game['title']+'"></div>';
html += '<div class="list-content">';
html += '<div class="list-title">'+game['title']+'</div>';
html += '</div></div></a>';
html += '</div>';
$("#game-list").append(html);
});
if(data.length < load_amount){
$('#load-more').hide();
}
}
})
</script>
<?php
include TEMPLATE_PATH . "/includes/footer.php"
?>
This is the preview
You can put script above on homepage (theme) or anywhere.
You can also fetch games by category
The script difference is, you need to add “category_id”. “sort_by” parameter is not used for Category section, sorted by newest.
Where to get / see category ID ?
Open “Categories” page ( Admin panel ), then click “Edit” icon on a category, you will see category ID.
