Add Price to Items on Category Page

Frappe Framework Website
1

So I’m trying to show the product price on the category page and through editing the item_row.html file, I was able to put the “$0.00” as a placeholder. How can I get it to automatically fetch product price, and for variants, grab the lowest and highest prices of the variants and display like: “$18.99 - $105.00” on the category page like the example below?

Annotation%202020-08-23%20231656
Annotation%202020-08-23%202316561151×870 201 KB

Here is the modified item_row.html code:

<div class="card mb-3 clickable-card" style="cursor: pointer">
<div class="row no-gutters">
	<div class="col-md-3">
		<div class="card-body">
			<a class="no-underline" href="/{{ item.route }}">
				<img class="website-image" src="{{ item.website_image or item.image or 'no-image.jpg' }}" alt="{{ item.item_name }}">
			</a>
		</div>
	</div>
	<div class="col-md-9">
		<div class="card-body">
			<h5 class="card-title" style="display: none;">
				<a class="text-dark" href="/{{ item.route }}">
					{{ item.item_name or item.name }}
				</a>
			</h5>
			<!-- <p class="card-text">
				{{ item.website_description or item.description or '<i class="text-muted">No description</i>' }}
			</p> -->
            
            <h6 class="card-title">
				<a class="text-dark custom-product-title" style="text-decoration: none" href="/{{ item.route }}">
					{{ item.website_description or item.description or '<i class="text-muted">No description</i>' }}
				</a>
			</h6>

            <h5 class="product-price-display">$0.00 {{ product_info.price.formatted_price_sales_uom }}</h5>
            
			<!-- <a href="/{{ item.route }}" class="btn btn-sm btn-light">{{ _('More details') }}</a> -->
		</div>
	</div>
</div>

I am greeted with the following uncaught server exception upon saving this piece of code:

Traceback (most recent call last):
  File "/home/frappe/frappe-bench/apps/frappe/frappe/website/render.py", line 48, in render
data = render_page_by_language(path)
  File "/home/frappe/frappe-bench/apps/frappe/frappe/website/render.py", line 152, in render_page_by_language
return render_page(path)
  File "/home/frappe/frappe-bench/apps/frappe/frappe/website/render.py", line 168, in render_page
return build(path)
  File "/home/frappe/frappe-bench/apps/frappe/frappe/website/render.py", line 175, in build
return build_page(path)
  File "/home/frappe/frappe-bench/apps/frappe/frappe/website/render.py", line 197, in build_page
html = frappe.get_template(context.template).render(context)
  File "/home/frappe/frappe-bench/env/local/lib/python2.7/site-packages/jinja2/environment.py", line 1008, in render
return self.environment.handle_exception(exc_info, True)
  File "/home/frappe/frappe-bench/env/local/lib/python2.7/site-packages/jinja2/environment.py", line 780, in handle_exception
reraise(exc_type, exc_value, tb)
  File "/home/frappe/frappe-bench/apps/erpnext/erpnext/./templates/generators/item_group.html", line 1, in top-level template code
{% extends "templates/web.html" %}
  File "/home/frappe/frappe-bench/apps/frappe/frappe/./templates/web.html", line 1, in top-level template code
{% extends base_template_path %}
  File "/home/frappe/frappe-bench/apps/frappe/frappe/./templates/base.html", line 68, in top-level template code
{% block content %}
  File "/home/frappe/frappe-bench/apps/frappe/frappe/./templates/web.html", line 60, in block "content"
{{ main_content() }}
  File "/home/frappe/frappe-bench/env/local/lib/python2.7/site-packages/jinja2/sandbox.py", line 440, in call
return __context.call(__obj, *args, **kwargs)
  File "/home/frappe/frappe-bench/env/local/lib/python2.7/site-packages/jinja2/runtime.py", line 574, in _invoke
rv = self._func(*arguments)
  File "/home/frappe/frappe-bench/apps/frappe/frappe/./templates/web.html", line 15, in template
{% block page_container %}
  File "/home/frappe/frappe-bench/apps/frappe/frappe/./templates/web.html", line 30, in block "page_container"
{%- block page_content -%}{%- endblock -%}
  File "/home/frappe/frappe-bench/apps/erpnext/erpnext/./templates/generators/item_group.html", line 22, in block "page_content"
{% include "erpnext/www/all-products/item_row.html" %}
  File "/home/frappe/frappe-bench/apps/erpnext/erpnext/./www/all-products/item_row.html", line 27, in top-level template code
<h5 class="product-price-display">$0.00 {{ product_info.price.formatted_price_sales_uom }}</h5>
  File "/home/frappe/frappe-bench/env/local/lib/python2.7/site-packages/jinja2/sandbox.py", line 387, in getattr
value = getattr(obj, attribute)
UndefinedError: 'product_info' is undefined
2

Well the error log is telling you everything product_info is undefined. You’re editing the template of a view. Frappe has an MVC model (Model - View - Controller). The controller is what receives the HTTP request when you go to the products page, the model is all the logic of frappe and the view is what you show.

When you go to the page, The controller gets the requests, calls some methods and gets the information it wants to display, and uses Jinja templates to render what you see. You’re modifying the Jinja template adding product_info an expecting the template to get the value of that magically. The template has no idea what that is, you haven’t defined it.

You define it by passing that value when the template is about to be rendered. If I had to guess, you could probably do something along the lines of {{ item.price }}.

Here’s the docs There’s a get_data method, that sets a context dictionary which is passed to the template. You have to make sure the data you want to use in the template is defined here, to be able to use it.