We implement a new Feature for the QUIQQER Order Module.

![QUIQQER Order](https://steemitimages.com/0x0/https://dev.quiqqer.com/quiqqer/order/raw/master/bin/images/Readme.png)

The QUIQQER Order Module integrates a complete order management in QUIQQER. The QUIQQER Order Module not only integrates an order management, actually a complete ordering process with integrated payment methods API and automated invoicing.

*Version 1 will be released in the next few weeks / months.*

- [Repository](https://github.com/QUIQQER/order)

### New Features
#### What feature(s) did you add?

It must be possible to open a single order in User Frontend Profile.
At the moment there is only the possibility to view an order in the order list and download the PDF invoice. This is not user-friendly.

The following things must be possible:
- It must exist an Order QUI Control
- Open the order QUI Control in a QUI Window
- The order must be easy to open everywhere (JS API)
- The following Data must be visible in the Order
    - Order number
    - Order date
    - Article list with prices
    - Total and sub total
    - Order / Invoice Address
    - Link to the invoice pdf
    - Payment informations

#### How did you implement it/them?

- It must exist an Order QUI Control [[102bda1c]](https://github.com/QUIQQER/order/commit/102bda1c17c50ed8971d7e5ff3a9aae6040379fc) [[cc5a53db]](https://github.com/QUIQQER/order/commit/cc5a53db5c47b14445f854bd2fc5d0760f90d588)
- Open the order QUI Control in a QUI Window [[102bda1c]](https://github.com/QUIQQER/order/commit/102bda1c17c50ed8971d7e5ff3a9aae6040379fc) [[1684dcdd]](https://github.com/QUIQQER/order/commit/1684dcdd667b646c538de0315d71f9a22f9d1deb)
- The order must be easy to open everywhere (JS API) (look at preview code)
- The following Data must be visible in the Order [[cc5a53db]](https://github.com/QUIQQER/order/commit/cc5a53db5c47b14445f854bd2fc5d0760f90d588) [[04cef875]](https://github.com/QUIQQER/order/commit/04cef8758ba35f62e44da9881852e155fa017974) [[04cef875]](https://github.com/QUIQQER/order/commit/) [[4b44aaf3]](https://github.com/QUIQQER/order/commit/4b44aaf3a6affa55c9093b5965787bce0cf98290) [[c495873f]](https://github.com/QUIQQER/order/commit/c495873fa42bf9508e06e1c6beb90a3da9ff7c1a) [[b6f6c996]](https://github.com/QUIQQER/order/commit/b6f6c99682b38071d68b1acca0defe63b0aace31) [[cd29e193]](https://github.com/QUIQQER/order/commit/cd29e193d2aef1b0611bb95e6ed8251a8a059a8b)
    - Order number
    - Order date
    - Article list with prices
    - Total and sub total
    - Order / Invoice Address
    - Link to the invoice pdf
    - Payment informations

##### The JavaScript API looks like this:

Loads the order into a DOM Node:

```javascript
require([
    'package/quiqqer/order/bin/frontend/controls/order/Order'
], function (Order) {
    new Order({
        hash  : ORDER_HASH,
        events: {
            onLoad: function (OrderControl) {
            }
        }
    }).inject(HtmlNode);
});
```

Opens the order in a QUI Window:

```javascript
require([
    'package/quiqqer/order/bin/frontend/controls/order/Window'
], function (Window) {
    new Window({
        hash  : ORDER_HASH
    }).open();
});
```

##### Preview of the order integration

![](https://dev.quiqqer.com/quiqqer/order/uploads/aa6822e6a48b46ecdaac9365e5d705a9/image.png)

We tried to assign the commits as far as we could. The complete commit log can you find [[here]](https://github.com/QUIQQER/order/compare/102bda1c17c50ed8971d7e5ff3a9aae6040379fc...0f751eaf300208efdceab16b442a6d2755227025)


Thanks for reading  
Hen, for PCSG Developers

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@pcsg-dev/quiqqer-order-single-order-view">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>