tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

added gtm and custom event tracking

Browse Source
This commit is contained in:
zach
2026-02-25 14:12:11 -05:00
parent 2ebb8eb127
commit 5d9655e196
15 changed files with 103 additions and 2273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/pages/partials/card-modal.astro
View File

@@ -27,15 +27,12 @@ const card = await db.query.cards.findFirst({
}
});
const nearMint = card?.prices.find(price => price.condition === "Near Mint") || null;
const calculatedAt = new Date(nearMint?.calculatedAt || 0);
function timeAgo(date: Date | null) {
if (!date) return "Not applicable";
function timeAgo(date: any) {
if (date==0) return "never";
const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
const seconds = Math.floor((Date.now() - date) / 1000);
const intervals = {
const intervals: Record<string, number> = {
year: 31536000,
month: 2592000,
day: 86400,
@@ -51,6 +48,22 @@ function timeAgo(date: any) {
return "just now";
}
// Get the most recent calculatedAt across all prices
const calculatedAt = (() => {
if (!card?.prices?.length) return null;
// Extract all valid calculatedAt timestamps
const dates = card.prices
.map(p => p.calculatedAt)
.filter(d => d) // remove null/undefined
.map(d => new Date(d));
if (!dates.length) return null;
// Return the most recent one
return new Date(Math.max(...dates.map(d => d.getTime())));
})();
const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
const conditionAttributes = (price: any) => {
@@ -90,6 +103,7 @@ const ebaySearchUrl = (card: any) => {
return `https://www.ebay.com/sch/i.html?_nkw=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${card?.number}&LH_Sold=1&Graded=No&_dcat=183454${card?.productId}`;
};
---
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
<div class="modal-content">
@@ -105,7 +119,7 @@ const ebaySearchUrl = (card: any) => {
<div class="row g-4">
<div class="col-sm-12 col-md-3">
<p class="text-secondary">{card?.set?.setName}</p>
<div class="position-relative d-inline-block"><img src={`/cards/${card?.productId}.jpg`} class="card-image img-fluid rounded" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/noImage.webp'"><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setCode} /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy={card?.energyType} /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity={card?.rarityName} /></span></div>
<div class="position-relative d-inline-block"><img src={`/cards/${card?.productId}.jpg`} class="card-image img-fluid rounded" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/noImage.webp'" onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setCode} /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy={card?.energyType} /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity={card?.rarityName} /></span></div>
<div class="d-flex flex-row justify-content-between mt-2">
<div class="p text-secondary">{card?.Artist}</div>
</div>
@@ -187,3 +201,24 @@ const ebaySearchUrl = (card: any) => {
</div>
</div>
</div>
<script is:inline>
async function copyImage(img) {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
// draw the real image pixels
ctx.drawImage(img, 0, 0);
// convert to blob
canvas.toBlob(async (blob) => {
await navigator.clipboard.write([
new ClipboardItem({ "image/png": blob })
]);
console.log("Copied image via canvas.");
});
}
</script>

8
src/pages/partials/cards.astro
View File

@@ -41,6 +41,7 @@ const formatPrice = (price:any) => {
};
const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
---
{(start === 0) &&
<script define:vars={{ totalHits }} is:inline>
@@ -52,8 +53,8 @@ const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Hea
<div class="inventory-button position-relative float-end shadow-filter text-center d-none">
<div class="inventory-label pt-2">+/-</div>
</div>
<div hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal">
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
<div hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="const cardTitle = this.querySelector('#cardImage').getAttribute('alt'); dataLayer.push({'event': 'virtualPageview', 'pageUrl': this.getAttribute('hx-get'), 'pageTitle': cardTitle, 'previousUrl': '/pokemon'});">
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image image-grow w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
</div>
<div class="row row-cols-5 gx-1 price-row mb-2">
{card.prices
@@ -77,9 +78,10 @@ const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Hea
</div>
<div>{card.variant}<span class="d-none">{card.productId}</span></div>
</div>
))}
{start + 20 < totalHits &&
<div hx-post="/partials/cards" hx-trigger="revealed" hx-include="#searchform" hx-target="#cardGrid" hx-swap="beforeend" hx-on--after-request="afterUpdate(event)">
Loading...
</div>
}
}