Mehrweg Pfand Programmieren für Kollektion „Getränke“

[automatensnack]

Hallo,

ich hätte noch eine Frage, bei der ich bisher nicht wirklich weitergekommen bin.

Ich möchte sicherstellen, dass jedes Getränk, das sich in der Kollektion "Getränke" befindet, automatisch mit einem Pfandartikel im Wert von 0,25 € versehen wird. Es soll also unmöglich sein, ein Getränk ohne den dazugehörigen Pfandartikel zu kaufen. Wenn zum Beispiel 4 Getränke gekauft werden, sollen auch automatisch 4 Pfandartikel hinzugefügt werden. Wenn ein Getränk oder ein Pfandartikel gelöscht wird, soll auch der entsprechende Artikel automatisch entfernt werden. Ein Pfandartikel darf niemals einzeln gekauft werden; er muss immer in Kombination mit einem Getränk erworben werden, ansonsten sollte der Kauf fehlschlagen.

Ich möchte soweit es geht keine Apps kaufen und monatlich bezahlen ich würde das versuchen auch selber zu programmieren, allerdings weiß ich nicht wo ich das ganze programmieren muss bzw. in welcher Liquid Datei etc..

Ich hoffe, das war verständlich erklärt. Falls nicht, schicke ich euch gerne eine Beispielseite.

Vielen Dank im Voraus für eure Hilfe und Zeit!

Liebe Grüße

[Gabe]

Hey @automatensnack 

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren. Du hast auch nicht erwähnt um welches Theme es sich hier handelt denn alles Theme arbeiten ja im Code anders.

Hier ein paar generelle Tipps zu deinem oben-beschriebenen Use-Case:

Um so ein Pfandprogramm in Shopify zu implementieren, muss man in die verschiedenen Liquid-Dateien einsteigen, um die Logik für das Hinzufügen und Entfernen von Pfandartikeln zu erstellen. Im Grunde empfehlen wir das mit einem unserer zertifizierten Shopify Experten zu machen die das direkt in euer Code einbauen können. Wenn du es DIY 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!

Hier ein paar generelle Schritte, die man befolgen kann:

• Pfandartikel erstellen
  • Erstelle einen Artikel in deinem Shopify-Store, der den Pfand darstellt, und setze den Preis auf einen Nennwert wie 0,25 € und nenne diesen Artikel z.B. "Pfand".
• Tag für die Kollektion "Getränke"
  • Stelle sicher, dass alle Artikel in der Kollektion "Getränke" ein spezifisches Tag wie pfand haben.

Anpassungen in den Liquid-Dateien

Du musst die Logik für den Warenkorb (cart.liquid) und möglicherweise die Produktseiten anpassen. Wir fangen mit der cart.liquid an.

• Schritt 1: Anpassungen in cart.liquid
  • Gehe in das cart.liquid und füge diesen Code hinzu:

{% assign pfand_item_id = 'ID_DES_PFANDARTIKELS' %}
{% assign pfand_price = 0.25 %}

<script>
  document.addEventListener("DOMContentLoaded", function() {
    function updateCart() {
      let cartItems = {{ cart.items | json }};
      let pfandCount = 0;
      let getraenkeCount = 0;
      
      cartItems.forEach(item => {
        if (item.product.tags.includes('pfand')) {
          getraenkeCount += item.quantity;
        } else if (item.variant_id == {{ pfand_item_id }}) {
          pfandCount += item.quantity;
        }
      });

      if (getraenkeCount > pfandCount) {
        // Pfandartikel hinzufügen
        for (let i = 0; i < (getraenkeCount - pfandCount); i++) {
          fetch('/cart/add.js', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json'
            },
            body: JSON.stringify({ id: {{ pfand_item_id }}, quantity: 1 })
          }).then(response => response.json()).then(data => {
            location.reload();
          });
        }
      } else if (getraenkeCount < pfandCount) {
        // Pfandartikel entfernen
        cartItems.forEach(item => {
          if (item.variant_id == {{ pfand_item_id }}) {
            fetch('/cart/change.js', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
              },
              body: JSON.stringify({ id: item.variant_id, quantity: getraenkeCount })
            }).then(response => response.json()).then(data => {
              location.reload();
            });
          }
        });
      }
    }

    updateCart();
  });
</script>

Falls du sicherstellen möchtest, dass Pfandartikel nie einzeln gekauft werden, füge eine ähnliche Logik zu deinen Produktseiten hinzu. Öffne die Datei product.liquid und füge die folgenden IF-Statement hinzu, um sicherzustellen, dass der Pfandartikel nicht einzeln gekauft werden kann:

{% if product.tags contains 'pfand' %}
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      document.querySelector('form[action="/cart/add"]').addEventListener('submit', function(event) {
        alert('Dieser Artikel kann nur in Kombination mit einem Getränk gekauft werden.');
        event.preventDefault();
      });
    });
  </script>
{% endif %}

Diese Schritte sollten sicherstellen, dass der Pfandartikel automatisch hinzugefügt wird, wenn Getränke in den Warenkorb gelegt werden, und dass er nicht separat gekauft werden kann.

Falls es sich um das Dawn Theme handelt

Um in deinem Shopify Dawn Theme automatisch Pfandartikel hinzuzufügen, wenn Getränke gekauft werden, kannst du den folgenden Ansatz verwenden. Dies erfordert das Bearbeiten der JavaScript- und Liquid-Dateien in deinem Theme. Wie oben, erstelle einen Pfandartikel und setze den Preis auf 0,25 €. Notiere dir die Produkt-ID dieses Artikels, da du diese später benötigst. Dann gehe in die  main.js oder theme.js im assets-Ordner und füge den folgenden Code hinzu:

document.addEventListener('DOMContentLoaded', function() {
  const drinkTag = 'pfand'; // Tag für Getränke
  const pfandItemId = 'XXXXX'; // Ersetze 'XXXXX' durch die ID des Pfandartikels

  function addItemToCart(itemId, quantity) {
    fetch('/cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        id: itemId,
        quantity: quantity
      })
    }).then(response => response.json()).then(data => {
      console.log('Item added', data);
      location.reload(); // Aktualisiere die Seite
    });
  }

  function updateCart() {
    fetch('/cart.js')
      .then(response => response.json())
      .then(cart => {
        let drinkCount = 0;
        let pfandCount = 0;

        cart.items.forEach(item => {
          if (item.product.tags.includes(drinkTag)) {
            drinkCount += item.quantity;
          } else if (item.variant_id == pfandItemId) {
            pfandCount += item.quantity;
          }
        });

        if (drinkCount > pfandCount) {
          addItemToCart(pfandItemId, drinkCount - pfandCount);
        } else if (pfandCount > drinkCount) {
          fetch('/cart/change.js', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              id: pfandItemId,
              quantity: drinkCount
            })
          }).then(response => response.json()).then(data => {
            console.log('Cart updated', data);
            location.reload();
          });
        }
      });
  }

  updateCart();
});

Um zu verhindern, dass Pfandartikel alleine gekauft werden, kannst du auf der Produktseite des Pfandartikels eine Überprüfung hinzufügen. Öffne die product.liquid Datei und füge diese IF-Statement am Ende der Datei hinzu:

{% if product.tags contains 'pfand' %}
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      document.querySelector('form[action="/cart/add"]').addEventListener('submit', function(event) {
        alert('Dieser Artikel kann nur in Kombination mit einem Getränk gekauft werden.');
        event.preventDefault();
      });
    });
  </script>
{% endif %}

Durch das Hinzufügen dieses Codes stellst du sicher, dass jedes Getränk automatisch einen Pfandartikel im Wert von 0,25 € enthält. Wenn die Anzahl der Getränke im Warenkorb geändert wird, passt sich auch die Anzahl der Pfandartikel automatisch an. Dies verhindert auch, dass Pfandartikel separat gekauft werden können.

[automatensnack]

Hey Gabe,

ich schaue es mir nachher mal an, danke für die Informative Anleitung!
Mein Theme ist: "Sense" - dann kann ich alles übernehmen bis auf das "Dawn Theme", oder ?

Liebe Grüße

[Gabe]

@automatensnack 

Ja, das Sense Theme ist auf der Architektur des Dawn Themes aufgebaut!

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[automatensnack]

Hallo @Gabe ,

ich habe alle Schritte befolgt, aber wenn ich ein Produkt in den Warenkorb lege, passiert nichts. Irgendwo mache ich einen Fehler, sei es bei der Groß- und Kleinschreibung oder beim Einfügen des Codes.

Hier ist mein Vorgehen im Detail:

1. Ein Produkt namens "Pfand" mit 0,25 € angelegt:
   
2. Eine Kollektion erstellt, die "Getränke" heißt und die Bedingung hat, dass das Produkt-Tag "Pfand" entspricht:
   
    
3. Ein Produkt in der Kollektion "Getränke" ausgewählt und das Tag "Pfand" hinzugefügt:
   
4. Da ich das Sense-Theme verwende, habe ich nur die Dateien main-product.liquid und theme.editor.js gefunden.
5. Den von dir gegebenen Code habe ich am Ende der theme-editor.js ab Zeile 49 unten eingefügt. Hier der komplette Code:

function hideProductModal() {
  const productModal = document.querySelectorAll('product-modal[open]');
  productModal && productModal.forEach((modal) => modal.hide());
}

document.addEventListener('shopify:block:select', function (event) {
  hideProductModal();
  const blockSelectedIsSlide = event.target.classList.contains('slideshow__slide');
  if (!blockSelectedIsSlide) return;

  const parentSlideshowComponent = event.target.closest('slideshow-component');
  parentSlideshowComponent.pause();

  setTimeout(function () {
    parentSlideshowComponent.slider.scrollTo({
      left: event.target.offsetLeft,
    });
  }, 200);
});

document.addEventListener('shopify:block:deselect', function (event) {
  const blockDeselectedIsSlide = event.target.classList.contains('slideshow__slide');
  if (!blockDeselectedIsSlide) return;
  const parentSlideshowComponent = event.target.closest('slideshow-component');
  if (parentSlideshowComponent.autoplayButtonIsSetToPlay) parentSlideshowComponent.play();
});

document.addEventListener('shopify:section:load', () => {
  hideProductModal();
  const zoomOnHoverScript = document.querySelector('[id^=EnableZoomOnHover]');
  if (!zoomOnHoverScript) return;
  if (zoomOnHoverScript) {
    const newScriptTag = document.createElement('script');
    newScriptTag.src=zoomOnHoverScript.src;
    zoomOnHoverScript.parentNode.replaceChild(newScriptTag, zoomOnHoverScript);
  }
});

document.addEventListener('shopify:section:reorder', () => hideProductModal());

document.addEventListener('shopify:section:select', () => hideProductModal());

document.addEventListener('shopify:section:deselect', () => hideProductModal());

document.addEventListener('shopify:inspector:activate', () => hideProductModal());

document.addEventListener('shopify:inspector:deactivate', () => hideProductModal());

document.addEventListener('DOMContentLoaded', function() {
  const drinkTag = 'pfand'; // Tag für Getränke
  const pfandItemId = '8940728975706'; // Ersetze 'XXXX' durch die ID des Pfandartikels

  function addItemToCart(itemId, quantity) {
    fetch('/cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        id: itemId,
        quantity: quantity
      })
    }).then(response => response.json()).then(data => {
      console.log('Item added', data);
      location.reload(); // Aktualisiere die Seite
    });
  }

  function updateCart() {
    fetch('/cart.js')
      .then(response => response.json())
      .then(cart => {
        let drinkCount = 0;
        let pfandCount = 0;

        cart.items.forEach(item => {
          if (item.product.tags.includes(drinkTag)) {
            drinkCount += item.quantity;
          } else if (item.variant_id == pfandItemId) {
            pfandCount += item.quantity;
          }
        });

        if (drinkCount > pfandCount) {
          addItemToCart(pfandItemId, drinkCount - pfandCount);
        } else if (pfandCount > drinkCount) {
          fetch('/cart/change.js', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              id: pfandItemId,
              quantity: drinkCount
            })
          }).then(response => response.json()).then(data => {
            console.log('Cart updated', data);
            location.reload();
          });
        }
      });
  }

  updateCart();
});​

[Gabe]

Hey @automatensnack 

Somit bist du einen Schritt weiter...Babysteps! Aber ggf. musst du überlegen einen Experten zu heuern der das in deinem Theme programmieren kann. Gerne kann ich welche empfehlen. 

Des weiteren

Um sicherzustellen, dass der Pfandartikel automatisch zu Getränkekäufen hinzugefügt wird und nicht einzeln gekauft werden kann, müssen wir einige Anpassungen vornehmen. Es sieht so aus, als ob der JavaScript-Code möglicherweise nicht richtig eingebunden ist oder nicht korrekt ausgeführt wird. Hier sind einige Schritte zur Fehlerbehebung und Überprüfung:

Überprüfung und Anpassung der JavaScript-Einbindung

Es scheint, dass du den JavaScript-Code im falschen Skript eingebunden hast. In den meisten Shopify-Themes, einschließlich des Sense-Themes, wird der JavaScript-Code für den Warenkorb und andere Interaktionen normalerweise in einer Datei wie theme.js oder main.js gespeichert.

2. Anpassung der theme.js oder main.js

Füge den JavaScript-Code an das Ende der theme.js oder main.js Datei ein, um sicherzustellen, dass er korrekt ausgeführt wird. So könnte der JS aussehen:

document.addEventListener('DOMContentLoaded', function() {
  const drinkTag = 'pfand'; // Tag für Getränke
  const pfandItemId = '8940728975706'; // Ersetze '8940728975706' durch die ID des Pfandartikels

  function addItemToCart(itemId, quantity) {
    fetch('/cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        id: itemId,
        quantity: quantity
      })
    }).then(response => response.json()).then(data => {
      console.log('Item added', data);
      location.reload(); // Aktualisiere die Seite
    });
  }

  function updateCart() {
    fetch('/cart.js')
      .then(response => response.json())
      .then(cart => {
        let drinkCount = 0;
        let pfandCount = 0;

        cart.items.forEach(item => {
          if (item.product.tags.includes(drinkTag)) {
            drinkCount += item.quantity;
          } else if (item.variant_id == pfandItemId) {
            pfandCount += item.quantity;
          }
        });

        if (drinkCount > pfandCount) {
          addItemToCart(pfandItemId, drinkCount - pfandCount);
        } else if (pfandCount > drinkCount) {
          fetch('/cart/change.js', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              id: pfandItemId,
              quantity: drinkCount
            })
          }).then(response => response.json()).then(data => {
            console.log('Cart updated', data);
            location.reload();
          });
        }
      });
  }

  updateCart();
});

Um sicherzustellen, dass der Pfandartikel nicht einzeln gekauft werden kann, kannst du einen Code wie diesen hier in die product.liquid Datei ein:

{% if product.tags contains 'pfand' %}
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      document.querySelector('form[action="/cart/add"]').addEventListener('submit', function(event) {
        alert('Dieser Artikel kann nur in Kombination mit einem Getränk gekauft werden.');
        event.preventDefault();
      });
    });
  </script>
{% endif %}

Stelle sicher, dass der Pfandartikel und die Getränkeprodukte korrekt getaggt sind:

• Der Pfandartikel sollte das Tag "pfand" haben.
• Alle Getränkeprodukte sollten ebenfalls das Tag "pfand" haben, damit sie vom Skript als solche erkannt werden.

Bei allen weiteren Fragen kannst unser Entwickler Forum hier verwenden, aber ich empfehle einen unserer Experten zu 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 obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[automatensnack]

Hey @Gabe  ich  habe dir noch mein Part 2 weitergeleitet. Ich habe schon vieles versucht selbst zu Programmieren aber es geht einfach nicht wie überlegt.

[automatensnack]

Ich habe in meinem Sense Theme leider keine "Anpassung der theme.js oder main.js" Datei...

@Gabe  weißt du welche Datei in Frage käme ?

[Gabe]

Hey @automatensnack 

In Shopify-Themes, insbesondere bei Themes wie dem Sense-Theme, wird benutzerdefinierter JavaScript-Code oft in verschiedene Dateien eingebunden, je nach dem spezifischen Aufbau des Themes. Wenn du keine theme.js oder main.js Datei findest, kannst du folgende Dateien überprüfen und anpassen:

1. cart.js oder cart.liquid: Diese Dateien enthalten oft den JavaScript-Code für den Warenkorb. Überprüfe, ob hier bereits Code vorhanden ist, der sich auf den Warenkorb bezieht, und füge deinen Code hier ein.

2. product.js oder product.liquid: Wenn der Code sich auf Produktseiten bezieht, könnte es auch sinnvoll sein, diese Dateien anzupassen.

3. custom.js oder custom.liquid: Manche Themes bieten eine custom.js Datei an, die speziell für benutzerdefinierte JavaScript-Anpassungen vorgesehen ist.

4. snippets Ordner: Manchmal werden JavaScript-Snippets in den snippets Ordner gelegt und in verschiedene Teile des Themes eingebunden. Überprüfe die Dateien in diesem Ordner.

5. assets Ordner: Der assets Ordner enthält oft JavaScript-Dateien, die du anpassen kannst. Schau dir die verschiedenen .js Dateien in diesem Ordner an.

6. theme.liquid: Die theme.liquid Datei enthält oft die grundlegende Struktur des Themes und bindet andere Skripte und Stylesheets ein. Du kannst auch hier benutzerdefinierten JavaScript-Code einfügen, obwohl dies weniger sauber sein kann als die Verwendung spezifischer JavaScript-Dateien.

Hier ist eine Schritt-für-Schritt-Anleitung, wie du deinen Code hinzufügen kannst:

1. Gehe zu den Theme-Dateien:

   • Gehe in deinem Shopify-Admin-Bereich zu "Online Store" > "Themes".
   • Klicke auf "Actions" neben deinem aktiven Theme und wähle "Edit Code".

2. Finde die richtige Datei:

   • Suche nach einer der oben genannten Dateien (cart.js, product.js, custom.js, etc.) unter "Assets" oder "Snippets".
   • Wenn du keine passende Datei findest, kannst du eine neue JavaScript-Datei erstellen. Klicke auf "Add a new asset", wähle "Create a blank file" und gib der Datei einen Namen wie custom.js.

3. Füge deinen Code hinzu:

   • Öffne die Datei, die du bearbeiten möchtest (z.B. custom.js).
   • Füge deinen JavaScript-Code hinzu, der sicherstellt, dass der Pfandartikel zu den Getränkekäufen hinzugefügt wird.

Beispiel-Code für custom.js:

document.addEventListener('DOMContentLoaded', function() {
    // Überprüfen, ob der Benutzer ein Getränk in den Warenkorb legt
    document.querySelectorAll('.add-to-cart-button').forEach(function(button) {
        button.addEventListener('click', function(event) {
            var productId = event.target.getAttribute('data-product-id');
            if (isBeverage(productId)) {
                addDepositItemToCart();
            }
        });
    });

    function isBeverage(productId) {
        // Füge hier die Logik hinzu, um zu überprüfen, ob das Produkt ein Getränk ist
        var beverageProductIds = [123, 456, 789]; // Beispiel-IDs für Getränke
        return beverageProductIds.includes(parseInt(productId));
    }

    function addDepositItemToCart() {
        var depositItemId = 999; // ID des Pfandartikels
        fetch('/cart/add.js', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                items: [{
                    id: depositItemId,
                    quantity: 1
                }]
            })
        }).then(response => {
            if (response.ok) {
                console.log('Pfandartikel erfolgreich zum Warenkorb hinzugefügt');
            } else {
                console.error('Fehler beim Hinzufügen des Pfandartikels');
            }
        });
    }
});

• Um sicherzustellen, dass dein custom.js in deinem Theme eingebunden ist, öffne die theme.liquid Datei.
• Füge am Ende der Datei vor dem schließenden </body> Tag folgenden Code hinzu:

<script src="{{ 'custom.js' | asset_url }}"></script>

[automatensnack]

Hallo @Gabe leider funktioniert das auch nicht, sowie es aussieht muss ich mir dann wohl doch eine App zulegen. Welche könntest du mir empfehlen ?

[Gabe]

Ja das wäre definitiv der einfacherer Weg. Oder eben ein eigenes "Pfand Produkt" erstellen. Oder 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!

Apps

Am besten die Demos der Apps ausprobieren:

• Canteen App
• Magical Deposit App
• Hier wie es mit der Pfand App aussieht:

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[automatensnack]

Part 2:

Den von dir gegebenen Code habe ich in die main-product.liquid  ab Zeile 21 Oben, aber auch schonmal Mittig und ganz unten eingefügt. Hier der komplette Code:

<section
  id="MainProduct-{{ section.id }}"
  class="section-{{ section.id }}-padding gradient color-{{ section.settings.color_scheme }}"
  data-section="{{ section.id }}"
>
  {{ 'section-main-product.css' | asset_url | stylesheet_tag }}
  {{ 'component-accordion.css' | asset_url | stylesheet_tag }}
  {{ 'component-price.css' | asset_url | stylesheet_tag }}
  {{ 'component-slider.css' | asset_url | stylesheet_tag }}
  {{ 'component-rating.css' | asset_url | stylesheet_tag }}
  {{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
  {% unless product.has_only_default_variant %}
    {{ 'component-product-variant-picker.css' | asset_url | stylesheet_tag }}
    {{ 'component-swatch-input.css' | asset_url | stylesheet_tag }}
    {{ 'component-swatch.css' | asset_url | stylesheet_tag }}
  {% endunless %}
  {%- if product.quantity_price_breaks_configured? -%}
    {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
  {%- endif -%}

  {% if product.tags contains 'pfand' %}
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      document.querySelector('form[action="/cart/add"]').addEventListener('submit', function(event) {
        alert('Dieser Artikel kann nur in Kombination mit einem Getränk gekauft werden.');
        event.preventDefault();
      });
    });
  </script>
  {% endif %}

// REST DES CODES...

7. Es funktioniert immer noch nicht. Ich weiß nicht, ob der Code in der falschen Datei oder an der falschen Stelle ist oder ob es ein Problem mit der Rechtschreibung gibt. Falls du den "// REST DES CODES..." benötigst, kann ich dir den weiterleiten.

Ich würde mich sehr freuen, wenn du mir noch einmal mit deiner Erfahrung helfen könntest.

Die Website für den Code lautet: 2024

https://765a8d-dd.myshopify.com/

MEIN PFAND PRODUKT ID ist: 8940728975706 (habe ich mittels JSON im Admin-Bereich herausgefunden)

https://765a8d-dd.myshopify.com/products/pfand

https://admin.shopify.com/store/765a8d-dd/themes/161812250970/editor?customCss=true&previewPath=%2Fp...

[automatensnack]

Hey @Gabe,

nach langer Recherche habe ich mir die App "Magical Product Fees" installiert. Soweit funktioniert auch alles. Ich habe die gesamte "Collection" mit Getränken ausgewählt. Sobald ich an der "Kasse" bin, sehe ich auch, dass 0,25 € als Pfand berechnet werden.

Ich möchte allerdings, dass schon im "Warenkorb" die 0,25 € angezeigt werden inkl. Bild, wie bei dir oben auf dem Beispielbild.

Was muss ich dafür tun?

Anbei Bilder vom Warenkorb: Ich habe es mal Rot markiert, wie ich es gerne haben würde.

Kasse (Pfand aber ohne Bild) wie kann ich da ein Bild hinzufügen?

Einstellungen:

Ich bitte um Hife!

[Gabe]

Hey @automatensnack 

Eine tolle App, gute Wahl! 

Aber oh je, das wird eine komplexe Coding Solution verlangen. Hast du das mit den App Entwickler zuerst besprochen? Die können dir helfen das zu gestalten denn die wollen dich ja als loyalen Kunden haben. Kontaktiere doch bitte mal zuerst die App Entwickler hier denn die haben oft Tricks im Ärmel und können dir helfen das zu erreichen.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉