Alternative Produkte Anzeigen bei Ausverkauf

Das geht nur über eine individuelle Programmierung.

 

hier ein Code der in die Zusatzfelder kommt und so aussieht wie auf dem screenshot.

Code:

<a href="http://www.LINK.de" target="_blank" style="background-color: #64300B; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;">zur Alternative</a>

 

Ah das stimmt, das kann man anpassen, das der Button nur dann angezeigt wird wenn der Artikel nicht lieferbar wird, das Wort alternative würde vorn trotzdem da stehen.

 

das kannst du dir entweder programmieren lassen oder (deutlich aufwendiger) in jedes Zusatzfeld einen Code eingeben der den Link zum Alternativartikel enthält. Machbar ist es auf jeden Fall. Kommt drauf an wieviel Artikel zu hast:
hier ein Beispiel:


Bei den Zusatzfeldern bei Bezeichnung habe ich diesen Code drin:

Code:

<p id="textxyz">hier geht's zum</p>

und bei Wert habe ich diesen Code drin:

Code:

<style>
    .alterart {
      display: none;
    }

    #alternativeButton {
      background-color: #f00; /* Farbcode für den Hintergrund */
      color: #fff; /* Farbcode für die Schriftfarbe */
    }
</style>

<button id="alternativeButton" class="alterart" onclick="redirectToAlternative()">Alternativartikel</button>
<p id="textxyz" class="alterart">Dies ist das erste Zusatzfeld Bezeichnung mit der ID "textxyz".</p>

  <script>
    window.addEventListener('DOMContentLoaded', function() {
      var productsShippingTimeValue = document.querySelectorAll('.products-shipping-time-value');
      var alternativeButton = document.getElementById('alternativeButton');
      var textxyz = document.getElementById('textxyz');
      var isUnavailable = false;

      for (var i = 0; i < productsShippingTimeValue.length; i++) {
        if (productsShippingTimeValue[i].textContent.trim() === "Ausverkauft") {
          isUnavailable = true;
          break;
        }
      }

      if (isUnavailable) {
        alternativeButton.classList.remove('alterart');
        textxyz.classList.remove('alterart');
      }
    });

    function redirectToAlternative() {
      window.location.href = "https://xyz.html"; // Link zum Alternativartikel
    }
  </script>

Dieser Code blendet die Felder nur ein wenn die Lieferzeit "Ausverkauft" ist. Wenn du sie anders genannt hast, musst das im Code ändern.

 

ich sehe gerade, dass in deinem Shop auch bei aktuell nicht verfügbaren Artikeln "Lieferzeit 2-3 Tage" steht. Also das selbe wie bei den Lieferbaren. Da müsstest du die Einstellung ändern, dass bei diesen Artikeln als Lieferzeit "Ausverkauft" steht. (oder ähnliches.)

 

Das geht auch über Gambio Bordmittel, man kann dazu die Cross-Sell-Artikel nutzen.
Über Texte anpassen "Alternative Artikel".
Vorteil wird auch angezeigt, wenn der Artikel verfügbar ist.

 

Er mag es nur angezeigt haben wenn der Artikel ausverkauft/nicht lieferbar ist.

Aber mit den Cross-Selling Artikeln hast du mich auf eine Idee gebracht:

(auch für Cloudshops)
Du legst dem Hauptartikel den Alternativartikel als Cross-Selling an.
Und dann schreibst du diesen Code in die product_info_template_standard.html Datei:

Code:

{block name="product_info_template_standard_sticky_box_product_options_if" append}
<style>
    .alterpro {
      display: none;
    }

    #alternativeButton {
      background-color: #f00; /* Farbcode für den Hintergrund */
      color: #fff; /* Farbcode für die Schriftfarbe */
    }
  </style>

  <div style="display: flex; align-items: center; margin-bottom: 20px;">
  <p id="textxyz" class="alterpro" style="margin-right: 10px; margin-top:10px;">Hier geht's zum</p>
  <button id="alternativeButton" class="alterpro" onclick="redirectToAlternative()">Alternativartikel</button>
</div>


  <script>
    window.addEventListener('DOMContentLoaded', function() {
      var productsShippingTimeValue = document.querySelectorAll('.products-shipping-time-value');
      var alternativeButton = document.getElementById('alternativeButton');
      var textxyz = document.getElementById('textxyz');
      var isUnavailable = false;
      var crossSellingLink = '';

      var crossSellingProductImage = document.querySelector('.product-hover-main-image.product-image');
      if (crossSellingProductImage) {
        var anchorElement = crossSellingProductImage.querySelector('a');
        if (anchorElement) {
          crossSellingLink = anchorElement.href;
        }
      }

      for (var i = 0; i < productsShippingTimeValue.length; i++) {
        if (productsShippingTimeValue[i].textContent.trim() === "Ausverkauft") {
          isUnavailable = true;
          break;
        }
      }

      if (isUnavailable) {
        alternativeButton.classList.remove('alterpro');
        textxyz.classList.remove('alterpro');
        alternativeButton.onclick = function() {
          window.location.href = crossSellingLink;
        };
      }
    });

    function redirectToAlternative() {
      window.location.href = crossSellingLink;
    }
  </script>
{/block}

Der Code holt sich den Link vom Cross-Selling Artikel und fügt ihn in den "AlternativButton" ein.
Und dies wird nur angezeigt wenn die Lieferzeit "Ausverkauft" ist.