webinar2.md

Pos order py

    @api.model
    def _order_fields(self, ui_order):
        res = super()._order_fields(ui_order)
        res['carrier_id'] = ui_order.get('carrier_id', False)
        return res

Models js

    const { load_fields } = require('point_of_sale.models');

    load_fields('product.product', ['pos_favorite']);

Popup js

    const { load_models } = require('point_of_sale.models');

    load_models([{
        model: 'delivery.carrier',
        fields: ['name'],
        loaded: (self, carriers) => self.db.carriers = carriers,
    }]);

    const PopupWidget = require('point_of_sale.popups');
    const CarrierPopupWidget = PopupWidget.extend({
        template: 'academy.carrier.popup',
        events: {
            'click li': 'setCarrier',
            'click .cancel': 'click_cancel',
        },
        setCarrier (ev) {
            const order = this.pos.get_order();
            order.carrier_id = ev.currentTarget.dataset.id;
            this.click_confirm();
        },
    });

    const gui = require('point_of_sale.gui');
    gui.define_popup({ name: 'delivery', widget: CarrierPopupWidget });

    const { define_action_button, ActionButtonWidget } = require('point_of_sale.screens');
    const CarrierActionButtonWidget = ActionButtonWidget.extend({
        label: 'Shipping information',
        init () {
            this._super(...arguments);
            const carrier = this.pos.get_order().get_carrier();
            this.label = carrier ? carrier.name : this.label;
        },
        button_click () {
            this.gui.show_popup('delivery', { confirm: () => {
                const order = this.pos.get_order();
                order.save_to_db();
                this.label = order.get_carrier().name;
                this.renderElement();
            } });
        },
    });
    define_action_button({ name: 'open_delivery_carrier', widget: CarrierActionButtonWidget });

    const { Order } = require('point_of_sale.models');
    const super_export_as_JSON = Order.prototype.export_as_JSON;
    const super_init_from_JSON = Order.prototype.init_from_JSON;

    const OrderPrototype = Order.extend({
        export_as_JSON () {
            const res = super_export_as_JSON.call(this);
            res['carrier_id'] = this.carrier_id;
            return res;
        },
        init_from_JSON (json) {
            super_init_from_JSON.call(this, json)
            this.carrier_id = json.carrier_id;
        },
        get_carrier () {
            return this.pos.db.carriers.find(carrier => carrier.id == this.carrier_id);
        },
    });

    Order.prototype = OrderPrototype.prototype;

screen xml

<t t-name="academy.checkout">
        <div class='payment-screen screen pos checkout'>
            <div class='screen-content'>
                <div class='top-content'>
                    <span class='button back'>
                        <i class='fa fa-angle-double-left'></i>
                        Back
                    </span>
                    <h1>Checkout</h1>
                    <span class='button next altlight'>
                        Payment
                        <i class='fa fa-credit-card-alt'></i>
                    </span>
                </div>
                <div class='left-content pc40 touch-scrollable scrollable-y order'>
                    <ul>
                        <t t-foreach="widget.pos.get_order().get_orderlines()" t-as="line">
                            <t t-raw="widget.getLine(line)" />
                        </t>
                    </ul>
                </div>
                <div class='right-content pc60 touch-scrollable scrollable-y'>
                    <div class="content">
                        <p><b>Delivery method</b><i class="fa fa-truck fa-lg"></i></p>
                        <t t-set="carrier" t-value="widget.pos.get_order().get_carrier()" />
                        <p t-if="carrier">
                            Your order was set to use <t t-esc="carrier.name" /> as delivery carrier.
                        </p>
                        <p t-else="">Your order has no delivery method set.</p>
                    </div>
                </div>
             </div>
         </div>
     </t>

popup xml

<t t-name="academy.carrier.popup">
        <div role="dialog" class="modal-dialog">
            <div class="popup popup-alert shipping">
                <p class="title">Delivery method</p>
                <p class="body">
                    <ul>
                        <t t-foreach="widget.pos.db.carriers" t-as="carrier">
                            <li t-att-data-id="carrier.id">
                                <t t-esc="carrier.name"/>
                            </li>
                        </t>
                    </ul>
                </p>
                <div class="footer">
                    <div class="button cancel">
                        Cancel
                    </div>
                </div>
            </div>
        </div>
    </t>

screens js

    const { define_action_button, ActionButtonWidget } = require('point_of_sale.screens');
    const CheckOrderActionButtonWidget = ActionButtonWidget.extend({
        label: 'Check order',
        button_click () {
            this.gui.show_screen('checkout');
        },
    });
    define_action_button({ name: 'open_checkout', widget: CheckOrderActionButtonWidget });

    const { ScreenWidget } = require('point_of_sale.screens');
    const { define_screen } = require('point_of_sale.gui');
    const { qweb } = require('web.core');

    const CheckoutScreenWidget = ScreenWidget.extend({
        template: 'academy.checkout',
        events: {
            'click .back': 'back',
            'click .next': 'next',
        },
        next () {
            this.gui.show_screen('payment');
        },
        back () {
            this.gui.back();
        },
        getLine (line) {
            return qweb.render('Orderline', {
                widget: this, line
            });
        },
        show () {
            this.renderElement();
            this._super(...arguments);
        }
    });

    define_screen({
        name: 'checkout',
        widget: CheckoutScreenWidget,
    });

product xml

    <t t-extend="Product">
        <t t-jquery="article" t-operation="append">
            <i t-if="product.pos_favorite" class="fa fa-gratipay" />
        </t>
        <t t-jquery="article">
            this.get(0).removeAttribute('class');
        </t>
        <t t-jquery="article" t-operation="attributes">
            <attribute name="t-attf-class">product {{product.pos_favorite ? 'green-box' : ''}}</attribute>
        </t>
    </t>