Assalamualaikum teman teman, pada kali ini saya ingin memberikan cara, bagaimana sih cara bikin website di odoo ? yang kita ketahui membuat website di odoo sangat mudah sekali, tinggal drag and drop karena semua komponen sudah tersedia pada sticky nya, namun tantangan kali ini adalah bagaimana cara membuat website dari belakang dengan koding ? mari kita simak cara sederhana yang saya terapkan.
ada beberapa hal yang perlu kita tekankan dalam pembuatan website, pertama adalah xml nya untuk tampilan, kedua adalah python nya untuk merender dan melakukan proses ke backend odoo.
<template id="portal_my_home" inherit_id="portal.portal_my_home">
<xpath expr="//div[hasclass('o_portal_docs')]" position="inside">
<t t-call="portal.portal_docs_entry">
<t t-set="url">/my/tes_product</t>
<t t-set="title">Web Test</t>
<t t-set="placeholder_count" t-value="'product_count'"/>
</t>
</xpath>
</template>
itu adalah portal_my_home yang ada pada modul portal, kita menginherit itu dan menaruh menu yang kita mau pada template itu, kebetulan id nya saya samain biar ga bingung, dan saya membuat namanya Web Test.
nah agar menu itu berfungsi dengan baik, kita harus membuat controller dan xml, tujuannya untuk merender tampilannya.
@http.route(['/my/tes_product'], type='http', website=True)
def tes_product(self, **kw):
products = request.env['product.product'].sudo().search([])
vendor = request.env['res.partner'].sudo().search([])
vals = {'products':products, 'vendor':vendor, 'page_name':'view_tes_product'}
return request.render('rm_web_test.view_tes_product', vals
<template id="view_tes_product" name="Product">
<t t-call="website.layout">
<section style="background-color: #eee;">
<div class="text-center container py-5">
<a t-attf-href="/my/tes_product/new_tes_product">
<button type="button" class="btn btn-primary">Create Product</button>
</a>
<h4 class="mt-4 mb-5">
<strong>Our Products</strong>
</h4>
<div class="row">
<t>
<t t-foreach="products" t-as="product">
<div class="col-lg-4 col-md-12 mb-4">
<div class="card">
<div class="bg-image hover-zoom ripple ripple-surface ripple-surface-light" data-mdb-ripple-color="light">
<img t-if="product.image_1920" t-att-src="image_data_uri(product.image_1920)" style="max-height: 150px;"/>
<div class="mask">
<div class="d-flex justify-content-start align-items-end h-100">
<h5>
<span class="badge bg-primary ms-2">New</span>
</h5>
</div>
</div>
<div class="hover-overlay">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</div>
</div>
<div class="card-body">
<h5 class="card-title mb-3">
<a t-attf-href="/my/tes_product/#{product.id}">
<t t-esc="product.name"/>
</a>
</h5>
<p>
<t t-esc="product.categ_id.name"/>
</p>
<h6 class="mb-3">
<t t-esc="product.list_price"/>
</h6>
</div>
</div>
</div>
</t>
</t>
</div>
</div>
</section>
</t>
</template>
maka tampilan yang akan kerender adalah seperti ini
ohiya untuk tampilannya ini sudah saya percantik yaa sesuai dengan xml nya, saya balut dengan menggunakan card, terus tinggal di looping aja product nya, buat loopingannya di kontrollernya, jadi intinya sampai step ini kita hanya menarik data dari product saja, kebetulan objek yang saya pakai product.product.
cukup sekian dari apa yang bisa saya sampaikan, untuk step selanjutnya bagaimana kita bisa melihat detail nya dari product tersebut, misal kita klik card nya itu, nanti kita akan lanjut ke part berikutnya karena akan sangat panjang proses website ini, karena masih ada create edit dan delete, stay tune ya teman teman, Assalamualaikum