Quantcast
Channel: Themes & Design - Shopware Community Forum
Viewing all 1971 articles
Browse latest View live

Eigene Styles (via LESS) in Plugin konfigurieren

$
0
0
Hallo Community!

Ich hoffe, ich habe mich hier richtig einsortiert. Mein Problem ist folgendes:

Ich bin neu in der Shopware Plugin Entwicklung und versuche meinem Frontend-Plugin einige Styles mitzugeben. Dafür möchte ich aber ungern ein eigenes Theme erstellen, da es sich lediglich um einen Button handelt, der im Frontend zusätzlich auftaucht. (Dieser soll gestylt werden)

Der Shopbetreiber soll nachher im Backend beispielsweise eine Farbe wählen können (via 'color' Picker, alles kein Problem), die dann zur Schriftfarbe des Buttons wird. So weit so gut, nur hängt es bei mir beim Einbinden meiner less-Datei in das System. Ich habe mich bereits an folgendem Thread orientiert less-files von Plugins überschreiben, bin habe es jedoch nicht geschafft, meine less zu integrieren.

Meine Bootstrap.php sieht folgendermaßen aus:
	private function subscribeEvents()
	{
		/* Subscribe the needed event for less merge and compression */
		$this->subscribeEvent('Theme_Compiler_Collect_Plugin_Less', ' addLessFiles');
	}

	/* Provide the file collection for less

	@param Enlight_Event_EventArgs $args
	@return \Doctrine\Common\Collections\ArrayCollection
	*/
	public function addLessFiles(Enlight_Event_EventArgs $args)
	{
		$less = new \Shopware\Components\Theme\LessDefinition(
		/* Configuration */
		array(),
			/* Less files to compile */
			array(__DIR__ . '/Views/responsive/frontend/_public/src/less/all.less'),
			/* Import directory */
			__DIR__
		);

		return new Doctrine\Common\Collections\ArrayCollection(array($less));
	}

	public function onFrontendPostDispatch(Enlight_Event_EventArgs $args)
	{
		/* @var \Enlight_Controller_Action $controller */
		$controller = $args->get('subject');
		$view = $controller->View();

		$view->addTemplateDir(__DIR__ . '/Views');

    $view->assign('use_resetbtn_option', $this->Config()->get('use_resetbtn_option'));
    $view->assign('font_color', $this->Config()->get('font_color'));
    $view->assign('resetbtn_caption', $this->Config()->get('resetbtn_caption'));
    $view->assign('resetbtn_position', $this->Config()->get('resetbtn_position'));

	}

Die entsprechenden Variablen sind in der Config natürlich definiert und funktionieren auch (habe sie mir im Frontend ausgeben lassen, alles korrekt soweit).

Von dem Inhalt meiner LESS-Datei ist jedoch nichts zu sehen... Habe ich irgendwas vergessen oder falsch verstanden?

Außerdem eine weitere Frage: Kann ich auch in meiner Less-Erweiterung die Smarty-Variablen verwenden, die ich in meiner Bootstrap.php definiere, also für das Beispiel eben mit der Farbe folgendermaßen:
.neuer_button {
color: {$font_color};
}

Probleme wegen der geschweiften Klammern dürfte es ja eigentlich nicht geben, da das Schachteln von Elementen in CSS und LESS grundsätzlich ja möglich ist, oder irre ich hier?

Vielen Dank im Voraus!

Lister auf Home Seite

$
0
0

Hallo,
ist es ohne weitere möglich, den Produktlister einer Kategorie auf der HOME Seite abzubilden.
Dabei meine ich nicht die Möglichkeit einer Einkaufwelt.

danke euch schon mal im voraus

Design anpassung vom linken Menu "sidebar-main off-canvas"

$
0
0

Hallo,

ich hätte gern ein komplett dunkel graues design und finde den bereich nicht!

Die kleinen Streifen in  "sidebar-main off-canvas" (Menue links!) Der Homepagelink ist http://fotocristal.de/kontaktformular.

ich habe einige less dateien erstelt! Hier ist meine all.less:

@import "_modules/content";
@import "_modules/emotion--container";
@import "_modules/emotion--element";
@import "_modules/footer";
@import "_modules/header";
@import "_modules/main-navigation";
@import "_modules/compare--entry";
@import "_modules/filter--container";
@import "_modules/filter-panel--flyout";
@import "_modules/filter-panel--title";
@import "_modules/filter-panel--content";
@import "_modules/header_ver";
@import "_modules/compare--group";
@import "_modules/navigation--entry";
@import "_modules/service--entry";
@import "_modules/image-slider--slide";
@import "_modules/tab--navigation";
@import "_modules/content--description";
@import "_modules/tab--container";
@import "_modules/js--fancy-select";
@import "_modules/quantity--select";
@import "_modules/buybox--inner";
@import "_modules/product--header";
@import "_modules/last-seen-products";
@import "_modules/content--wrapper";
@import "_modules/item--container";
@import "_modules/button--container";

und der Inhalt der .less ist:

.less.name {
background:@body-bg;
.container {
background:transparent;
}
}

Vielen dank dür euere Hilfe.

Bitte bedenkt bei Eueren antworten das ich nicht Programieren kann.

 

2 Scrollbars in den Artikeldetails

$
0
0

Hallo zusammen, 

ich habe einen ungewöhnlichen Fehler in meinem Theme und mir will keine Lösung dazu einfallen.

In meinen Artikel-Detailseiten sind 2 Scroll-Balken im Browser zu sehen. Beim Scrollen mit dem Mausrad ist alles flüssig und beide Balken werden nacheinander bedient. Doch wieso werden zwei dargestellt? Im restlichen Shop wird wie gewohnt ein Balken dargestellt. 

Ich freue mich über jeden Tipp – Danke!

 

Such-Ergebnisseite in 4col

$
0
0

Hallo. Unsere Such-Ergebnis-Seite ist 2 col. Ich würde gern "4-col und Basic" haben. Wo kann ich das einstellen?

Thx und Gruss.

Spaltenanzahl bei den Ergebnissen auf der Suchseite

$
0
0

Hallo,

ich bin verzweifelt auf der Suche, wo ich die Anordnung und die Spaltenanzahl auf der Ergebnisseite der Suche ändern kann. Ich hätte gerne ein 3-spaltiges Layout, wobei in der 1. Spalte die Filter stehen sollen, und dann in der Spalte 2 und 3 die Ergebnisse der Suche angezeigt werden sollen. Ich finde aber in keiner Datei auch nur im Ansatz eine Stelle, an der ich ansetzen kann :-(

Artikelreiter (custom tabs) zur Bearbeitung gesperrt seit Update auf 5.2.9

$
0
0

Seit dem Update auf 5.2.9 (und Update auf PHP 7) sind meine Artikelreiter zur Bearbeitung gesperrt. Ich kann im Backend zwar Änderungen vornehmen, sie werden aber auf der Artikelseite nicht umgesetzt. Wenn man dann Shopware schließt und sich anschließend wieder einloggt, sind auch im Backend alle Änderungen wieder zurückgesetzt auf Anfang.

Ich hatte vor dem Update die Custom Tabs zugefügt mithilfe von Freitextfeldern (nach dieser Anleitung: https://shopwareianer.com/tutorials/shopware5-eigene-tabs-in-der-detail-ansicht ). Es gibt hier einige Disukussionen über Probleme bei der Anzeige von Variantenartikeln, jedoch wurde die beschriebene Sperre bei der Bearbeitung noch nirgendwo thematisiert.

Es werden also quasi nur die alten Datenbanksätze abgerufen, die vor dem Update entstanden sind. Änderungen an diesen können jedoch nicht vorgenommen werden.

Hat jemand eine Idee wie man wieder Zugriff bekommen kann auf die Datenbank über das Backend?

Lösung: Einkaufswelt Bilder nicht beschneiden

$
0
0

Ich hattte wie viele von euch das Problem dass in einer Einkaufswelt im "Fluid / Responsive" Modus die Bilder immer beschnitten werden.
Das ist natürlich bei Bildern mit weissem Rahmen oder Transparenz (Produktbilder) ärgerlich.

Hier präsentiere ich eine simple Lösung für das Problem (erstes Bild normal, im zweiten Bild werden Kamera und Zitrone nicht mehr beschnitten):

 

Dazu fügt man ein "Code-Element" irgendwo in der Einkaufswelt ein.
Dorf fügt man foldenden Code ein:
 

$('.ew-nocrop').each(function(){
  $(this).find(".banner--content").css('background-image', 'url(' + $(this).find('img').attr('src') + ')');
 });
<style>
.ew-nocrop .banner--content{
    width: 100% !important;
    height: 100% !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.ew-nocrop img{
display: none;
}
</style>

Leider kann ich hier im Forum die eckigen Klammern nicht richtig einfügen. Aber so sollte das dann aussehen:

Wer will kann dieses "Code-Element" danach auf unsichtbar setzen, der Code wird trotzdem ausgeführt.
 

Danach fügt man bei jedem Banner(Bild) die CSS Klasse "ew-nocrop" hinzu:


Ich hoffe das konnte einigen von euch helfen!


Accordion in Shopware 5 (jQuery UI)

$
0
0
Hallo Shopware-Forum,

ich möchte in den Shopseiten ein Accordion jQuery benutzen. Kann mir jemand sagen wie dafür der Code lautet? Hab es bis jetzt nicht gefunden... :shock:

Vielen Dank!
Alexander

Überschreiben von einem plugin template

$
0
0

Hallo,

Ich weiss dass das ein staendiges thema ist, und viele beitraege darueber wie man das macht. ich habe aber viele varianten und lösungen getestet und leider bis jetzt hat kein pfad richtig funktioniert.. 

../Plugins/Community/Backend/SixEmotionCategoryTeaser/Views/emotion_components/widgets/emotion/components/six_component_category_teaser.tpl

das ist der pfad vom template wie soll der pfad im theme sein?

vielen dank :)

How to access the subcategories in Smarty template?

$
0
0

I want to reimplement the main menu by changing one of the built-in Shopware's .tpl files. I need to get the subcategries of each main category and so on (subcategories of a subcategory, if exists, etc.) How can I do this? I know that I have immediate access to $sMainCategories in smarty, but when I try to access subcategories by:
{foreach $sMainCategory as $mc}

{foreach $mc.subcategories as $sc}

{$sc}

{/foreach}

{/foreach}

I don't get anything, and when I output the variable {$mc.subcategories} , by using {$mc.subcategories@print_r} ,I get an empty array. I know that there are subcategories in that maincategory, and all categories and subcategories are active. Why can't I access subcategories of a category in smarty template?

 

Artikelbezeichnung wird abgeschnitten

$
0
0

Hallo zusammen,

Ich komme einfach nicht weiter.

Meine Artikel-Titel werden im Detail-Listing immer abgekürt.

In der box.tpl habe ich das Truncate entfernt - Änderungern werden hier auch übernommen (also wenn Ich weniger mache z.b.) Trotzdem wird nicht alles angezeigt.

Dann habe Ich gesehen das auch die .less Datei wohl eine Rolle spielt. Bin jetzt aber nicht sicher ob meine Änderung überhaupt gezogen wird?

Habe die original product-box.less kopiert in das entsprechende Unterverzeichniss in meinem Template (/mutrado.de/themes/Frontend/MEIN_TAMPLATE/frontend/_public/src/less/_modules) und dort angepasst:

Also das height

	.product--title {
		.unitize-height(150);
		.unitize-margin(0, 0, 5, 0);
		.unitize(font-size, 10);
		.unitize(line-height, 20);
		display: block;
		width: 100%;
		color: @text-color-dark;
		font-weight: bold;
		overflow: hidden;

		&:hover {
			color: @link-color;
		}
	}

Habe aber irgendwie das Gefühl das diese Änderung trotz Cache leeren und Theme kompilieren NICHT genommen wird.

Habe Ich irgendwo einen Denkfehler?

Bildzoom auf "inner" stellen?

$
0
0

Moin moin miteinander,

ist es möglich den Zoom der Bilder inplace (also wie eine Lupe) anzeigen zu lassen? Die Suchfunktion zeigt mir nur 4-6 Jahre alte Threads an und die beziehen sich naturgemäß nur auf ältere Shopware-Versionen.

Über einen Stupps in die richtige Richtung wäre ich höchst erfreut :).

Login und Registrierung von Kunden nebeneinander

$
0
0

Hallo Forum,

ich habe in einem anderen shopware shop gesehen, dass die das Login- und Neukundenfeld nebeneinander stehen haben anstatt untereinander. Das ist meiner Meinung nach sehr viel schöner da es den Bestandskunden das scrollen erspart.

Wie setzt man das um und in welchen Dateien? Prinzipiell ist das ja sehr einfach aber mit der Shopware programmierung im Template habe ich noch recht wenig Ahnung.

Freue mich über Hilfestellung.

Johannes

Warenkorbrabatt -> Noch € x bis zum Rabatt / zur nächsten Rabattstufe!

$
0
0

Hallo Community,

ich habe den EK einen Warenkorbrabatt zugewiesen.

Nun möchte ich gerne folgendes im Warenkorb Template ausgeben:
Noch € x bis zum Rabatt / zur nächsten Rabattstufe!

In etwa so wie bei Versandkostenfrei!
Gibt es ein PlugIn dafür?
Oder welche Variablen werden dafür benötigt?

Danke schon mal für Eure Hilfe


Jumbotron mit zentriertem Container in Einkaufswelten realisieren

$
0
0

Hi,

wie kann ich denn in den Einkaufswelten so etwas wie Bootstrap Jumbotrons mit zentrierten Containern realsieren? Also ein seitenweiter weißer Streifen mit zentriertem Text-Container, der nur 1260px breit ist, darunter ein grauer Streifen mit zentrierten Bildern, darunter wieder ein weißer Streifen ...?

Ich erbe von Bare und Responsiv.

swag_custom_products in Theme überschreiben

$
0
0

Hallo,

wir würden gerne ein eingesetztes Plugin SwagCustomProducts durch unser Theme überschreiben. Beim Überschreiben von Plugins stößt man ja leider regelmäßig wieder vor einigen Fragen:

  1. Wie kann ich Plugins in meine Entwicklungsumgebung bekommen um diese durch das Theme zu bearbeiten?
  2. Welches sind die richtigen Pfade und extends-Befehle?
  3. Wie vermeide ich, dass es zu Errors kommt, wenn ich includes ändere und das Plugin z.B.: nicht mehr installiert ist?

 

Zu 1 - Aktuell arbeite ich das lokal aus und lade das Theme immer wieder hoch und prüfe... das ist sehr mühsam...

Zu 2 - Beispiel:

/engine/Shopware/Plugins/Community/Frontend/SwagCustomProducts/Views/frontend/swag_custom_products/detail/index.tpl

soll bearbeitet werden.

Dazu fallen mir folgende Möglichkeiten ein:

  • THEMENAME/frontend/detail/index.tpl - {extends file='parent:frontend/detail/index.tpl'} --> geht
  • THEMENAME/frontend/swag_custom_products/detail/index.tpl - {extends file='parent:frontend/swag_custom_products/detail/index.tpl'} --> geht nicht
  • THEMENAME/frontend/plugins/swag_custom_products/detail/index.tpl - {extends file='parent:frontend/plugins/swag_custom_products/detail/index.tpl'} --> geht nicht

Ich hatte mal gelesen, dass Plugins, welche im Unterordner /frontend/ einen eigenen Plugin-Ordner haben (/swag_custom_products/) auch mit diesem gezielt im Theme angesprochen werden können.

Das führt mich nämlich zu Problem Nr. 3:

Die Änderung, welche ich in der THEMENAME/frontend/detail/index.tpl mache, führt dazu, dass es zu einem Fehler kommt, wenn das Plugin nicht installiert ist. (Ich verschiebe nämlich einen include-Befehl. Gibt es die dahinterliegende Datei nicht, kommt es zu einem PHP-Fehler.) Wäre natürlilch praktisch, wenn der die Bearbeitung des Plugins auch nur das Plugin-File ersetzt und somit auch nur greift, wenn das Plugin installiert ist. Derzeit behelfe ich mir mit einer Variable, welche ich gefunden habe {if $swagCustomProductsTemplate}{/if} um den Include nur auszuführen, wenn das Plugin auch aktiv ist.

Hoffe jemand kennt Antworten auf meine vielen Fragen ;-)

Eigene CSS / LESS wird nicht ausgegeben bzw. nicht aktualisiert

$
0
0

Hallo zusammen,

wir haben gestern von 4.3 auf 5.1 geupdatet und sind gerade dabei die kleinen Fehler die entstanden sind auszubessern.

Nun ist es so, dass wir unser altes Template überspielt haben und vorerst weiternutzen (deswegen auch 5.1 und nicht 5.2). Nun habe ich Änderungen an der LESS / CSS Datei durchgeführt und sie hochgeladen - leider ohne Erfolg. Die Änderungen werden im Frontend nicht erkannt. Es scheint mir fast so als würde er die alte LESS noch im Cache haben. (Cache wurde natürlich auch gelöscht)

Firebug zeigt mir folgendes an:

<link type="text/css" media="all" rel="stylesheet/less" href="/templates/_theme/frontend/_resources/less/theme/theme.less?v=160805121011">
<style type="text/css" media="all" id="less:templates-_theme-frontend-_resources-less-theme-theme:less-v-160805121011">

Ist es eigentlich möglich, dass er nicht auf LESS-Basis arbeitet? Im Grunde muss er es ja jedes mal in CSS kompilieren. Ich würde ihm liebend gern nur eine theme.css zur Verfügung stellen, welche ich in meiner Entwicklungsumgebung selbst aus LESS kompiliere.

 

Viele Grüße
Sebastian

img srcset vs. picture source?

$
0
0

Man kann ja nicht alles wissen *g*

Kann mir bitte jemand erklären, warum im Theme einmal etwas über das PICTURE-Tag eingebunden wird, an anderer Stelle dann aber dem IMG-Tag das srcset übergeben wird?
Produktslider EKW:

<picture>
<source sizes="(min-width: 48em) 200px, 100vw" srcset="https://www.domain.de/media/image/1a/c4/5b/xxx_200x200.jpg 200w,
https://www.domain/media/image/21/1d/a0/xxx_600x600.jpg 600w,
https://www.domain.de/media/image/cc/4f/61/xxx_1280x1280.jpg 1280w">
<img src="https://www.domain.de/media/image/1a/c4/5b/xxx_200x200.jpg" alt="Mein Titel" title="Mein Titel">
</picture>

Banner EKW:
 

<img src="https://www.domain.de/media/image/17/9e/05/xxx_800x800.jpg" class="banner--image" sizes="(min-width: 78.75em) calc(0.333333333333 * 1160px), (min-width: 64em) 33.3333333333vw, (min-width: 48em) 33.3333333333vw, (min-width: 30em) 33.3333333333vw, 16.6666666667vw" srcset="https://www.domain.de/media/image/f1/4e/ba/xxx_800x800.jpg 800w,
https://www.domain.de/media/image/eb/22/d7/xxx_1280x1280.jpg 1280w,
https://www.domain.de/media/image/d5/5f/b1/xxx_1920x1920.jpg 1920w" alt="Mein Titel">

Da das srcset an x-Stellen erzeugt wird, wäre es nicht sinnvoller, das srcset über ein Smarty-Plugin zu erzeugen - und nebenbei darin auch gleich noch der Größe nach sortieren zu lassen? So könnte man für kleinere Auflösungen auch nach Wunsch kleinere zusätzliche Thmubnails "dran hängen" Wink

Farbe für Header, Navileiste, Footer und Background anpassen (für Newbies)

$
0
0

Hallöchen Gemeinde,

ich habe mir mal kurz die Arbeit gemacht, eine kleine Schnellanleitung zum Anpassen aller Hintergrundfarben beim SW Responsive Theme zu machen. Ganz einfach und kinderleicht, also ideal für alle Newbies wie mich :) (Updatesicher im eigenen Theme)

 

Voraussetzung bei mir: SW 5.2.8 und cpanel (geht natürlich auch bei den anderen SW5 Versionen)

 

1. Lege ein eigenes Theme im Backend über den Thememanager an

2. Gehe im cpanel auf Dateiverwaltung:

public_html > Themes > Frontend > Dein-eigenes-Theme > Frontend > _public > src > less > _modules

Der Ordner ist hier leer. Oben im cpanel steht der Button "+Datei". Da geht man drauf und erstellt diese 3 Dateien:

footer.less

header.less

main-navigation.less

3. In die Datei footer.less kopiert man folgenden Code (Dateien vorher mit Codeeditor öffnen):

.footer-main {
background:#ecf9bc;
.container {
background:transparent;
}
}

4. In die Datei header.less kopiert man diesen Code:

.header-main {
background:#e2f597;
.container {
background:transparent;
}
}

5. In die Datei main-navigation.less kopiert man diesen Code:

.navigation-main {
background:#f6fcdc;
.container {
background:transparent;
}
}

Die 3 Farben für Footer, Header und Navi kann man hinter dem # Zeichen dann selber nach Wunsch eintragen

6. Dann geht ihr im cpanel eine Ebene nach oben wo die Ordner _components, _mixins, _modules und _variables stehen.

Dort erstellt ihr diese Datei wieder mit "+Datei" im cpanel:

all.less

7. In die Datei all.less kopiert ihr:

@import "_modules/header";
@import "_modules/footer";
@import "_modules/main-navigation";

8. Im cpanel ist man nun fertig und hat alle Dateien im eigenen Theme angelegt, damit das Ganze auch updatesicher ist. :)

9. Die Farbe für den mittleren Hintergrund (Body Background) stellt Ihr im Thememanager unter der

Farbkonfiguration > Allgemein > Grundgerüst > @body-bg​ ein. Dort könnt Ihr auch direkt den Farbcode z.B. #FFFFFF eingeben.

Somit kann man alle 4 Hintergrundfarben innerhalb von ein paar Minuten nach Geschmack einstellen.

Nach jeder Änderung einer Farbe immer unter Einstellungen > Caches/Performance > Cache > alle auswählen > leeren

den ganzen Cache leeren, da somit auch die Themes neu kompiliert werden. Wenn Ihr die Änderungen dann im Browser sehen wollt, immer im Browser mit Strg F5 den Cache leeren.

10. Nette Tools die ich gefunden habe, damit die Farben auch einigermaßen stimmig sind:

http: //paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF (die Farbcodes kann man direkt ablesen, wenn man mit dem Mauspfeil drüberfährt)

http: //colorblender.com/

 

Ich hoffe damit kann der eine oder andere beim Start mit dem tollen Shopware Shop was anfangen. :)

Schade dass man diese eigentlich doch wichtigen Farben nicht direkt im Thememanager unter der Farbkonfiguration mit einstellen kann. Diese gehören meiner Meinung nach schon auch zum "Grundgerüst" dazu. Genauso gut könnten da auch Auswahlfelder für Hintergrundbilder sein. Somit hätte man bereits im Standard maximalen Gestaltungsspielraum per Knopfdruck.

Viele Grüße

Matthias

 

 

 

 

Viewing all 1971 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>