Shopware „Jetzt vorbestellen“ Button

Bei meinem ersten Shopware Projekt bin auf das Problem gestoßen, das Vorbestellungen meiner Meinung nach nicht ausreichend deklariert werden, Sie werden nur mit einem kleinen Hinweis auf das Erscheinungsdatum ausgezeichnet und der Kunde muss seine Bestellung auf der Detailseite mit einem Klick auf den „In den Warenkorb“-Button tätigen.

Ich wollte gerne, dass der Button sich bei Vorbestellungen ändert und anzeigt, das es sich eben um eine Vorbestellung handelt, im Bestellbutton sollte also stehen, „Jetzt vorbestellen“ anstelle von „In den Warenkorb“.

Daher habe ich die Datei „buy.tpl“ aus dem Base Template Ordner genommen und an die passende Stelle unter: /themes/MEINTEMPLATE/frontend/detail/buy.tpl in mein Template kopiert, um Sie dort anzupassen.

Für die Abfrage ist nun folgender Code-Schnippsel entscheident:
{if $sArticle.sReleasedate|strtotime < $smarty.now}

Er überprüft ob das Erscheinungsdatum erreicht ist. Damit kann man nun eine IF-Abfrage machen, WENN das Erscheinungsdatum erreicht worde ist, DANN … sonst … .

Das führte bei mir in der Datei „buy.tpl“ in ca. Zeile 74 zu folgenden Änderungen:

Vorher:

{* "Buy now" button *}
{block name="frontend_detail_buy_button"}
	{if $sArticle.sConfigurator && !$activeConfiguratorSelection}
		<button class="buybox--button block btn is--disabled is--icon-right is--large" disabled="disabled" aria-disabled="true" name="{s name="DetailBuyActionAdd"}{/s}"{if $buy_box_display} style="{$buy_box_display}"{/if}>
			{s name="DetailBuyActionAdd"}{/s} <i class="icon--arrow-right"></i>
		</button>
	{else}
		<button class="buybox--button block btn is--primary is--icon-right is--center is--large" name="{s name="DetailBuyActionAdd"}{/s}"{if $buy_box_display} style="{$buy_box_display}"{/if}>
			{s name="DetailBuyActionAdd"}{/s} <i class="icon--arrow-right"></i>
		</button>
	{/if}
{/block}

Nachher:

{* "Buy now" button *}
{block name="frontend_detail_buy_button"}
	{if $sArticle.sConfigurator && !$activeConfiguratorSelection}
		<button class="buybox--button block btn is--disabled is--icon-right is--large" disabled="disabled" aria-disabled="true" name="{s name="DetailBuyActionAdd"}{/s}"{if $buy_box_display} style="{$buy_box_display}"{/if}>
			{s name="DetailBuyActionAdd"}{/s} <i class="icon--arrow-right"></i>
		</button>
	{else}
		{if $sArticle.sReleasedate|strtotime < $smarty.now}
			<button class="buybox--button block btn is--primary is--icon-right is--center is--large" name="{s name="DetailBuyActionAdd"}{/s}"{if $buy_box_display} style="{$buy_box_display}"{/if}>
				{s name="DetailBuyActionAdd"}{/s} <i class="icon--arrow-right"></i>
			</button>
		{else}
			<button class="buybox--button block btn is--primary is--icon-right is--center is--large" name="{s name="DetailBuyActionPreOrder"}{/s}"{if $buy_box_display} style="{$buy_box_display}"{/if}>
				{s name="DetailBuyActionPreOrder"}{/s} <i class="icon--arrow-right"></i>
			</button>						
		{/if}
	{/if}
{/block}

Was jetzt noch fehlt, ist die Bezeichnung für unseren neuen Button. Dafür legt Ihr einen neuen Textbaustein in Shopware an. In meinem Fall arbeite ich mit dem Textbaustein bezeichner „DetailBuyActionAdd“. Denn Ihr auch schon in meinem angepassten Quellcode findet. Vergebt nun euren Wert z.B. „Jetzt vorbestellen“ (den Ihr nun jederzeit ohne Eingriff in Template ändern könnt) und schon habt bei Vorbestellungen den passen Button auf euer Detailseite.

Als Base-Template und daher Basis-Quellcode der Änderung dient mir das Bare-Template von Shopware.

Über den Autor
Danny Schulz
Ich arbeite als Webdesigner / Frontend-Developer in einer Online-Marketing Agentur in Hamburg. Dort bin ich für die Umsetzung verschiedener Webprojekte verantwortlich, wodurch ich mir bereits einiges an Erfahrungen in vielen Bereichen der Webentwicklung aneignen konnte.

8 Gedanken zu „Shopware „Jetzt vorbestellen“ Button

  1. Patrick

    Hey Danny,

    vielen Dank für den Code. Genau das wonach ich gesucht habe 🙂 Funktioniert auf Anhieb.
    Hast Du vielleicht ne Idee wie mann bei Release Artikeln statt den Lieferstatus „vergriffen“ im Listing das Release Datum ausgeben kann?

    Liebe Grüße

    Patrick

    Antworten
    1. Danny Schulz Artikelautor

      Hallo Patrick, freut mich das ich helfen konnte. Den Hinweis auf das Release-Datum wird ja bereits auf der Detailseite verwendet, dort kann man Ihn sich entsprechend raus nehmen, und in der Listenansicht ggf. mit kleineren Anpassungen platzieren.
      Den Codeschnippsel findest du unter: /themes/MEINTEMPLATE/frontend/detail/data.tpl ca. Zeile 111.

      {block name=“frontend_detail_data_delivery“}
      {* Delivery informations *}
      {if ($sArticle.sConfiguratorSettings.type != 1 && $sArticle.sConfiguratorSettings.type != 2) || $activeConfiguratorSelection == true}
      {include file=“frontend/plugins/index/delivery_informations.tpl“ sArticle=$sArticle}
      {/if}
      {/block}

      Wenn du diesen z.B. in der Datei für die Produkte innerhalb der Liste platzierst, sollte das schon ausreichen.
      (Beispiel-Datei: /themes/MEINTEMPLATE/frontend/listing/product-box/box-basic.tpl ca. Zeile 25 unter dem Produktbild.)

      Hoffe das hilft dir weiter!
      Gruß, Danny

  2. Knecht

    Bei mir funktioniert es leider nicht…

    Bei verfügbaren Artikeln erscheint:
    In den Warenkorb“> In den Warenkorb

    Wo ist der Syntaxfehler?

    Antworten
    1. Danny Schulz Artikelautor

      Hallo Knecht,

      Ferndiagnosen sind immer schwierig, schaue dir aber bitte nochmal den Abschnitt name=“{s name=“DetailBuyActionAdd“}{/s}“ bei dir an. Bei meinem Projekt arbeite ich mit Shopware 5, bei einer neueren Version, gibt es womöglich ein Syntax-Update. Wichtig ist das die “ richtig platziert sind.

      Gruß
      Danny

    2. Knecht

      {* „Buy now“ button *}
      {block name=“frontend_detail_buy_button“}
      {if $sArticle.sConfigurator && !$activeConfiguratorSelection}

      {s name=“DetailBuyActionAdd“}{/s}

      {else}
      {if $sArticle.sReleasedate|strtotime < $smarty.now}

      {s name=“DetailBuyActionAdd“}{/s}

      {else}

      {s name=“DetailBuyActionPreOrder“}{/s}

      {/if}
      {/if}
      {/block}

      So steht es bei mir drinnen… 🙁

      Bei Artikel mit Erscheinungsdatum in der Zukunft, steht korrekterweise „Jetzt Vorbestellen“ bei allen anderen Steht immer noch

      In den Warenkorb“> In den Warenkorb

      Ich finde diesen doofen Fehler einfach nicht -.-

    3. Danny Schulz Artikelautor

      Der gepostete Code scheint sauber zu sein und funktioniert bei mir ebenfalls. Überprüfe nochmal den Aufbau deines Buttons, vielleicht liegt der Fehler im HTML oder im Textbaustein.

      Schöne Grüße!

  3. Knecht

    Hi Danny,

    klappt nun alles. Hatte einen Fehler im Textbaustein, wo auch immer der herkam.
    Danke für dieses coole Feature.

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert