-
Notifications
You must be signed in to change notification settings - Fork 600
/
card.html
120 lines (118 loc) · 5.55 KB
/
card.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<article
class="card
{{#if alternate}} card--alternate{{/if}}"
data-test="card-{{id}}"
{{#if settings.data_tag_enabled}}
data-event-type="{{event}}"
data-entity-id="{{id}}"
data-position="{{position}}"
data-name="{{name}}"
data-product-category="
{{#each category}}
{{#if @last}}
{{this}}
{{else}}
{{this}},
{{/if}}
{{/each}}"
data-product-brand="{{brand.name}}"
data-product-price="
{{#if price.with_tax}}
{{price.with_tax.value}}
{{else}}
{{price.without_tax.value}}
{{/if}}"
{{/if}}>
<figure class="card-figure">
{{#if stock_level '===' 0}}
{{> components/products/product-badge
badge-type='sold-out'
badge_view=theme_settings.product_sold_out_badges
badge_label=theme_settings.pdp_sold_out_label
}}
{{else}}
{{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}
{{> components/products/product-badge
badge-type='sale'
badge_view=theme_settings.product_sale_badges
badge_label=theme_settings.pdp_sale_badge_label
}}
{{/or}}
{{/if}}
<a href="{{url}}"
class="card-figure__link"
aria-label="{{name}},{{> components/products/product-aria-label}}"
{{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}
>
<div class="card-img-container">
{{> components/common/responsive-img
image=image
class="card-image"
fallback_size=theme_settings.productgallery_size
lazyload=theme_settings.lazyload_mode
default_image=theme_settings.default_image_product
}}
</div>
</a>
<figcaption class="card-figcaption">
<div class="card-figcaption-body">
{{#unless hide_product_quick_view}}
{{#if theme_settings.show_product_quick_view}}
{{#if settings.data_tag_enabled}}
<button class="button button--small card-figcaption-button quickview" data-event-type="product-click" data-product-id="{{id}}">{{lang 'products.quick_view'}}</button>
{{else}}
<button class="button button--small card-figcaption-button quickview" data-product-id="{{id}}">{{lang 'products.quick_view'}}</button>
{{/if}}
{{/if}}
{{/unless}}
{{#if show_compare}}
<label class="button button--small card-figcaption-button" for="compare-{{id}}">
{{lang 'products.compare'}} <input type="checkbox" name="products[]" value="{{id}}" id="compare-{{id}}" data-compare-id="{{id}}">
</label>
{{/if}}
{{#or customer (if theme_settings.restrict_to_login '!==' true)}}
{{#if show_cart_action}}
{{#if has_options}}
<a href="{{url}}" data-event-type="product-click" class="button button--small card-figcaption-button" data-product-id="{{id}}">{{lang 'products.choose_options'}}</a>
{{/if}}
{{#if pre_order}}
<a href="{{pre_order_add_to_cart_url}}" data-event-type="product-click" class="button button--small card-figcaption-button">{{lang 'products.pre_order'}}</a>
{{/if}}
{{#if add_to_cart_url }}
<a href="{{add_to_cart_url}}" data-event-type="product-click" data-button-type="add-cart" class="button button--small card-figcaption-button">{{lang 'products.add_to_cart'}}</a>
<span class="product-status-message aria-description--hidden">{{lang 'category.add_cart_announcement'}}</span>
{{/if}}
{{#if out_of_stock_message }}
<a href="{{url}}" data-event-type="product-click" class="button button--small card-figcaption-button" data-product-id="{{id}}">{{out_of_stock_message}}</a>
{{/if}}
{{/if}}
{{/or}}
</div>
</figcaption>
</figure>
<div class="card-body">
{{#and rating show_rating}}
<p class="card-text" data-test-info-type="productRating">
<span class="rating--small">
{{> components/products/ratings rating_target=name rating=rating}}
</span>
</p>
{{/and}}
{{#if brand.name}}
<p class="card-text" data-test-info-type="brandName">{{brand.name}}</p>
{{/if}}
<h3 class="card-title">
<a aria-label="{{name}},{{> components/products/product-aria-label}}"
href="{{url}}"
{{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>{{name}}</a>
</h3>
<div class="card-text" data-test-info-type="price">
{{#or customer (if theme_settings.restrict_to_login '!==' true)}}
{{> components/products/price price=price}}
{{else}}
{{> components/common/login-for-pricing}}
{{/or}}
</div>
{{> components/products/bulk-discount-rates}}
</div>
</article>