# Preisanzeige, Warenkorb - CSS / Javascript - if class A contains "X", class B hidden
**URL:** https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977
**Category:** Shopware 5
**Tags:** programming
**Created:** [26. August 2021 um 13:19 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977 "2021-08-26T13:19:05Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@AWT](https://forum.shopware.com/u/AWT)
#### Post date: [26. August 2021 um 13:19 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/1 "2021-08-26T13:19:06Z")
Hallo,
wir möchten folgendes umsetzen:
Wir haben ein Plugin, welches den Preis ausblendet, wenn dieser nach einer festgelegten Zeit abgelaufen ist. Der Preis wird dann mit dem Text „Preis auf Anfrage“ ersetzt.
Wenn dieser Text erscheint, soll der Warenkorb Button auf der Detailseite ausgeblendet werden.
Es müsste sich hier doch um die Klassen
.buybox–button-container
und
.price–content
handeln, richtig?
Ich kenne mich auf dem Gebiet leider nicht so gut aus, meine Vorstellung ist ungefähr diese:
if .price–content:contains „Preis auf Anfrage“
dann
.buybox–button-container visability: hidden
Wie CSS oder Javascript Code (Theme/frontend/detail/content/buy\_container.tpl) eingebunden wird weiß ich.
Über Tipps oder Codevorschläge wäre ich sehr dankbar.
Lars
---
### Author:  [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)
#### Post date: [26. August 2021 um 21:14 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/2 "2021-08-26T21:14:09Z")
Mit den Daten von dir kann man in JS sowas bauen:
```auto
if (document.querySelector(".price–content").textContent == "Preis auf Anfrage"){
document.querySelector(".buybox–button-container").style.display = "none";
}
Das verhindert jedoch nicht, dass man trotzdem bestellen könnte wenn man "wollte" und ein Scriptkiddie das ausnutzt.
Besser wäre hier auf Template - Ebene was umzusetzten.
```
---
### Author:  [@AWT](https://forum.shopware.com/u/AWT)
#### Post date: [27. August 2021 um 06:20 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/3 "2021-08-27T06:20:37Z")
Danke für den Vorschlag!
Leider habe ich beim implementieren doch ein Problem, folgender Code in der buy\_container.tpl verursacht einen Fehler:
```auto
{extends file="parent:frontend/detail/content/buy_container.tpl"}
{block name='frontend_detail_index_buy_container_inner'}
{if (document.querySelector(".price–content").textContent == "Preis auf Anfrage")}{
document.querySelector(".buybox–button-container").style.display = "none";
}
{/if}
{/block}
```
Fehlermeldung im Browser:
**Fatal error** : Uncaught SmartyCompilerException: Syntax Error in template „/html/shopware/test/themes/Frontend/MeinTheme/frontend/detail/content/buy\_container.tpl“ on line 2 „{if (document.querySelector(".price–content").textContent == "Preis auf Anfrage")}{“ - Unexpected „.“ in /html/shopware/test/engine/Library/Smarty/sysplugins/smarty\_internal\_templatecompilerbase.php:657 Stack trace: #0 /html/shopware/test/engine/Library/Smarty/sysplugins/smarty\_internal\_templateparser.php(3144): Smarty\_Internal\_TemplateCompilerBase-\>trigger\_template\_error() #1 /html/shopware/test/engine/Library/Smarty/sysplugins/smarty\_internal\_templateparser.php(3209): Smarty\_Internal\_Templateparser-\>yy\_syntax\_error(59, ‚.‘) #2 /html/shopware/test/engine/Library/Smarty/sysplugins/smarty\_internal\_smartytemplatecompiler.php(105): Smarty\_Internal\_Templateparser-\>doParse(59, ‚.‘) #3 /html/shopware/test/engine/Library/Smarty/sysplugins/smarty\_internal\_templatecompilerbase.php(192): Sm in **/html/shopware/test/engine/Library/Smarty/sysplugins/smarty\_internal\_templatecompilerbase.php** on line **657**
Ich gehe mal von einem groben Fehler meinerseits aus.
---
### Author:  [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)
#### Post date: [27. August 2021 um 07:51 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/4 "2021-08-27T07:51:39Z")
das Beispiel von mir ist Javascript und kein Smarty
---
### Author:  [@AWT](https://forum.shopware.com/u/AWT)
#### Post date: [27. August 2021 um 12:24 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/5 "2021-08-27T12:24:15Z")
Ich konnte den Code nun implementieren, er funktioniert nur nicht so wie gewünscht.
Sobald ein Preis abgelaufen ist, wird wie schon erwähnt „Preis auf Anfrage“ im Preisfeld angezeigt. Da der Warenkorb Button dann immer noch sichtbar ist, habe ich es mit folgendem Code versucht:
```auto
if (document.querySelector(".product--details .product--buybox .price--content").innerHTML = "Preis auf Anfrage" && document.querySelector(".buy-btn--cart-text").innerHTML == "Warenkorb"){
document.querySelector(".buybox--button-container").style.display = "none";
}
```
Problem: Im Preisfeld wird nun „true“ ausgegeben und bei einem Artikel mit gültigem Preis steht ebenfalls „true“ und der Warenkorb-Button wird auch hier ausgeblendet.
Zur Info: „Preis auf Anfrage“ && „Warenkorb“ muss sein, da wir auch Produkte haben, wo „Preis auf Anfrage“ und ein Anfrage-Button statt Warenkorb-Button angezeigt wird und dieser soll eben nicht verschwinden.
Ich hoffe das alles ist einigermaßen verständlich.
Hier noch ein paar Bilder:
---
### Author:  [@phil](https://forum.shopware.com/u/phil)
#### Post date: [27. August 2021 um 17:57 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/6 "2021-08-27T17:57:10Z")
Jaja, die Tücken von JS 😆
Mit = weist du einen Wert zu, mit == vergleichst du. Mach mal aus deinem = ein == und dann sollte es tun.
Vgl. [JavaScript/Operatoren/Vergleichsoperatoren – SELFHTML-Wiki](https://wiki.selfhtml.org/wiki/JavaScript/Operatoren/Vergleichsoperatoren)
LG Phil
---
### Author:  [@AWT](https://forum.shopware.com/u/AWT)
#### Post date: [30. August 2021 um 05:46 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/7 "2021-08-30T05:46:43Z")
Hallo Phil,
wenn ich aus dem „=“ ein „==“ mache, dann scheint der Code nicht mehr zu funktionieren, der .buybox–button-container wird also nicht mehr ausgeblendet. Weißt du woran das liegen könnte oder hättest spontan einen anderen Lösungsansatz?
Lars
---
### Author:  [@AWT](https://forum.shopware.com/u/AWT)
#### Post date: [31. August 2021 um 11:04 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/9 "2021-08-31T11:04:19Z")
Problem gelöst.
```auto
if (document.querySelector(".product--details .product--buybox .price--content").innerHTML.includes("Preis auf Anfrage") && !document.querySelector(".product--details .product--tax").innerHTML.includes("Versandkosten")){
document.querySelector(".buybox--button-container").style.display = "none";
document.querySelector(".product--details .delivery--text").style.display = "none";
}
```
Es fehlt nur noch der Anfragebutton. Wie binde ich diesen am besten / einfachsten mit angehänger Artikelnummer ein? Kann man die Zeile
```auto
document.querySelector(".buybox--button-container").style.display = "none";
```
evtl. verändern? Also dass der „In den Warenkorb“ Button z. B. umbenannt wird und eine neue Verlinkung bekommt?
Der Link hat dieses Format:
[https://www.DOMAIN.de/test/anfrage-formular?sInquiry=detail&sOrdernumber=XXXXXXX](https://www.DOMAIN.de/test/anfrage-formular?sInquiry=detail&sOrdernumber=XXXXXXX)
Edit: Ich konnte den Button umbenennen und eine Verlinkung hinterlegen. Beim Anhängen der Artikelnummer komme ich aber nicht weiter.
```auto
document.querySelector(".buybox--button").innerHTML = " Produkt anfragen";
```
Kann der Wert aus `.product--details .product--base-info .entry--content` irgendwie angehängt werden?
---
### Author:  [@phil](https://forum.shopware.com/u/phil)
#### Post date: [1. September 2021 um 19:10 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/10 "2021-09-01T19:10:22Z")
Du hast doch vollen Zugriff auf alle Shopware-Variablen, warum nimmst du nicht einfach `{$sArticle.ordernumber}`?
LG Phil
---
### Author:  [@AWT](https://forum.shopware.com/u/AWT)
#### Post date: [3. September 2021 um 12:19 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/11 "2021-09-03T12:19:16Z")
Wie binde ich die Variable denn ein, damit diese auch den gewünschten Wert ausgibt? Wenn ich einfach
` https://www.DOMAIN.de/test/anfrage-formular?sInquiry=detail&sOrdernumber={$sArticle.ordernumber}`
schreibe wird die Variable als Text ausgegeben.
Lars
---
### Author:  [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)
#### Post date: [3. September 2021 um 12:54 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/12 "2021-09-03T12:54:22Z")
Mittels inline JS im Theme und dann das „literal“ nicht vergessen
---
### Author:  [@AWT](https://forum.shopware.com/u/AWT)
#### Post date: [7. September 2021 um 08:06 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/13 "2021-09-07T08:06:05Z")
Danke für eure Hilfe! Ich habe mich ein wenig in das Thema eingelesen, kommte mit dem ganzen Coding aber noch nicht klar.
ich habe nun eine buy.tpl unter /themes/Frontend/THEME/frontend/detail angelegt.
Leider ist diese natürlich nicht zu gebrauchen, bzw. wieder fehlerhaft und unvollständig.
```auto
{extends file='parent:frontend/detail/buy.tpl'}
{block name="frontend_detail_buy"}
{if $uvRiPrDiRe_tmpdata_activate_output == '2'}
{block name="frontend_detail_buy_request_button"}
{$uvRiPrDiRe_tmpdata_schema_prod_button_text}
{/block}
{/if}
{/block}
```
Daten zu unserem Plugin für Warenkorb und Anfragebutton:
`$uvRiPrDiRe_tmpdata_activate_output == '1'` // Anfragebutton aktiv
`$uvRiPrDiRe_tmpdata_activate_output == '2'` // Warenkorb aktiv
`'s_articles_attributes', 'outputschema_article_request_module'` // Vielleicht auch wichtig?
Nun könnte man doch auf unser vorhandenes Plugin zugreifen und folgendes prüfen:
if `$uvRiPrDiRe_tmpdata_activate_output == '2'`
UND
`(document.querySelector(".product--details .product--buybox .price--content").innerHTML.includes("Preis auf Anfrage")`
DANN `$uvRiPrDiRe_tmpdata_activate_output == '1'`
Die Einstellung $uvRiPrDiRe\_tmpdata\_activate\_output wird allerdings in der WaWi gesetzt und übertragen.
Daher vielleicht besser etwas in diese Richtung:
```auto
block name="frontend_detail_buy_request_button"}
{$uvRiPrDiRe_tmpdata_schema_prod_button_text}
{/block}
```
Der Code kommt direkt aus einer Datei vom Plugin.
Kann man damit aus der Ferne überhaupt etwas anfangen oder ist das alles nicht nachvollziehbar?
Lars
---
### Author:  [@phil](https://forum.shopware.com/u/phil)
#### Post date: [7. September 2021 um 15:53 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/14 "2021-09-07T15:53:19Z")
So ganz blicke ich nicht durch. Aber wenn Du beim Plugin Smarty-Code definieren kannst, der dann mit reinkompiliert wird, dann sollte dein letzter Ansatz zielführend sein. Ansonsten (soweit Source-Code vorhanden) kannst Du ja notfalls auch das Plugin selbst anpassen, denn der Ansatz mit JS ist nicht wirklich sauber…
LG Phil
---
### Author:  [@AWT](https://forum.shopware.com/u/AWT)
#### Post date: [8. September 2021 um 14:57 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/15 "2021-09-08T14:57:04Z")
Ich habe sämtliche Dinge ausprobiert, es werden mir entweder Fehler ausgegeben oder es verschwinden einfach beide Buttons. Hier ein Beispiel:
```auto
{extends file='parent:frontend/detail/buy.tpl'}
{block name="frontend_detail_buy"}
{$smarty.block.parent}
{if $uvRiPrDiRe_tmpdata_activate_output == '2'}
block name="frontend_detail_buy_request_button"}
{$uvRiPrDiRe_tmpdata_schema_prod_button_text}
{/block}
{/if}
{/block}
```
Selbst wenn der Code funktionieren würde, fehlt mir dort immer noch die && Abfrage, weil der Code ja nur greifen soll, wenn in `.product--details .product--buybox .price--content` „Preis auf Anfrage“ steht. Ich habe einfach keine Ahnung, wie dieser aufgebaut sein muss.
Ich finde im Gegensatz zu JS oder CSS auch einfach nichts hilfreiches beim Googlen.
Oder bin ich generell mit der buy.tpl komplett auf dem Holzweg? 🤦🏻♂️
Lars
---
### Author:  [@phil](https://forum.shopware.com/u/phil)
#### Post date: [8. September 2021 um 16:34 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/16 "2021-09-08T16:34:37Z")
Naja, das Problem scheint ja zu sein, dass das Plugin den DOM im Frontend dynamisch ändert - in diesem Falle musst du es wohl oder übel mit JS machen, welches auch im Frontend läuft (oder gleich das Plugin anpassen). Und du musst auch bedenken, dass da ggf. noch der Cache mit reinspielt.
Da wir aber das Plugin und seine Arbeitsweise nicht kennen, wird es schwierig dir da aus der Ferne zu helfen.
LG Phil
---
### Author:  [@AWT](https://forum.shopware.com/u/AWT)
#### Post date: [17. September 2021 um 10:45 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/17 "2021-09-17T10:45:15Z")
Hallo, ich melde mich nochmal zurück.
Ich habe tatsächlich die Möglichkeit, das Plugin zu ändern.
Folgenden Code muss ich verändern / ergänzen:
```auto
{if $uvRiPrDiRe_tmpdata_schema_prod_request_button == '1'}
{block name="frontend_detail_buy_request_button"}
{$uvRiPrDiRe_tmpdata_schema_prod_button_text}
{/block}
```
Das habe ich versucht:
`{if $uvRiPrDiRe_tmpdata_schema_prod_request_button == '1' || $sArticle.price|strstr:'Preis auf Anfrage'}`
und `{if $uvRiPrDiRe_tmpdata_schema_prod_request_button == '1' || $sArticle.price == "Preis auf Anfrage"}`
Ich habe schon einiges ausprobiert. Die Variable $sArticle.price funktioniert mit Zahlen, nur leider mit dem Text nicht. Wie kann man bei dieser Variable auf den Text zugreifen?
Lars
---
### Author:  [@phil](https://forum.shopware.com/u/phil)
#### Post date: [18. September 2021 um 06:56 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/18 "2021-09-18T06:56:46Z")
Hi Lars,
der Code-Schnipsel von Deinem Plugin ändert doch den “Kaufen”-Button bereits so ab, dass dieser den Artikel nicht mehr in den Warenkorb legt, sondern das Anfrageformular triggert. Was genau willst Du denn erreichen?
LG Phil
---
### Author:  [@AWT](https://forum.shopware.com/u/AWT)
#### Post date: [20. September 2021 um 14:44 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/19 "2021-09-20T14:44:05Z")
Hallo Phil,
zum besseren Verständnis hier noch ein Screenshot:
Der Code wird nur genutzt, wenn das Ausgabeschema 1 (für reine Anfrageartikel) aktiv ist. Beim Ausgabeschema 2 ist der Warenkorb-Button aktiv. Wenn der Preis allerdings abläuft, steht im Preisfeld „Preis auf Anfrage“, der Warenkorb-Button bleibt aber. Um das zu verhindern würde ich gerne
`|| $sArticle.price|strstr:'Preis auf Anfrage'`
oder ähnlich anhängen. Mit Zahlen habe ich die Variable getestet und das funktioniert auch, nur eben mit dem Text nicht.
Ich habe auch schon versucht, auf das Ablaufdatum per Variable zuzugreifen, das hat auch nicht geklappt.
Die Variablen fürs Ablaufdatum sind:
$showPrice = $showPrice && $currentDate \<= $priceValidUntil
oder nur
$currentDate \<= $priceValidUntil
Das sah dann z. B. so aus:
`{if $uvRiPrDiRe_tmpdata_schema_prod_request_button == '1' || $currentDate <= $priceValidUntil}`
Aus der vermeintlichen Kleinigkeit ist ein ziemlicher Akt geworden. 🙄
Lars
---
### Author:  [@phil](https://forum.shopware.com/u/phil)
#### Post date: [20. September 2021 um 22:04 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/20 "2021-09-20T22:04:52Z")
Ja, aber das liegt einfach daran, dass dieses Plugin nicht sauber implementiert ist. Schon mal den Hersteller/Autor mit diesem Problem konfrontiert?
All Deine Versuche oben werden so nicht zum Ziel führen, da Smarty-Code ja kompiliert wird, und diese Seite dann im Cache landet. Somit ist es nicht so ohne weiteres möglich, den Inhalt einer Seite zu dynamisieren. Das {nocache} von Smarty funktioniert mit Shopware nicht, um also einzelne Werte über ESI Tags immer „frisch“ anzufordern, braucht man ein Action-Widget und nutzt dann im Smarty-Code den {action…} Befehl. Siehe auch
- [Shopware HTTP cache](https://developers.shopware.com/developers-guide/http-cache/?_ga=2.66764846.1061265270.1632168100-1043945997.1610574042#action-tag)
- [Understanding the Shopware HTTP Cache](https://developers.shopware.com/blog/2015/02/11/understanding-the-shopware-http-cache/) und
- [On action tags](https://developers.shopware.com/blog/2016/07/11/on-action-tags/)
Da es das Plugin allerdings irgendwie hinbekommt, den Preis durch „Preis auf Anfrage“ zu ersetzen, sollte es eigentlich im gleichen Zuge auch möglich sein, die Lieferzeit auszublenden und einen anderen Button auszugeben.
Der Ansatz mit JS läuft ja im Browser. Dort allerdings den gesamten DOM zu verbiegen (damit der Button einmal in den Warenkorb legt, und einmal das Anfrageformular triggert) ist ziemlich unsauber.
Wenn, dann würde ich im buy.tpl einfach schon BEIDE Buttons ins HTML schreiben lassen, und den einen (zunächst) unsichtbar machen. In deinem JS Code switcht Du dann nur die Sichtbarkeit der beiden Buttons.
LG Phil
---
### Author:  [@AWT](https://forum.shopware.com/u/AWT)
#### Post date: [21. September 2021 um 06:45 UTC](https://forum.shopware.com/t/preisanzeige-warenkorb-css-javascript-if-class-a-contains-x-class-b-hidden/89977/21 "2021-09-21T06:45:19Z")
Der Shop in der Testumgebung war im Bearbeitungsmodus, der HTTP Cache war also deaktiviert.
Ich konnte nun in der buy.tpl auch auf die Variable vom Preis-Ablaufdatum zugreifen, was vermutlich die beste Lösung ist. Die Ein- und Ausblendung des jeweiligen Buttons in JS klappt ebenfalls.
Ich werde das Ganze nochmal intensiv testen und ein paar Szenarien durchspielen, betrachte das Problem aber erstmal als gelöst.
Besten Dank!
Lars