Varianten Verfügbarkeit aktualisiert sich nicht

[timdragovic]

Guten Tag,

ich verwende den Prestige Theme und möchte die Verfügbarkeit meiner Artikel über dem Add to Cart Button anzeigen lassen. Soweit funktioniert das auch, allerdings wenn man auf einer Produktseite mit vielen Varianten auf eine Variante die nicht mehr auf Lager ist klickt, aktualisiert sich der Text nicht in "Bald wieder lieferbar".

Mein Code ist:

{%- if selected_variant.available -%}
‌✅‌ <span style="color:#03BD00 ">Sofort verfügbar</span> in 2 - 3 Werktagen bei dir
<br><br>
{%- else -%}
‌❌‌ <span style="color:#CC0000">Bald wieder lieferbar</span>
<br><br>
{%- endif -%}

Ich denke hier fehlt JavaScript oder wie kann ich erzwingen, dass die Varianten Seite neu geladen wird?

[Gabe · Accepted solution]

@timdragovic 

Danke für die URLs. Das habe ich jetzt auch reproduzieren können.

Und das ist richtig, dass etwas Code fehlt um den genauen Prozess zu vervollständigen den du auf der Produktseite brauchst.

Das Problem liegt derzeit beim String ● Bald wieder für dich verfügbar / ● Auf Lager - in 2 - 3 Werktagen bei dir, dass sich nicht vollständig aktualisiert basierend auf der folgenden Logik:

• IF variant == Sold Out
• THEN show "Bald wieder für dich verfügbar"
• ELSE show "Auf Lager - in 2 - 3 Werktagen bei dir"

Wir haben einige Experten hier die das für dich machen können, denn das wird etwas Arbeit in mehreren Liquid Dateien verlangen. Mario ( @r8r ) ist hier einer der besten und sehr zuverlässig und er wird über diesem Tag eine Notification bekommen. 

[Gabe]

@timdragovic 

Danke für den Code und die Verfügbarkeit dem Kunden früh im Cart anzuzeigen verbessert das Erlebnis um einiges da man dann nicht erst im Checkout erfährt, dass das Produkt vergriffen ist!

Da jedes Theme anders aufgebaut ist, wird es versch. Möglichkeiten geben warum diese Meldung sich bei dir nicht zeigt wenn man eine ausverkaufte Variante wählt.

Wenn du deine Shop URL oder einen Preview Link hier postest können wir das gerne mal testen (das kannst du danach wieder löschen). Aber siehe hier ein paar Code Snippets u.a. aus dem Venture Theme die ggf. helfen können (aus diesem Tutorial entnommen:

<div id="variant-inventory">
          {% if product.available or product.selected_variant.available %}
          <h4 style="color:#98ca3c">Im Bestand!</h4>
          {% else %}
          <h4 style="color:#ec523e">
          Bald wieder lieferbar!<br>
          Lieferzeit 2-5 Tage<br>
          Bestellabfrage hier abgeben<a style="color:#98ca3c; padding: 5px;" href="#">hier</a>
          </h4>
          {% endif %}
          </div>

Das .js sieht dann so aus:

_onSelectChange: function() {
      var variant = this._getVariantFromOptions();
/* den Code hierher verschieben, damit er den onSelectChange respektiert */
      
      if (variant) {
        if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
          if (variant.inventory_quantity > 5) {
             jQuery("#variant-inventory").css('display', 'block');
             jQuery('#variant-inventory').html("<h4 style='color:#98ca3c'>Im Bestand!</h4>");
          }
          else if(variant.inventory_quantity > 0){
            jQuery("#variant-inventory").css('display', 'block');
            jQuery('#variant-inventory').html("<h4 style='color:#98ca3c'>Im Bestand!</h4>");
          } 
          else {
            jQuery("#variant-inventory").css('display', 'block');
            jQuery('#variant-inventory').html("<h4 style='color:#ec523e'> Bald wieder lieferbar!<br> Lieferzeit 2-5 Tage<br> Bestellabfrage hier abgeben<a style='color:#98ca3c; padding: 5px;' href='#' target='_blank'>here</a></h4>");
          }
        } else {
          jQuery("#variant-inventory").css('display', 'block');
          jQuery('#variant-inventory').html("<h4 style='color:#98ca3c'>Im Bestand!</h4>");
        }
      } else {
          jQuery("#variant-inventory").css('display', 'none');
          jQuery('#variant-inventory').text("");
      }

Ansonsten könnte hier ein Experte ggf. helfen wie @r8r.

[timdragovic]

@Gabe 

Danke für deine schnelle Hilfe und deinen Codevorschlag, leider funktioniert dieser nicht.

Hier ein Produkt, bei dem du es dir mal ansehen kannst: https://littledragonshisha.de/products/shisha-eroica

Die Variante "Anthrazit" ist ausverkauft, geht man nun direkt über die URL auf die Variante (https://littledragonshisha.de/products/shisha-eroica?variant=40627582140568) steht "● Bald wieder für dich verfügbar" da. Das ist auch gewollt und korrekt. Wählt man nun aber eine andere Variante aus, steht weiterhin "● Bald wieder für dich verfügbar" da, obwohl die Variante auf Lager ist und "● Auf Lager - in 2 - 3 Werktagen bei dir" angezeigt werden sollte.

Wenn man hier ebenfalls wieder die Variante direkt aufruft z.B. Grün: https://littledragonshisha.de/products/shisha-eroica?variant=40627581517976 steht richtig "● Auf Lager - in 2 - 3 Werktagen bei dir" da, aber nun wieder auf Anthrazit switcht steht weiterhin "● Auf Lager - in 2 - 3 Werktagen bei dir" da obwohl ja "● Bald wieder für dich verfügbar" stehen müsste. 

Ich denke es muss hier noch etwas Javascript zugefügt werden oder?

[Gabe · Accepted solution]

@timdragovic 

Danke für die URLs. Das habe ich jetzt auch reproduzieren können.

Und das ist richtig, dass etwas Code fehlt um den genauen Prozess zu vervollständigen den du auf der Produktseite brauchst.

Das Problem liegt derzeit beim String ● Bald wieder für dich verfügbar / ● Auf Lager - in 2 - 3 Werktagen bei dir, dass sich nicht vollständig aktualisiert basierend auf der folgenden Logik:

• IF variant == Sold Out
• THEN show "Bald wieder für dich verfügbar"
• ELSE show "Auf Lager - in 2 - 3 Werktagen bei dir"

Wir haben einige Experten hier die das für dich machen können, denn das wird etwas Arbeit in mehreren Liquid Dateien verlangen. Mario ( @r8r ) ist hier einer der besten und sehr zuverlässig und er wird über diesem Tag eine Notification bekommen. 

[r8r · Accepted solution]

@timdragovic – ja, da muss eben auch im JS herumgeschnitzt werden. Wenn Du hier Hilfe in der Umsetzung möchtest, meld Dich gerne bei mir … Danke @Gabe für's Connecten.

Mario