Add dynamic content snippet

Author: gppa-odoo

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "python.languageServer": "None"
+}

website_dynamic_snippet/__init__.py

@@ -0,0 +1 @@
+from . import controllers

website_dynamic_snippet/__manifest__.py

@@ -0,0 +1,17 @@
+{
+    'name': 'Website Dynamic Snippet',
+    'version': '18.0.1.0.0',
+    'category': 'Website',
+    'depends': ['website_sale'],
+    'data': [
+        'views/snippets/snippet_templates.xml',
+    ],
+    'assets': {
+        'web.assets_frontend': [
+            '/website_dynamic_snippet/static/src/xml/sale_order_snippets.xml',
+            '/website_dynamic_snippet/static/src/js/dynamic_snippet_sale_orders.js',
+        ],
+    },
+    'installable': True,
+    'application': True,
+}

website_dynamic_snippet/controllers/__init__.py

@@ -0,0 +1 @@
+from . import main

website_dynamic_snippet/controllers/main.py

@@ -0,0 +1,15 @@
+from odoo import http
+from odoo.http import request
+
+class WebsiteProduct(http.Controller):
+    @http.route('/get_product_categories', auth="public", type='json', website=True)
+    def get_product_category(self, offset=0, limit=10):
+        """Get the website categories (or sale orders) for the snippet."""
+        sale_orders = request.env['sale.order'].sudo().search_read(
+            [],
+            fields=['id', 'partner_id', 'state'],
+            offset=offset,
+            limit=limit,
+            order='id asc',
+        )
+        return sale_orders

website_dynamic_snippet/static/src/js/dynamic_snippet_sale_orders.js

@@ -0,0 +1,41 @@
+import { renderToElement } from "@web/core/utils/render";
+import publicWidget from "@web/legacy/js/public/public_widget";
+import { rpc } from "@web/core/network/rpc";
+
+publicWidget.registry.get_product_tab = publicWidget.Widget.extend({
+    selector: '.categories_section',
+
+    async willStart() {
+        this.offset = 0;
+        this.limit = 10;
+        await this.loadCategories();
+    },
+
+    async loadCategories() {
+        const result = await rpc('/get_product_categories', {
+            offset: this.offset,
+            limit: this.limit,
+        });
+        if (result && result.length) {
+            const newContent = renderToElement('website_dynamic_snippet.sale_order_snippet', { result: result });
+            if(this.offset === 0) {
+                this.$target.empty().append(newContent);
+            } else {
+                const $newRows = $(newContent).find('tbody').children('tr');
+                this.$target.find('tbody').append($newRows);
+            }
+            this.offset += result.length;
+        } else {
+            this.$target.find('.load-more-button').hide();
+        }
+    },
+
+    events: {
+        'click .load-more-button': '_onLoadMoreClick',
+    },
+
+    async _onLoadMoreClick(ev) {
+        ev.preventDefault();
+        await this.loadCategories();
+    },
+});

website_dynamic_snippet/static/src/xml/sale_order_snippets.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Sale Order tab content template -->
+<templates xml:space="preserve">
+    <t t-name="website_dynamic_snippet.sale_order_snippet">
+        <section class="categories_section">
+            <div class="container">
+                <h3 class="section_heading">Sale Order Details</h3>
+                <div class="categories_wrapper">
+                    <div class="categories">
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th scope="col">Number</th>
+                                    <th scope="col">Customer Name</th>
+                                    <th scope="col">Status</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <t t-foreach="result" t-as="sale_order" t-key="sale_order.id">
+                                    <tr>
+                                        <th scope="row">
+                                            <t t-esc="sale_order.id"/>
+                                        </th>
+                                        <td><t t-esc="sale_order.partner_id[1]"/></td>
+                                        <td><t t-esc="sale_order.state"/></td>
+                                    </tr>
+                                </t>
+                            </tbody>
+                        </table>
+
+                        <div class="text-center mt-3">
+                            <button type="button" class="btn btn-primary load-more-button">
+                                Load More
+                            </button>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </section>
+    </t>
+</templates>

website_dynamic_snippet/views/snippets/snippet_templates.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+    <template id="sale_order_highlight" name="Category Highlight">
+        <section class="categories_section">
+            <div class="container">
+                <div class="alert alert-info">
+                    <h4>Your Category Highlight Tab snippet will be displayed here...
+                        Please save to view the snippet
+                    </h4>
+                </div>
+            </div>
+        </section>
+    </template>
+
+    <template id="category_highlight_snippet" inherit_id="website.snippets"
+        name="Category Highlight Snippet">
+        <xpath expr="//snippets[@id='snippet_groups']" position="inside">
+            <t t-snippet="website_dynamic_snippet.sale_order_highlight"/>
+        </xpath>
+    </template>
+
+</odoo>