Hey @cyrell
Den ATC Button Code zu ändern wird keine leichte Aufgabe sein denn es sind sehr viele Moving Parts mit im Spiel.
Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Um den “Zum Warenkorb” Button so zu ändern, dass er direkt den Warenkorb öffnet und nicht nur ein Pop-up anzeigt, müssen wir den Button-Click-Ereignis so anpassen, dass er den Benutzer zur Warenkorb-Seite weiterleitet. Dafür können wir das JavaScript des Themes anpassen.
Hier ein paar Schritte, wie du das machen kannst:
- Finde das Skript, das den “Add to Cart” Button verwaltet: Normalerweise ist dies in einer der JavaScript-Dateien des Themes zu finden, die sich in den assets-Ordner befinden. Es könnte auch direkt im HTML-Template selbst sein.
- Ändere das Verhalten des Buttons: Du musst das Standard-Click-Ereignis des “Add to Cart” Buttons überschreiben, sodass es den Benutzer zur Warenkorb-Seite weiterleitet.
- Anpassen des JavaScript-Codes: Hier ist ein Beispiel, wie du das erreichen kannst. Wir werden eine JavaScript-Funktion hinzufügen, die den Benutzer nach dem Hinzufügen zum Warenkorb zur Warenkorb-Seite weiterleitet.
JavaScript anpassen:
Suche die Datei, die für das Hinzufügen zum Warenkorb verantwortlich ist, normalerweise ist das eine Datei wie theme.js oder main.js im assets-Ordner. Füge diesen Code hinzu:
document.addEventListener('DOMContentLoaded', function() {
// Funktion zum Umleiten zur Warenkorb-Seite
function redirectToCart() {
window.location.href = '/cart';
}
// Finde alle "Add to Cart" Buttons
var addToCartButtons = document.querySelectorAll('button[name="add"]');
addToCartButtons.forEach(function(button) {
button.addEventListener('click', function(event) {
event.preventDefault(); // Verhindert das Standardverhalten des Buttons
// Produkt-ID und weitere Daten könnten hier gesammelt werden, wenn notwendig
var form = button.closest('form');
var formData = new FormData(form);
// Füge das Produkt zum Warenkorb hinzu
fetch('/cart/add.js', {
method: 'POST',
body: formData,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json'
}
})
.then(response => response.json())
.then(data => {
// Nach erfolgreichem Hinzufügen, zur Warenkorb-Seite umleiten
redirectToCart();
})
.catch(error => {
console.error('Error:', error);
alert('Beim Hinzufügen zum Warenkorb ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.');
});
});
});
});
- Event-Listener: Wir warten, bis das DOM vollständig geladen ist, bevor wir den Event-Listener hinzufügen.
- Button-Click-Ereignis: Wir fügen jedem “Add to Cart” Button einen Click-Event-Listener hinzu.
- Verhindern des Standardverhaltens: Wir verhindern das Standardverhalten des Buttons, um das eigene Verhalten zu definieren.
- Formulardaten sammeln und Produkt hinzufügen: Wir sammeln die Formulardaten und verwenden die Fetch-API, um das Produkt zum Warenkorb hinzuzufügen.
- Umleitung zur Warenkorb-Seite: Nach dem erfolgreichen Hinzufügen des Produkts wird der Benutzer zur Warenkorb-Seite weitergeleitet.
- Kompatibilität: Stelle sicher, dass dieser Code mit deinem aktuellen Shopify-Setup kompatibel ist. Je nach Theme können Anpassungen erforderlich sein.
- Erweiterung: Wenn du mehrere Varianten oder andere spezifische Daten benötigst, passe den Code entsprechend an.
Wie gesagt, bei weiteren Fragen bitte unsere oben-verlinkte Experten kontaktieren.
Hoffe das hilft dir weiter! 
