Da es zu dem Thema "Einkaufswelten Elemente selber bauen mit ExtJS" relativ wenig Hilfe bei Shopware gibt, habe ich mich mal wirklich mit [url=https://developers.shopware.com/developers-guide/custom-shopping-world-elements/#advanced:-adding-a-custom-emotion-component-in-extjs]Hilfe von dem Shopware eigenen Tutorial zu Einkaufswelten Elementen[/ur]) und vielen einzelnen Formus-Beiträgen da durch gekämpft. Ich mag ExtJS immer noch nicht, aber so langsam komme ich wenigstens mit den Components klar. Ist am Ende nicht so viel anders wie Swing oder SWT, nur wird in den Constructoren der Componenten die man erweitert sehr viel "Magic" gemacht auf die man angewiesen ist. Allein die Frage: wie bekomme ich ein einfaches kleines Text-Feld in das richtige FieldSet?
Elemente von Einkaufswelten sind ein wirklich nicht so einfaches Thema, wenn man die reine PHP-Schiene verlässt und mit ExtJS arbeitet. Aber diese Mischung im Vimoe-Element Beispiel finde ich jetzt auch nicht so wirklich toll. Felder hier, Stores da.. man sollte alles auf einen Blick haben und wenn man mit JavaScript arbeitet muss man das Plugin auch nicht öfters neu installieren sondern nur den Cache löschen und das Shopware-Backend neu laden.
Init-Methode einer einfachen kleinen GUI mit einem Feld zur Artikel-Auswahl:
initComponent: function() {
var me = this;
me.callParent(arguments);
me.articleStore = Ext.create('Ext.data.Store', {
model: 'Shopware.model.Dynamic',
proxy: {
type: 'ajax',
url: '{url controller="EntitySearch" action="search"}?model=Shopware\\Models\\Article\\Article',
reader: Ext.create('Shopware.model.DynamicReader')
}
});
me.articles = Ext.create('Ext.form.field.ComboBox', {
name: 'article',
fieldLabel: 'Artikel',
store: me.articleStore,
allowBlank: false,
valueField: 'id',
displayField: 'name'
});
me.articles.setVisible(true);
me.elementFieldset.add(me.articles);
},
Darin sieht man wie man einen eigenen Store mit AJAX-Backend definiert und diesen in der ComboBox verwendet, die man wiederum in den Element-Einstellungen anzeigt. Wenn man schon mal soweit ist, steht einen auf dem Weg zu Einkaufswelten mit eigenen Elementen in Shopware nicht mehr viel im Weg.
Ich hatte ein kleines Problem mit der config.xml, dass sich rein auf die Reihenfolge der XML-Nodes bezog.
Richtig:
<element required="true" type="text" scope="locale">
<name>default_value</name>
<label lang="de">Standard Wert</label>
<label lang="en">Default value</label>
<value>default</value>
</element>
Falsch:
<element required="true" type="text" scope="locale">
<name>default_value</name>
<value>default</value>
<label lang="de">Standard Wert</label>
<label lang="en">Default value</label>
</element>
Muss man nur wissen....
Man kann sehr einfach mit CSS auch die Reihenfolge von Elementen ändern. Damit kann man allein schon mit CSS viel an Templates anpassen ohne gleich Twig oder Smarty bemühen zu müssen.
<!DOCTYPE html>
<html>
<head>
<title>element reorder</title>
<style type="text/css">
div#first{
order:3;
-moz-order:3;
}
div#second{
order:1;
-moz-order:1;
}
div#third{
order:2;
-moz-order:2;
}
#main {
display: -webkit-flex; /* Safari */
display: flex;
}
#main div {
width: 70px;
text-align:center;
}
</style>
</head>
<body>
<div id="main">
<div id="first">ONE(3)</div>
<div id="second">TWO(1)</div>
<div id="third">THREE(2)</div>
</div>
</body>
</html>