# "ZUM PRODUKT" Button in Artikelbox

**URL:** <https://forum.shopware.com/t/quot-zum-produkt-quot-button-in-artikelbox/26183>\
**Category:** Themes & Design\
**Created:** [11. April 2015 um 05:01 UTC](https://forum.shopware.com/t/quot-zum-produkt-quot-button-in-artikelbox/26183 "2015-04-11T05:01:22Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![regentanker](https://avatars.discourse-cdn.com/v4/letter/r/50afbb/32.png) [@regentanker](https://forum.shopware.com/u/regentanker)\
**Post date:** [11. April 2015 um 05:01 UTC](https://forum.shopware.com/t/quot-zum-produkt-quot-button-in-artikelbox/26183/1 "2015-04-11T05:01:22Z")

</div>

Hi, ich suche nach einer Möglichkeit die Artikelbox im Listing um einen Button zu ergänzen. Hier ein Screenshot zur Verdeutlichung: Wäre über einen Ansatz wirklich dankbar! Beste Grüße

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [11. April 2015 um 08:38 UTC](https://forum.shopware.com/t/quot-zum-produkt-quot-button-in-artikelbox/26183/2 "2015-04-11T08:38:30Z")

</div>

Dazu müsstest du das Template listing/product-box/box-basic.tpl bearbeiten und dir einen entsprechenden Button reinknallen. Der Button würde dann bspw. sein : `[{s name="ListingButtonText"}{/s}]({$sArticle.linkDetails|rewrite:$sArticle.articleName} "{$sArticle.articleName|escape}")` Wenn du das genau so machen willst wie auf dem Screenshot, dann müsstest du noch dem div.product–price-info 50% Breite geben. Der Code wäre dann in etwa so: [code]{extends file=‚parent:frontend/listing/product-box/box-basic.tpl‘} {block name=‚frontend\_listing\_box\_article\_price\_info‘ append}

{s name=„ListingButtonText“}{/s}  
{/block}[/code] Dann müsstest du dir noch eine entsprechende Less Datei anlegen und wie gesagt dem div div.product–price-info 50% Breite geben und ein float:left. Und der neuen Box ( .product–gobutton ) mit den Button ebenfalls.

---

<div class="post-metadata">

**Author:** ![regentanker](https://avatars.discourse-cdn.com/v4/letter/r/50afbb/32.png) [@regentanker](https://forum.shopware.com/u/regentanker)\
**Post date:** [11. April 2015 um 17:13 UTC](https://forum.shopware.com/t/quot-zum-produkt-quot-button-in-artikelbox/26183/3 "2015-04-11T17:13:42Z")

</div>

Der Ansatz war gut. Habs jetzt ein bisschen anders gelöst. Habe die Änderung in der Datei “product-actions.tpl” durchgeführt. Die sieht so aus: [code]{namespace name=“frontend/listing/box\_article”}

{\* Compare button \*} {block name=‘frontend\_listing\_box\_article\_actions\_compare’} [{s name=‘ListingBoxLinkCompare’}{/s}]({url controller=‘compare’ action=‘add\_article’ articleID=$sArticle.articleID} “{s name=‘ListingBoxLinkCompare’}{/s}”) {/block} {\* Note button \*} {block name=‘frontend\_listing\_box\_article\_actions\_save’} [{s name=“DetailLinkNotepadShort” namespace=“frontend/detail/actions”}{/s}]({url controller=‘note’ action=‘add’ ordernumber=$sArticle.ordernumber} “{”) {/block} {\* @deprecated: block no longer in use \*} {block name=‘frontend\_listing\_box\_article\_actions\_more’}{/block} {\* @deprecated: misleading name \*} {block name=“frontend\_listing\_box\_article\_actions\_inline”}{/block}  
[/code] Da in Zeile 29… dieser Block war in SW4 für “zum Produkt” zuständig, denke ich. Habe einfach den Schnippsel aus SW4 wieder eingefügt ` {block name='frontend\_listing\_box\_article\_actions\_more'}[{s name='ListingBoxLinkDetails'}{/s}]({$sArticle.linkDetails|rewrite:$sArticle.articleName} "{$sArticle.articleName}"){/block}` Funktioniert auch und das ganze sieht dann so aus: Jetzt meine Frage: Wie kann ich das jetzt “stylen”? Bei SW 4 hätte ich das ja einfach in der css von meinem Template machen können… wie bekomme ich das aber hier gelöst?

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [11. April 2015 um 20:03 UTC](https://forum.shopware.com/t/quot-zum-produkt-quot-button-in-artikelbox/26183/4 "2015-04-11T20:03:23Z")

</div>

Dazu musst du dir noch die entsprechende Less Datei erstellen. [Hier](https://blog.hostianer.de/shopware-5-logo-groesse-anpassen/) ist einmal ein Ansatz den du dafür verwenden kannst. Alternativ ist es auch [hier](https://devdocs.shopware.com/designers-guide/theme-startup-guide/) noch einmal beschrieben. Sollte es ein Button sind ist die class “btn”. Dann gibts halt noch weitere Klassen für die Buttons wie is–large usw. Diese stehen in der buttons.less.

---

<div class="post-metadata">

**Author:** ![Dr.Rivera](https://avatars.discourse-cdn.com/v4/letter/d/b38774/32.png) [@Dr.Rivera](https://forum.shopware.com/u/Dr.Rivera)\
**Post date:** [5. Februar 2016 um 18:59 UTC](https://forum.shopware.com/t/quot-zum-produkt-quot-button-in-artikelbox/26183/5 "2016-02-05T18:59:24Z")

</div>

Hallo,

ist es richtig, dass es von Haus aus in Shopware nicht möglich ist, einen Link/Button im Listing zu den Produkten einzublenden?

Muss das wirklich selbst gemacht werden?

&nbsp;

Danke und Grüße

---

<div class="post-metadata">

**Author:** ![sonn](https://avatars.discourse-cdn.com/v4/letter/s/e9bcb4/32.png) [@sonn](https://forum.shopware.com/u/sonn)\
**Post date:** [22. April 2016 um 09:35 UTC](https://forum.shopware.com/t/quot-zum-produkt-quot-button-in-artikelbox/26183/6 "2016-04-22T09:35:27Z")

</div>

Hallo,

bei mir funktioniert das nicht. Habe versucht den Block zu überschreiben:

```
{extends file="frontend/listing/product-box/product-actions.tpl"}

{block name='frontend_listing_box_article_actions_more'}

{s name='ListingBoxLinkDetails'}{/s}

{/block}

```

Das Template lädt dann nicht mehr. Kann hier wer helfen?

---

<div class="post-metadata">

**Author:** ![hds](https://avatars.discourse-cdn.com/v4/letter/h/bb73d2/32.png) [@hds](https://forum.shopware.com/u/hds)\
**Post date:** [22. April 2016 um 18:08 UTC](https://forum.shopware.com/t/quot-zum-produkt-quot-button-in-artikelbox/26183/7 "2016-04-22T18:08:43Z")

</div>

Versuchs mal damit:

{extends file=‚parent:frontend/listing/product-box/product-actions.tpl‘} ( parent: fehlt )

möchtest du den " **zum Produkt**" Button vor dem " **vergleichen**" Button haben musst du&nbsp;

**das** {block name=‚frontend\_listing\_box\_article\_actions\_more‘} **mit dem austauschen** &nbsp;{block name=‚frontend\_listing\_box\_article\_actions\_compare‘ prepend}

willst du statt Text ein icon haben dann musst du **das** &nbsp;{s name=‚ListingBoxLinkDetails‘}{/s} **gegen das hier austauschen&nbsp;**

VG

---

<div class="post-metadata">

**Author:** ![myfuntime](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@myfuntime](https://forum.shopware.com/u/myfuntime)\
**Post date:** [2. Oktober 2016 um 20:50 UTC](https://forum.shopware.com/t/quot-zum-produkt-quot-button-in-artikelbox/26183/8 "2016-10-02T20:50:36Z")

</div>

Also ich hab´s so gelöst:

**Hab auch die&nbsp;product-actions.tpl genommen und folgenden code eingefügt :**

```
{* Zum Produkt - Button *}
        {block name='frontend_listing_box_article_actions_more'}
            
             
            {s name='ListingBoxLinkDetails'}{/s}
        
    {/block}

```

&nbsp;

**insgesammt sollte die datei dann so aussehen:**

```
{namespace name="frontend/listing/box_article"}

{* Product actions *}
{block name='frontend_listing_box_article_actions_content'}
    
	
		{* Zum Produkt - Button *}
		{block name='frontend_listing_box_article_actions_more'}
			
			 
			{s name='ListingBoxLinkDetails'}{/s}
		
	{/block}

        {* Compare button *}
        {block name='frontend_listing_box_article_actions_compare'}
            {if {config name="compareShow"}}
                
                    
                         {s name='ListingBoxLinkCompare'}{/s}
                    
                
            {/if}
        {/block}

        {* Note button *}
        {block name='frontend_listing_box_article_actions_save'}
            
                
                     {s name="DetailLinkNotepadShort" namespace="frontend/detail/actions"}{/s}
                
            
        {/block}

        {* @deprecated: block no longer in use *}
        {block name='frontend_listing_box_article_actions_more'}{/block}

        {* @deprecated: misleading name *}
        {block name="frontend_listing_box_article_actions_inline"}{/block}
    
{/block}

```

&nbsp;

**Und so sieht´s dann aus:**

![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/e/ef99f84130daba7636a02ea36d31a9b1bddfcde2.jpeg)

---

<div class="post-metadata">

**Author:** ![great2gether](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/great2gether/32/12887_2.png) [@great2gether](https://forum.shopware.com/u/great2gether)\
**Post date:** [1. April 2018 um 20:53 UTC](https://forum.shopware.com/t/quot-zum-produkt-quot-button-in-artikelbox/26183/9 "2018-04-01T20:53:00Z")

</div>

Für alle Leute mit ausschließlich Variantenartikeln im Shop läßt sich das Vorhaben ab SW 5.3 auch dadurch realisieren, dass man im Bereich&nbsp;_Einstellungen \> Grundeinstellungen \> Storefront \> Kategorien / Listen_ &nbsp;beim Punkt „Kaufenbutton im Listing anzeigen“ auf Ja optiert. Auf desem Weg erhält man einen Button mit dem Text _Details_ der dann zum Produkt führt.

VG, Atilla&nbsp;

---

<div class="post-metadata">

**Author:** ![great2gether](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/great2gether/32/12887_2.png) [@great2gether](https://forum.shopware.com/u/great2gether)\
**Post date:** [1. April 2018 um 22:21 UTC](https://forum.shopware.com/t/quot-zum-produkt-quot-button-in-artikelbox/26183/10 "2018-04-01T22:21:00Z")

</div>

Hier habe ich auch noch einmal eine Version mit Warenkorb & Detailbutton - wer den Warenkorb nicht braucht kann den zugehörigen Code weglassen:

&nbsp;

```
{extends file="parent:frontend/listing/product-box/product-actions.tpl" }

{* Product actions *}
{block name='frontend_listing_box_article_actions_content'}
    

    {if $sArticle.sConfigurator}
        {* Zum Produkt - Button *}
        
            
                
                    {s name='ButtonToDetails'}Zu den Artikeldetails{/s} 
                

            
        

    {else}
        
            
            
            
                {s name='ButtonToBasket'}In den Warenkorb{/s} 
            
        
    {/if}

    {$smarty.block.parent}

{/block}

```

In dieser Version habe ich eine entsprechende Datei in meienm Childtheme angelegt und die restlichen Inhalte aus dem ParentTheme vererben lassen. Das ist definitiv die sauberere Methode, da man grundsätzlich weder am Bare noch Responsive Theme direkt rumschrauben sollte. Hmm ich kriege wiede rmal den Code hier nicht korrekt ausgegen. Hab es als SMARTY, HTML und mySQL Code versucht es wird immer zerschossen… Was wählt ihr hier immer aus, damit der Code sauber ausgegeben wird??&nbsp;Hier in dem [Shopware Design anpassen](http://great2gether.com/2016/05/shopware-5-shopware-5-design-anpassen/)&nbsp;Beitrag unter Punkt 4.4 könnt ihr es noch einmal nachsehen.&nbsp;

Viel Erfolg, euer Atilla&nbsp;

---

<div class="post-metadata">

**Author:** ![jonaswagner](https://avatars.discourse-cdn.com/v4/letter/j/e8c25b/32.png) [@jonaswagner](https://forum.shopware.com/u/jonaswagner)\
**Post date:** [30. Oktober 2019 um 11:41 UTC](https://forum.shopware.com/t/quot-zum-produkt-quot-button-in-artikelbox/26183/11 "2019-10-30T11:41:18Z")

</div>

Ich musste den Zum Produkt Button aus dem

 raus nehmen, sonst hat es nicht funktioniert:

```
 {* Zum Produkt - Button *}
     
            
                
                    {s name='ButtonToDetails'}Zu den Artikeldetails{/s} 
                
            
    
```