| 1 |
<?php |
| 2 |
function flying_scripts_view_optimize_more() { |
| 3 |
?> |
| 4 |
<style> |
| 5 |
.grid { |
| 6 |
display: flex; |
| 7 |
flex-wrap: wrap; |
| 8 |
} |
| 9 |
|
| 10 |
.box { |
| 11 |
width: 300px; |
| 12 |
margin: 10px; |
| 13 |
background: white; |
| 14 |
border-radius: 7px; |
| 15 |
overflow: hidden; |
| 16 |
box-shadow: 2px 5px 5px 5px #ececec; |
| 17 |
} |
| 18 |
|
| 19 |
.box .info { |
| 20 |
padding: 0px 15px 15px 15px; |
| 21 |
} |
| 22 |
</style> |
| 23 |
|
| 24 |
<div id="optimize-more"> |
| 25 |
</div> |
| 26 |
|
| 27 |
|
| 28 |
<script> |
| 29 |
fetch('https://optimize-more.wpspeedmatters.com/products.json') |
| 30 |
.then(response => { |
| 31 |
return response.json() |
| 32 |
}) |
| 33 |
.then(sections => { |
| 34 |
let html = ""; |
| 35 |
sections.forEach(section => { |
| 36 |
html += `<h3>${section.title}</h3>`; |
| 37 |
html += `<div class="grid">`; |
| 38 |
section.products.forEach(product => { |
| 39 |
html += `<div class="box"> |
| 40 |
<img src="${product.picture}" width="300px" height="150px"/> |
| 41 |
<div class="info"> |
| 42 |
<h3>${product.name}</h3> |
| 43 |
<p>${product.description}</p> |
| 44 |
<a href="${product.buttonLink}" target="_blank"><button class="button button-primary">${product.buttonText}</button></a> |
| 45 |
</div> |
| 46 |
</div>` |
| 47 |
}) |
| 48 |
html += `</div>`; |
| 49 |
}) |
| 50 |
document.getElementById("optimize-more").innerHTML = html; |
| 51 |
}) |
| 52 |
.catch(err => { |
| 53 |
console.log(err) |
| 54 |
document.getElementById("optimize-more").innerText = "Error!"; |
| 55 |
}) |
| 56 |
</script> |
| 57 |
|
| 58 |
<?php |
| 59 |
} |
