Skip to Content
This question has been flagged
posreceiptdesign
1 Reply
3632 Views
Avatar
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


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>
Avatar
Discard
Avatar
Gracious Joseph
Best Answer

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.

  1. Identify and Debug the Function: Open the minified JavaScript file where applyWhenMounted is defined and locate how el.classList is being used.
  2. 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:

  1. Check for JavaScript errors.
  2. 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.

Avatar
Discard
OSAMAH FAISAL NAJI SAIF ALNIHMI
Author

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.

Related Posts Replies Views Activity
Custom Pos Receipt
pos receipt
Avatar
Avatar
1
दिस॰ 24
2928
Pos receipt design Solved
receipt design
Avatar
Avatar
2
नव॰ 24
1956
Pos Receipt
pos receipt
Avatar
0
अग॰ 24
2290
Can you customize Pos receipt via studio? Solved
pos receipt
Avatar
Avatar
1
अग॰ 24
3602
How to add index to each order line in POS receipt?
pos receipt
Avatar
0
जुल॰ 24
2077