BLOG

Shopify Article page diplay product on article based on SKU added in the article description


{% assign sku_content = article.content | split: '<!-- sku -->' %}
{% if sku_content.size > 1 %}
{% assign textAfterSku = sku_content[1] | split: ' ' %}
{% assign numbersAfterSku = textAfterSku %}
{% endif %}
{{ numbersAfterSku }}
{% if sku_content[0] != blank %}
{{ sku_content[0] }}
{% endif %}
{% if sku_content[0] != blank %}
<ul
id="Slider-{{ section.id }}"
class="grid product-grid contains-card contains-card--product{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--3-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}"
role="list"
aria-label="{{ 'general.slider.name' | t }}"
>
{% for product in collections.all.products %}
{% for variant in product.variants %}
{% for num in numbersAfterSku %}
{% if variant.sku == num %}
<li
id="Slide-{{ section.id }}-{{ forloop.index }}"
class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}"
>
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
</ul>
{% endif %}
{% if sku_content[2] != blank %}
{{ sku_content[2] }}
{% endif %}
{% if sku_content[3] != blank %}
{% if sku_content.size > 1 %}
{% assign textAfterSku3 = sku_content[3] | split: ' ' %}
{% assign numbersAfterSku3 = textAfterSku3 %}
{% endif %}
<ul
id="Slider-{{ section.id }}"
class="grid product-grid contains-card contains-card--product{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--3-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}"
role="list"
aria-label="{{ 'general.slider.name' | t }}"
>
{% for product in collections.all.products %}
{% for variant in product.variants %}
{% for num in numbersAfterSku3 %}
{% if variant.sku == num %}
<li
id="Slide-{{ section.id }}-{{ forloop.index }}"
class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}"
>
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
</ul>
{% endif %}
{% if sku_content[4] != blank %}
{{ sku_content[4] }}
{% endif %}
{% if sku_content[5] != blank %}
{% if sku_content.size > 1 %}
{% assign textAfterSku5 = sku_content[5] | split: ' ' %}
{% assign numbersAfterSku5 = textAfterSku5 %}
{% endif %}

<ul
id="Slider-{{ section.id }}"
class="grid product-grid contains-card contains-card--product{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--3-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}"
role="list"
aria-label="{{ 'general.slider.name' | t }}"
>
{% for product in collections.all.products %}
{% for variant in product.variants %}
{% for num5 in numbersAfterSku5 %}
{% if variant.sku == num5 %}
<li
id="Slide-{{ section.id }}-{{ forloop.index }}"
class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}"
>
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
</ul>
{% endif %}

{% if sku_content[6] != blank %}
{{ sku_content[6] }}
{% endif %}
{% if sku_content[7] != blank %}
{% if sku_content.size > 1 %}
{% assign textAfterSku7 = sku_content[7] | split: ' ' %}
{% assign numbersAfterSku7 = textAfterSku7 %}
{% endif %}

<ul
id="Slider-{{ section.id }}"
class="grid product-grid contains-card contains-card--product{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--3-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}"
role="list"
aria-label="{{ 'general.slider.name' | t }}"
>
{% for product in collections.all.products %}
{% for variant in product.variants %}
{% for num in numbersAfterSku7 %}
{% if variant.sku == num %}
<li
id="Slide-{{ section.id }}-{{ forloop.index }}"
class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}"
>
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
</ul>
{% endif %}

{% if sku_content[8] != blank %}
{{ sku_content[8] }}
{% endif %}
{% if sku_content[9] != blank %}
{% if sku_content.size > 1 %}
{% assign textAfterSku9 = sku_content[9] | split: ' ' %}
{% assign numbersAfterSku9 = textAfterSku9 %}
{% endif %}

<ul
id="Slider-{{ section.id }}"
class="grid product-grid contains-card contains-card--product{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--3-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}"
role="list"
aria-label="{{ 'general.slider.name' | t }}"
>
{% for product in collections.all.products %}
{% for variant in product.variants %}
{% for num in numbersAfterSku9 %}
{% if variant.sku == num %}
<li
id="Slide-{{ section.id }}-{{ forloop.index }}"
class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}"
>
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
</ul>
{% endif %}

Share:

Post a Comment!