feat: design for new order product list

bin/frontend/controls/products/ProductList.js

@@ -57,7 +57,7 @@ define('package/quiqqer/order/bin/frontend/controls/products/ProductList', [
         $onImport: function () {
             var self = this;
 
-            this.getElm().getElements('.quiqqer-order-productList-article-addToBasket').addEvents({
+            this.getElm().getElements('.quiqqer-order-productList-product-addToBasket').addEvents({
                 click: function (event) {
                     var Target = event.target;
 
@@ -67,8 +67,8 @@ define('package/quiqqer/order/bin/frontend/controls/products/ProductList', [
 
                     Target.set('disabled', true);
 
-                    var Article   = Target.getParent('article');
-                    var productId = Article.get('data-product');
+                    var Product   = Target.getParent('article');
+                    var productId = Product.get('data-product');
 
                     require(['package/quiqqer/order/bin/frontend/Basket'], function (Basket) {
                         Basket.addProduct(productId, 1);

locale.xml

@@ -237,6 +237,11 @@
             <de><![CDATA[Die Bestellung besitzt keine Artikel.]]></de>
             <en><![CDATA[The order does not own any articles.]]></en>
         </locale>
+
+        <locale name="control.productList.add">
+            <de><![CDATA[Zum Warenkorb]]></de>
+            <en><![CDATA[To the Basket]]></en>
+        </locale>
     </groups>
 
     <groups name="quiqqer/order" datatype="php">

src/QUI/ERP/Order/Controls/Products/ProductList.css

+.quiqqer-order-productList {
+    width: 100%;
+}
+
+.quiqqer-order-productList-product {
+    float: left;
+    padding: 10px;
+    width: 300px;
+}
+
+.quiqqer-order-productList-product-header {
+    padding: 10px 0;
+    font-size: 18px;
+}
+
+.quiqqer-order-productList-product-addToBasket {
+    display: inline-block;
+    text-align: center;
+    width: 100%;
+}
+
+.quiqqer-order-productList-product-addToBasket .fa {
+    display: inline-block;
+    width: 100%;
+}
+
+.quiqqer-order-productList-product-image {
+    align-items: center;
+    background: rgba(0, 0, 0, 0.1);
+    display: inline-grid;
+    height: 100px;
+    width: 100%;
+}
+
+.quiqqer-order-productList-product-image img {
+    align-self: center;
+    justify-self: center;
+}
+
+.quiqqer-order-productList-product-description {
+    height: 140px;
+    padding: 10px 0;
+}

src/QUI/ERP/Order/Controls/Products/ProductList.html

 {foreach $products as $Product}
-<article class="quiqqer-order-productList-article" data-product="{$Product->getId()}">
-    <header>
+<article class="quiqqer-order-productList-product" data-product="{$Product->getId()}">
+    <header class="quiqqer-order-productList-product-header">
         {$Product->getTitle()}
     </header>
 
-    <div class="article-description">
+    <div class="quiqqer-order-productList-product-image">
+        {image Image=$Product->getImage() width=500}
+    </div>
+
+    <div class="quiqqer-order-productList-product-description">
         {$Product->getDescription()}
     </div>
 
     <footer>
-        <button class="quiqqer-order-productList-article-addToBasket">
+        <button class="quiqqer-order-productList-product-addToBasket">
             <span class="fa fa-shopping-cart"></span>
             <span>
                 {locale group="quiqqer/order" var="control.productList.add"}
@@ -18,4 +22,3 @@
     </footer>
 </article>
 {/foreach}
-

src/QUI/ERP/Order/Controls/Products/ProductList.php

@@ -15,6 +15,15 @@
  */
 class ProductList extends QUI\Control
 {
+    public function __construct(array $attributes = [])
+    {
+        parent::__construct($attributes);
+
+        $this->setAttribute('class', 'quiqqer-order-productList');
+        $this->setAttribute('nodeName', 'section');
+        $this->addCSSFile(dirname(__FILE__).'/ProductList.css');
+    }
+
     /**
      * @return string
      *
@@ -22,16 +31,10 @@ class ProductList extends QUI\Control
      */
     public function getBody()
     {
-        $this->setAttribute('nodeName', 'section');
-        $this->setAttribute('nodeName', 'section');
-
         $Engine     = QUI::getTemplateManager()->getEngine();
         $productIds = $this->getAttribute('productsIds');
         $products   = [];
 
-        QUI\System\Log::writeRecursive('#####');
-        QUI\System\Log::writeRecursive($productIds);
-
         if (!is_array($productIds)) {
             $productIds = json_decode($productIds, true);
         }