Shopify Dawn - Blog Comments / Junaid Ahmed
384 lines
{{ 'section-blog-post.css' | asset_url | stylesheet_tag }}
{{ 'section-blog-post.css' | asset_url | stylesheet_tag }}
<article class="article-template">
<article class="article-template">
{%- for block in section.blocks -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- case block.type -%}
{%- when '@app' -%}
{%- when '@app' -%}
<div class="page-width page-width--narrow">
<div class="page-width page-width--narrow">
{% render block %}
{% render block %}
</div>
</div>
{%- when 'featured_image' -%}
{%- when 'featured_image' -%}
{%- if article.image -%}
{%- if article.image -%}
<div
<div
class="article-template__hero-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
class="article-template__hero-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
{{ block.shopify_attributes }}
{{ block.shopify_attributes }}
>
>
<div
<div
class="article-template__hero-{{ block.settings.image_height }} media"
class="article-template__hero-{{ block.settings.image_height }} media"
{% if block.settings.image_height == 'adapt' and article.image %}
{% if block.settings.image_height == 'adapt' and article.image %}
style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"
style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"
{% endif %}
{% endif %}
>
>
<img
<img
srcset="
srcset="
{% if article.image.width >= 350 %}{{ article.image | image_url: width: 350 }} 350w,{% endif %}
{% if article.image.width >= 350 %}{{ article.image | image_url: width: 350 }} 350w,{% endif %}
{% if article.image.width >= 750 %}{{ article.image | image_url: width: 750 }} 750w,{% endif %}
{% if article.image.width >= 750 %}{{ article.image | image_url: width: 750 }} 750w,{% endif %}
{% if article.image.width >= 1100 %}{{ article.image | image_url: width: 1100 }} 1100w,{% endif %}
{% if article.image.width >= 1100 %}{{ article.image | image_url: width: 1100 }} 1100w,{% endif %}
{% if article.image.width >= 1500 %}{{ article.image | image_url: width: 1500 }} 1500w,{% endif %}
{% if article.image.width >= 1500 %}{{ article.image | image_url: width: 1500 }} 1500w,{% endif %}
{% if article.image.width >= 2200 %}{{ article.image | image_url: width: 2200 }} 2200w,{% endif %}
{% if article.image.width >= 2200 %}{{ article.image | image_url: width: 2200 }} 2200w,{% endif %}
{% if article.image.width >= 3000 %}{{ article.image | image_url: width: 3000 }} 3000w,{% endif %}
{% if article.image.width >= 3000 %}{{ article.image | image_url: width: 3000 }} 3000w,{% endif %}
{{ article.image | image_url }} {{ article.image.width }}w
{{ article.image | image_url }} {{ article.image.width }}w
"
"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw"
src="{{ article.image | image_url: width: 1100 }}"
src="{{ article.image | image_url: width: 1100 }}"
loading="eager"
loading="eager"
fetchpriority="high"
fetchpriority="high"
width="{{ article.image.width }}"
width="{{ article.image.width }}"
height="{{ article.image.height }}"
height="{{ article.image.height }}"
alt="{{ article.image.alt | escape }}"
alt="{{ article.image.alt | escape }}"
>
>
</div>
</div>
</div>
</div>
{%- endif -%}
{%- endif -%}
{%- when 'title' -%}
{%- when 'title' -%}
<header
<header
class="page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
class="page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
{{ block.shopify_attributes }}
{{ block.shopify_attributes }}
>
>
<h1
<h1
class="article-template__title"
class="article-template__title"
>
>
{{ article.title | escape }}
{{ article.title | escape }}
</h1>
</h1>
{%- if block.settings.blog_show_date -%}
{%- if block.settings.blog_show_date -%}
<span class="circle-divider caption-with-letter-spacing">
<span class="circle-divider caption-with-letter-spacing">
{{- article.published_at | time_tag: format: 'date' -}}
{{- article.published_at | time_tag: format: 'date' -}}
</span>
</span>
{%- endif -%}
{%- endif -%}
{%- if block.settings.blog_show_author -%}
{%- if block.settings.blog_show_author -%}
<span class="caption-with-letter-spacing">
<span class="caption-with-letter-spacing">
<span>{{ article.author }}</span>
<span>{{ article.author }}</span>
</span>
</span>
{%- endif -%}
{%- endif -%}
</header>
</header>
{%- when 'content' -%}
{%- when 'content' -%}
<div
<div
class="article-template__content page-width page-width--narrow rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
class="article-template__content page-width page-width--narrow rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{{ block.shopify_attributes }}
>
>
{{ article.content }}
{{ article.content }}
</div>
</div>
{%- when 'share' -%}
{%- when 'share' -%}
<div
<div
class="article-template__social-sharing page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
class="article-template__social-sharing page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{{ block.shopify_attributes }}
>
>
{% assign share_url = request.origin | append: article.url %}
{% assign share_url = request.origin | append: article.url %}
{% render 'share-button', block: block, share_link: share_url %}
{% render 'share-button', block: block, share_link: share_url %}
</div>
</div>
{%- endcase -%}
{%- endcase -%}
{%- endfor -%}
{%- endfor -%}
<div class="article-template__back element-margin-top center{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<div class="article-template__back element-margin-top center{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<a href="{{ blog.url }}" class="article-template__link link animate-arrow">
<a href="{{ blog.url }}" class="article-template__link link animate-arrow">
<span class="icon-wrap">
<span class="icon-wrap">
<span class="svg-wrapper">
<span class="svg-wrapper">
{{- 'icon-arrow.svg' | inline_asset_content -}}
{{- 'icon-arrow.svg' | inline_asset_content -}}
</span>
</span>
</span>
</span>
{{ 'blogs.article.back_to_blog' | t: title: blog.title | escape }}
{{ 'blogs.article.back_to_blog' | t: title: blog.title | escape }}
</a>
</a>
</div>
</div>
{%- if blog.comments_enabled? -%}
{%- if blog.comments_enabled? -%}
<div class="article-template__comment-wrapper background-secondary">
<div class="article-template__comment-wrapper background-secondary">
<div
<div
id="comments"
id="comments"
class="page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
class="page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
>
>
{%- if article.comments_count > 0 -%}
{%- if article.comments_count > 0 -%}
{%- assign anchorId = '#Comments-' | append: article.id -%}
{%- assign anchorId = '#Comments-' | append: article.id -%}
<h2 id="Comments-{{ article.id }}" tabindex="-1">
<h2 id="Comments-{{ article.id }}" tabindex="-1">
{{ 'blogs.article.comments' | t: count: article.comments_count }}
{{ 'blogs.article.comments' | t: count: article.comments_count }}
</h2>
</h2>
{% paginate article.comments by 5 %}
{% paginate article.comments by 5 %}
<div class="article-template__comments">
<div class="article-template__comments">
{%- if comment.status == 'pending' and comment.content -%}
{%- if comment.status == 'pending' and comment.content -%}
<article id="{{ comment.id }}" class="article-template__comments-comment">
<article id="{{ comment.id }}" class="article-template__comments-comment">
{{ comment.content }}
{{ comment.content }}
<footer class="right">
<footer class="right">
<span class="circle-divider caption-with-letter-spacing">{{ comment.author }}</span>
<span class="circle-divider caption-with-letter-spacing">{{ comment.author }}</span>
</footer>
</footer>
</article>
</article>
{%- endif -%}
{%- endif -%}
{%- for comment in article.comments -%}
{%- for comment in article.comments -%}
<article id="{{ comment.id }}" class="article-template__comments-comment">
<article id="{{ comment.id }}" class="article-template__comments-comment">
{{ comment.content }}
{{ comment.content }}
<footer class="right">
<footer class="right">
<span class="circle-divider caption-with-letter-spacing">{{ comment.author }}</span
<span class="circle-divider caption-with-letter-spacing">{{ comment.author }}</span
><span class="caption-with-letter-spacing">
><span class="caption-with-letter-spacing">
{{- comment.created_at | time_tag: format: 'date' -}}
{{- comment.created_at | time_tag: format: 'date' -}}
</span>
</span>
</footer>
</footer>
</article>
</article>
{%- endfor -%}
{%- endfor -%}
{% render 'pagination', paginate: paginate, anchor: anchorId %}
{% render 'pagination', paginate: paginate, anchor: anchorId %}
</div>
</div>
{% endpaginate %}
{% endpaginate %}
{%- endif -%}
{%- endif -%}
{% form 'new_comment', article %}
{% form 'new_comment', article %}
{% liquid
assign author_name = form.author
assign author_email = form.email
if author_name == null and customer
assign author_name = customer.name
endif
if author_email == null and customer
assign author_email = customer.email
endif
%}
{%- liquid
{%- liquid
assign post_message = 'blogs.article.success'
assign post_message = 'blogs.article.success'
if blog.moderated? and comment.status == 'unapproved'
if blog.moderated? and comment.status == 'unapproved'
assign post_message = 'blogs.article.success_moderated'
assign post_message = 'blogs.article.success_moderated'
endif
endif
-%}
-%}
<h2>{{ 'blogs.article.comment_form_title' | t }}</h2>
<h2>{{ 'blogs.article.comment_form_title' | t }}</h2>
{%- if form.errors -%}
{%- if form.errors -%}
<div class="form__message" role="alert">
<div class="form__message" role="alert">
<h3 class="form-status caption-large text-body" tabindex="-1" autofocus>
<h3 class="form-status caption-large text-body" tabindex="-1" autofocus>
<span class="svg-wrapper">
<span class="svg-wrapper">
{{- 'icon-error.svg' | inline_asset_content -}}
{{- 'icon-error.svg' | inline_asset_content -}}
</span>
</span>
{{ 'templates.contact.form.error_heading' | t }}
{{ 'templates.contact.form.error_heading' | t }}
</h3>
</h3>
</div>
</div>
<ul class="form-status-list caption-large">
<ul class="form-status-list caption-large">
{%- for field in form.errors -%}
{%- for field in form.errors -%}
<li>
<li>
<a href="#CommentForm-{{ field }}" class="link">
<a href="#CommentForm-{{ field }}" class="link">
{%- if form.errors.translated_fields[field] contains 'author' -%}
{%- if form.errors.translated_fields[field] contains 'author' -%}
{{ 'blogs.article.name' | t }}
{{ 'blogs.article.name' | t }}
{%- elsif form.errors.translated_fields[field] contains 'body' -%}
{%- elsif form.errors.translated_fields[field] contains 'body' -%}
{{ 'blogs.article.message' | t }}
{{ 'blogs.article.message' | t }}
{%- else -%}
{%- else -%}
{{ form.errors.translated_fields[field] }}
{{ form.errors.translated_fields[field] }}
{%- endif -%}
{%- endif -%}
{{ form.errors.messages[field] }}
{{ form.errors.messages[field] }}
</a>
</a>
</li>
</li>
{%- endfor -%}
{%- endfor -%}
</ul>
</ul>
{%- elsif form.posted_successfully? -%}
{%- elsif form.posted_successfully? -%}
<div class="form-status-list form__message" role="status">
<div class="form-status-list form__message" role="status">
<h3 class="form-status" tabindex="-1" autofocus>
<h3 class="form-status" tabindex="-1" autofocus>
<span class="svg-wrapper">
<span class="svg-wrapper">
{{- 'icon-success.svg' | inline_asset_content -}}
{{- 'icon-success.svg' | inline_asset_content -}}
</span>
</span>
{{ post_message | t }}
{{ post_message | t }}
</h3>
</h3>
</div>
</div>
{%- endif -%}
{%- endif -%}
<div
<div
{% if blog.moderated? == false %}
{% if blog.moderated? == false %}
class="article-template__comments-fields"
class="article-template__comments-fields"
{% endif %}
{% endif %}
>
>
<div class="article-template__comment-fields">
<div class="article-template__comment-fields">
<div class="field field--with-error">
<div class="field field--with-error">
<input
<input
type="text"
type="text"
name="comment[author]"
name="comment[author]"
id="CommentForm-author"
id="CommentForm-author"
class="field__input"
class="field__input"
autocomplete="name"
autocomplete="name"
value="{{ form.author }}"
value="{{ author_name }}"
aria-required="true"
aria-required="true"
required
required
{% if form.errors contains 'author' %}
{% if form.errors contains 'author' %}
aria-invalid="true"
aria-invalid="true"
aria-describedby="CommentForm-author-error"
aria-describedby="CommentForm-author-error"
{% endif %}
{% endif %}
placeholder="{{ 'blogs.article.name' | t }}"
placeholder="{{ 'blogs.article.name' | t }}"
>
>
<label class="field__label" for="CommentForm-author">
<label class="field__label" for="CommentForm-author">
{{- 'blogs.article.name' | t }}
{{- 'blogs.article.name' | t }}
<span aria-hidden="true">*</span></label
<span aria-hidden="true">*</span></label
>
>
{%- if form.errors contains 'author' -%}
{%- if form.errors contains 'author' -%}
<small id="CommentForm-author-error">
<small id="CommentForm-author-error">
<span class="form__message">
<span class="form__message">
<span class="svg-wrapper">
<span class="svg-wrapper">
{{- 'icon-error.svg' | inline_asset_content -}}
{{- 'icon-error.svg' | inline_asset_content -}}
</span>
</span>
{{- 'blogs.article.name' | t }}
{{- 'blogs.article.name' | t }}
{{ form.errors.messages.author }}.</span
{{ form.errors.messages.author }}.</span
>
>
</small>
</small>
{%- endif -%}
{%- endif -%}
</div>
</div>
<div class="field field--with-error">
<div class="field field--with-error">
<input
<input
type="email"
type="email"
name="comment[email]"
name="comment[email]"
id="CommentForm-email"
id="CommentForm-email"
autocomplete="email"
autocomplete="email"
class="field__input"
class="field__input"
value="{{ form.email }}"
value="{{ author_email }}"
autocorrect="off"
autocorrect="off"
autocapitalize="off"
autocapitalize="off"
aria-required="true"
aria-required="true"
required
required
{% if form.errors contains 'email' %}
{% if form.errors contains 'email' %}
aria-invalid="true"
aria-invalid="true"
aria-describedby="CommentForm-email-error"
aria-describedby="CommentForm-email-error"
{% endif %}
{% endif %}
placeholder="{{ 'blogs.article.email' | t }}"
placeholder="{{ 'blogs.article.email' | t }}"
>
>
<label class="field__label" for="CommentForm-email">
<label class="field__label" for="CommentForm-email">
{{- 'blogs.article.email' | t }}
{{- 'blogs.article.email' | t }}
<span aria-hidden="true">*</span></label
<span aria-hidden="true">*</span></label
>
>
{%- if form.errors contains 'email' -%}
{%- if form.errors contains 'email' -%}
<small id="CommentForm-email-error">
<small id="CommentForm-email-error">
<span class="form__message">
<span class="form__message">
<span class="svg-wrapper">
<span class="svg-wrapper">
{{- 'icon-error.svg' | inline_asset_content -}}
{{- 'icon-error.svg' | inline_asset_content -}}
</span>
</span>
{{- 'blogs.article.email' | t }}
{{- 'blogs.article.email' | t }}
{{ form.errors.messages.email }}.</span
{{ form.errors.messages.email }}.</span
>
>
</small>
</small>
{%- endif -%}
{%- endif -%}
</div>
</div>
</div>
</div>
<div class="field field--with-error">
<div class="field field--with-error">
<textarea
<textarea
rows="5"
rows="5"
name="comment[body]"
name="comment[body]"
id="CommentForm-body"
id="CommentForm-body"
class="text-area field__input"
class="text-area field__input"
aria-required="true"
aria-required="true"
required
required
{% if form.errors contains 'body' %}
{% if form.errors contains 'body' %}
aria-invalid="true"
aria-invalid="true"
aria-describedby="CommentForm-body-error"
aria-describedby="CommentForm-body-error"
{% endif %}
{% endif %}
placeholder="{{ 'blogs.article.message' | t }}"
placeholder="{{ 'blogs.article.message' | t }}"
>{{ form.body }}</textarea>
>{{ form.body }}</textarea>
<label class="form__label field__label" for="CommentForm-body">
<label class="form__label field__label" for="CommentForm-body">
{{- 'blogs.article.message' | t }}
{{- 'blogs.article.message' | t }}
<span aria-hidden="true">*</span></label
<span aria-hidden="true">*</span></label
>
>
</div>
</div>
{%- if form.errors contains 'body' -%}
{%- if form.errors contains 'body' -%}
<small id="CommentForm-body-error">
<small id="CommentForm-body-error">
<span class="form__message">
<span class="form__message">
<span class="svg-wrapper">
<span class="svg-wrapper">
{{- 'icon-error.svg' | inline_asset_content -}}
{{- 'icon-error.svg' | inline_asset_content -}}
</span>
</span>
{{- 'blogs.article.message' | t }}
{{- 'blogs.article.message' | t }}
{{ form.errors.messages.body }}.</span
{{ form.errors.messages.body }}.</span
>
>
</small>
</small>
{%- endif -%}
{%- endif -%}
</div>
</div>
{%- if blog.moderated? -%}
{%- if blog.moderated? -%}
<p class="article-template__comment-warning caption">{{ 'blogs.article.moderated' | t }}</p>
<p class="article-template__comment-warning caption">{{ 'blogs.article.moderated' | t }}</p>
{%- endif -%}
{%- endif -%}
<input type="submit" class="button" value="{{ 'blogs.article.post' | t }}">
<input type="submit" class="button" value="{{ 'blogs.article.post' | t }}">
{% endform %}
{% endform %}
</div>
</div>
</div>
</div>
{%- endif -%}
{%- endif -%}
</article>
</article>
<script type="application/ld+json">
<script type="application/ld+json">
{{ article | structured_data }}
{{ article | structured_data }}
</script>
</script>
{% schema %}
{% schema %}
{
{
"name": "t:sections.main-article.name",
"name": "t:sections.main-article.name",
"tag": "section",
"tag": "section",
"class": "section",
"class": "section",
"blocks": [
"blocks": [
{
{
"type": "@app"
"type": "@app"
},
},
{
{
"type": "featured_image",
"type": "featured_image",
"name": "t:sections.main-article.blocks.featured_image.name",
"name": "t:sections.main-article.blocks.featured_image.name",
"limit": 1,
"limit": 1,
"settings": [
"settings": [
{
{
"type": "select",
"type": "select",
"id": "image_height",
"id": "image_height",
"options": [
"options": [
{
{
"value": "adapt",
"value": "adapt",
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__1.label"
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__1.label"
},
},
{
{
"value": "small",
"value": "small",
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__2.label"
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__2.label"
},
},
{
{
"value": "medium",
"value": "medium",
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__3.label"
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__3.label"
},
},
{
{
"value": "large",
"value": "large",
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__4.label"
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__4.label"
}
}
],
],
"default": "adapt",
"default": "adapt",
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.label",
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.label",
"info": "t:sections.main-article.blocks.featured_image.settings.image_height.info"
"info": "t:sections.main-article.blocks.featured_image.settings.image_height.info"
}
}
]
]
},
},
{
{
"type": "title",
"type": "title",
"name": "t:sections.main-article.blocks.title.name",
"name": "t:sections.main-article.blocks.title.name",
"limit": 1,
"limit": 1,
"settings": [
"settings": [
{
{
"type": "checkbox",
"type": "checkbox",
"id": "blog_show_date",
"id": "blog_show_date",
"default": true,
"default": true,
"label": "t:sections.main-article.blocks.title.settings.blog_show_date.label"
"label": "t:sections.main-article.blocks.title.settings.blog_show_date.label"
},
},
{
{
"type": "checkbox",
"type": "checkbox",
"id": "blog_show_author",
"id": "blog_show_author",
"default": false,
"default": false,
"label": "t:sections.main-article.blocks.title.settings.blog_show_author.label"
"label": "t:sections.main-article.blocks.title.settings.blog_show_author.label"
}
}
]
]
},
},
{
{
"type": "content",
"type": "content",
"name": "t:sections.main-article.blocks.content.name",
"name": "t:sections.main-article.blocks.content.name",
"limit": 1
"limit": 1
},
},
{
{
"type": "share",
"type": "share",
"name": "t:sections.main-article.blocks.share.name",
"name": "t:sections.main-article.blocks.share.name",
"limit": 2,
"limit": 2,
"settings": [
"settings": [
{
{
"type": "text",
"type": "text",
"id": "share_label",
"id": "share_label",
"label": "t:sections.main-article.blocks.share.settings.text.label",
"label": "t:sections.main-article.blocks.share.settings.text.label",
"default": "t:sections.main-article.blocks.share.settings.text.default"
"default": "t:sections.main-article.blocks.share.settings.text.default"
},
},
{
{
"type": "paragraph",
"type": "paragraph",
"content": "t:sections.main-article.blocks.share.settings.featured_image_info.content"
"content": "t:sections.main-article.blocks.share.settings.featured_image_info.content"
},
},
{
{
"type": "paragraph",
"type": "paragraph",
"content": "t:sections.main-article.blocks.share.settings.title_info.content"
"content": "t:sections.main-article.blocks.share.settings.title_info.content"
}
}
]
]
}
}
]
]
}
}
{% endschema %}
{% endschema %}