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

客戶關係
e-Commerce
會計
庫存
PoS
專案管理
MRP

All apps

所有帖文人獎章

標籤（查看所有）

odoo accounting v14 pos v15

關於此討論區

支援

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

pos receipt design

1 回覆

3851 瀏覽次數

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

作者

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.

喜歡這則討論？不要只閱讀，加入發表意見吧！

今天就建立帳戶，享受獨家功能，與我們精彩的社群互動！

註冊

相關帖文	回覆	瀏覽次數
Custom Pos Receipt pos receipt	1 12月 24	3070
Pos receipt design 已解決 receipt design	2 11月 24	2058
Pos Receipt pos receipt	0 8月 24	2410
Can you customize Pos receipt via studio? 已解決 pos receipt	1 8月 24	3754
How to add index to each order line in POS receipt? pos receipt	0 7月 24	2234

此問題已被標幟

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

喜歡這則討論？不要只閱讀，加入發表意見吧！