Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:

CRM
e-Commerce
Knjigovodstvo
Zaloga
PoS
Projekt
MRP

All apps

All Posts People Badges

Ključne besede (View all)

odoo accounting v14 pos v15

About this forum

Pomoč

custom pos receipt el.classList is iterable while printing full receipt or reprint the receipt

pos receipt design

1 Odgovori

3827 Prikazi

OSAMAH FAISAL NAJI SAIF ALNIHMI

i have this custom OrderReceipt template which is pos receipt custom design for odoo 18
it is working but when i click on print FULL Receipt i get el.classList is iterable error

undefined

Occured on 2024-11-26 17:47:33 GMT

TypeError: el.classList is not iterable

at applyWhenMounted (http://localhost:8069/web/assets/9a61c58/point_of_sale.assets_prod.min.js:9383:1199)

at Proxy.whenMounted (http://localhost:8069/web/assets/9a61c58/point_of_sale.assets_prod.min.js:9383:897)

at Proxy.printWeb (http://localhost:8069/web/assets/9a61c58/point_of_sale.assets_prod.min.js:9366:28)

at Proxy.printWeb (http://localhost:8069/web/assets/9a61c58/point_of_sale.assets_prod.min.js:9358:29)

at Proxy.printHtml (http://localhost:8069/web/assets/9a61c58/point_of_sale.assets_prod.min.js:9367:96)

at Proxy.printHtml (http://localhost:8069/web/assets/9a61c58/point_of_sale.assets_prod.min.js:9359:87)

at Proxy.print (http://localhost:8069/web/assets/9a61c58/point_of_sale.assets_prod.min.js:9371:23)

at async Proxy.printReceipt (http://localhost:8069/web/assets/9a61c58/point_of_sale.assets_prod.min.js:9995:61)

at async ReceiptScreen.<anonymous> (http://localhost:8069/web/assets/9a61c58/point_of_sale.assets_prod.min.js:10137:275)

at async Object.call (http://localhost:8069/web/assets/9a61c58/point_of_sale.assets_prod.min.js:10136:24)

this is the custom template

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="ksa_custom_pos_receipt" t-inherit="point_of_sale.OrderReceipt" t-inherit-mode="extension">
        <xpath expr="//div[@class='pos-receipt p-2']" position="replace">
            <div class="pos-receipt p-2" style="width:82MM;direction:ltr;margin:0">
<!--                <ReceiptHeader data="props.data.headerData" />-->
                <div class="pos-receipt-company-logo">
                    <img t-attf-src="/web/image?model=res.company&amp;id={{props.data.headerData.company.id}}&amp;field=logo" alt="Logo" class="pos-receipt-logo"/>
                </div>


                <div class="d-flex flex-column align-items-center">
                    <div class="pos-receipt-contact">
                        <div class="company-name">
                            <t t-if="props.data.headerData.company">
                                <t t-esc="props.data.headerData.company.name"/>
                            </t>
                        </div>

                        <div class="company-address">
                            <div t-if="props.data.headerData.company.street" t-esc="props.data.headerData.company.street" />
                            <div t-if="props.data.headerData.company.state_id" t-esc="props.data.headerData.company.state_id.name" />
                            <div t-if="props.data.headerData.company.country_id" t-esc="props.data.headerData.company.country_id.name" />
                            <div t-if="props.data.headerData.company.phone" t-esc="props.data.headerData.company.phone" />
                            <div t-if="props.data.headerData.company.website" t-esc="props.data.headerData.company.website" />
                            <div t-if="props.data.headerData.company.vat" t-esc="props.data.headerData.company.vat" />
                        </div>
                        <div style="text-align:center;font-size:16px;margin-top:5px;margin-bottom:5px;">
                            <span>-Simplified Invoice / فاتورة ضريبية مبسطة-</span>
                        </div>
                        <ul class="list-1">
                            <il>Invoice Num:</il>
                            <il><t t-esc="props.data.name"/></il>
                            <il style="direction:rtl;">رقم الفاتورة:</il>
                        </ul>
                        <ul class="list-2">
                            <il>Date:</il>
                            <il><t t-esc="props.data.date"/></il>
                            <il style="direction:rtl;">التاريخ:</il>
                        </ul>
                        <ul class="cashier" >
                            <il>Cashier:</il>
                            <il><t t-esc="props.data.headerData.cashier"/></il>
                            <il style="direction:rtl;">الكاشير:</il>
                        </ul>
                        <h1 class="tracking-number text-center" style="font-size: 100px" t-if="props.data.trackingNumber and props.data.bigTrackingNumber" t-esc="props.data.trackingNumber" />
                        <div style="border-bottom: 1px solid #000; margin: 5px 0;"></div>
                        <div class="customer-information">
                            <!-- Customer Name -->
                            <ul class="list-3">
                                <li>Client:</li>
                                <li>
                                    <t t-if="props.data.headerData.partner">
                                        <t t-esc="props.data.headerData.partner.name" />
                                    </t>
                                    <t t-else="">Customer / زبون</t>
                                </li>
                                <li style="direction:rtl;">العميل:</li>
                            </ul>
                            <ul class="list-3">
                                <li>Phone:</li>
                                <li>
                                    <t t-if="props.data.headerData.partner">
                                        <t t-esc="props.data.headerData.partner.phone" />
                                    </t>
                                    <t t-else="">N/A</t>
                                </li>
                                <li style="direction:rtl;">الهاتف:</li>
                            </ul>
                            <ul class="list-3">
                                <li>Address:</li>
                                <li>
                                    <t t-if="props.data.headerData.partner">
                                        <t t-esc="props.data.headerData.partner.street" />
                                    </t>
                                    <t t-else="">N/A</t>
                                </li>
                                <li style="direction:rtl;">العنوان:</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div style="border-bottom: 1px solid #000; margin: 5px 0;"></div>
                <div class="orderline-orderline">
                    <table class="orderline-table" style="width: 100%; border-collapse: collapse;">
                        <!-- Table Headers -->
                        <thead>
                            <tr>
                                <!-- English and Arabic labels combined for clarity -->
                                <th style="width: 40%; border-bottom: 1px solid #ddd; font-size: 11px; font-weight: bold; text-align: center;">
                                    Item / الصنف
                                </th>
                                <th style="width: 15%; border-bottom: 1px solid #ddd; font-size: 11px; font-weight: bold; text-align: center;">
                                    Price / السعر
                                </th>
                                <th style="width: 10%; border-bottom: 1px solid #ddd; font-size: 11px; font-weight: bold; text-align: center;">
                                    QTY / الكمية
                                </th>
                                <th style="width: 20%; border-bottom: 1px solid #ddd; font-size: 11px; font-weight: bold; text-align: center;">
                                    Total / إجمالي
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <t t-foreach="props.data.orderlines or []" t-as="line" t-key="line.id or line.productName or index">
                                <tr style="text-align: center; border-bottom: 1px solid #ddd; font-size: 12px;margin-top:5px;padding-top:5px;">
                                    <td style="width: 40%;"><t t-esc="line.productName or 'N/A'"/></td>
                                    <td style="width: 15%;"><t t-esc="line.unitPrice or '0.00'"/></td>
                                    <td style="width: 10%;">
                                        <t t-esc="line.qty or '1'"/>

                                    </td>
                                    <td style="width: 20%;"><t t-esc="line.price or '0.00'"/></td>
                                </tr>
                            </t>
                        </tbody>
                    </table>
                </div>
                <div class="invoice-summary">
                    <div style="text-align:center;"><span style="font-size:22px;text-align:center;">---------------------------------------</span></div>
                </div>
                <div>
                    <t t-if="!props.basic_receipt">
                <div t-if="props.data.tax_details.length > 0" class="pos-receipt-taxes">
                    <div class="d-flex">
                        <span t-if="showTaxGroupLabels" class="me-2" style="visibility: hidden;">A</span>
                        <span class="fw-bolder">Untaxed Amount</span>
                        <span t-esc="props.formatCurrency(props.data.total_without_tax)" class="ms-auto"/>
                    </div>

                    <div t-foreach="props.data.tax_details" t-as="tax" t-key="tax.id" class="d-flex">
                        <t t-if="showTaxGroupLabels">
                            <span t-if="tax.tax_group_id.pos_receipt_label" t-esc="tax.tax_group_id.pos_receipt_label" class="me-2"/>
                            <span t-else="" class="me-2" style="visibility: hidden;">A</span>
                        </t>
                        <span>
                            <span t-esc="tax.name"/>
                            on
                            <span t-esc="props.formatCurrency(tax.base)"/>
                        </span>
                        <span t-esc="props.formatCurrency(tax.amount)" class="ms-auto"/>
                    </div>
                </div>

        <!-- Total -->
                <div class="text-center">--------------------------------</div>
                <div class="pos-receipt-amount">
                    TOTAL
                    <span t-esc="props.formatCurrency(props.data.amount_total)" class="pos-receipt-right-align"/>
                </div>
                <t t-if="props.data.rounding_applied">
                    <div class="pos-receipt-amount">
                    Rounding
                    <span t-esc='props.formatCurrency(props.data.rounding_applied)' class="pos-receipt-right-align"/>
                    </div>
                    <div class="pos-receipt-amount">
                    To Pay
                    <span t-esc='props.formatCurrency(props.data.amount_total + props.data.rounding_applied)' class="pos-receipt-right-align"/>
                </div>
                </t>

                <!-- Payment Lines -->

                <div class="paymentlines text-start" t-foreach="props.data.paymentlines" t-as="line" t-key="line_index">
                    <t t-esc="line.name" />
                    <span t-esc="props.formatCurrency(line.amount)" class="pos-receipt-right-align"/>
                </div>

                <div  t-if="props.data.change != 0" class="pos-receipt-amount receipt-change">
                    CHANGE
                    <span t-esc="props.formatCurrency(props.data.change)" class="pos-receipt-right-align"/>
                </div>

                <!-- Extra Payment Info -->

                <t t-if="props.data.total_discount">
                    <div class="text-center">
                        Discounts
                        <span t-esc="props.formatCurrency(props.data.total_discount)" class="pos-receipt-right-align"/>
                    </div>
                </t>

                <div class="before-footer" />

                <div t-if="props.data.pos_qr_code">
                    <br/>
                    <div class="pos-receipt-order-data mb-2">
                        Need an invoice for your purchase ?
                    </div>
                </div>

                <div t-if="['qr_code', 'qr_code_and_url'].includes(props.data.headerData.company.point_of_sale_ticket_portal_url_display_mode) and props.data.pos_qr_code" class="mb-2">
                    <img id="posqrcode" t-att-src="props.data.pos_qr_code" class="pos-receipt-logo"/>
                </div>

                <div t-if="props.data.pos_qr_code">
                    <div class="pos-receipt-order-data">
                        Unique Code: <t t-esc="props.data.ticket_code"/>
                    </div>
                </div>

                <div t-if="['url', 'qr_code_and_url'].includes(props.data.headerData.company.point_of_sale_ticket_portal_url_display_mode) and props.data.pos_qr_code">
                    <div class="pos-receipt-order-data" t-attf-class="{{ props.data.ticket_portal_url_display_mode === 'qr_code_and_url' ? 'mt-3' : '' }}">
                        Portal URL: <t t-out="props.data.base_url"/>/pos/ticket
                    </div>
                </div>
            </t>
                </div>
            </div>
            <img t-if="props.data.qr_code" id="qrcode" t-att-src="props.data.qr_code" class="pos-receipt-qrcode"/>
        </xpath>
    </t>
</templates>

Gracious Joseph

The el.classList is not iterable error typically indicates that the JavaScript code is trying to operate on an element whose classList property is either undefined or invalid. Here’s a step-by-step troubleshooting guide and potential fixes for your issue:

Step 1: Validate HTML Structure

Ensure your receipt template is well-formed and compliant with HTML standards. Here are key points:

Replace <il> with <li> in all instances. <il> is not a valid HTML tag and can cause DOM parsing issues.
Double-check that all elements (<div>, <ul>, <li>, <t>, etc.) have proper opening and closing tags.

For example:

xmlCopy code<ul class="list-1">
    <li>Invoice Num:</li>
    <li><t t-esc="props.data.name"/></li>
    <li style="direction:rtl;">رقم الفاتورة:</li>
</ul>

Step 2: Debug the Receipt Rendering

Locate where the applyWhenMounted function interacts with the receipt rendering logic in point_of_sale.assets_prod.min.js. Focus on these areas:

Dynamic DOM Manipulation: Check if any t-if conditions in your template could render incomplete or invalid HTML.

Example of a risky condition:

xmlCopy code<t t-if="props.data.qr_code">
    <img t-att-src="props.data.qr_code" class="pos-receipt-qrcode"/>
</t>

Ensure props.data.qr_code is always valid when rendered.

Step 3: Review CSS Class Assignments

Look for elements where classes are assigned dynamically. If classes are conditionally added or manipulated, ensure the referenced DOM element is fully initialized.

Example fix:

xmlCopy code<div t-if="props.data.qr_code" class="pos-receipt">
    <img t-att-src="props.data.qr_code" class="pos-receipt-qrcode"/>
</div>

Ensure that props.data.qr_code exists before rendering.

Step 4: Update Odoo's POS JavaScript Logic (if needed)

You might need to override the applyWhenMounted function in the POS JavaScript assets to handle this error gracefully.

Identify and Debug the Function: Open the minified JavaScript file where applyWhenMounted is defined and locate how el.classList is being used.
Patch the Function (Custom Override): Add error handling for elements with undefined classList.

Example:

javascriptCopy codefunction applyWhenMounted(element, callback) {
    if (element && element.classList) {
        // Perform operations on classList
        callback(element);
    } else {
        console.warn("Element has no classList:", element);
    }
}

Step 5: Validate Full Receipt Rendering

To specifically address issues with the "Full Receipt" printing:

Test with a minimal receipt template to ensure basic functionality. Incrementally add features back to identify what causes the error.

Focus on <t> loops like this:

xmlCopy code<t t-foreach="props.data.orderlines or []" t-as="line" t-key="line.id or line.productName or index">
    <tr>
        <td><t t-esc="line.productName"/></td>
        <td><t t-esc="line.unitPrice"/></td>
    </tr>
</t>

Ensure props.data.orderlines is always an array and each item has valid properties.

Step 6: Enable Debug Logs

Enable debug logs in the browser’s developer console and Odoo logs to trace errors:

bashCopy codesudo tail -f /var/log/odoo/odoo.log

In the browser console:

Check for JavaScript errors.
Log intermediate values of el and classList.

Example:

javascriptCopy codeconsole.log(el, el?.classList);

Step 7: Verify Odoo Version and Compatibility

Confirm that your custom POS receipt template is fully compatible with the Odoo version you’re using. Sometimes, issues arise due to changes in Odoo's core assets between versions.

Step 8: Test Printing Refund Receipts

If the issue persists specifically with refund receipts, test using default Odoo templates to isolate whether the error is caused by your customization or core Odoo behavior.

Step 9: Use Default Template as a Baseline

If nothing else works, try using the default Odoo POS receipt template. Compare behavior to pinpoint issues in your custom implementation.

OSAMAH FAISAL NAJI SAIF ALNIHMI

Avtor

i have corrected the <ul> tags but still the same el.classList error while printing full receipt or reprint the receipt from the refund

Gracious Joseph

Step 1: Validate HTML Structure
Ensure your receipt template is well-formed and compliant with HTML standards. Here are key points:

Replace <il> with <li> in all instances. <il> is not a valid HTML tag and can cause DOM parsing issues.
Double-check that all elements (<div>, <ul>, <li>, <t>, etc.) have proper opening and closing tags.
For example:

<ul class="list-1">
<li>Invoice Num:</li>
<li><t t-esc="props.data.name"/></li>
<li style="direction:rtl;">رقم الفاتورة:</li>
</ul>
Step 2: Debug the Receipt Rendering
Locate where the applyWhenMounted function interacts with the receipt rendering logic in point_of_sale.assets_prod.min.js. Focus on these areas:

Dynamic DOM Manipulation: Check if any t-if conditions in your template could render incomplete or invalid HTML.
Example of a risky condition:

<t t-if="props.data.qr_code">
<img t-att-src="props.data.qr_code" class="pos-receipt-qrcode"/>
</t>
Ensure props.data.qr_code is always valid when rendered.

Step 3: Review CSS Class Assignments
Look for elements where classes are assigned dynamically. If classes are conditionally added or manipulated, ensure the referenced DOM element is fully initialized.

Example fix:

<div t-if="props.data.qr_code" class="pos-receipt">
<img t-att-src="props.data.qr_code" class="pos-receipt-qrcode"/>
</div>
Ensure that props.data.qr_code exists before rendering.

Step 4: Update Odoo's POS JavaScript Logic (if needed)
You might need to override the applyWhenMounted function in the POS JavaScript assets to handle this error gracefully.

Identify and Debug the Function: Open the minified JavaScript file where applyWhenMounted is defined and locate how el.classList is being used.

Patch the Function (Custom Override): Add error handling for elements with undefined classList.

Example:

function applyWhenMounted(element, callback) {
if (element && element.classList) {
// Perform operations on classList
callback(element);
} else {
console.warn("Element has no classList:", element);
}
}
Step 5: Validate Full Receipt Rendering
To specifically address issues with the "Full Receipt" printing:

Test with a minimal receipt template to ensure basic functionality. Incrementally add features back to identify what causes the error.
Focus on <t> loops like this:
<t t-foreach="props.data.orderlines or []" t-as="line" t-key="line.id or line.productName or index">
<tr>
<td><t t-esc="line.productName"/></td>
<td><t t-esc="line.unitPrice"/></td>
</tr>
</t>
Ensure props.data.orderlines is always an array and each item has valid properties.

Enjoying the discussion? Don't just read, join in!

Create an account today to enjoy exclusive features and engage with our awesome community!

Prijavi

Related Posts	Odgovori	Prikazi
Custom Pos Receipt pos receipt	1 dec. 24	3061
Pos receipt design Solved receipt design	2 nov. 24	2055
Pos Receipt pos receipt	0 avg. 24	2407
Can you customize Pos receipt via studio? Solved pos receipt	1 avg. 24	3737
How to add index to each order line in POS receipt? pos receipt	0 jul. 24	2229

This question has been flagged

Step 1: Validate HTML Structure

Step 2: Debug the Receipt Rendering

Step 3: Review CSS Class Assignments

Step 4: Update Odoo's POS JavaScript Logic (if needed)

Step 5: Validate Full Receipt Rendering

Step 6: Enable Debug Logs

Step 7: Verify Odoo Version and Compatibility

Step 8: Test Printing Refund Receipts

Step 9: Use Default Template as a Baseline

Enjoying the discussion? Don't just read, join in!