erpnext/templates/includes/macros.html

{% macro product_image_square(website_image, css_class="") %}
<div class="product-image product-image-square
	{% if not website_image -%} missing-image {%- endif %} {{ css_class }}"
	{% if website_image -%}
	style="background-image: url('{{ frappe.utils.quoted(website_image) | abs_url }}');"
	{%- endif %}>
</div>
{% endmacro %}

{% macro product_image(website_image, css_class="product-image", alt="") %}
	<div class="border text-center rounded {{ css_class }}" style="overflow: hidden;">
		<img itemprop="image" class="website-image h-100 w-100" alt="{{ alt }}" src="{{ frappe.utils.quoted(website_image or 'no-image.jpg') | abs_url }}">
	</div>
{% endmacro %}

{% macro media_image(website_image, name, css_class="") %}
	<div class="product-image sidebar-image-wrapper {{ css_class }}">
		{% if not website_image -%}
		<div class="sidebar-standard-image"> <div class="standard-image" style="background-color: rgb(250, 251, 252);">{{name}}</div> </div>
		{%- endif %}
		{% if website_image -%}
			<a href="{{ frappe.utils.quoted(website_image) }}">
				<img itemprop="image" src="{{ frappe.utils.quoted(website_image) | abs_url }}"
					class="img-responsive img-thumbnail sidebar-image" style="min-height:100%; min-width:100%;">
			</a>
		{%- endif %}
	</div>
{% endmacro %}

{% macro render_homepage_section(section) %}

{% if section.section_based_on == 'Custom HTML' and section.section_html %}
	{{ section.section_html }}
{% elif section.section_based_on == 'Cards' %}
<section class="container my-5">
	<h3>{{ section.name }}</h3>

	<div class="row">
		{% for card in section.section_cards %}
		<div class="col-md-{{ section.column_value }} mb-4">
			<div class="card h-100 justify-content-between">
				{% if card.image %}
				<div class="website-image-lazy" data-class="card-img-top h-75" data-src="{{ card.image }}" data-alt="{{ card.title }}"></div>
				{% endif %}
				<div class="card-body">
					<h5 class="card-title">{{ card.title }}</h5>
					<p class="card-subtitle mb-2 text-muted">{{ card.subtitle or '' }}</p>
					<p class="card-text">{{ card.content or '' | truncate(140, True) }}</p>
				</div>
				<div class="card-body flex-grow-0">
					<a href="{{ card.route }}" class="card-link">{{ _('More details') }}</a>
				</div>
			</div>
		</div>
		{% endfor %}
	</div>
</section>
{% endif %}

{% endmacro %}

{%- macro item_card(item, settings=None, is_featured=False, is_full_width=False, align="Left") -%}
{%- set align_items_class = resolve_class({
	'align-items-end': align == 'Right',
	'align-items-center': align == 'Center',
	'align-items-start': align == 'Left',
}) -%}
{%- set col_size = 3 if is_full_width else 4 -%}
{%- set title = item.item_name or item.item_code -%}
{%- set image = item.website_image or item.image -%}
{%- set description = item.website_description or item.description-%}

{% if is_featured %}
<div class="col-sm-{{ col_size*2 }} item-card">
	<div class="card featured-item {{ align_items_class }}">
		{% if image %}
		<div class="row no-gutters">
			<div class="col-md-6">
				<img class="card-img" src="{{ image }}" alt="{{ title }}">
			</div>
			<div class="col-md-6">
				{{ item_card_body(title, settings, description, item, is_featured, align) }}
			</div>
		</div>
		{% else %}
			<div class="col-md-12">
				{{ item_card_body(title, settings, description, item, is_featured, align) }}
			</div>
		{% endif %}
	</div>
</div>
{% else %}
<div class="col-sm-{{ col_size }} item-card">
	<div class="card {{ align_items_class }}">
		{% if image %}
			<div class="card-img-container">
				<a href="/{{ item.route or '#' }}" style="text-decoration: none;">
					<img class="card-img" src="{{ image }}" alt="{{ title }}">
				</a>
			</div>
		{% else %}
		<a href="/{{ item.route or '#' }}" style="text-decoration: none;">
			<div class="card-img-top no-image">
				{{ frappe.utils.get_abbr(title) }}
			</div>
		</a>
		{% endif %}
		{{ item_card_body(title, settings, description, item, is_featured, align) }}
	</div>
</div>
{% endif %}
{%- endmacro -%}

{%- macro item_card_body(title, settings, description, item, is_featured, align) -%}
{%- set align_class = resolve_class({
	'text-right': align == 'Right',
	'text-center': align == 'Center' and not is_featured,
	'text-left': align == 'Left' or is_featured,
}) -%}
<div class="card-body {{ align_class }}" style="width:100%">
	<div style="margin-top: 16px; display: flex;">
		<a href="/{{ item.route or '#' }}">
			<div class="product-title">{{ title or '' }}</div>
		</a>
		{% if item.in_stock %}
			<span class="indicator {{ item.in_stock }} card-indicator"></span>
		{% endif %}
		{% if not item.has_variants and settings.enable_wishlist %}
			<div class="like-action"
				data-item-code="{{ item.item_code }}"
				data-price="{{ item.price }}"
				data-formatted-price="{{ item.get('formatted_price') }}">
				<svg class="icon sm">
					{%- set icon_class = "wished" if item.wished else "not-wished"-%}
					<use class="{{ icon_class }} wish-icon" href="#icon-heart"></use>
				</svg>
			</div>
		{% endif %}
	</div>
	{% if is_featured %}
		<div class="product-price">{{ item.formatted_price or '' }}</div>
		<div class="product-description ellipsis">{{ description or '' }}</div>
	{% else %}
		<div class="product-category">{{ item.item_group or '' }}</div>

		{% if item.formatted_price %}
			<div class="product-price">
				{{ item.formatted_price or '' }}

				{% if item.get("formatted_mrp") %}
					<small class="ml-1 text-muted">
						<s>{{ item.formatted_mrp }}</s>
					</small>
					<small class="ml-1" style="color: #F47A7A; font-weight: 500;">
						{{ item.discount }} OFF
					</small>
				{% endif %}

			</div>
		{% endif %}

		{% if item.has_variants %}
			<a href="/{{ item.route or '#' }}">
				<div class="btn btn-sm btn-explore-variants w-100 mt-4">
					{{ _('Explore') }}
				</div>
			</a>
		{% elif settings.enabled and (settings.allow_items_not_in_stock or item.in_stock != "red")%}
			<div id="{{ item.name }}" class="btn btn-sm btn-add-to-cart-list not-added w-100 mt-4"
				data-item-code="{{ item.item_code }}">
				{{ _('Add to Cart') }}
			</div>
		{% endif %}
	{% endif %}
</div>
{%- endmacro -%}


{%- macro wishlist_card(item, settings) %}
<div class="col-sm-3 wishlist-card">
	<div class="card text-center" style="max-height: 390px;">
		{% if item.image %}
			<div class="card-img-container">
				<a href="/{{ item.route or '#' }}" style="text-decoration: none;">
					<img class="card-img" src="{{ item.image }}" alt="{{ title }}">
				</a>
				<div class="remove-wish" data-item-code="{{ item.item_code }}">
					<span style="padding-bottom: 2px;">
						<svg class="icon sm remove-wish-icon" style="margin-bottom: 4px; margin-left: 0.5px;">
							<use class="close" href="#icon-close"></use>
						</svg>
					</span>
				</div>

			</div>
		{% else %}
		<a href="/{{ item.route or '#' }}" style="text-decoration: none;">
			<div class="card-img-top no-image">
				{{ frappe.utils.get_abbr(title) }}
			</div>
		</a>
		{% endif %}

		{{ wishlist_card_body(item, settings) }}


	</div>
</div>
{%- endmacro -%}

{%- macro wishlist_card_body(item, settings) %}
<div class="card-body text-center" style="width: 100%;">
	<div style="margin-top: 16px;">
		<div class="product-title">{{ item.item_name or item.item_code or ''}}</div>
	</div>
	<div class="product-price">
		{{ item.formatted_price or '' }}

		{% if item.get("formatted_mrp") %}
			<small class="ml-1 text-muted">
				<s>{{ item.formatted_mrp }}</s>
			</small>
			<small class="ml-1" style="color: #F47A7A; font-weight: 500;">
				{{ item.discount }} OFF
			</small>
		{% endif %}
	</div>

	{% if (item.available and settings.show_stock_availability) or (not settings.show_stock_availability) %}
		<!-- Show move to cart button if in stock or if showing stock availability is disabled -->
		<button data-item-code="{{ item.item_code}}" class="btn btn-add-to-cart w-100 wishlist-cart-not-added mt-2">
			<span class="mr-2">
				<svg class="icon icon-md">
					<use href="#icon-assets"></use>
				</svg>
			</span>
			{{ _("Move to Cart") }}
		</button>
	{% else %}
		<div class="mt-4" style="color: #F47A7A; width: 100%;">
			{{ _("Not in Stock") }}
		</div>
	{% endif %}
</div>
{%- endmacro -%}

{%- macro ratings_with_title(avg_rating, title, size, rating_header_class) -%}
<div style="display: flex;">
	<div class="rating">
		{% for i in range(1,6) %}
			{% set fill_class = 'star-click' if i <= avg_rating else '' %}
			<svg class="icon icon-{{ size }} {{ fill_class }}">
				<use href="#icon-star"></use>
			</svg>
		{% endfor %}
	</div>
	<p class="ml-4 {{ rating_header_class }}">
		<span>{{ title }}</span>
	</p>
</div>
{%- endmacro -%}

{%- macro ratings_summary(reviews, reviews_per_rating, average_rating, average_whole_rating)-%}
<!-- Ratings Summary -->
<h2 class="reviews-header">
	{{ _("Customer Ratings") }}
</h2>

{% if reviews %}
	{% set rating_title = frappe.utils.cstr(average_rating) + " " + _("out of 5") %}
	{{ ratings_with_title(average_whole_rating, rating_title, "lg", "rating-summary-title") }}
{% endif %}

<!-- Rating Progress Bars -->
<div class="rating-progress-bar-section">
	{% for percent in reviews_per_rating %}
		<div class="mt-4 col-sm-4 small rating-bar-title">
			{{ loop.index }} star
		</div>
		<div class="row">
			<div class="col-md-7">
				<div class="progress rating-progress-bar" title="{{ percent }} % of reviews are {{ loop.index }} star">
					<div class="progress-bar" role="progressbar"
						aria-valuenow="{{ percent }}"
						aria-valuemin="0" aria-valuemax="100"
						style="width: {{ percent }}%; background-color: var(--text-on-green);">
					</div>
				</div>
			</div>
			<div class="col-sm-1 small">
				{{ percent }}%
			</div>
		</div>
	{% endfor %}
</div>
{%- endmacro -%}

{%- macro user_review(reviews)-%}
<!-- User Reviews -->
<div class="user-reviews">
	{% for review in reviews %}
		<div class="mb-3 review">
			{{ ratings_with_title(review.rating, _(review.review_title), "md", "user-review-title") }}

			<div class="review-signature">
				<span class="reviewer">{{ _(review.customer) }}</span>
				<span>{{ review.published_on }}</span>
			</div>
			<div class="product-description mb-4 mt-4">
				<p>
					{{ _(review.comment) }}
				</p>
			</div>
		</div>
	{% endfor %}
</div>
{%- endmacro -%}