-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpage-xbox.php
160 lines (150 loc) · 6.87 KB
/
page-xbox.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<?php
/**
* The template for displaying all single posts
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
*
* @package WordPress
* @subpackage Twenty_Twenty
* @since 1.0.0
*/
get_header();
?>
<body class="spil-bg">
<h1 id="entry-title">Xbox</h1>
<section id="primary" class="content-area spil entry">
<main id="main" class="site-main entry-content">
<nav id="filtrering" class="alignfull">
<label for="emballage" class="emballage-label">Emballage</label>
<select name="emballage" id="emballage" onchange="filterEmballage(this)">
<option value="alt">Alt</option>
<option value="Med">Med</option>
<option value="Uden">Uden</option>
</select>
<button class="filter valgt" data-spil="alle">Alle</button>
</nav>
<section id="popup">
<article id="popup-article">
<div id="luk"></div>
<section class="popup-1"><img class="picture" src="" alt="" /></section>
<section class="popup-2">
<h2 class="konsol"></h2>
<h1 class="spil-title"></h1>
<h2 class="pris"></h2>
<h3 class="emballage popup-emballage"></h3>
<div class="popup-buttons">
<button class="btn popup-kurv">Tilføj til kurv</button>
<button class="btn popup-favorite"><img src="/img/star2.png" alt=""></button>
</div>
<a href="#">tjek om det er tilgængeligt i butikken</a>
</section>
</article>
</section>
<article id="spil-oversigt" class="alignwide"></article>
</main>
<template>
<article class="spil-container">
<section class="menu-1"><img class="picture" src="" alt="" /></section>
<section class="menu-2">
<h2 class="spil-title"></h2>
<p class="konsol"></p>
<p class="emballage"></p>
<h2 class="pris">
</p>
</section>
</article>
</template>
<script>
const siteUrl = "<?php echo esc_url(home_url('/')); ?>";
let xbox = [];
let categories = [];
let indhold = [];
let liste;
let skabelon;
let filterspil = "alle";
let filterselectedemballage = "alt";
document.addEventListener("DOMContentLoaded", start);
function start() {
liste = document.querySelector("#spil-oversigt");
skabelon = document.querySelector("template");
getJson();
}
function filterEmballage(target) {
filterselectedemballage = target.value;
displayGames();
}
async function getJson() {
// Fetch all custom post types with the slug "xbox"
const url = "https://vijasan.dk/kea/10_eksamen/nintendopusheren/wp-json/wp/v2/xbox?per_page=100";
// Fetch basic categories
const catUrl = "https://vijasan.dk/kea/10_eksamen/nintendopusheren/wp-json/wp/v2/categories?per_page=100";
let response = await fetch(url);
let catResponse = await fetch(catUrl);
xbox = await response.json();
categories = await catResponse.json();
displayGames();
createButtons();
}
function createButtons() {
categories.forEach(cat => {
//console.log(cat.id);
if (cat.name == "Xbox" || cat.name == "Xbox 360" || cat.name == "Xbox One" || cat.name == "Xbox Series X") {
document.querySelector("#filtrering").innerHTML += `<button class="filter" data-xbox="${cat.id}">${cat.name}</button>`
}
})
addEventListenersToButtons();
}
function displayGames() {
console.log(xbox);
console.log(filterselectedemballage);
liste.innerHTML = "";
console.log({ filterspil });
xbox.forEach(xbox => {
// Check filterspil
if (filterspil != "alle" && !xbox.categories.includes(parseInt(filterspil)))
return;
if (filterselectedemballage != "alt" && xbox.emballage != filterselectedemballage)
return;
const clone = skabelon.cloneNode(true).content;
clone.querySelector(".spil-title").textContent = xbox.title.rendered;
clone.querySelector(".pris").textContent = xbox.pris;
clone.querySelector(".konsol").textContent = xbox.konsol;
clone.querySelector(".emballage").textContent = xbox.emballage + " emballage";
clone.querySelector(".picture").src = xbox.billede;
clone.querySelector(".picture").alt = xbox.billednavn;
clone.querySelector(".spil-container").addEventListener("click", () => visDetaljer(xbox));
liste.appendChild(clone);
});
}
function visDetaljer(xbox) {
popup.style.display = "flex";
popup.querySelector(".spil-title").textContent = xbox.title.rendered;
popup.querySelector(".pris").textContent = xbox.pris;
popup.querySelector(".konsol").textContent = xbox.konsol;
popup.querySelector(".emballage").textContent = xbox.emballage + " emballage";
popup.querySelector(".picture").src = xbox.billede;
popup.querySelector(".picture").alt = xbox.billednavn;
}
document.querySelector("#luk").addEventListener("click", () => (popup.style.display = "none"));
function addEventListenersToButtons() {
document.querySelectorAll(".filter").forEach(btn => {
btn.addEventListener("click", filter);
});
}
function filter() {
filterspil = this.dataset.xbox
if (this.dataset.xbox === undefined) {
filterspil = "alle"
}
document.querySelector("h1").textContent = this.textContent;
document.querySelectorAll("#filtrering .filter").forEach(elm => {
elm.classList.remove("valgt");
});
this.classList.add("valgt");
displayGames();
}
</script>
</body>
<?php
get_footer();
?>