Farben für Kategorien für Shopware 5

Farben für Kategorien für Shopware 5
ab 195,00 € *

zzgl. MwSt. zzgl. Versandkosten

Lizenz:

  • SwpCategoryColor
  • SwpCategoryColor
Mit dem Plugin "Farben für Kategorien" ist es Ihnen möglich, für jede Kategorie eine separate... mehr
"Farben für Kategorien für Shopware 5"

Mit dem Plugin "Farben für Kategorien" ist es Ihnen möglich, für jede Kategorie eine separate Farbe und Logo festzulegen. Sie können z. B. verschiedene Hersteller verschiedenfarbig darstellen inkl. des jeweiligen Herstellerlogos. So machen Sie es Ihren Kunden bereits beim Betreten des Shops einfach und schnell das gewünschte Produkt zu finden oder bestimmte zusammenhängende Produktbereiche farblich hervorzuheben. Schließlich ist gerade beim Online-Shoppen Zeit = Geld.

Das Plugin fügt in den Kategorieeinstellungen zwei neue „Farbreihen“ hinzu, mit denen die Kategoriefarbe und -text individualisiert werden können. Eine manuelle Eingabe in hexadezimaler Schreibweise über ein Eingabefeld ist ebenfalls möglich. Damit kann die gewünschte Farbe zielgerichtet und punktgenau hinterlegt werden.

 

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

System: Shopware 5
Kategorie: Frontend
Shopversion: 5.3.x, 5.4.x
Mit dem Plugin "Farben für Kategorien" ist es Ihnen möglich, für jede Kategorie eine separate... mehr
Downloads

Vorbereitung der Installation

Vor der Installation eines Plugins solltest Du Deine Daten sichern. Besonders wichtig: die Shopdatenbank.

Foundation-Plugin

Das Foundation-Plugin liefert für alle unsere Plugins die nötigen Grundfunktionen und unsere neue Lizenzverwaltung.

Schritt 1 - Installation des Foundation Plugins:

  • Im Shopware Backend den Pluginmanager öffnen.
  • Den Punkt "Installiert" auswählen.
  • Auf Plugin hochladen klicken, die zip Datei des Foundation Plugins auswählen und hochladen.
  • Das Foundation Plugin welches nach dem Upload unter "Deinstalliert" zu finden ist installieren und aktivieren.
  • Nach der Installation musst Du den kompletten Adminbereich neu laden (in den meisten Browsern mit F5).

 

Schritt 2 - Lizenzen einfügen:

Du findest im Adminbereich unter Einstellungen den neuen Menüpunkt „Module-Factory-Lizenzen“. An dieser Stelle kannst Du den von uns erhaltenen Lizenzkey mit dem „Hinzufügen“-Button abspeichern. Die Lizenz des eigentlichen Plugins musst Du anschliessend in der Lizenzübersicht aktivieren, indem Du bei der gewünschten Lizenz im Listing auf den roten Button klicken. Dadurch werden dann alle benötigten Lizenzinformationen per Curl-Verbindung in das Foundation-Plugin importiert.

Kurzfassung:

Foundation-Plugin wie gewohnt installieren
Admin -> Shop -> Module-Factory-Lizenzen -> Neu -> aktivieren -> markieren -> Auswahl aktivieren

Schritt 1 muss nur ein einziges Mal durchgeführt werden, VOR der Installation des allersten Plugin unseres Unternehmens.

Systemvoraussetzung

Systemvoraussetzung für dieses Plugin ist Shopware ab Version 5.x Die Aufwärtskompatibilität ist in der Regel gegeben, kann jedoch nicht zu jedem Zeitpunkt garantiert werden.

Installation – Schritt für Schritt

  • Im Shopware Backend den Pluginmanager öffnen.
  • Den Punkt "Installiert" auswählen.
  • Auf Plugin hochladen klicken, die zip Datei des heruntergeladenen Plugins auswählen und hochladen.
  • Das Plugin welches nach dem Upload unter "Deinstalliert" zu finden ist installieren und aktivieren.

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.