Alternative Produkte Anzeigen bei Ausverkauf

Thema wurde von Anonymous, 31. Mai 2023 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    3. Juni 2019
    Beiträge:
    468
    Danke erhalten:
    79
    Danke vergeben:
    36
    Hallo zusammen,
    mal so ein Gedankengang!
    Ist es irgendwie möglich, wenn ein Artikel ausverkauft / zurzeit nicht lieferbar ist, ein alternatives Produkt anzeigen zu lassen?
    Evtl. unter dem Hinweis, dass der Artikel aktuell nicht verfügbar ist!

    Ich hab da mal ein Feld über den GX-Customister erstellt!

    alternative_Anzeigen.jpg
     
  2. M. Zitzmann

    M. Zitzmann Erfahrener Benutzer

    Registriert seit:
    3. März 2016
    Beiträge:
    367
    Danke erhalten:
    118
    Danke vergeben:
    39
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    427
    Danke erhalten:
    142
    Danke vergeben:
    518
    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>
    
     

    Anhänge:

  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    3. Juni 2019
    Beiträge:
    468
    Danke erhalten:
    79
    Danke vergeben:
    36
    Danke Thomas

    schon mal nicht schlecht, nur wird dann die Alternative immer angezeigt, schön wäre es, wenn es nur aktiv wird, wenn der Artikel ausverkauft ist.
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    427
    Danke erhalten:
    142
    Danke vergeben:
    518
    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.
     
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.463
    Danke erhalten:
    551
    Danke vergeben:
    211
    #6 Anonymous, 1. Juni 2023
    Zuletzt bearbeitet: 1. Juni 2023
    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:
    upload_2023-6-1_14-13-39.png

    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.
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.463
    Danke erhalten:
    551
    Danke vergeben:
    211
    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.)
     
  8. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    28. Dezember 2020
    Beiträge:
    230
    Danke erhalten:
    100
    Danke vergeben:
    28
    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.
     
  9. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.463
    Danke erhalten:
    551
    Danke vergeben:
    211
    #9 Anonymous, 2. Juni 2023
    Zuletzt bearbeitet: 2. Juni 2023
    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.

    upload_2023-6-2_12-12-24.png
     
  10. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    3. Juni 2019
    Beiträge:
    468
    Danke erhalten:
    79
    Danke vergeben:
    36
    Hallo Michaela,
    das schaut gut aus, das werde ich mal versuchen, erstmal besten dank dafür :)