Hinweis

Dieses Plugin ist hauptsächlich für erfahrene Programmierer bzw. Designer geeignet, da für alle Änderungen umfangreiche Template-Anpassungen vorgenommen werden müssen. Alle beschriebenen Anpassungen sind Beispiele und beziehen sich auf ein abgeleitetes Template.

Das Plugin-Design und Funktionalität ist auf das Shop-Standard Template angepasst. Sollten Abweichungen in eigenen oder Dritthersteller-Templates bestehen, müssen ggf. entsprechende Anpassungen zur Plugin-Nutzung vorgenommen werden.


Einrichtungs Beispiel Austausch von Text- und Hintergrundfarbe

In der Datei

.../themes/Frontend/{Ihr_Temlate}/frontend/index/header.tpl

fügen Sie bitte im Block {block name=“frontend_index_header_css_screen“} folgenden Code hinzu:

{extends file="parent:frontend/index/header.tpl"}
{ Stylesheets }
{block name="frontend_index_header_css_screen"}
{$smarty.block.parent}
  {foreach $SwpCategoryColor as $catcolor}         
   {if $sCategoryCurrent == $catcolor.CatId}
    {assign var=SwpCategoryColorCurrent value=$catcolor}
   {elseif $sArticle.categoryID == $catcolor.CatId}
    {* article cat id *}
    {assign var=SwpCategoryColorCurrent value=$catcolor}
   {/if}
  {/foreach}

{* provide css classes for categories colors *}
<style type="text/css">
{if $SwpCategoryColorCurrent.CatColor || $SwpCategoryColorCurrent.CatTextColor}
 /* Background */
 .navigation-main .is--active .navigation--link,
 .product--box .product--badges .badge--discount,
 .is--primary
  {literal}{{/literal}
  {if $SwpCategoryColorCurrent.CatColor}
    background:{$SwpCategoryColorCurrent.CatColor} !important;
   {/if}
  {literal}}{/literal}

/* Text */
{if $SwpCategoryColorCurrent.CatTextColor}
  .content--breadcrumb .is--active .breadcrumb--link,
  .sidebar--navigation .navigation--link.is--active,
  .product--box .product--price .price--default.is--discount,
  .navigation--list .entry--cart .cart--link .cart--amount
  {literal}{{/literal}
  color:{$SwpCategoryColorCurrent.CatTextColor} !important;
  {literal}}{/literal}                     
{/if}

/* Navigation-Border */
.navigation-main
  {literal}{{/literal}
  {if $SwpCategoryColorCurrent.CatColor}
    border-bottom: 1px solid {$SwpCategoryColorCurrent.CatColor} ;
   {/if}
   {literal}}{/literal}
{/if}
</style>
{/block}

Einrichtungs Beispiel Austausch vom Logo

In der Datei

.../themes/Frontend/{Ihr_Temlate}/frontend/index/logo-container.tpl

suchen Sie bitte folgendene Zeilen:

{block name='frontend_index_logo'}

    <div class="logo--shop block">

        <a class="logo--link" href="{url controller='index'}" title="{"{config name=shopName}"|escape} - {"{s name='IndexLinkDefault'}{/s}"|escape}">

            {foreach $SwpCategoryColor as $catcolor}

                {if $sCategoryCurrent == $catcolor.CatId}

                    {assign var=SwpCategoryColorCurrent value=$catcolor}

                {elseif $sArticle.categoryID == $catcolor.CatId}

                    {* article cat id *}

                    {assign var=SwpCategoryColorCurrent value=$catcolor}

                {/if}

            {/foreach}

            <picture>

                {* desktop logo *}

                {if $SwpCategoryColorCurrent.DesktopLogo}

                    <source srcset="{link file=$SwpCategoryColorCurrent.DesktopLogo}" media="(min-width: 78.75em)">

                {else}

                    <source srcset="{link file=$theme.desktopLogo}" media="(min-width: 78.75em)">

                {/if}

                {* tablet landscape logo *}

                {if $SwpCategoryColorCurrent.TabletLandscapeLogo}

                    <source srcset="{link file=$SwpCategoryColorCurrent.TabletLandscapeLogo}" media="(min-width: 64em)">

                {else}

                    <source srcset="{link file=$theme.tabletLandscapeLogo}" media="(min-width: 64em)">

                {/if}

                {* tablet logo *}

                {if $SwpCategoryColorCurrent.TabletLogo}

                    <source srcset="{link file=$SwpCategoryColorCurrent.TabletLogo}" media="(min-width: 48em)">

                {else}

                    <source srcset="{link file=$theme.tabletLogo}" media="(min-width: 48em)">

                {/if}

                {* mobile logo *}

                {if $SwpCategoryColorCurrent.MobileLogo}

                    <img srcset="{link file=$SwpCategoryColorCurrent.MobileLogo}" alt="{"{config name=shopName}"|escape} - {"{s name='IndexLinkDefault' namespace="frontend/index/index"}{/s}"|escape}" />

                {else}

                    <img srcset="{link file=$theme.mobileLogo}" alt="{"{config name=shopName}"|escape} - {"{s name='IndexLinkDefault' namespace="frontend/index/index"}{/s}"|escape}" />

                {/if}

            </picture>

         </a>

     </div>

 {/block}

 

und mit folgenden ersetzen:

{block name='frontend_index_logo'}

    <div class="logo--shop block">

        <a class="logo--link" href="{url controller='index'}" title="{"{config name=shopName}"|escape} - {"{s name='IndexLinkDefault'}{/s}"|escape}">

            {foreach $SwpCategoryColor as $catcolor}

                {if $sCategoryCurrent == $catcolor.CatId}

                    {assign var=SwpCategoryColorCurrent value=$catcolor}

                {elseif $sArticle.categoryID == $catcolor.CatId}

                    {* article cat id *}

                    {assign var=SwpCategoryColorCurrent value=$catcolor}

                {/if}

            {/foreach}

               <picture>

                {* desktop logo *}

                    {if $SwpCategoryColorCurrent.DesktopLogo}

                        <source srcset="{link file=$SwpCategoryColorCurrent.DesktopLogo}" media="(min-width: 78.75em)">

                    {else}

                        <source srcset="{link file=$theme.desktopLogo}" media="(min-width: 78.75em)">

                    {/if}     

                {* tablet landscape logo *}

                    {if $SwpCategoryColorCurrent.TabletLandscapeLogo}

                        <source srcset="{link file=$SwpCategoryColorCurrent.TabletLandscapeLogo}" media="(min-width: 64em)">

                    {else}

                         <source srcset="{link file=$theme.tabletLandscapeLogo}" media="(min-width: 64em)">

                    {/if}

                {* tablet logo *}

                    {if $SwpCategoryColorCurrent.TabletLogo}

                        <source srcset="{link file=$SwpCategoryColorCurrent.TabletLogo}" media="(min-width: 48em)">

                    {else}

                        <source srcset="{link file=$theme.tabletLogo}" media="(min-width: 48em)">

                    {/if}

                {* mobile logo *}

                    {if $SwpCategoryColorCurrent.MobileLogo}

                        <img srcset="{link file=$SwpCategoryColorCurrent.MobileLogo}" alt="{"{config name=shopName}"|escape} - {"{s name='IndexLinkDefault' namespace="frontend/index/index"}{/s}"|escape}" />

                    {else}

                        <img srcset="{link file=$theme.mobileLogo}" alt="{"{config name=shopName}"|escape} - {"{s name='IndexLinkDefault' namespace="frontend/index/index"}{/s}"|escape}" />

                    {/if}

                </picture>                     

            </a>

        </div>

    {/block}

Beispieldateien für die einzelnen Shopware-Versionen

Version 5.3.7

Version_5.4.x

 

Konfiguration

Das Plugin muss lediglich aktiviert werden und steht nach einem Neuladen des Backends in der jeweiligen Kategorie zur Bearbeitung bereit.

Neben der Farbdefinition pro Kategorie können Sie auch ein eigenes Logo für diese hinterlegen. Das Logo kann widerrum zwischen Desktop und mobilen Geräten unterschieden werden. Wird keine Auswahl getroffen, wird das Standard-Logo des Shops verwendet.

Bei der Auswahl der Farben für die Kategorien steht Ihnen ein Colorpicker zur Verfügung. Sollten Sie einen bestimmten Farbwert hinterlegen, achten Sie bitte darauf, dass dieser in der hexadezimalen Schreibweise (z. B. #FFFA15) hinterlegt wird.

Die für die Kategorien hinterlegten Werte sind auf den Artikelseiten, sowie den Kategorielistings verfügbar und können mittels Fachwissen in das entsprechende Theme eingebaut werden. Eine detaillierte Anleitung ist hier nicht möglich, weil diese Einstellungen mit entsprechendem Fachwissen (bspw. Nutzung der smarty-debug-Konsole) hochgradig individuell verwendbar sind.