b29c5d6e84
- Fixed discount filters (didn’t work after js render change) - Fix Item Card Group template height and style - Add placeholder to missing images in Product Category Cards template - Code cleanup
345 lines
11 KiB
HTML
345 lines
11 KiB
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, 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.web_item_name or item.item_name or item.item_code -%}
|
|
{%- set title = title[:50] + "..." if title|len > 50 else title -%}
|
|
{%- 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 }}" style="height: 360px;">
|
|
{% if image %}
|
|
<div class="row no-gutters">
|
|
<div class="col-md-5 ml-4">
|
|
<img class="card-img" src="{{ image }}" alt="{{ title }}">
|
|
</div>
|
|
<div class="col-md-6">
|
|
{{ item_card_body(title, description, item, is_featured, align) }}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="col-md-12">
|
|
{{ item_card_body(title, description, item, is_featured, align) }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="col-sm-{{ col_size }} item-card">
|
|
<div class="card {{ align_items_class }}" style="height: 360px;">
|
|
{% 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, description, item, is_featured, align) }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{%- endmacro -%}
|
|
|
|
{%- macro item_card_body(title, 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 class="mt-4">
|
|
<a href="/{{ item.route or '#' }}">
|
|
<div class="product-title">
|
|
{{ title or '' }}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% if is_featured %}
|
|
<div class="product-description ellipsis text-muted" style="white-space: normal;">
|
|
{{ description or '' }}
|
|
</div>
|
|
{% else %}
|
|
<div class="product-category">{{ item.item_group or '' }}</div>
|
|
{% 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 -%}
|
|
|
|
{%- macro field_filter_section(filters)-%}
|
|
{% for field_filter in filters %}
|
|
{%- set item_field = field_filter[0] %}
|
|
{%- set values = field_filter[1] %}
|
|
<div class="mb-4 filter-block pb-5">
|
|
<div class="filter-label mb-3">{{ item_field.label }}</div>
|
|
|
|
{% if values | len > 20 %}
|
|
<!-- show inline filter if values more than 20 -->
|
|
<input type="text" class="form-control form-control-sm mb-2 product-filter-filter"/>
|
|
{% endif %}
|
|
|
|
{% if values %}
|
|
<div class="filter-options">
|
|
{% for value in values %}
|
|
<div class="checkbox" data-value="{{ value }}">
|
|
<label for="{{value}}">
|
|
<input type="checkbox"
|
|
class="product-filter field-filter"
|
|
id="{{value}}"
|
|
data-filter-name="{{ item_field.fieldname }}"
|
|
data-filter-value="{{ value }}">
|
|
<span class="label-area">{{ value }}</span>
|
|
</label>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<i class="text-muted">{{ _('No values') }}</i>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
{%- endmacro -%}
|
|
|
|
{%- macro attribute_filter_section(filters)-%}
|
|
{% for attribute in filters %}
|
|
<div class="mb-4 filter-block pb-5">
|
|
<div class="filter-label mb-3">{{ attribute.name}}</div>
|
|
{% if values | len > 20 %}
|
|
<!-- show inline filter if values more than 20 -->
|
|
<input type="text" class="form-control form-control-sm mb-2 product-filter-filter"/>
|
|
{% endif %}
|
|
|
|
{% if attribute.item_attribute_values %}
|
|
<div class="filter-options">
|
|
{% for attr_value in attribute.item_attribute_values %}
|
|
<div class="checkbox">
|
|
<label data-value="{{ attr_value }}">
|
|
<input type="checkbox"
|
|
class="product-filter attribute-filter"
|
|
id="{{attr_value.name}}"
|
|
data-attribute-name="{{ attribute.name }}"
|
|
data-attribute-value="{{ attr_value.attribute_value }}"
|
|
{% if attr_value.checked %} checked {% endif %}>
|
|
<span class="label-area">{{ attr_value.attribute_value }}</span>
|
|
</label>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<i class="text-muted">{{ _('No values') }}</i>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
{%- endmacro -%}
|