blob: aec23a29e38b29c33de104391747b4bf5fef483a [file] [log] [blame]
Anand Doshida858cc2015-02-24 17:50:44 +05301{% macro product_image_square(website_image, css_class="") %}
Rushabh Mehta440650d2016-11-14 13:13:53 +05302<div class="product-image product-image-square
3 {% if not website_image -%} missing-image {%- endif %} {{ css_class }}"
4 {% if website_image -%}
5 style="background-image: url('{{ frappe.utils.quoted(website_image) | abs_url }}');"
6 {%- endif %}>
Anand Doshida858cc2015-02-24 17:50:44 +05307</div>
8{% endmacro %}
9
prssanna11eae6d2021-02-01 20:01:37 +053010{% macro product_image(website_image, css_class="product-image", alt="") %}
Shivam Mishra45a56282020-12-30 15:51:50 +053011 <div class="border text-center rounded {{ css_class }}" style="overflow: hidden;">
Shivam Mishraa0954e62020-08-07 14:34:54 +053012 <img itemprop="image" class="website-image h-100 w-100" alt="{{ alt }}" src="{{ frappe.utils.quoted(website_image or 'no-image.jpg') | abs_url }}">
prssannaeb0e5962020-12-24 11:40:33 +053013 </div>
Rushabh Mehta156ce602015-09-11 18:49:59 +053014{% endmacro %}
pratu16x760fe77c2017-02-13 21:52:43 +053015
16{% macro media_image(website_image, name, css_class="") %}
pratu16x70e94b4b2017-02-14 16:32:48 +053017 <div class="product-image sidebar-image-wrapper {{ css_class }}">
18 {% if not website_image -%}
19 <div class="sidebar-standard-image"> <div class="standard-image" style="background-color: rgb(250, 251, 252);">{{name}}</div> </div>
20 {%- endif %}
prssannaeb0e5962020-12-24 11:40:33 +053021 {% if website_image -%}
pratu16x760fe77c2017-02-13 21:52:43 +053022 <a href="{{ frappe.utils.quoted(website_image) }}">
pratu16x70e94b4b2017-02-14 16:32:48 +053023 <img itemprop="image" src="{{ frappe.utils.quoted(website_image) | abs_url }}"
24 class="img-responsive img-thumbnail sidebar-image" style="min-height:100%; min-width:100%;">
pratu16x760fe77c2017-02-13 21:52:43 +053025 </a>
prssannaeb0e5962020-12-24 11:40:33 +053026 {%- endif %}
27 </div>
pratu16x760fe77c2017-02-13 21:52:43 +053028{% endmacro %}
Faris Ansari5f8b3582019-03-19 11:48:32 +053029
30{% macro render_homepage_section(section) %}
31
32{% if section.section_based_on == 'Custom HTML' and section.section_html %}
33 {{ section.section_html }}
34{% elif section.section_based_on == 'Cards' %}
35<section class="container my-5">
36 <h3>{{ section.name }}</h3>
37
38 <div class="row">
39 {% for card in section.section_cards %}
40 <div class="col-md-{{ section.column_value }} mb-4">
41 <div class="card h-100 justify-content-between">
42 {% if card.image %}
Mohamed Almubarakf7ea3402021-01-28 10:02:13 +030043 <div class="website-image-lazy" data-class="card-img-top h-75" data-src="{{ card.image }}" data-alt="{{ card.title }}"></div>
Faris Ansari5f8b3582019-03-19 11:48:32 +053044 {% endif %}
45 <div class="card-body">
46 <h5 class="card-title">{{ card.title }}</h5>
47 <p class="card-subtitle mb-2 text-muted">{{ card.subtitle or '' }}</p>
Faris Ansarib8eaa3d2019-06-01 20:56:37 +053048 <p class="card-text">{{ card.content or '' | truncate(140, True) }}</p>
Faris Ansari5f8b3582019-03-19 11:48:32 +053049 </div>
50 <div class="card-body flex-grow-0">
51 <a href="{{ card.route }}" class="card-link">{{ _('More details') }}</a>
52 </div>
53 </div>
54 </div>
55 {% endfor %}
56 </div>
57</section>
58{% endif %}
59
prssannaeb0e5962020-12-24 11:40:33 +053060{% endmacro %}
61
marination897c08c2021-05-17 20:44:41 +053062{%- macro item_card(item, is_featured=False, is_full_width=False, align="Left") -%}
prssannaeb0e5962020-12-24 11:40:33 +053063{%- set align_items_class = resolve_class({
64 'align-items-end': align == 'Right',
65 'align-items-center': align == 'Center',
66 'align-items-start': align == 'Left',
67}) -%}
68{%- set col_size = 3 if is_full_width else 4 -%}
marination48b3ce82021-05-13 01:22:05 +053069{%- set title = item.web_item_name or item.item_name or item.item_code -%}
70{%- set title = title[:50] + "..." if title|len > 50 else title -%}
marination4f64d1c2021-03-11 21:24:47 +053071{%- set image = item.website_image or item.image -%}
72{%- set description = item.website_description or item.description-%}
73
prssannaeb0e5962020-12-24 11:40:33 +053074{% if is_featured %}
75<div class="col-sm-{{ col_size*2 }} item-card">
76 <div class="card featured-item {{ align_items_class }}">
77 {% if image %}
78 <div class="row no-gutters">
79 <div class="col-md-6">
80 <img class="card-img" src="{{ image }}" alt="{{ title }}">
81 </div>
82 <div class="col-md-6">
marination897c08c2021-05-17 20:44:41 +053083 {{ item_card_body(title, description, item, is_featured, align) }}
prssannaeb0e5962020-12-24 11:40:33 +053084 </div>
85 </div>
86 {% else %}
87 <div class="col-md-12">
marination897c08c2021-05-17 20:44:41 +053088 {{ item_card_body(title, description, item, is_featured, align) }}
prssannaeb0e5962020-12-24 11:40:33 +053089 </div>
90 {% endif %}
91 </div>
92</div>
93{% else %}
94<div class="col-sm-{{ col_size }} item-card">
95 <div class="card {{ align_items_class }}">
96 {% if image %}
marination16b9c8c2021-03-11 10:56:00 +053097 <div class="card-img-container">
marination4f64d1c2021-03-11 21:24:47 +053098 <a href="/{{ item.route or '#' }}" style="text-decoration: none;">
marination16b9c8c2021-03-11 10:56:00 +053099 <img class="card-img" src="{{ image }}" alt="{{ title }}">
100 </a>
101 </div>
prssannab00eb1b2021-01-20 17:52:54 +0530102 {% else %}
marination4f64d1c2021-03-11 21:24:47 +0530103 <a href="/{{ item.route or '#' }}" style="text-decoration: none;">
marination16b9c8c2021-03-11 10:56:00 +0530104 <div class="card-img-top no-image">
105 {{ frappe.utils.get_abbr(title) }}
106 </div>
107 </a>
prssannaeb0e5962020-12-24 11:40:33 +0530108 {% endif %}
marination897c08c2021-05-17 20:44:41 +0530109 {{ item_card_body(title, description, item, is_featured, align) }}
prssannaeb0e5962020-12-24 11:40:33 +0530110 </div>
111</div>
112{% endif %}
113{%- endmacro -%}
114
marination897c08c2021-05-17 20:44:41 +0530115{%- macro item_card_body(title, description, item, is_featured, align) -%}
prssannaeb0e5962020-12-24 11:40:33 +0530116{%- set align_class = resolve_class({
117 'text-right': align == 'Right',
118 'text-center': align == 'Center' and not is_featured,
119 'text-left': align == 'Left' or is_featured,
120}) -%}
marination16b9c8c2021-03-11 10:56:00 +0530121<div class="card-body {{ align_class }}" style="width:100%">
marination16b9c8c2021-03-11 10:56:00 +0530122 <div style="margin-top: 16px; display: flex;">
marination4f64d1c2021-03-11 21:24:47 +0530123 <a href="/{{ item.route or '#' }}">
marination48b3ce82021-05-13 01:22:05 +0530124 <div class="product-title">
125 {{ title or '' }}
126 {% if item.in_stock %}
127 <span class="indicator {{ item.in_stock }} card-indicator"></span>
128 {% endif %}
129 </div>
marination16b9c8c2021-03-11 10:56:00 +0530130 </a>
marination16b9c8c2021-03-11 10:56:00 +0530131 </div>
prssannaeb0e5962020-12-24 11:40:33 +0530132 {% if is_featured %}
marination4f64d1c2021-03-11 21:24:47 +0530133 <div class="product-price">{{ item.formatted_price or '' }}</div>
marination60261852021-04-13 00:39:26 +0530134 <div class="product-description ellipsis">{{ description or '' }}</div>
135 {% else %}
136 <div class="product-category">{{ item.item_group or '' }}</div>
prssannaeb0e5962020-12-24 11:40:33 +0530137 {% endif %}
138</div>
Ankush Menat4551d7d2021-08-19 13:41:10 +0530139{%- endmacro -%}
marination59514402021-03-16 00:05:53 +0530140
141
142{%- macro wishlist_card(item, settings) %}
marination60261852021-04-13 00:39:26 +0530143<div class="col-sm-3 wishlist-card">
144 <div class="card text-center" style="max-height: 390px;">
marination59514402021-03-16 00:05:53 +0530145 {% if item.image %}
146 <div class="card-img-container">
147 <a href="/{{ item.route or '#' }}" style="text-decoration: none;">
148 <img class="card-img" src="{{ item.image }}" alt="{{ title }}">
149 </a>
marination25ffafa2021-03-22 16:17:59 +0530150 <div class="remove-wish" data-item-code="{{ item.item_code }}">
marination59514402021-03-16 00:05:53 +0530151 <span style="padding-bottom: 2px;">
152 <svg class="icon sm remove-wish-icon" style="margin-bottom: 4px; margin-left: 0.5px;">
153 <use class="close" href="#icon-close"></use>
154 </svg>
155 </span>
156 </div>
157
158 </div>
159 {% else %}
160 <a href="/{{ item.route or '#' }}" style="text-decoration: none;">
161 <div class="card-img-top no-image">
162 {{ frappe.utils.get_abbr(title) }}
163 </div>
164 </a>
165 {% endif %}
166
167 {{ wishlist_card_body(item, settings) }}
168
169
170 </div>
171</div>
172{%- endmacro -%}
173
174{%- macro wishlist_card_body(item, settings) %}
marination25ffafa2021-03-22 16:17:59 +0530175<div class="card-body text-center" style="width: 100%;">
marination59514402021-03-16 00:05:53 +0530176 <div style="margin-top: 16px;">
177 <div class="product-title">{{ item.item_name or item.item_code or ''}}</div>
178 </div>
marination60261852021-04-13 00:39:26 +0530179 <div class="product-price">
180 {{ item.formatted_price or '' }}
181
182 {% if item.get("formatted_mrp") %}
183 <small class="ml-1 text-muted">
184 <s>{{ item.formatted_mrp }}</s>
185 </small>
186 <small class="ml-1" style="color: #F47A7A; font-weight: 500;">
187 {{ item.discount }} OFF
188 </small>
189 {% endif %}
190 </div>
marination59514402021-03-16 00:05:53 +0530191
192 {% if (item.available and settings.show_stock_availability) or (not settings.show_stock_availability) %}
marination60261852021-04-13 00:39:26 +0530193 <!-- Show move to cart button if in stock or if showing stock availability is disabled -->
194 <button data-item-code="{{ item.item_code}}" class="btn btn-add-to-cart w-100 wishlist-cart-not-added mt-2">
195 <span class="mr-2">
196 <svg class="icon icon-md">
197 <use href="#icon-assets"></use>
198 </svg>
199 </span>
200 {{ _("Move to Cart") }}
201 </button>
marination59514402021-03-16 00:05:53 +0530202 {% else %}
marination60261852021-04-13 00:39:26 +0530203 <div class="mt-4" style="color: #F47A7A; width: 100%;">
204 {{ _("Not in Stock") }}
205 </div>
marination59514402021-03-16 00:05:53 +0530206 {% endif %}
207</div>
208{%- endmacro -%}
marinationb15ff572021-03-25 11:52:50 +0530209
210{%- macro ratings_with_title(avg_rating, title, size, rating_header_class) -%}
211<div style="display: flex;">
212 <div class="rating">
213 {% for i in range(1,6) %}
214 {% set fill_class = 'star-click' if i <= avg_rating else '' %}
215 <svg class="icon icon-{{ size }} {{ fill_class }}">
216 <use href="#icon-star"></use>
217 </svg>
218 {% endfor %}
219 </div>
220 <p class="ml-4 {{ rating_header_class }}">
221 <span>{{ title }}</span>
222 </p>
223</div>
224{%- endmacro -%}
marinationc8423052021-04-07 23:49:04 +0530225
226{%- macro ratings_summary(reviews, reviews_per_rating, average_rating, average_whole_rating)-%}
227<!-- Ratings Summary -->
228<h2 class="reviews-header">
229 {{ _("Customer Ratings") }}
230</h2>
231
232{% if reviews %}
233 {% set rating_title = frappe.utils.cstr(average_rating) + " " + _("out of 5") %}
234 {{ ratings_with_title(average_whole_rating, rating_title, "lg", "rating-summary-title") }}
235{% endif %}
236
237<!-- Rating Progress Bars -->
238<div class="rating-progress-bar-section">
239 {% for percent in reviews_per_rating %}
240 <div class="mt-4 col-sm-4 small rating-bar-title">
241 {{ loop.index }} star
242 </div>
243 <div class="row">
244 <div class="col-md-7">
245 <div class="progress rating-progress-bar" title="{{ percent }} % of reviews are {{ loop.index }} star">
246 <div class="progress-bar" role="progressbar"
247 aria-valuenow="{{ percent }}"
248 aria-valuemin="0" aria-valuemax="100"
249 style="width: {{ percent }}%; background-color: var(--text-on-green);">
250 </div>
251 </div>
252 </div>
253 <div class="col-sm-1 small">
254 {{ percent }}%
255 </div>
256 </div>
257 {% endfor %}
258</div>
259{%- endmacro -%}
260
261{%- macro user_review(reviews)-%}
262<!-- User Reviews -->
263<div class="user-reviews">
264 {% for review in reviews %}
265 <div class="mb-3 review">
266 {{ ratings_with_title(review.rating, _(review.review_title), "md", "user-review-title") }}
267
268 <div class="review-signature">
269 <span class="reviewer">{{ _(review.customer) }}</span>
270 <span>{{ review.published_on }}</span>
271 </div>
272 <div class="product-description mb-4 mt-4">
273 <p>
274 {{ _(review.comment) }}
275 </p>
276 </div>
277 </div>
278 {% endfor %}
279</div>
280{%- endmacro -%}
marination1d949142021-04-20 21:54:52 +0530281
282{%- macro field_filter_section(filters)-%}
283{% for field_filter in filters %}
284 {%- set item_field = field_filter[0] %}
285 {%- set values = field_filter[1] %}
286 <div class="mb-4 filter-block pb-5">
287 <div class="filter-label mb-3">{{ item_field.label }}</div>
288
289 {% if values | len > 20 %}
290 <!-- show inline filter if values more than 20 -->
291 <input type="text" class="form-control form-control-sm mb-2 product-filter-filter"/>
292 {% endif %}
293
294 {% if values %}
295 <div class="filter-options">
296 {% for value in values %}
297 <div class="checkbox" data-value="{{ value }}">
298 <label for="{{value}}">
299 <input type="checkbox"
300 class="product-filter field-filter"
301 id="{{value}}"
302 data-filter-name="{{ item_field.fieldname }}"
marination71f4b982021-04-21 12:31:15 +0530303 data-filter-value="{{ value }}">
marination1d949142021-04-20 21:54:52 +0530304 <span class="label-area">{{ value }}</span>
305 </label>
306 </div>
307 {% endfor %}
308 </div>
309 {% else %}
310 <i class="text-muted">{{ _('No values') }}</i>
311 {% endif %}
312 </div>
313{% endfor %}
314{%- endmacro -%}
315
316{%- macro attribute_filter_section(filters)-%}
317{% for attribute in filters %}
318 <div class="mb-4 filter-block pb-5">
319 <div class="filter-label mb-3">{{ attribute.name}}</div>
320 {% if values | len > 20 %}
321 <!-- show inline filter if values more than 20 -->
322 <input type="text" class="form-control form-control-sm mb-2 product-filter-filter"/>
323 {% endif %}
324
325 {% if attribute.item_attribute_values %}
326 <div class="filter-options">
327 {% for attr_value in attribute.item_attribute_values %}
328 <div class="checkbox">
marination48b3ce82021-05-13 01:22:05 +0530329 <label data-value="{{ attr_value }}">
marination1d949142021-04-20 21:54:52 +0530330 <input type="checkbox"
331 class="product-filter attribute-filter"
332 id="{{attr_value.name}}"
333 data-attribute-name="{{ attribute.name }}"
334 data-attribute-value="{{ attr_value.attribute_value }}"
335 {% if attr_value.checked %} checked {% endif %}>
336 <span class="label-area">{{ attr_value.attribute_value }}</span>
337 </label>
338 </div>
339 {% endfor %}
340 </div>
341 {% else %}
342 <i class="text-muted">{{ _('No values') }}</i>
343 {% endif %}
344 </div>
345{% endfor %}
346{%- endmacro -%}