-
Notifications
You must be signed in to change notification settings - Fork 0
/
custom-betterstorefront.hbs
89 lines (74 loc) · 3.93 KB
/
custom-betterstorefront.hbs
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
{{!< default}} <div class="gh-outer">
<style> body { background-image: linear-gradient(0deg,#efefef 65%,#fff) };</style>
<main class="site-main gh-inner">
{{#post}}
<article data_slug="{{slug}}" class="{{post_class}} u-shadow" {{#if primary_tag.accent_color}}
style="--tag-color: {{primary_tag.accent_color}};" {{/if}}>
<header class="gh-article-header gh-canvas">
<h1 class="gh-article-title">{{title}}</h1>
</header>
<div class="gh-outer">
<main class="site-main gh-inner">
{{#if feature_image}}
{{#if featured}}
<img class="post-image u-object-fit" src="{{img_url feature_image}}" alt="{{title}}" loading="lazy">
{{else}}
<figure class="post-media">
<div class="u-placeholder same-height rectangle">
<img class="post-image u-object-fit" srcset="{{img_url feature_image size=" s"}} 400w,
{{img_url feature_image size="m" }} 750w, {{img_url feature_image size="l" }} 960w,
{{img_url feature_image size="xl" }} 1140w, {{img_url feature_image size="xxl" }} 1920w"
sizes="600px" src="{{img_url feature_image size=" l"}}" alt="{{title}}" loading="lazy">
</div>
</figure>
{{/if}}
{{/if}}
<div class="gh-content gh-canvas">
{{content}}
</div>
</article>
{{/post}}
<div class="post-feed gh-feed">
{{#get "posts" filter='primary_tag:products+id:-{{post.id}}' as |one_product| }}
{{#foreach one_product}}
<article data_slug="{{slug}}" class="{{post_class}} u-shadow" {{#if primary_tag.accent_color}}
style="--tag-color: {{primary_tag.accent_color}};" {{/if}}>
<div class="pricetag" id="{{slug}}"
style="position: absolute; transform: translate(1rem, 0); z-index: 25; ">$</div>
{{#if feature_image}}
{{#if featured}}
<img class="post-image u-object-fit" src="{{img_url feature_image}}" alt="{{title}}" loading="lazy">
{{else}}
<figure class="post-media">
<div class="u-placeholder same-height rectangle">
<img class="post-image u-object-fit" srcset="{{img_url feature_image size=" s"}} 400w, {{img_url
feature_image size="m" }} 750w, {{img_url feature_image size="l" }} 960w, {{img_url
feature_image size="xl" }} 1140w, {{img_url feature_image size="xxl" }} 1920w" sizes="600px"
src="{{img_url feature_image size=" l"}}" alt="{{title}}" loading="lazy">
</div>
</figure>
{{/if}}
{{/if}}
<div class="post-wrapper">
<header class="post-header">
<span class="post-tag"> {{#foreach tags from=2 }}{{name}}<br>{{/foreach}}</span>
<h2 class="post-title">
{{title}}
</h2>
</header>
{{#if excerpt}}
<div class="post-excerpt">
{{excerpt words="20"}}
</div>
{{/if}}
</div>
<footer class="post-footer">
<span class="post-more"><a class="post-link" href="/{{slug}}">Details</a></span>
<span style="z-index: 10" data_slug="{{slug}}" class="post-more addtocart">Add to cart</span>
</footer>
</article>
{{/foreach}}
{{/get}}
</div>
</main>
</div>