Shopware Bootstrap Theme, erste Erfahrungen

Hallo Community,

hat schon jemand von Euch Erfahrungen mit “Showare Bootstrap Theme” gemacht?
http://store.shopware.com/swf4843184974406/shopware-bootstrap-theme.html

Nach der Test-Installation in einem puren Demoshop (SW 5.3.4, SBT 1.0.1) wird die simple Shopware-Demo
Einkaufswelt nicht angezeigt, die Entwickler-Konsole zeigt JavaScript Fehler an:

Plugin “swProductSlider” is not a valid jQuery-plugin!
Plugin “swImageSlider” is not a valid jQuery-plugin!

Auch gibt es Defizite in der Responsive Umsetzung: wenn man im “Off-Canvas Sidebar” eine Kategorie auswählt
blitzt als Erstes (für etwa 1 Sek lang) die Filter-Sidebar auf. Der “Vergleichen” Link wird komplett ausgeblendet.

Passiert das auch bei Euch? Im Moment sehe ich für uns leider keine Vorteile von dem
Standard Shopware Responsive-Theme auf Conexco Theme zu wechseln, um auf dieser
(recht gut beworbenen) Theme-Basis Kundenprojekte aufzubauen Und Ihr?

Best, Konrad
 

@SB schrieb:

„Im Moment sehe ich für uns leider keine Vorteile von dem Standard Shopware Responsive-Theme auf Conexco Theme zu wechseln, um auf dieser
(recht gut beworbenen) Theme-Basis Kundenprojekte aufzubauen :-)“

Kundenprojekte sollte man als „Shopware Agentur“ auf eigener Template Basis aufbauen und nicht von anderen (hier: shopware AG) klauen oder habe ich hier etwas falsch verstanden ?

 

Sie haben in der Tat nicht nur etwas falsch verstanden und vermutlich das „große Interview“ mit conexco, das per Shopware-Newsletter und sonst beworben/kommuniziert wurde, nicht gelesen. In dem Interview wurde nämlich der Wunsch des Conexco-Chefs geäussert, dass die Shopware-Agenturen alternativ zum Shopware Standard Responsive-Theme das Conexco Bootstrap Theme als Theme Entwicklungs-Basis nehmen sollen - deshalb wird auch das Conexco-Theme als Open-Source kostenlos (ab SW 5.3) in Store angeboten. 

Gegenfrage - auf welcher Basis soll man (nicht nur als Agentur) ein Shopware-Projekt aufbauen wenn nicht auf dem „Responsive Theme“ von Shopware? Oder aber, was würde passieren, wenn man den Theme-Ordner „Responsive“ auf dem Shop-Server löscht? Egal ob Sie eine individuelle Anpassung oder ein gekauftes Theme verwenden, das „Shopware Responsive Theme“ stellt das (jQuery-Plugin) Framework aller Shopware-Projekte dar, das man erweitern, klonen, vererben und anpassen aber nicht entfernen bzw ersetzen soll. Es bedeutet also für alle Theme-Hersteller oder Shop-Umsetzer, dass diese Basis immer berücksichtig werden muss

Wenn Conexco zusammen mit Shopware wünschen, dass man das neue Conexco Bootstrap-Framework alternativ verwendet, dann darf (bei allem Respekt für Conexco Entwicklung) das Framework nicht schon beim ersten simplen Test im Demoshop versagen - oder? Deshalb fragen wir in die Runde (immerhin sind es schon 100+ Downloads), welche Erfahrungen unsere anderen Kollegen mit dem Bootstrap-Theme (als alternatives Theme-Framework) gemacht haben und ob es eventuell irgendwelche versteckte Vorteile gibt, die wir noch nicht entdeckt haben - und nur darum geht es in diesem Thread, lieber SB …

Best, Konrad     

Ich stehe gerade vor der selben Frage für ein neues Projekt - Responsive oder Bootstrap. Habe den Fehler mit den Einkaufswelten auch. Sollte sich natürlich beheben lassen, aber es macht mir sorgen über den Rest des Themes. Andererseits ist Conexco recht groß und benutzt das Theme ja auch für ihre eigenen Projekte… Hat sich das Theme jemand mit vielleicht etwas mehr Ahnung als ich sie habe angesehen? 

@SB schrieb:

Kundenprojekte sollte man als „Shopware Agentur“ auf eigener Template Basis aufbauen und nicht von anderen (hier: shopware AG) klauen oder habe ich hier etwas falsch verstanden ?

Also ich sehe im Store so gut wie kein Theme, das nicht auf dem Responsive Theme basiert. Für große Agenturen mag es bei entsprechend zahlungskräftigen Auftraggebern sinnvoll sein eine neue Basis zu schaffen, aber normal ist das nicht unbedingt.

Liebe Grüße

Valentin

Hallo Vallentin,

vielen Dank für Dein Feedback.

Uns fehlt leider einfach die Zeit, um uns das Conexco Bootstrap Theme tiefer (Code seitig) anzuschauen. 
Den Fehler könnten wir sicherlich beheben - aber dann entsteht berechtigte Frage, warum soll überhaupt jemand ausser
Conexco das tun? Wo sind bitte die schlagenden Vorteile dieses Themes, um sich mit dem Bootstrap-Framework zu beschäftigen?
Durch was sollen die Entwickler motiviert sein?

Ist das Theme wirklich autonom und kann ohne Responsive-Framework auskommen? Bei “Responsive-Framework” handelt sich
immerhin um knapp 50 jQuery-Plugins. Es sind sämtliche Funktionen/Methoden/Events, die im Frontend eines jeden Shopware-Shops
als JavaScript laufen. Werden diese durch “Bootstrap-Plugins” ersetzt oder laufen im Hintergrund “Bootstrap” und “Responsive” zusammen???
 

Best, Konrad

Warum sollte man auf das Bootstrap Theme setzen? Dafür gibt es keinen wirklichen Grund.

Zumal die Basis für alle Plugins usw., Anpassungen & Co. für das Bare bzw. Responsive Theme sind.

Bei Shopware 4 war das Bootstrap Theme so erfolgreich, weil SW4 kein Responsive Theme hatte. Das hat sich ja mit Shopware 5 erledigt. Für mich erschließt sich nicht der Grund, warum man hier auf Bootstrap setzen sollte.

Hallo Christian,

vielen Dank für Dein Feedback. Eine berechtigte Frage

Trotzdem sind wir alle offen für “Alternativen”, wenn sie genug Vorteile beinhalten.
Ein gut funktioniererendes Bootstrap-Framework wäre sicherlich eine Bereicherung.
Ich habe nämlich im Moment etwas den Eindruck, dass im Shopware-Store ein JS “Wildwuchs”
entsteht. Eine Flut von JS-Anwendungen, die eigene Frameworks mitbringen. Optische “Gimmigs”
die aus der Wordpress Welt bekannt sind. Nichts dagegen, nur wäre sicherlich von Vorteil, wenn
diese Anwendungen eine gemeinsame Basis hätten.

Best, Konrad

Hallo,

ich entwickle aktiv mit am BootstrapTheme und werde versuchen ein paar Punkte zu klären:

Auch gibt es Defizite in der Responsive Umsetzung: wenn man im „Off-Canvas Sidebar“ eine Kategorie auswählt
blitzt als Erstes (für etwa 1 Sek lang) die Filter-Sidebar auf. Der „Vergleichen“ Link wird komplett ausgeblendet.

Wir entwickeln aktiv an unserem Theme und nehmen auch sehr gerne Pull Requests auf Github entgegen: GitHub - conexco/shopware-bootstrap-theme: the Shopware Bootstrap Theme for Shopware

Der Darstellungsfehler mit dem Offcanvas ist bekannt und wird bereits auf dem aktuellen Entwicklungrbranch bearbeitet. Der Vergleichen Link ist bewusst nicht sichtbar auf Mobilgeräten (analog zu Shopware). Unser Theme ist aber klar als Entwicklerbasis angedacht und kann durch ein Custom Theme angepasst werden, wodurch dann beispielsweise eine Vergleichen Funktion für Mobilgeräte integriert werden kann.

Nach der Test-Installation in einem puren Demoshop (SW 5.3.4, SBT 1.0.1) wird die simple Shopware-Demo
Einkaufswelt nicht angezeigt, die Entwickler-Konsole zeigt JavaScript Fehler an:

Ich habe gerade auf einem frischen Demoshop, mit der gleichen Version, das BootstrapTheme (aus dem Store) installiert und ich erhalte keinerlei Js Fehler. Ich würde aber gerne versuchen mit Ihrer Hilfe herauszufinden was bei Ihnen schief gelaufen ist. Die Js Fehlemeldung könnte darauf hindeuten, dass zusätzliche Plugins aktiviert sind, die von unserem Theme nicht unterstützt werden. Wir verwenden nur einige Basis Js Plugins von Shopware und die in der Fehlermeldung genannten werden bei uns durch andere Komponenten ersetzt. Dies führt mich zur nächsten Frage.

Ist das Theme wirklich autonom und kann ohne Responsive-Framework auskommen? Bei „Responsive-Framework“ handelt sich
immerhin um knapp 50 jQuery-Plugins. Es sind sämtliche Funktionen/Methoden/Events, die im Frontend eines jeden Shopware-Shops
als JavaScript laufen. Werden diese durch „Bootstrap-Plugins“ ersetzt oder laufen im Hintergrund „Bootstrap“ und „Responsive“ zusammen???

Ja es kommt ohne das Responsive Theme aus und ja man könnte sagen Bootstrap und Responsive laufen zusammen. Wir haben einige Basis Js Plugins von Shopware komplett übernommen, oder erweitern diese mit $.overridePlugin. Zusätzlich setzen wir bei einigen Komponenten auf andere Plugins. Beim Slider zb auf slick.js (da dieser sehr umfangreich konfiguriert werden kann), oder wir verwenden Bootstrap Komponenten wo es Sinn macht (variabel einsetzbare Modale, Popover).

was würde passieren, wenn man den Theme-Ordner „Responsive“ auf dem Shop-Server löscht?

Nichts, weil wir ein Basis Theme entwickelt haben, das nicht vom Shopware Theme ableitet.

Gegenfrage - auf welcher Basis soll man (nicht nur als Agentur) ein Shopware-Projekt aufbauen wenn nicht auf dem „Responsive Theme“ von Shopware? :-) 

Auf das Bootstrap Theme von Conexco ;), weil… 

Im Moment sehe ich für uns leider keine Vorteile von dem
Standard Shopware Responsive-Theme auf Conexco Theme zu wechseln, um auf dieser
(recht gut beworbenen) Theme-Basis Kundenprojekte aufzubauen

Wir bieten mit dem BootstrapTheme eine Basis für Entwickler, die optimal gegeignet ist eigene Shop Layouts umzusetzen. Durch die vielen Standard Komponenten können zb mehrspaltige Entwürfe leichter und voll responsive umgesetzt werden (Bootstrap Grid System). Viele Standard Komponenten (zb Popover, Modale) lassen sich beliebig befüllen und können an beliebiger Stelle eingesetzt werden. Shopware bietet auch einige wiederverwendbare Basis Komponenten (Buttons usw), aber nicht in dem Umfang wie Bootstrap. Außerdem haben wir eine geringe Einstiegsschwelle, da viele Entwickler schon Erfahrung haben mit Bootstrap.

Ich hoffe, dass ich einige Fragen beantworten konnte und würde mich natürlich über eine Antwort freuen.

Beste Grüße, Ben

Hallo,

wollte es ausprobieren. Habe einen neuen Shop aufgesetzt und das Plugin installiert. Dann ein eigenes Themeplugin lt. bootstrap-Anleitung erstellt und installiert.Ich kann allerdings keine eigenen ThemeConfiguration umsetzen. Habe genau nach der Anleitung gearbeitet, sogar eins zu eins aus dem Git-Download überspielt. Bekomme aber immer einen 500 Internal Server Error. Liegt das am Server bzw. dessen Einstellungen?

Wäre schön, wenn es darauf eine Antwort gibt.

Schöne Grüße,

Jozi

Hello Zusammen,

worin unterscheidet sich das Theme „Bootstrap“ von „Bootstrap with Extensions“? Beste Grüße, John

@jozi schrieb:

Hallo,

wollte es ausprobieren. Habe einen neuen Shop aufgesetzt und das Plugin installiert. Dann ein eigenes Themeplugin lt. bootstrap-Anleitung erstellt und installiert.Ich kann allerdings keine eigenen ThemeConfiguration umsetzen. Habe genau nach der Anleitung gearbeitet, sogar eins zu eins aus dem Git-Download überspielt. Bekomme aber immer einen 500 Internal Server Error. Liegt das am Server bzw. dessen Einstellungen?

Wäre schön, wenn es darauf eine Antwort gibt.

Schöne Grüße,

Jozi

Hallo Jozi,

ob es am Server liegt kann ich leider nicht sagen und der 500er Fehler ist relativ allgemein. Wir arbeiten allerdings gerade noch an einem verbesserten Beispiel Theme, das alle Beispiele aus der Doku enthält und ebenfalls auf Git zur Verfügung gestellt werden wird.  Das kann man sich dann einfach komplett kopieren und weiter anpassen.

Beste Grüße, Ben 

@JohnJohnson schrieb:

Hello Zusammen,

worin unterscheidet sich das Theme „Bootstrap“ von „Bootstrap with Extensions“? Beste Grüße, John

Hi JohnJohnson,

Ersteres enthält keine Anpassungen für Shopware Premium Plugins, letzteres schon.

Eine genauere Beschreibung findet sich auch in unserer Doku unter https://www.bootstrap.de/docs/introduction.html#structure

Beste Grüße, Ben

Guten Tag Zusammen,

ich habe das Template ebenfalls für ein Projekt benutzt. Jedoch musste ich feststellen, dass die Theme-Konfiguration einige Einstellungen nicht übernimmt? z.B. Bei Megamenü kann man die Bilder der Kategorie anzeigen lassen. Das tut es aber nicht! Ich habe mit dem Megamenü mit Bilder anzeigen Plugin extra gekauft und funktioniert ebenfalls mit dem Template nicht

Woran kann das liegen?

Hat jemand eine Idee?

Pluginhersteller fragen. Die meisten plugins sind ja nur für das original responsive von sw optimiert.

@CxoDev schrieb:

@jozi schrieb:

Hallo,

wollte es ausprobieren. Habe einen neuen Shop aufgesetzt und das Plugin installiert. Dann ein eigenes Themeplugin lt. bootstrap-Anleitung erstellt und installiert.Ich kann allerdings keine eigenen ThemeConfiguration umsetzen. Habe genau nach der Anleitung gearbeitet, sogar eins zu eins aus dem Git-Download überspielt. Bekomme aber immer einen 500 Internal Server Error. Liegt das am Server bzw. dessen Einstellungen?

Wäre schön, wenn es darauf eine Antwort gibt.

Schöne Grüße,

Jozi

Hallo Jozi,

ob es am Server liegt kann ich leider nicht sagen und der 500er Fehler ist relativ allgemein. Wir arbeiten allerdings gerade noch an einem verbesserten Beispiel Theme, das alle Beispiele aus der Doku enthält und ebenfalls auf Git zur Verfügung gestellt werden wird.  Das kann man sich dann einfach komplett kopieren und weiter anpassen.

Beste Grüße, Ben 

 

Hallo Ben,

ich weiß ja nicht, aber etwas kann mit den Musterbeispielen nicht stimmen. Habe diese auf eine neue Installation eingespielt. Bekomme zwar jetzt keinen 500 Servererror, dafür ist der neue Tab aber trotzdem nicht da. Muss ich denn bei der Benennung des Plugins bzw. des Templates etwas beachten?

Auch bekomme ich teilweise die Fehlermeldung, dass in die vorhandene Tabelle nicht geschrieben werden kann, obwohl eine andere Template-ID hinterlegt ist.

 

Schöne Grüße

Jozi

Hallo,

So, jetzt funktioniert zumindest mal ein eigener Tab, allerdings nur, wenn ich ein Template auf Basis von Bootstrap im Backend erstelle.Also kein Plugin, was nicht schlimm wäre, spricht da was dagegen?

Ein anderes Problem wo ich nicht wirklich durchblicke, wie kann ich mehrere Tabs erstelle? Bin da noch sehr neu und werde nicht fündig. Vielleicht ja nur ein kleiner Fehler. Hier mein jetziges Script, wäre über eure Hilfe seeehr dankbar.

createFieldSets($container);
        /** @var Form\Container\Tab $tab */
        foreach ($container->getElements() as $tab) {
            switch ($tab->getName()) {
                case 'general':
                    $this->modifyGeneralTab($tab);
                    break;
            }
        }
    }
    /**
     * Find and modify the extendThemeConfigs fieldset
     * @param Form\Container\Tab $tab
     */
    private function modifyGeneralTab(Form\Container\Tab $tab)
    {
        /** @var Form\Container\FieldSet $fieldSet */
        foreach ($tab->getElements() as $fieldSet) {
            switch ($fieldSet->getName()) {
                case 'extendedThemeConfigs':
                    $this->modifyExtendedThemeConfigs($fieldSet);
                    break;
            }
        }
    }
    /**
	 * Color Tab
     * Move specified fields into new fieldset
     * @param Form\Container\FieldSet $fieldSet
     */
    private function modifyExtendedThemeConfigs(Form\Container\FieldSet $fieldSet)
    {
        /** @var Form\Field $field */
        foreach ($fieldSet->getElements() as $field) {
            switch ($field->getName()) {
                case 'swf-body-bg':
                case 'swf-shop-bg':
                case 'swf-text-color':
                case 'swf-headings-color':
                case 'swf-headings-small-color':
                case 'swf-link-color':
                case 'swf-link-hover-color':
                case 'swf-footer-bg':
                case 'swf-footer-border':
                case 'swf-footer-color':
                case 'swf-footer-link-color':
                case 'swf-footer-link-hover-color':
                    $this->unHideField($field);
                    $fieldSet->getElements()->remove($field);
                    $this->deviceColorsFieldSet->addElement($field);
                    break;
                // ...
            }
        }
    }
    /**
     * Remove xtype from fields
     * @param Form\Field $field
     */
    private function unHideField(Form\Field $field)
    {
        $attributes = $field->getAttributes();
        unset($attributes['xtype']);
        $field->setAttributes($attributes);
    }
    /**
     * Create new tab with fieldset
     * @param Form\Container\TabContainer $container
     */
    private function createFieldSets(Form\Container\TabContainer $container)
    {
        $this->deviceColorsTab = $this->createTab('colorSettings', 'Color Settings', ['attributes' => [
            'layout' => 'anchor',
            'autoScroll' => true,
        ]]);
        $container->addTab($this->deviceColorsTab);
        $this->deviceColorsFieldSet = $this->createFieldSet(
			'color_settings',
			'Color Settings',
		    array(
			'attributes' => array(
				'layout' => 'column',
				'flex' => 0,
				'defaults' => array(
					'columnWidth' => 0.5,
					'labelWidth' => 180,
					'margin' => '2 15 2 0'
					)
				)
			)
		);
        $this->deviceColorsTab->addElement($this->deviceColorsFieldSet);
    }
	
	

   /**
	 * MainNavigation Tab
     * Move specified fields into new fieldset
     * @param Form\Container\FieldSet $fieldSet
     */
    private function modifyExtendedThemeConfigs(Form\Container\FieldSet $fieldSet)
    {
        /** @var Form\Field $field */
        foreach ($fieldSet->getElements() as $field) {
            switch ($field->getName()) {
                case 'swf-navbar-default-bg':
                case 'swf-navbar-default-link-color':		
                case 'swf-navbar-default-border':
                case 'swf-navbar-default-link-hover-color':
                case 'swf-navbar-default-link-active-color':
                case 'swf-navbar-default-link-disabled-color':
                case 'swf-navbar-default-link-hover-bg':
                case 'swf-navbar-default-link-active-bg':
                case 'swf-navbar-default-link-disabled-bg':
                case 'swf-navbar-default-toggle-icon-bar-bg':
                case 'swf-navbar-default-toggle-hover-bg':
                case 'swf-navbar-link-separator-color':
                case 'swf-navbar-submenu-bg-color':
                case 'swf-navbar-submenu-border-color':
                case 'swf-navbar-height':
                case 'swf-navbar-border-radius':
                case 'swf-navbar-off-canvas-width':
                case 'swf-navbar-off-canvas-indent':
                case 'swf-navbar-off-canvas-bg-color':
                case 'swf-navbar-off-canvas-submenu-bg-color':
                case 'swf-navbar-off-canvas-arrow-color':
                case 'swf-navbar-off-canvas-close-icon-color':
                case 'swf-navbar-off-canvas-close-icon-color-hover':
                    $this->unHideField($field);
                    $fieldSet->getElements()->remove($field);
                    $this->deviceMainNavigationFieldSet->addElement($field);
                    break;
                // ...
            }
        }
    }
    /**
     * Remove xtype from fields
     * @param Form\Field $field
     */
    private function unHideField(Form\Field $field)
    {
        $attributes = $field->getAttributes();
        unset($attributes['xtype']);
        $field->setAttributes($attributes);
    }
    /**
     * Create new tab with fieldset
     * @param Form\Container\TabContainer $container
     */
    private function createFieldSets(Form\Container\TabContainer $container)
    {
        $this->deviceColorsTab = $this->createTab('mainnavigationSettings', 'MainNavigation Settings', ['attributes' => [
            'layout' => 'anchor',
            'autoScroll' => true,
        ]]);
        $container->addTab($this->deviceColorsTab);
        $this->deviceMainNavigationFieldSet = $this->createFieldSet(
			'main_navigation',
			'Main-Navigation',
		    array(
			'attributes' => array(
				'layout' => 'column',
				'flex' => 0,
				'defaults' => array(
					'columnWidth' => 0.5,
					'labelWidth' => 180,
					'margin' => '2 15 2 0'
					)
				)
			)
		);
        $this->deviceMainNavigationTab->addElement($this->deviceMainNavigationFieldSet);
    }
}

Hello in die Runde,

ich bin auf ein Problem mit der Theme in Verbindung mit den Erlebniswelten gestossen. Wenn man eine Erlebniswelt baut und das CodeElement verwendet um einfachen Text darzustellen, kommt im Frontend nichts an. Man kann den Container zwar über Element untersuchen finden, aber er ist leer, siehe Screenshot.

Kann mir jemand sagen was es damit auf sich hat? Danke und Grüße, John.

1906×866 331 KB

@jozi‍

Es spricht nichts dagegen nur ein Theme anzulegen, das vom Bootstrap Theme ableitet. Es muss kein Plugin Wrapper außen drum rum sein.

Zu den Tabs: Im Beispiel Code gibt es zweimal die Funktion  „createFieldSets“. Diese darf es aber nur einmal geben. Man könnte aber in der einen Funktion mehrere Tabs (mit unterschiedlichen Namen) zum Container hinzufügen.

@JohnJohnson‍

Ich konnte das Problem reproduzieren.

Folgender Code wird im Theme verwendet ( …/BootstrapBare/widgets/emotion/index.tpl)

{elseif 'widgets/emotion/components/{$template}.tpl'|template_exists}
	{$file = 'widgets/emotion/components/{$template}.tpl'}
{/if}

Wenn man die einfachen ’ mit doppelten " ersetzt, wird $template korrekt interpretiert und in den string eingesetzt, wodurch wiederum der template_exists modifier das korrekte Ergebnis liefert und das Template includiert wird. Wahrscheinlich eine Eigenheit von Smarty. 

Wir werden das im nächsten Release des BootstrapTheme mitaufnehmen

@CxoDev‍ 

Super, vielen Dank für’s checken. Mir ist noch ein weiterer Bug aufgefallen der meiner Meinung nach in die selbe Kerbe schlägt. Wenn man im Backend eine Rechnung erzeugt wird folgender Fehler ausgeworfen: 

Beim Speichern des Dokuments ist ein Fehler aufgetreten.
directory ‘/is/htdocs/wp1075200_4819MRGKM2/www/kunden/shopware/themes/Frontend/Bare/documents/index.tpl’ not allowed by security setting

Sobald man wieder auf die responsive Theme wechselt kann die Rechnung ohne Probleme erzeugt werden. Wisst ihr schon, wann der nächste Release der Theme kommt? 

Hallo,

ich stehe wieder einmal an. Das Plugin funktioniert jetzt einwandfrei. Wie aber bekomme ich aber ein Accordeonmenü in der Footernavigation hin. Bin vollkommen neu in Bootstrap eingestiegen und finde keine Lösung, wie ich  es umsetzen kann.

lg Jozi