Verfügbarkeits-Anzeige Prestige Theme

[julius_richter]

Hallo zusammen,

ich verwende das Prestige Theme in Shopify und möchte gerne auf meiner Produktseite eine Verfügbarkeitsanzeige einrichten. Diese Anzeige soll den Status "Auf Lager", "Geringer Lagerbestand" oder "Ausverkauft" anzeigen und jeweils in den Farben Grün, Orange und Rot erscheinen.

Um dieses Feature umzusetzen, habe ich bereits eine Liquid "Section" erstellt, die das Grundgerüst für die Verfügbarkeitsanzeige bildet.

{% assign current_variant = product.selected_or_first_available_variant %}
{% if current_variant.inventory_quantity <= 0 %}
  <div style="display: flex; align-items: center;">
    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
      <circle cx="4" cy="4" r="4" fill="#FF0000">
        <animate attributeName="r" from="2" to="4" dur="1.5s" begin="0s" repeatCount="indefinite"/>
        <animate attributeName="opacity" from="1" to="0" dur="1.5s" begin="0s" repeatCount="indefinite"/>
      </circle>
    </svg>
    <span style="color: red; padding-left: 2px;">Ausverkauft</span>
  </div>
{% elsif current_variant.inventory_quantity <= 5 %}
  <div style="display: flex; align-items: center;">
    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
      <circle cx="4" cy="4" r="4" fill="#FFA500">
        <animate attributeName="r" from="2" to="4" dur="1.5s" begin="0s" repeatCount="indefinite"/>
        <animate attributeName="opacity" from="1" to="0" dur="1.5s" begin="0s" repeatCount="indefinite"/>
      </circle>
    </svg>
    <span style="color: orange; padding-left: 2px;">Wenig verfügbar - In 2-4 Werktagen bei dir</span>
  </div>
{% else %}
  <div style="display: flex; align-items: center;">
    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
      <circle cx="4" cy="4" r="4" fill="#008000">
        <animate attributeName="r" from="2" to="4" dur="1.5s" begin="0s" repeatCount="indefinite"/>
        <animate attributeName="opacity" from="1" to="0" dur="1.5s" begin="0s" repeatCount="indefinite"/>
      </circle>
    </svg>
    <span style="color: green; padding-left: 2px;">Auf Lager - In 2-4 Werktagen bei dir</span>
  </div>
{% endif %}

Hier habe ich jedoch ein Problem: Wenn ich die Größe eines Produktes ändere, wird die "Statusanzeige" nicht automatisch aktualisiert, da die Seite nicht neu geladen oder neu gerendert wird.

Ich suche nach einer Möglichkeit, die Verfügbarkeitsanzeige dynamisch zu aktualisieren. Gibt es eine Methode oder eine Funktion, die ich verwenden kann, um sicherzustellen, dass die Anzeige sich entsprechend der Größenänderung automatisch anpasst?

Zusätzlich habe ich bemerkt, dass im Prestige Theme ein eingebautes Element für die Verfügbarkeitsanzeige existiert. Allerdings habe ich bisher nicht herausgefunden, wie ich dort die Farben und den Text anpassen kann. Könnte mir jemand weiterhelfen und erklären, wie ich diese Anpassungen vornehmen kann?

Vielen Dank im Voraus für eure Unterstützung! Ich freue mich auf eure Hilfe und Ratschläge.

[Ben310]

@julius_richter 

Javascript verwenden um den Status der Auswahlvarianten des Produkts zu überwachen und die Anzeige entsprechend zu aktualisieren. Einfach am Ende der Produktseite hinzufügen, nachdem das Produktformular gerendert wurde wie folgendes Beispiel:

<script>
document.addEventListener("DOMContentLoaded", function() {
  var selectElement = document.querySelector('.single-option-selector');

  selectElement.addEventListener('change', function() {
    fetch('/variants/' + this.value + '.json')
    .then(response => response.json())
    .then(data => {
      var statusElement = document.querySelector('#availability-status');
      var circleElement = statusElement.querySelector('circle');
      var textElement = statusElement.querySelector('span');
      
      if(data.variant.inventory_quantity <= 0) {
        circleElement.setAttribute('fill', '#FF0000');
        textElement.textContent = 'Ausverkauft';
        textElement.style.color = 'red';
      } else if(data.variant.inventory_quantity <= 5) {
        circleElement.setAttribute('fill', '#FFA500');
        textElement.textContent = 'Wenig verfügbar - In 2-4 Werktagen bei dir';
        textElement.style.color = 'orange';
      } else {
        circleElement.setAttribute('fill', '#008000');
        textElement.textContent = 'Auf Lager - In 2-4 Werktagen bei dir';
        textElement.style.color = 'green';
      }
    });
  });
});
</script>

Der Code sollte dabei auf Änderungen im "single-option-selector" hören (das ist das Dropdown-Menü für die Auswahl der Varianten in Shopify) und eine Anfrage an die Shopify-API durchführen, um die Details der ausgewählten Variante zu erhalten. Dann ändert es die Farbe und den Text der Verfügbarkeitsanzeige entsprechend der Anzahl der Produkte auf Lager.

Was die eingebaute Verfügbarkeitsanzeige des Prestige-Themas betrifft, so solltest du in der Lage sein, Farben und Texte zu ändern, indem du die entsprechenden CSS-Classes oder -IDs und die zugehörigen Liquid-Dateien bearbeitest.

Hilfe-Doku des Prestige-Themes konsultieren, um weitere Informationen zu erhalten. Oder die Theme Entwickler kontaktieren.

[julius_richter]

Danke dir! Werde ich testen

[Ben310]

Hast du das testen können?