Question

我正在尝试利用Shopify链接列表界面在主页上显示内容。很遗憾，您无法直接将博客文章添加到链接列表中 - 只能通过它的网址。因此，我无法使用液体来检索显示文章内容所需的信息。

另一种方法是用户可以指定常规网址。因此，我们想通过输入以下网址来添加文章：/ blogs / news / 18059703-article-title

我想解析该网址，并使用Shopify jquery api填写所需的信息。

我知道我可以使用液体处理链接网址以获取博客ID和文章ID。然后我可以将它们作为属性注入到链接列表的输出中.....

{% 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 %}

鉴于我已经包含了jquery api脚本

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

访问和输出上述代码中所需的文章信息的jquery /代码是什么？

最终，如何将指定文章的值作为变量来访问，以便在jquery中插入dom。

奖励积分如果您可以提供如何提取文章中找到的第一个图像SRC用作图像。

Answer 1

由于你已经获得了博客标题，我会尝试这样的事情：

{% 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 %}

将Shopify API中的文章数据添加到具有博客ID和文章ID的DOM中

1 个答案: