Blog Post Category And More

Blog Post Category And More

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Dawn theme and other Shopify Free 2.0 themes

In my opinion, Shopify pays a little attention to blog posting and only provide few options.

Things that I would like to see in the future with Shopify's blog articles are the following:

- Articles added as metafield item

- Able to have collection of articles

- Article template layout than can be edited like the index layout

Check DEMO store here 💻. Password: made4uo

I found it as a tedious work to use metafield for category, since you have to go in the article and assign each article to a metafield. It is easier to mark the articles and just tag at once. 

What you are buying:

  • Create a blog category or menu on the side of your blog
  • Hide and show articles

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

To start:

To add tags to your article, please follow the instructions below.

1. Go to your Admin page, click Online Store > Blog posts.

2. Mark the checkbox to the corresponding article. 

3. Click Actions > Add Tags, then type the tag you want to apply to the selected articles. Lastly, click "Apply changes."

 

To add a category in your articles, please follow the instructions below.

1. From your Admin Page, go to Online store > Themes > Actions > Edit code.

2. We will need to create a new section. Go to Section folder, click "Add a new section", name it "blog-menu", then paste the code below. Do not forget to click SAVE.

{{ 'component-article-card.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'section-main-blog.css' | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

<menu-blog>
<div class="main-blog page-width section-{{ section.id }}-padding">

<h1 class="title--primary">{{ blog.title | escape }}</h1>
<div class="menuBlog">
{%- for block in section.blocks -%}
{% case block.type %}
{% when "category" %}
<h2>{{ block.settings.category_title | escape }}</h2>
{% when "option" %}
<label>
<input type="checkbox" value="{{ block.settings.option_value }}" class="blogCheckbox">
<svg width="1.6rem" height="1.6rem" viewBox="0 0 16 16" aria-hidden="true" focusable="false" >
<rect width="16" height="16" stroke="currentColor" fill="none" stroke-width="1"></rect>
<path class="input-check"
d="M1.5 3.5L2.83333 4.75L4.16667 6L9.5 1"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
{{ block.settings.option_title | escape }}
</label>
{% endcase %}
{% endfor %}
</div>
<div class="blog-articles {% if section.settings.layout == 'collage' %}blog-articles--collage{% endif %}">

{%- for article in blog.articles -%}
{% assign taggedArticle = "" %}
{% for tag in article.tags %}
{% assign rawTag = tag | append: ',' %}
{% assign taggedArticle = taggedArticle | append: rawTag %}
{% endfor %}
<div class="blog-articles__article article" data-blog="{{ taggedArticle }}">
{%- render 'article-card',
article: article,
media_height: section.settings.image_height,
media_aspect_ratio: article.image.aspect_ratio,
show_image: section.settings.show_image,
show_date: section.settings.show_date,
show_author: section.settings.show_author,
show_excerpt: true
-%}
</div>

{%- endfor -%}
</div>
</div>
</menu-blog>
<style>
.main-blog {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 100px 1fr;
gap: 1rem;
}
.main-blog .title--primary {
grid-area: 1/span 2;
}

.menuBlog {
grid-area: 2/1;
display: flex;
flex-direction: column;
}

@media only screen and (max-width: 750px) {
.main-blog {
display: flex;
flex-direction: column;
}

.title--primary {
margin: 0;
}
}

.menuBlog h2 {
margin: 1.5rem 0 1rem 0;
}

.menuBlog li {
list-style: none;
margin-left: 1rem;
}

.menuBlog label {
position: relative;
display: flex;
align-content: center;
align-items: center;
gap: 10px;
}

.menuBlog .blogCheckbox {
cursor: pointer;
opacity: 0.7;
position: absolute;
opacity: 1;
width: 1.6rem;
height: 1.6rem;
top: 0.7rem;
left: -0.4rem;
z-index: -1;
appearance: none;
-webkit-appearance: none;
}

.menuBlog input:hover {
opacity: 1;
}

.blogCheckbox:checked ~ svg > .input-check {
opacity: 1 !important;
}

.menuBlog svg {
position: relative;
}

.menuBlog .input-check {
position: absolute;
opacity: 0;
transform: translate(15%, 30%);
width: 100%;
height: 100%;
}


.blog-articles {
grid-area: 2/2;
}

.hide-blog {
display: none !important;
}
</style>
<script>
class MenuBlog extends HTMLElement {
constructor() {
super();

this.menus = this.querySelectorAll('span');
this.menus.forEach(menu=> menu.addEventListener('click', this.showBlogs.bind(this)));
this.blogArticles = this.querySelectorAll('.blog-articles__article');

this.addEventListener('change', this.showBlogs.bind(this))
}

showBlogs(e) {
let check = [];
this.querySelectorAll('input').forEach((item) => {
if(item.checked) {
check.push(item.value);
}
});

if(check.length > 0) {
this.blogArticles.forEach(blog => {
blog.classList.add("hide-blog")
})
} else {
this.blogArticles.forEach(blog => {
blog.classList.remove("hide-blog")
})
}

this.blogArticles.forEach(blog => {
const blogs = blog.dataset.blog.split(',');

blogs.map(tag => {
if(check.includes(tag)) {
this.querySelectorAll(`[data-blog="${blog.dataset.blog}"]`).forEach(blog => blog.classList.remove("hide-blog"));
}
})
})

}
}

customElements.define('menu-blog', MenuBlog);
</script>

{% schema %}
{
"name": "Blog with Category",
"tag": "section",
"class": "section",
"settings": [
{
"type": "header",
"content": "t:sections.main-blog.settings.header.content"
},
{
"type": "select",
"id": "layout",
"options": [
{
"value": "grid",
"label": "t:sections.main-blog.settings.layout.options__1.label"
},
{
"value": "collage",
"label": "t:sections.main-blog.settings.layout.options__2.label"
}
],
"default": "collage",
"label": "t:sections.main-blog.settings.layout.label",
"info": "t:sections.main-blog.settings.layout.info"
},
{
"type": "checkbox",
"id": "show_image",
"default": true,
"label": "t:sections.main-blog.settings.show_image.label"
},
{
"type": "select",
"id": "image_height",
"options": [
{
"value": "adapt",
"label": "t:sections.main-blog.settings.image_height.options__1.label"
},
{
"value": "small",
"label": "t:sections.main-blog.settings.image_height.options__2.label"
},
{
"value": "medium",
"label": "t:sections.main-blog.settings.image_height.options__3.label"
},
{
"value": "large",
"label": "t:sections.main-blog.settings.image_height.options__4.label"
}
],
"default": "medium",
"label": "t:sections.main-blog.settings.image_height.label",
"info": "t:sections.main-blog.settings.image_height.info"
},
{
"type": "checkbox",
"id": "show_date",
"default": true,
"label": "t:sections.main-blog.settings.show_date.label"
},
{
"type": "checkbox",
"id": "show_author",
"default": false,
"label": "t:sections.main-blog.settings.show_author.label"
},
{
"type": "paragraph",
"content": "t:sections.main-blog.settings.paragraph.content"
},

{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "category",
"name": "Category title",
"settings": [
{
"type": "text",
"label": "Category Title",
"id": "category_title",
"default": "Category"
}
]
},
{
"type": "option",
"name": "Option",
"settings": [
{
"type": "text",
"label": "Option Title",
"id": "option_title",
"default": "Dawn theme"
},
{
"type": "text",
"label": "Option Value",
"id": "option_value",
"default": "dawn",
"info": "Provide the tag here. NOTE: This is case sensitive."
}
]
}
],
"presets": [
{
"name": "Blog with Category",
"blocks": [
{
"type": "category"
},
{
"type": "option"
},
{
"type": "option"
}
]
}
]
}
{% endschema %}

3. We need to create a new blog template. Go to the template folder, add a new template, and follow the settings below. Click "Create template."

menu blog settings

4. In the newly created template, paste the code below. Make sure click SAVE.

{
"sections": {
"main": {
"type": "blog-menu",
"settings": {
"layout": "grid",
"show_image": true,
"image_height": "adapt",
"show_date": true,
"show_author": false,
"padding_top": 36,
"padding_bottom": 36
}
}
},
"order": [
"main"
]
}

 

5. Make sure you make the edited theme live before we can proceed. You can assign the template by going to Online Store > Blog posts > Click on the article. 

6. You should see this section (see image below) in your right hand bottom corner. Change it to "menu."

menu blog category

7. You need to customize your theme editor and add the tags that you want to use.

That's it (",)

Copied!
Voltar para o blogue

Deixe um comentário