Dynamische Funktionen verwandeln einen statischen Shopify-Store in eine interaktive und ansprechende Plattform. In diesem Beitrag erfährst du, wie du mit JavaScript und JSON dynamische Elemente wie Echtzeit-Produktfilter, Live-Countdown-Timer oder Bestandsabfragen erstellst und dabei eine nahtlose Verbindung zu Shopifys Backend-Daten herstellst.
Shopify verwendet JSON, um Produktinformationen, Metafields und weitere Daten auszugeben. Mit JavaScript kannst du diese JSON-Daten auf der Client-Seite dynamisch manipulieren, um Inhalte in Echtzeit anzupassen oder anzuzeigen.
liquid:
<script>
var productData = {{ product | json }};
</script>
Mit diesem Code wird ein JavaScript-Objekt erzeugt, das alle Produktdetails enthält. Dadurch kannst du direkt im Frontend auf die Daten zugreifen und sie dynamisch verändern.
JavaScript ermöglicht dynamische Seitenaktualisierungen ohne Reload. So kannst du Produktlisten filtern, Countdown-Timer aktualisieren oder Bestandsdaten anzeigen – alles in Echtzeit, ohne den Benutzerfluss zu unterbrechen.
Stell dir vor, du möchtest Kund:innen erlauben, Produkte anhand bestimmter Tags zu filtern – zum Beispiel „Sale“ oder „Neu“. Mit JSON-Daten und JavaScript lässt sich das einfach umsetzen.
html:
<div id="filter-controls">
<button data-tag="sale">Sale</button>
<button data-tag="new">New Arrivals</button>
<button data-tag="all">All Products</button>
</div>
<div id="product-list"></div>
javascript:
<script>
// Assume productData is a JSON object containing an array of products
const productList = document.getElementById('product-list');
const filterControls = document.getElementById('filter-controls');
// Function to render products on the page
function renderProducts(products) {
productList.innerHTML = products.map(product => `
<div class="product-item">
<h3>${product.title}</h3>
<p>${product.description}</p>
</div>
`).join('');
}
// Event delegation for filter buttons
filterControls.addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON') {
const tag = event.target.getAttribute('data-tag');
let filteredProducts;
if(tag === 'all') {
filteredProducts = productData.products;
} else {
filteredProducts = productData.products.filter(product =>
product.tags.includes(tag)
);
}
renderProducts(filteredProducts);
}
});
// Initial render
renderProducts(productData.products);
</script>
Dieser Code reagiert auf Klicks auf die Buttons und filtert die Produkte anhand des gewählten Tags, ohne dass die Seite neu geladen werden muss.
Ein Countdown-Timer kann das Gefühl von Dringlichkeit erzeugen und so den Absatz von Sonderaktionen oder limitierten Angeboten steigern.
liquid:
{% if product.metafields.custom.countdown_end %}
{% assign deal_end_time = product.metafields.custom.countdown_end %}
{% else %}
{% assign deal_end_time = '2025-03-01T23:59:59Z' %}
{% endif %}
<div id="countdown-timer"
data-deal-end-time="{{ deal_end_time | date: '%Y/%m/%d %H:%M:%S' }}">
</div>
javascript:
<script>
(function() {
const countdownElement = document.getElementById('countdown-timer');
const dealEndTimeStr = countdownElement.dataset.dealEndTime;
const dealEndTime = new Date(dealEndTimeStr).getTime();
function updateCountdown() {
const now = new Date().getTime();
const distance = dealEndTime - now;
if (distance <= 0) {
countdownElement.innerHTML = "Deal Closed";
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
countdownElement.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
}
setInterval(updateCountdown, 1000);
updateCountdown();
})();
</script>
Dieser Countdown bezieht das Enddatum aus einem Metafield und aktualisiert sich automatisch jede Sekunde.
Für erweiterte Funktionen kannst du Shopifys Storefront API oder Ajax API nutzen. Damit lässt sich Live-Daten wie Lagerbestände oder Bewertungen abrufen, ohne dass die Seite neu geladen werden muss.
javascript:
fetch('/api/storefront/products')
.then(response => response.json())
.then(data => {
// Process data to update the UI
console.log(data);
})
.catch(error => console.error('Error fetching data:', error));
Diese Methode ermöglicht es dir, Daten dynamisch zu laden und sofort im Frontend anzuzeigen oder zu aktualisieren.
Durch den Einsatz von JavaScript und JSON kannst du deinen Shopify-Store in eine dynamische, interaktive Plattform verwandeln. Echtzeitfilter, Live-Countdowns oder Bestandsabfragen erhöhen nicht nur das Engagement, sondern verbessern auch die User Experience.
Wenn du dabei Best Practices für Performance und Fehlerbehandlung beachtest, erhältst du ein wartungsfreundliches, performantes Setup, das deine Kund:innen begeistert.
UNHYDE ist eine Web- und Shopify-Agentur mit Sitz in München, spezialisiert auf Webentwicklung, UX/UI-Design und Conversion-Optimierung.
Unsere Mission ist es, performante digitale Plattformen zu schaffen, die messbare Ergebnisse und nachhaltiges Wachstum liefern.
Als anerkannter Shopify Partner hat UNHYDE weltweit erfolgreiche Online-Shops und Webplattformen entwickelt.
📩 Kontakt: hello@unhyde.me
Wir helfen dir, deinen Shopify-Store interaktiv, technisch stark und konversionsorientiert zu gestalten.
Kostenloses Erstgespräch
Jetzt Kontaktieren