Add article data from Shopify API to the DOM with blog id and article id

Question

I am trying to harness the Shopify linklist interface to display content on the homepage. Unfortunately you can not add a blog article to a linklist directly -- only through it's url. So I can't use liquid to retrieve the information needed to display content from an article.

The alternative is that a user can specify a regular web address. So let's they want to include an article by entering a url like this: /blogs/news/18059703-article-title

I'd like to parse that url, and use the Shopify jquery api to fill in information needed.

I know I can process the link url with liquid to get the blog ID and the article ID. And then I can inject them as attributes in the output of the linklist.....

{% for link in linklists.homepage.links %}
  {% if link.url contains 'blogs' %}
    {% capture partial_url %}{{ link.url | remove: '/blogs/' }}{% endcapture %}
    {% capture blog_title %}{{ partial_url | split: "/" | first }}{% endcapture %}
    {% capture blog_id %}{{ blogs[blog_title].id }}{% endcapture %}
    {% capture article_handle %}{{ partial_url | split: "/" | last }}{% endcapture %}
    {% capture article_id %}{{ article_handle | split: "-" | first }}{% endcapture %}

     <div class="panel" data-blog-id="{{ blog_id }}" data-article-id="{{ article_id }}">
      <a href="{{ link.url }}">   
       <div class="image">
        <img src="placeholderimage.jpg" />
       </div>
       <div class="text-wrap">
        <div class="text">
         <h2>ARTICLE TITLE</h2>
         <h3>ARTICLE AUTHOR</h3>
         <h4>ARTICLE PUBLISHED DATE</h4>
         <p>First 50 characters or so of the article</p>
        </div>
       </div>
      </a>
     </div>


  {% endif %}
{% endfor %}

Given that I have included the jquery api script

{{ 'api.jquery.js' | shopify_asset_url | script_tag }}

What would be the jquery/code for accessing and outputting the article information needed in the above code?

Ultimately, how can the values of the specified article be accessed as variables to use in jquery to plug into the dom.

Bonus points if you can provide how to extract out the first image SRC found in the article to use as the image.

Steph Sharp Steph Sharp · Accepted Answer · 2014-11-17T01:08:10

Since you've already got the blog title, I'd try something like this:

{% for link in linklists.homepage.links %}
  ...
  {% for article in blogs[blog_title].articles  %}
    {% if link.url == article.url %}
      <h2>{{ article.title }}</h2>
      <h3>{{ article.author }}</h3>
      <h4>{{ article.published_at }}</h4>
      ...
    {% endif %}
  {% endfor %}
  ...
{% endfor %}

Add article data from Shopify API to the DOM with blog id and article id

1 Answers