Añadir artículos personalizados en collections Shopify

Tabla de Contenidos

Veamos paso a paso cómo añadir artículos personalizados en collections:

1. Crear section: collection-blog-posts.liquid

<section class="Section Section--spacingNormal" id="section-{{ section.id }}" data-section-type="article-list" data-section-id="{{ section.id }}">
  <div class="Container">
    {%- if section.settings.subheading != blank or section.settings.title != blank -%}
      <header class="SectionHeader SectionHeader--center">
        {%- if section.settings.subheading != blank -%}
          <h3 class="SectionHeader__SubHeading Heading u-h6">{{ section.settings.subheading | escape }}</h3>
        {%- endif -%}

        {%- if section.settings.title != blank -%}
          <h2 class="SectionHeader__Heading Heading u-h1">{{ section.settings.title | escape }}</h2>
        {%- endif -%}
      </header>
    {%- endif -%}

    {%- assign show_placeholders = true -%}

    <div class="ArticleListWrapper">
      <div class="ArticleList Grid Grid--m Grid--center">
        {%- assign block = section.blocks.first -%}

        {%- case block.type -%}
          {%- when 'article' -%}
            {%- for i in (1..3) -%}
              {%- assign article_option = 'article_' | append: i -%}
              {% if collection.metafields.custom_blog[article_option] != blank %}
                {%- assign article = articles[collection.metafields.custom_blog[article_option]] -%}
              {% else %}
                {%- assign article = articles[block.settings[article_option]] -%}
              {% endif %}

              {%- unless article == empty -%}
                <div class="Grid__Cell 1/2--tablet 1/3--lap-and-up {% if forloop.index == 3 %}hidden-tablet{% endif %}">
                  {%- render 'article-item', block: block, article: article -%}
                </div>

                {%- assign show_placeholders = false -%}
              {%- endunless -%}
            {%- endfor -%}

          {%- when 'blog' -%}
            {% if blog.metafields.custom_blog.blog != blank %}
              {%- assign blog = blogs[blog.metafields.custom_blog.blog] -%}
            {% else %}
              {%- assign blog = blogs[block.settings.blog] -%}
            {% endif %}
              
            {%- for article in blog.articles limit: 3 -%}
              <div class="Grid__Cell 1/2--tablet 1/3--lap-and-up {% if forloop.index == 3 %}hidden-tablet{% endif %}">
                {%- render 'article-item', block: block, article: article -%}
              </div>

              {%- assign show_placeholders = false -%}
            {%- endfor -%}
        {%- endcase -%}

        {%- if show_placeholders -%}
          {%- for i in (1..3) -%}
            <div class="Grid__Cell 1/2--tablet 1/3--lap-and-up {% if forloop.index == 3 %}hidden-tablet{% endif %}">
              <article class="ArticleItem">
                {%- capture placeholder -%}{% cycle 'lifestyle-1', 'lifestyle-2' %}{%- endcapture -%}

                <div class="ArticleItem__ImageWrapper AspectRatio" style="--aspect-ratio: 1.7">
                  {{ placeholder | placeholder_svg_tag: 'ArticleItem__Image PlaceholderBackground PlaceholderSvg--dark' }}
                </div>

                <div class="ArticleItem__Content">
                  {%- if section.settings.show_category -%}
                    <span class="ArticleItem__Category Heading u-h6 Text--subdued">{{ 'home_page.onboarding.article_category' | t }}</span>
                  {%- endif -%}

                  <h2 class="ArticleItem__Title Heading u-h2">
                    <a href="#">{{ 'home_page.onboarding.article_name' | t }}</a>
                  </h2>

                  <p class="ArticleItem__Excerpt">{{ 'home_page.onboarding.article_excerpt' | t }}</p>

                  <a href="#" class="ArticleItem__Link Link Link--underline">{{ 'blog.article.read_more' | t }}</a>
                </div>
              </article>
            </div>
          {%- endfor -%}
        {%- endif -%}
      </div>
    </div>

    {%- if section.settings.button_text != blank -%}
      <div class="SectionFooter">
        <a href="{{ section.settings.button_link }}" class="Button Button--primary">{{ section.settings.button_text | escape }}</a>
      </div>
    {%- endif -%}
  </div>
</section>

{% schema %}
{
  "name": "Collection Blog posts",
  "class": "shopify-section--bordered",
  "max_blocks": 3,
  "settings": [
    {
      "type": "text",
      "id": "subheading",
      "label": "Sub-heading"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Blog posts"
    },
    {
      "type": "checkbox",
      "id": "show_category",
      "label": "Show article category",
      "info": "The first article's tag is used as the main category.",
      "default": false
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button text",
      "default": "View all articles"
    }
  ],
  "blocks": [
    {
      "type": "article",
      "name": "Article",
      "settings": [
        {
          "type": "article",
          "id": "article_1",
          "label": "Article 1"
        },
        {
          "type": "article",
          "id": "article_2",
          "label": "Article 2"
        },
        {
          "type": "article",
          "id": "article_3",
          "label": "Article 3"
        }
      ]
    },
    {
      "type": "blog",
      "name": "Blog",
      "settings": [
        {
          "type": "blog",
          "id": "blog",
          "label": "Collection Blog"
        }
      ]
    }
  ],
  "presets": [
    {
      "category": "Blog",
      "name": "Blog posts",
      "settings": {},
      "blocks": [
        {
          "type": "blog",
          "settings": {
            "blog": "news"
          }
        }
      ]
    }
  ]
}
{% endschema %}

2. Añadir Section a collection.liquid
{% section ‘collection-blog-posts.liquid’ %}

3. En el Customizer de la plantilla collections ya se mostrara la nueva sección. Ahora solo tendremos que:

Add block > Article (sin seleccionar articulos)

*Para mostrar simplemente los últimos artículos > Add block > Blog (seleccionar categoría blog a mostrar)

4. Crear Metafields desde Settings

NAMESPACE AND KEY

custom_blog.article_1

custom_blog.article_2

custom_blog.article_3

Single line text > One value

5. Añadir handle posts en cada collection

Importante escribir handle desde categoria-blog/nombre-articulo sin / al principio

AUTOR

ÚLTIMOS ARTÍCULOS

La segmentación de productos en GoogleGoogle es uno de los principales motores de búsqueda en Internet y es utilizado por millones de personas en todo…

El Google Merchant Center es una herramienta vital para cualquier comerciante en línea que desee aprovechar al máximo sus campañas de Google ShoppingGoogle Shopping es…

El SEO es un componente vital para el éxito de cualquier tienda en línea, y PrestaShop no es la excepción. A pesar de su potente…

Suscríbete a la Newsletter

Recibe las últimas noticias y aprende de SEO y Google ADS

¿TE HA GUSTADO? SI ES QUE SÍ COMPARTE PARA TENER MÁS FEEDBACK ;)