Preisanzeige, Warenkorb - CSS / Javascript - if class A contains "X", class B hidden

[AWT]

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

[brettvormkopp]

Mit den Daten von dir kann man in JS sowas bauen:

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.

[AWT]

Danke für den Vorschlag!

Leider habe ich beim implementieren doch ein Problem, folgender Code in der buy_container.tpl verursacht einen Fehler:

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

[brettvormkopp]

das Beispiel von mir ist Javascript und kein Smarty

[AWT]

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:

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:

[phil]

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

LG Phil

[AWT]

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

[AWT]

Problem gelöst.

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

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

Edit: Ich konnte den Button umbenennen und eine Verlinkung hinterlegen. Beim Anhängen der Artikelnummer komme ich aber nicht weiter.

document.querySelector(".buybox--button").innerHTML = "<span> <a href = 'https://www.DOMAIN.de/test/anfrage-formular?sInquiry=detail&sOrdernumber=' target= '_blank'>Produkt anfragen</a></span>";

Kann der Wert aus .product--details .product--base-info .entry--content irgendwie angehängt werden?

[phil]

Du hast doch vollen Zugriff auf alle Shopware-Variablen, warum nimmst du nicht einfach {$sArticle.ordernumber}?

LG Phil

[AWT]

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

[brettvormkopp]

Mittels inline JS im Theme und dann das „literal“ nicht vergessen

[AWT]

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.

{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"}
			<p class="is--align-center"><a href="{url controller=ticket sFid=$uvRiPrDiRe_tmpdata_schema_target_formid sInquiry=detail sOrdernumber=$sArticle.ordernumber}" class="buybox--button btn is--primary is--center" title="titel">{$uvRiPrDiRe_tmpdata_schema_prod_button_text}</a></p>
		{/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:

block name="frontend_detail_buy_request_button"}
			<p class="is--align-center"><a href="{url controller=ticket sFid=$uvRiPrDiRe_tmpdata_schema_target_formid sInquiry=detail sOrdernumber=$sArticle.ordernumber}" class="buybox--button btn is--primary is--center" title="titel">{$uvRiPrDiRe_tmpdata_schema_prod_button_text}</a></p>
		{/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

[phil]

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

[AWT]

Ich habe sämtliche Dinge ausprobiert, es werden mir entweder Fehler ausgegeben oder es verschwinden einfach beide Buttons. Hier ein Beispiel:

{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"}
			<p class="is--align-center"><a href="{url controller=ticket sFid=$uvRiPrDiRe_tmpdata_schema_target_formid sInquiry=detail sOrdernumber=$sArticle.ordernumber}" class="buybox--button btn is--primary is--center" title="titel">{$uvRiPrDiRe_tmpdata_schema_prod_button_text}</a></p>
		{/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

[phil]

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

[AWT]

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:

{if $uvRiPrDiRe_tmpdata_schema_prod_request_button == '1'}
			{block name="frontend_detail_buy_request_button"}
				<p class="is--align-center"><a href="{url controller=ticket sFid=$uvRiPrDiRe_tmpdata_schema_target_formid sInquiry=detail sOrdernumber=$sArticle.ordernumber}" class="buybox--button btn is--primary is--center" title="titel">{$uvRiPrDiRe_tmpdata_schema_prod_button_text}</a></p>
			{/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

[phil]

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

[AWT]

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

[phil]

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
• Understanding the Shopware HTTP Cache und
• 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

[AWT]

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