Explore the Shopify assistance on the secondary blog section within a separate page

Hey there, I'm looking for someone who is familiar with Shopify and can assist me.

I am currently trying to set up a secondary Blog section on a separate page from my default 'Blog Page', but I'm encountering issues in displaying the actual blog posts on the new page. All I seem to see is the page title, and I am unsure why that is happening. Ideally, I want specific articles based on their tags to be displayed, but for now, I would settle for showing all articles and then refine it later. Below is the code I am using for my blog titled Studio. Any help or guidance would be highly appreciated as I'm unable to identify where I might be going wrong.

<div class="page-width">
  <header class="section-header text-center">
    <h1>{{ page_title }}</h1>
    {% if blog.tags.size > 0 %}
      <select id="BlogTagFilter">
        <option value="/blogs/{{ blog.handle }}">{{ 'blogs.article.all_topics' | t }}</option>
        {% for tag in blog.all_tags %}
          <option value="/blogs/{{ blog.handle }}/tagged/{{ tag | handleize }}" {% if current_tags contains tag %}selected{% endif %}>{{ tag }}</option>
        {% endfor %}
      </select>
    {% endif %}
  </header>
</div>

<div class="{% if section.settings.layout == 'list' %}blog--list-view{% endif %}">
  // More HTML code goes here...

Thanks to those who have helped me thus far.

Could anyone confirm whether the below code should be included in my section template?

{% if blogs[section.settings.sidebar_blog].tags.size > 0 %}
{% for tag in blogs[section.settings.sidebar_blog].all_tags %}
{{ tag }}
{% endfor %}

{% endif %}

{% schema %}

{
"type": "blogs",
"id": "sidebar_blogs",
"label": "Blogs"
} 

{% endschema %}

Upon attempting to save the updated section with the provided code above, I encounter the following errors:

Error: Invalid schema - 'type' is not a valid attribute. Error: Invalid schema - 'id' is not a valid attribute. Error: Invalid schema - 'label' is not a valid attribute.

Even when I use the alternative schema below instead of the previous one, I still face the same error messages:

{
"type": "blog", 
"id": "sidebar_blog",
"label": "Blog"
}

Answer №1

Upon reviewing your code, it appears that the issue lies in attempting to access Shopify blog and article content from outside of the designated blog files. If you wish to retrieve blog and article content within a page template, there is an alternative approach available.

  • To address this, you must specify your blog handle within the code where the blog is defined. Below is a sample code snippet for reference:

    {% if blogs['all'].tags.size > 0 %}

    {% for tag in blogs['all'].all_tags %}

    {{ tag }}
    

    {% endfor %}

    {% endif %}

    By passing your blog handle in this manner, you can obtain specific blog data. In this case, 'all' serves as the placeholder for the blog handle, which can be replaced with your own custom handle.

If you substitute 'blog' with 'blogs['blog-handle']', you will successfully access the corresponding blog data.

For dynamic blog handle implementation in your code, consider creating a section schema area where you can select your desired blog, enabling automatic retrieval of the blog handle.

{
 "type": "blog",
 "id": "sidebar_blog",
 "label": "Blog"
}

Incorporate the provided code snippet into your section schema to populate all available blogs in a dropdown menu. Subsequently, adjust your code to fetch blog tags based on the selected blog handle:

{% if blogs[section.settings.sidebar_blog].tags.size > 0 %}
  {% for tag in blogs[section.settings.sidebar_blog].all_tags %}
     {{ tag }}
  {% endfor %}
{% endif %}

With these modifications, your code becomes dynamic, allowing seamless access to all data associated with the chosen blog from the section schema.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn how to center content and stretch a column using Vuetify frameworks

Looking for a layout with 2 columns of equal height and centered content vertically? Here's how to achieve it using Vuetify! Check out the code snippet below: <div id="app"> <v-app> <v-row align="center"> ...

Following the submission of the ajax form, the page is reloading unexpectedly

I need the voting form on index.php to submit without refreshing the page and display results from an external page within index.php. HTML <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script&g ...

Styling with CSS: How to Adjust Word Wrap in a Container that Resizes Dynam

I'm struggling to ensure that long lines of text break and wrap correctly within a chat feature I am developing. The crucial elements in question are .chat__messages__item and .chat__messages__body (these are all contained within a parent element set ...

The image does not automatically adjust size when the window is resized

I'm having an issue with my HTML and CSS code that is supposed to display two images side by side and resize when the browser window shrinks, but it's not working as expected. Even after removing all classes on the parent divs, the images still ...

Extract CSS from Chrome developer tools and convert it into a JavaScript object

Recently, we have started incorporating styles into our React components using the makeStyles hook from Material-UI. Instead of traditional CSS, we are now using JavaScript objects to define styles. An example of this is shown below: const useStyles = ma ...

What is the best way to ensure my <h5> element fits perfectly inside its parent div vertically?

Currently facing an issue with finding a solution to my problem. The challenge involves having a header tag nested within multiple divs. Below is the structure: <div class="card"> <div class="layout-left"> <div class="card-header"> ...

Website route organization tool

Seeking assistance with implementing a route planning feature on my website. The user should be presented with multiple route options upon entering their origin and destination. Take a look at this reference site for inspiration: Any help would be great ...

How come when I click on the edit button, the selected data's model doesn't appear in the dropdown menu as I would like it to?

this is the function in my controller public function getModel($make_id = null) { $make_id = request()->make_id; $carsmodel = CarModel::where('make_id', $make_id)->orderBy('model', 'ASC')->get(); return re ...

Utilize an npm package to transform a CSS file into inline styles within an HTML document

I have an HTML file with an external CSS file and I would like to inline the styles from the external style sheet into one inline <style> tag at the top of the head. Any assistance would be greatly appreciated. Note: I do not want to use the style a ...

How can I modify cell padding using a media query for a specific screen resolution?

In the desktop view, which is larger than 480px, I need a specific <td> to have a left-padding of 9px. However, once the resolution goes below 480px, this left-padding should increase to 18px. At the moment, my padding definition is specified within ...

Styling with floated divs in CSS

I'm facing a rather unique issue while working on creating a menu for a web page. The main challenge lies in ensuring that the parent element containing floated child divs adjusts its height dynamically, especially when changes are made to the padding ...

Triggering an Ajax request by clicking on a link

In the scenario where you have a specific word on a webpage that you would like to trigger an onclick event and initiate an ajax request, what is the best approach to accomplish this? ...

Styles for Material UI 5 class names

After upgrading from Mui 4 to 5, I am facing a challenge in using class names effectively. While the SX property allows me to apply styles to individual components, I am struggling with applying the same class to multiple components. In version 4, my code ...

Steps for inserting a button within a table

Currently, I have implemented a function that dynamically adds the appropriate number of cells to the bottom of my table when a button is clicked. This is the JavaScript code for adding a row: <a href="javascript:myFunction();" title="addRow" class= ...

Issues with Mouse Hover/Image Replacement

In this particular example, I am attempting to achieve a simple functionality where an image changes when the mouse hovers over it, and reverts back to the original image when the mouse is no longer hovering. However, despite my efforts, there seems to be ...

Is the initial carousel element failing to set height to 100% upon loading?

If you take a look here, upon loading the page you will notice a DIV at the top. It is labeled "content" with "content_container" wrapped around it and finally, "page" around that. Clicking the bottom left or right arrows reveals other DIVs with similar ta ...

HTML tables with stripes and row spans

I found the initial table on this link. After reviewing the original table, I am looking to make modifications as shown in the highlighted image below. However, when attempting to add rowspan and colspan attributes to the td elements, I encountered an iss ...

The constricted styles are causing the whole page to bounce (scroll) up and down

On my SPA frontend, I have a parent div with a height of 580 containing 9 smaller divs (about 190px in height each). The parent div has an overflow set to hidden so that only 3 elements are visible at one time. Every 5 seconds, I change the styles by addin ...

A commonly used method to adjust the width of a table column to accommodate the size of the child element

I have a specific table width of 776 pixels with three columns. The third column has a fixed width of 216 pixels, but the widths of the other two are unknown. I want the second column to adjust its width based on its content, and whatever space is left aft ...

Encountering a predicament when attempting to retrieve an image from an alternative

[index.jsp][5] style.css [problem][6] [folder hierarchy][7] Although everything runs smoothly when the file is located in the css directory, it fails to show any images if placed in the images folder. Kindly provide assistance. ...