amazon-modern-widgets
Version:
Amazon Modern Widgets for Amazon affiliate websites based on Amazon PAAPI v5
254 lines (194 loc) • 8.76 kB
HTML
<html lang="fr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<title>Amazon Product Card</title>
<style>
body {
background: none transparent;
}
a {
color: #FFF;
text-decoration:none;
}
a:hover {
color: #CCC;
}
.card {
max-width: 800px;
min-height: 120px;
background-color: #333;
/* border: 2px solid orange;*/
}
.card-title {
font-size: 1em;
margin-bottom: 20px;
}
.card-img-container {
overflow: hidden;
}
/* Quick-zoom Container */
.card-img {
transform-origin: 0%;
transition: transform 1s, filter 3s ease-in-out;
display: none;
}
/* The Transformation */
.card-img:hover {
transform: scale(1.1);
}
.card-body {
display: none;
padding: 8px;
}
.card-text{
margin-top: 10px;
color:#FFF;
font-size: 0.6em;
position: absolute;
bottom: 10px;
}
.amazon-prime {
display: none;
}
.amazon{
color: #555;
}
.amazon svg{
margin-right: 5px;
}
.btn{
font-weight: bold;
margin-right: 30px;
}
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<!-- Product Card -->
<div class="card">
<div class="row">
<!-- Card Image -->
<div class="col-4 col-sm-3 card-img-container">
<a href="#" class="link" target="_blank"><img src="" alt="Amazon product" class="card-img img-fluid rounded-start"/></a>
</div>
<!-- Card Body -->
<div class="col-8 col-sm-8">
<div class="card-body">
<!-- Production caption-->
<h1 class="card-title text-truncate"><a href="#" class="caption" target="_blank" rel="nofollow"></a></h1>
<!-- Product Price-->
<a href="#" class="btn btn-success price link position-relative" role="button" target="_blank" rel="nofollow"></a>
<!-- Button link to Amazon product page -->
<a href="#" class="btn btn-warning amazon link d-none d-sm-inline" role="button" target="_blank" rel="nofollow">
<span class="buy"></span>
</a>
<!-- Amazon prime eligibility -->
<img
src="data:image/png;base64,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"
alt="Amazon Prime" class="amazon-prime" />
<!-- Last update timestamp -->
<p class="card-text d-none d-sm-block"><span class="timestamp"></span></p>
</div>
</div>
</div>
<!-- Loading Spinner -->
<div class="text-center m-5 spinner">
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<script>
// Feed the Card HTML template from Amazon information
$(function () {
lang = {
fr : {
buy : '➕ Plus d\'infos',
update : '↻ Dernière mise à jour : ',
not_available : "Non disponible"
},
es : {
buy : '🚀 Yo voy !',
date : '↻ Ultima actualización : ',
not_available : "No disponible"
},
en : {
buy : '🚀 Let\'s go !',
date : '↻ Last product update : ',
not_available : "Not available"
}
}
// Find the langage code
var languageCode = $('html').attr('lang');
// Get the product param
let urlParams = new URLSearchParams(window.location.search);
let url;
// If we know the product to display
if (urlParams.get('id')){
let id = urlParams.get('id');
url = "product?id=" + id;
}
// We have a product to search
else if (urlParams.get('keyword')){
let keyword = urlParams.get('keyword');
url = "product?keyword=" + keyword;
}
// Call the card API
$.getJSON(url, function (product) {
if (product === null){
$(".card").css('display', 'none');
console.log( "Amazon product not found" );
} else {
// We add the information
$(".card-img").attr("src", product.image);
$(".caption").html(product.title);
$(".caption").attr("href", product.url);
$(".link").attr("href", product.url);
$(".timestamp").html(lang[languageCode].update + new Date(product.timestamp).toLocaleString());
$(".buy").html(lang[languageCode].buy);
// If the product is available or not in stock
if (product.price == -1){
$(".price").html(lang[languageCode].not_available);
} else {
$(".price").html(product.price);
}
// If the product is elligible to prime
//if (product.prime) {
// $(".amazon-prime").css('display', 'inline');
//}
// If the product has savings
if (product.savings != 0) {
$(".price").html(product.price + "<span class=\"position-absolute top-0 start-100 translate-middle badge savings blink rounded-pill bg-danger\">-"+product.savings+"%<span class=\"visually-hidden\">Savings</span></span>")
}
// We hide the spinners
$(".spinner").css('display', 'none');
// We show the block
$(".card-img").css('display', 'block');
$(".card-body").css('display', 'block');
}
// We send a message to the parent
window.parent.postMessage("ready", "*");
}).fail(function() {
$(".card").css('display', 'none');
console.log( "Amazon product not found" );
});
});
</script>
</body>
</html>