FROM CACHE - de_header
Gelöst

Vergleichspreis ausblenden in der Vorgestellten Kollektion

MrMoning
Tourist
3 0 1

Hallo, ich nutze DAWN und habe folgendes Problem. Ich habe ein Produkt wo ich mehrere Anzahle als Varianten anbieten im Paket, wo der Preis dann rabattiert wird, wenn man z.B. 3er Pack wählt (Siehe Bild 1). Das funktioniert soweit auch super und soll so bleiben. Nun möchte ich das in dem Abschnitt "Vorgestellte Kollektion, wo dieses Produkt drin ist, das dort NICHT der Vergleichspreis angezeigt wird, sondern NUR Ab 29,99 EUR ohne dem davor durchgestrichenen Preis. (siehe Bild 2).

 

Ich hatte bereits im Code in der price.liquid Datei ein entsprechenden <div>-Container auskommentiert. Nur waren dann im gesamten Shop überall der durchgestrichene Vergleichspreis weg, und der soll ja beim Produkt selbst bleiben. Weiß jemand, was ich da machen kann? Vielen Dank im Voraus.

 

 

 

     Bild 2                                                                Bild 1

Rot.PNG

dde1a0e7-ffee-4f27-969a-8b58faee2923.png

 

 

 

 

1 AKZEPTIERTE LÖSUNG

Gabe
Shopify Staff
17452 2764 4078

Erfolg.

Hey @MrMoning 

 

Danke für den Sachverhalt und mein erstes Anliegen ist dass du die Packs als Varianten anbietest mit der Option 1er Pack, 3er Pack usw. Das ist nicht die beste Practice denn wie kannst da damit den Bestand korrekt im Backend verfolgen können, wenn ein 3er Pack als Variante des Parent Product ist?

 

Außerdem ist mit dieser Einrichtung der Packs als Variantenoptionen, das erwartete Systemverhalten so dass der Sale Price der im Featured Collection Section oder auf der Kollektionsseite angezeigt wird, der von der billigsten Variante ist.

 

Lösung im CSS Editor

Du musst auch bedenken, dass alle Code Anpassungen ggf. einen Dominoeffekt auf anderen Bereiche des HTML Dom-Trees haben können. Und ja, du hast den durchgestrichenen Vergleichspreis auf Shop-Ebene auskommentiert, nicht auf Section-Ebene, in der price.liquid Datei und den entsprechenden <div>-Container. Somit kannst du etwas CSS zum Shop hinzufügen ohne dein Dawn Theme aus den Theme Updates auszuschließen.

Hier ein CSS der das machen kann:

 

/* CSS-Datei */
/* Nur Preise in der Produktkarte innerhalb der 'Vorgestellten Kollektion' ausblenden */
#Slider-template--22571138056541__featured_collection .price__sale s {
    display: none;
}

 

Dieser Selektor zielt gezielt auf die durchgestrichenen Preise (<s>-Tag) innerhalb der Preise in der "Vorgestellten Kollektion". Stelle sicher, dass die ID (#Slider-template--22571138056541__featured_collection) mit der ID im HTML-Code übereinstimmt.

 

JavaScript-Lösung: Wenn CSS allein nicht ausreicht, könnte eine JavaScript-Lösung helfen. Du könntest JavaScript-Code hinzufügen, um gezielt die durchgestrichenen Preise in der "Vorgestellten Kollektion" zu entfernen. Füge den folgenden JavaScript-Code hinzu:

 

document.addEventListener('DOMContentLoaded', function () {
    const featuredCollection = document.querySelector('#Slider-template--22571138056541__featured_collection');
    if (featuredCollection) {
        const salePrices = featuredCollection.querySelectorAll('.price__sale s');
        salePrices.forEach(price => price.style.display = 'none');
    }
});

 

Dieser Code wird ausgeführt, sobald die Seite geladen ist, und blendet gezielt die durchgestrichenen Preise in der "Vorgestellten Kollektion" aus.

 

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

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

5 ANTWORTEN 5

Gabe
Shopify Staff
17452 2764 4078

Erfolg.

Hey @MrMoning 

 

Danke für den Sachverhalt und mein erstes Anliegen ist dass du die Packs als Varianten anbietest mit der Option 1er Pack, 3er Pack usw. Das ist nicht die beste Practice denn wie kannst da damit den Bestand korrekt im Backend verfolgen können, wenn ein 3er Pack als Variante des Parent Product ist?

 

Außerdem ist mit dieser Einrichtung der Packs als Variantenoptionen, das erwartete Systemverhalten so dass der Sale Price der im Featured Collection Section oder auf der Kollektionsseite angezeigt wird, der von der billigsten Variante ist.

 

Lösung im CSS Editor

Du musst auch bedenken, dass alle Code Anpassungen ggf. einen Dominoeffekt auf anderen Bereiche des HTML Dom-Trees haben können. Und ja, du hast den durchgestrichenen Vergleichspreis auf Shop-Ebene auskommentiert, nicht auf Section-Ebene, in der price.liquid Datei und den entsprechenden <div>-Container. Somit kannst du etwas CSS zum Shop hinzufügen ohne dein Dawn Theme aus den Theme Updates auszuschließen.

Hier ein CSS der das machen kann:

 

/* CSS-Datei */
/* Nur Preise in der Produktkarte innerhalb der 'Vorgestellten Kollektion' ausblenden */
#Slider-template--22571138056541__featured_collection .price__sale s {
    display: none;
}

 

Dieser Selektor zielt gezielt auf die durchgestrichenen Preise (<s>-Tag) innerhalb der Preise in der "Vorgestellten Kollektion". Stelle sicher, dass die ID (#Slider-template--22571138056541__featured_collection) mit der ID im HTML-Code übereinstimmt.

 

JavaScript-Lösung: Wenn CSS allein nicht ausreicht, könnte eine JavaScript-Lösung helfen. Du könntest JavaScript-Code hinzufügen, um gezielt die durchgestrichenen Preise in der "Vorgestellten Kollektion" zu entfernen. Füge den folgenden JavaScript-Code hinzu:

 

document.addEventListener('DOMContentLoaded', function () {
    const featuredCollection = document.querySelector('#Slider-template--22571138056541__featured_collection');
    if (featuredCollection) {
        const salePrices = featuredCollection.querySelectorAll('.price__sale s');
        salePrices.forEach(price => price.style.display = 'none');
    }
});

 

Dieser Code wird ausgeführt, sobald die Seite geladen ist, und blendet gezielt die durchgestrichenen Preise in der "Vorgestellten Kollektion" aus.

 

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

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

MrMoning
Tourist
3 0 1

Super vielen Dank für die schnelle Antwort. Nur eine Frage dazu, wo genau finde ich die ID im HTML Code, die für die Kollektion ist?

Gabe
Shopify Staff
17452 2764 4078

@MrMoning 

 

Gerne geschehen und hast du den Code im CSS Editor ausprobiert? 

 

Die ID findest du über deine Chrome Developer Console. Siehe meinen Blog dazu hier.

 

Hoffe das hilft dir weiter! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

MrMoning
Tourist
3 0 1

@Gabe Genau, habs ausprobiert und funktioniert alles. Dankeschön! 🙂

Gabe
Shopify Staff
17452 2764 4078

giphy

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog