How can I make it so that the most recent comment display first? I haven't been able to find this in the documentation and currently my comments are out of order.
This is in my article template:
{% for comment in article.comments %}
<li id="{{ comment.id }}" class="comment{% unless number_of_comments > article.comments_count %}{% if forloop.first %} first{% endif %}{% endunless %}{% if forloop.last %} last {% endif %}">
{% include 'comment' %}
</li>
{% unless forloop.last %}
and in my comments include:
<div class="grid">
<div class="grid__item medium-up--one-quarter">
<span class="comment-author">{{ comment.author }}</span>
<span class="comment-date">
{{ comment.created_at | time_tag: format: 'month_day_year' }}
</span>
</div>
<div class="grid__item medium-up--three-quarters">
<div class="rte">
{% comment %}ly_code_replace_for_[ comment.content ]_begin{% endcomment %}{% include 'ly-content' with comment %}{{ ly_translation }}{% comment %}ly_code_replace_end{% endcomment %}
</div>
</div>
</div>
UPDATE: In order to resolve this I had to add:
{% assign artComments = article.comments | sort: "created_at" | reverse %}
You can use the reversed parameter in your for loop tag:
{% for comment in article.comments reversed %}
... do your thing
{% endfor %}
Related
i started my online shop a few months back and since im not a programmer i finally reached a point where i need help.
I was trying to improve Pagespeed according to Google and i managed to get the CLS of my Index page to almost 0. - Lazyload, System Fonts, Aspect Ratio of Pictures and so on... i managed to find it all in the Liquid Code of my Shopify Store and optimize it by myself. ... ok i totally crashed the page a few times but thats what backups are for ;-)
But i have no Idea about the Product Pages.
Lighthouse can tell me the Objects causing a CLS of almost 1(!) - mostly its around 0,9 - but i looked at the code of these Objects for 5 days now and i am lost.
its supposed to be caused by the following:
main#MainContent.main-content
div.col-12.col-md-6.order-1
div.page-container.page-element.is-moved-by-drawer
...and sometimes a few more causing small numbers ob CLS
i tried diffrent Templates of my theme but no change
i googled a lot... and i mean A LOT in 5 days...
i tried many suggestions that i found while googling about this issue
i tried to find Code checkers or HTML code Analyzer but that didnt help
i tried things mentioned in this thread: Cumulative Layout Shift with Bootstrap 4 grid
i dont see the Layout shift supposedly caused by these elements
the only Layout shift i can see is somehow NOT mentioned by google - but results don`t change if i remove the app causing the layout shift that i can see. (app is called Legal Pro - needed for keeping the shop up to the requirements of German law. it injects Product data between the Price and the remaining Stock. I can not change the app, only deactivate it. But even when the app is removed, the Lighthouse data does not change. Not even a little!
i would be willing to totally replace the code of the product page with a code with less CLS but adapting complete new code to the existing pages is out of my league. I can change it but not write it. :-/
I`d be very thankful for any help. Just give me something i can google.
(and yes i know there are more issues on that page but CLS is giving me a bad Google ranking right now - one problem at the time)
an example Page can be found here:
https://besonderes-mit-liebe-handgemacht.de/collections/mannergeschenke/products/edle-kugelschreiber-von-hand-gedrechselt-besondere-holzer
the Product page code for the Page is this:
<div class="row product-single">
<div class="col-md-6">
<div class="photos">
<div class="photos__item photos__item--main">
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
{%- for image in product.images -%}
<div class="product-single__photo product__photo-container product__photo-container-{{ section.id }} js{% unless image == featured_image %} hide{% endunless %}"
id="ProductPhoto"
style="max-width: {% include 'image-width' with image: image, width: 480 %}px;"
data-image-id="{{ image.id }}">
<a href="{{ image | img_url: '1200x1200' }}" data-lightbox="image-product"
class="product__photo-wrapper product__photo-wrapper-{{ section.id }}"
style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload {% unless image == featured_image %} lazypreload{% endunless %}"
src="{{ image | img_url: '1024x' }}"
data-src="{{ img_url }}"
data-widths="[180, 240, 360, 480, 720, 960, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</a>
</div>
{%- endfor -%}
<noscript>
<a href="{{ featured_image | img_url: '1200x1200' }}">
<img src="{{ featured_image | img_url: product_image_size }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg-{{ section.id }}">
</a>
</noscript>
{% include 'productVideo' %}
</div>
{%- if product.images.size > 1 -%}
<div class="photos__item photos__item--thumbs">
<div class="product-single__thumbnails product-single__thumbnails-{{ section.id }} product-single__thumbnails--static">
{%- for image in product.images -%}
<div class="product-single__thumbnail-item product-single__thumbnail-item-{{ section.id }}{% if image == featured_image %} is-active{% endif %}" data-image-id="{{ image.id }}">
<a href="{{ image.src | img_url: product_image_size }}" data-zoom="{{ image.src | img_url: '1200x1200' }}" class="product-single__thumbnail product-single__thumbnail-{{ section.id }}">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload {% unless image == featured_image %} lazypreload{% endunless %}"
src="{{ image | img_url: '1024x' }}"
data-src="{{ img_url }}"
data-widths="[180, 240, 360, 480, 720, 960, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</a>
</div>
{%- endfor -%}
</div>
</div>
<script >
{%- capture arrow_left -%}{%- include 'icon-arrow-left' -%}{%- endcapture -%}
{%- capture arrow_right -%}{%- include 'icon-arrow-right' -%}{%- endcapture -%}
{%- capture arrow_up -%}{%- include 'icon-arrow-up' -%}{%- endcapture -%}
{%- capture arrow_down -%}{%- include 'icon-arrow-down' -%}{%- endcapture -%}
var sliderArrows = {
left: {{ arrow_left | json }},
right: {{ arrow_right | json }},
up: {{ arrow_up | json }},
down: {{ arrow_down | json }}
}
</script>
{%- endif -%}
{% if section.settings.positiontab == "left" %}
<div class=" {% unless settings.productpage == "product-1" %}pl-5 {% endunless %}" >
<div class="{% unless settings.productpage == "product-1" %}pl-5 {% endunless %}">
{% if section.settings.enable_tabvertical %}
{%- include 'product-information-vertical' -%}
{% else %}
{%- include 'product-information' -%}
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
<div class="col-12 col-md-6 order-1" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product-single__info-wrapper">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<div class="product-single__meta small--text-center">
<h1 itemprop="name" class="product-single__title">{{ product.title }}<span id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
<span class="product-tag gradient-theme">
{{ 'products.product.on_sale' | t }}
</span>
</span>
</h1>
<ul class="pb-3 product-single__meta-list list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
<li>
{%- unless product.compare_at_price_max > product.price -%}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{%- endunless -%}
<span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
</li>
{% if product.compare_at_price_max > product.price %}
<li>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
{{ current_variant.compare_at_price | money }}
</s>
</li>
{% endif %}
{%- if section.settings.stock_enable -%}
<li>{%- include 'productStock' -%}</li>
{%- endif -%}
</ul>
<div class="review">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
{% if product.metafields.info.shortdesc != blank %}
<div class=" pb-4 rte product-single__description" itemprop="Beschreibung">
{{product.metafields.info.shortdesc}}
</div>
{% endif %}
</div>
{% if product.metafields.info.affiliate_link != blank %}{% comment %}AFFILIATE PRODUCT{% endcomment %}
<a href="{{product.metafields.info.affiliate_link}}" class="my-3 btn btn-theme btn--full product-form__cart-submit {% if section.settings.enable_payment_button %}product-form__cart-submit--outline{% endif %}">
{{product.metafields.info.affiliate_button}}
</a>
{% else %} {% comment %}NORMAL PRODUCT{% endcomment %}
{% capture "form_class" %}product-form {% if section.settings.product_selector == 'select'%} product-form-select{% endif %} {% if section.settings.enable_payment_button %} product-form--payment-button{% endif %}{%- endcapture %}
{% capture "form_id" %}AddToCartForm-{{ section.id }}{%- endcapture %}
{% form 'product', product, class:form_class, id:form_id %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
{% include 'productOption' %}
</div>
{% endfor %}
{% endunless %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
{% if variant.available %}
{{ variant.title }} - {{ variant.price | money_with_currency }}
{% else %}
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
{% endif %}
</option>
{% endfor %}
</select>
<div class="product-form__quantity-submit pt-4">
<div class="product-form__item product-form__item--submit {% unless section.settings.enable_payment_button %} btn-disablebuynow {% endunless %}">
<button type="submit"
name="add"
id="AddToCart-{{ section.id }}"
class="btn btn--full btn-theme product-form__cart-submit {% if section.settings.enable_payment_button %}product-form__cart-submit--outline{% endif %}{% unless current_variant.available %} btn--sold-out{% endunless %}"
{% unless current_variant.available %}disabled="disabled"{% endunless %}>
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
</div>
{% if section.settings.enable_payment_button %}
<div class="product-form__buynow">
{{ form | payment_button }}
{% if current_variant.available == false %}<style>.shopify-payment-button{display:none}</style>{% endif %}
</div>
{% endif %}
</div>
<div class="js-contact-soldout {% if current_variant.available %}hide{% endif %}">
<span class="btn btn-waitlist btn-theme" data-toggle="modal" data-target="#jsSoldout" title="{{ 'products.product.soldout_messenger' | t }}">{{'products.product.waitlist' | t}}</span>
</div>
<div class="gr-btnjs d-flex py-4 align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div>
{% if settings.enable_compare %}
<span class="btn js-btn-compare mr-4" data-tooltip="true" title="{{ 'products.product.compare_text' | t }}" data-handle="{{product.handle}}">
{%- include 'icon-exchange' -%}
{%- include 'icon-close' -%}
<span>{{ 'products.product.compare_text' | t }}</span>
</span>
{% endif %}
{% if settings.enable_wishlsit %}
<span data-tooltip="true" class="js-btn-wishlist mr-4" title="{{ 'products.product.wishlist_text' | t }}" data-handle="{{product.handle}}">
{%- include 'icon-heart' -%}
<span class="wishlist-text">{{ 'products.product.wishlist_text' | t }}</span>
</span>
{% endif %}
</div>
<div>
{%- include 'productSizeGuide' -%}
</div>
</div>
<div>
{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
{% endform %}
{% include 'notifySoldoutProduct' %}
{% endif %}
<div class="row text-left pt-2">
<div class="product-single__information col text-uppercase">
{% if section.settings.product_vendor_enable %}
<p class="product-single__vendor"><small class="text-body">{{'products.product.vendor' | t }}: </small><small>{{ product.vendor }}</small></p>
{% endif %}
{% if section.settings.product_type_enable %}
<p class="product-single__type"><small class="text-body">{{'products.product.type' | t }}: </small><small>{{ product.type }}</small></p>
{% endif %}
{% if section.settings.variant_sku_enable %}
<p class="product-single__sku "><small class="text-body">{{'products.product.sku' | t }}: </small><small class="js-variant-sku">{{ current_variant.sku | default:'null' }}</small></p>
{% endif %}
{% if section.settings.variant_available_enable %}
<p class="product-single__availability "><small class="text-body">{{'products.product.available' | t }}: </small><small>{% if current_variant.available %}{{ 'products.product.available' | t }}{% else %}{{'products.product.sold_out' | t }}{% endif %}</small></p>
{% endif %}
</div>
{% if settings.safe_checkout_detail != blank %}
<div class="safe-checkout-detail col">
<img class="lazyload img-fluid w-100" data-src="{{ settings.safe_checkout_detail | img_url: '600x' }}"/>
</div>
{% endif %}
</div>
{% include 'fake-viewer' %}
{% include 'free-shipping' %}
{% include 'shipping-time' %}
{% if settings.enable_countdown_page %}
{% include 'product-countdown' %}
{% endif %}
{% if section.settings.positiontab == "right" %}
{% if section.settings.enable_tabvertical %}
{%- include 'product-information-vertical' -%}
{% else %}
{%- include 'product-information' -%}
{% endif %}
{% endif%}
</div>
</div>
</div>
i have created custom code sidebar filter. if filter by one tag its working fine, suppose if we click another tag no product details are showing.
Snippet/sidebar-filter.liquid
{% for block in section.blocks %}
{% assign heading = block.settings.filter_heading %}
{% assign tags = block.settings.filter_tags | split: ',' %}
<div class="collection-filter-tag-category">
<h4> {{ heading }} </h4>
<div class="filter-li-scroll">
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<li class="active">
{{ tag | link_to_remove_tag : tag }}
</li>
{% else %}
<li class="">
{{ tag | link_to_add_tag : tag }}
</li>
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
Templates/collection.liquid:
{% section 'collection-template' %}
Templates/collection-template.liquid:
<div id="collection-product-filter-pane">
<div class="sidebar_filter">
{% include 'sidebar-filter' %}
</div>
<div class="page-width" id="Collection">
{% if section.settings.layout == 'grid' %}
{% case section.settings.grid %}
{% when '2' %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when '3' %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when '4' %}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when '5' %}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}
<div class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
{% for product in collection.products %}
<div class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
{% include 'product-card-grid', max_height: max_height %}
</div>
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
<div class="grid__item">
<div class="grid grid--uniform">
{% for i in (1..limit) %}
<div class="grid__item {{ grid_item_width }}">
<div class="grid-view-item">
<a href="#" class="grid-view-item__link">
<div class="grid-view-item__image">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
<div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
<div class="grid-view-item__meta">
<span class="product-price__price">$19.99</span>
</div>
</a>
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
{%- assign is_empty_collection = true -%}
{% endif %}
{% endfor %}
</div>
{% else %}
<div class="list-view-items">
{% for product in collection.products %}
<a href="{{ product.url | within: collection }}" class="list-view-item">
{% include 'product-card-list', product: product %}
</a>
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0%}
{% for i in (1..4) %}
<a href="#" class="list-view-item">
<div class="list-view-item__image-column">
<div class="list-view-item__image-wrapper">
<div class="list-view-item__image">
{%- assign placeholder = 'placeholder-product-' | append: i -%}
{% include placeholder %}
</div>
</div>
</div>
<div class="list-view-item__title-column">
<div class="list-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
</div>
<div class="list-view-item__price-column">
<span class="product-price__price">$19.99</span>
</div>
</a>
{% endfor %}
{% else %}
{%- assign is_empty_collection = true -%}
{% endif %}
{% endfor %}
</div>
{% endif %}
{% if is_empty_collection %}
<div class="grid__item small--text-center">
<p class="text-center">{{ 'collections.general.no_matches' | t }}</p>
</div>
{% endif %}
{% if paginate.pages > 1 %}
{% include 'pagination' %}
{% endif %}
</div>
</div>
if filter by another tag no product list coming
please help me to get result, I'm stucking two days pls someone help me
I am trying to change the layout of the product page on the Narrative Shopify theme so that it is 2 columns side by side instead of one.
I have tried editing the product-template.liquid file to achieve this but unfortunately no luck.
Here is a link to the demo product page which has the same code as mine: https://themes.shopify.com/themes/narrative/styles/warm/preview
Below is the top section of the product-template.liquid file I am trying to edit (I have reverted back to an older build just for ease of troubleshooting)
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign current_variant_sale = false -%}
{% if current_variant.compare_at_price > current_variant.price %}
{%- assign current_variant_sale = true -%}
{% endif %}
{% assign featured_media = current_variant.featured_media | default: product.featured_media %}
<div class="product-template" data-section-id="{{ section.id }}" data-section-type="product-template" data-variant-id="{{ current_variant.id }}" itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="{{ product.title }}">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ featured_media | img_url: 'grande' }}">
{% comment %}
------------------------------------------------------------------------------
Product Featured Media
------------------------------------------------------------------------------
{% endcomment %}
<div class="product-template__media page-width page-width--no-gutter">
{% assign variant_media_ids = '' %}
{%- unless product.has_only_default_variant -%}
{% for variant in product.variants %}
{% assign variant_media = variant.featured_media %}
{%- if variant_media -%}
{%- if variant_media_ids contains variant_media.id -%}
{% continue %}
{%- endif -%}
{% assign variant_media_ids = variant_media_ids | append: variant_media.id | append: ' ' %}
{% assign featured = false %}
{%- if featured_media == variant_media -%}
{% assign featured = true %}
{%- endif -%}
{% include 'product-preview-image' with media: variant_media, featured_media: featured, gallery_type: 'media', data_image: 'data-variant-media-image' %}
{%- endif -%}
{% endfor %}
{%- endunless -%}
{% unless featured_media and variant_media_ids contains featured_media.id %}
{% include 'product-preview-image' with media: featured_media, featured_media: true, gallery_type: 'media', data_image: 'data-variant-media-image' %}
{%- endunless -%}
{% include 'shopify-xr-button' %}
</div>
{% comment %}
------------------------------------------------------------------------------
Product Form & Description
------------------------------------------------------------------------------
{% endcomment %}
<div class="product__content page-width">
<div class="grid">
<div class="grid__item medium-up--push-one-twelfth medium-up--ten-twelfths">
<div class="product__content-header">
{% if section.settings.show_vendor %}
<span class="product__vendor text-small text-center" itemprop="brand">{{ product.vendor }}</span>
{% endif %}
<h1 class="product__title h2 text-center" itemprop="name">{{ product.title }}</h1>
<p class="product__price text-center{% if current_variant_sale %} product__price--sale{% endif %}" data-product-price aria-live="polite">
<span class="product__sale-price-label visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="product__regular-price-label visually-hidden">{{ 'products.product.price' | t }}</span>
<span class="product__current-price" data-regular-price>{{ current_variant.price | money }}</span>
<span class="product__compare-price-label visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product__compare-price" data-compare-price>{{ current_variant.compare_at_price | money }}</s>
{% include 'product-unit-price', variant: current_variant %}
</p>
{%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte">
{%- if cart.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}
</div>
<div class="product__content-main">
<div class="product__description rte" itemprop="description" class="rte">
{{ product.description }}
</div>
<div class="product__form-container" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product__form-wrapper">
<meta itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
<meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
<link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">
{% include 'product-form' %}
{% if section.settings.show_share_buttons %}
{% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}
<div class="product__share-wrapper small--hide">
<div class="product__share">
{% include 'social-sharing', type: "product", links: 'bottom' share_title: product.title, share_permalink: product.url, share_image: featured_media %}
</div>
</div>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
Any help would be greatly appreciated thank you!
I want to display colors and sizes separately on frontend to filter the collection in shopify. But when I do, it shows color and size in same variable with slash in it.
Here is the image
Here is the code that i try
<div class="size-filter clearfix mt-4">
<h4>SIZE</h4>
<hr>
{% assign available_sizes = '' %}
{% for product in collections.frontpage.products limit: limit %}
{% for variant in product.variants %}
{% if variant.title != 'Default Title' %}
{% unless available_sizes contains variant.title %}
{% if variant.available %}
{% capture available_sizes %}{{ available_sizes }}, {{ variant.title }}{% endcapture %}
<div class="form-check">
<input class="form-check-input coll-filter" type="checkbox" value="{{variant.title}}" id=""
{% if current_tags contains tag %} checked {%endif%}>
<label class="form-check-label" for="">
{{variant.title}}
</label>
</div>
{% endif %}
{% endunless %}
{% endif %}
{% endfor %}
{% endfor %}
</div>
Please help me to fix this error, i stuck here from last 3 days.
Error Solved but got this output:
You can do use the options_with_values object:
{% for product_option in product.options_with_values %}
<h5>{{ product_option.name }}</h5>
{% for value in product_option.values %}
<input id="{{product_option|handle}}-{{value|handle}}" type="checkbox" value="{{ value }}" />
<label for="{{product_option|handle}}-{{value|handle}}"></label>
{% endfor %}
{% endfor %}
But you will need to write some Javascript in order to tie it to the main select which holds the variants ids.
We have below code in our shopify app, however it is not working and we are getting error as :
Liquid error: Memory limits exceeded
The code loops through the customer tags and checks for product id in collections and displays the products.
Can anyone please help with identifying the issue?
{% include 'breadcrumb' %}
<div class="container">
<div class="page">
<div class="title">
<h2>{{ page.title }}</h2>
</div>
<div class="page_content">
{{ page.content }}
</div>
{% if customer %}
<ul class="wishlist-items">
<li class="head">
<ul>
<li class="col-1 hidden-xs">{{'wish_list.general.image' | t}}</li>
<li class="col-2">{{'wish_list.general.item' | t}}</li>
<li class="col-3">{{'wish_list.general.price' | t}}</li>
<li class="col-4"></li>
</ul>
</li>
<li class="tbody">
<ul>
{% for tag in customer.tags %}
{% assign the_test = '' %}
{% capture tagID %}{{ tag }}{% endcapture %}
{% for tag in customer.tags %}
{% capture curTag %}{{ tag }}{% endcapture %}
{% if curTag contains tagID %}
{% assign tagID_tmp = tagID.size | minus:curTag.size %}
{% if tagID_tmp == 0 %}
{% assign the_test = tagID %}
{% else %}
{% assign the_test = '' %}
{% endif %}
{% endif %}
{% endfor %}
{% for collection in collections %}
{% paginate collection.products by collection.all_products_count %}
{% for product in collection.products %}
{% capture productID %}{{ product.id }}{% endcapture %}
{% capture used %}{{ productID }} {{ used }}{% endcapture %}
{% unless used contains productID %}
{% assign check = tag.size | minus:productID.size | modulo:2 %}
{% if check == 0 %}{% assign display_product = true %}{% else %}{% assign display_product = false %}{% endif %}
{% if display_product and the_test contains productID %}
{% assign variant_tmp = product.selected_or_first_available_variant %}
{% for variant in product.variants %}
{% if variant.available == true and variant.price < variant_tmp.price %}
{% assign variant_tmp = variant %}
{% endif %}
{% endfor %}
<li class="item">
<ul>
<li class="col-1 hidden-xs">
<a href="{{product.url | within: collection}}" class="product-image">
<img src="{{product.featured_image | product_img_url:'medium'}}" alt="{{product.title}}" />
</a>
</li>
<li class="col-2">
<a href="{{product.url | within: collection}}" class="product-image visible-xs">
<img src="{{product.featured_image | product_img_url:'medium'}}" alt="{{product.title}}" />
</a>
{{product.title}}{% if product.variants.size > 1 %} - {{variant_tmp.title}}{% endif %}
</li>
<li class="col-3"><div class="product-price"><span class="money">{{product.price | money}}</span></div></li>
<li class="col-4">
<div class="action">
<div class="wishlist">
{% form 'customer' %}
<input type='hidden' name='contact[email]' value='{{ customer.email }}'/>
<input type='hidden' name='contact[tags]' id='remove-value' value='x{{ tagID }}' />
<button type="submit" class="remove-wishlist"><i class="fa fa-close"></i></button>
{% endform %}
</div> |
<div class="addtocart">
{% if product.available %}
<form action="/cart/add" method="post" enctype="multipart/form-data">
<input type="hidden" name="quantity" value="1" />
<input type="hidden" name="id" value="{{variant_tmp.id}}" />
<button type="submit" class="add-to-cart"><i class="fa fa-shopping-cart"></i></button>
</form>
{% else %}
<i class="fa fa-shopping-cart"></i>
{% endif %}
</div>
</div>
</li>
</ul>
</li>
{% endif %}
{% endunless %}
{% endfor %}
{% endpaginate %}
{% endfor %}
{% endfor %}
</ul>
</li>
</ul>
{% else %}
<p>{{'wish_list.general.to_create_a_wishlist_please' | t}} <a href='/account/login'>{{'wish_list.general.login' | t}}</a> {{'wish_list.general.or' | t}} <a href='/account/register'>{{'wish_list.general.register' | t}}</a>.</p>
{% endif %}
</div>
</div>
This is because of many nested loops. All the products must be sorted out, so developers used this huge construction:
{% for collection in collections %}
{% paginate collection.products by collection.all_products_count %}
{% for product in collection.products %}
...
{% endpaginate %}
{% endfor %}
{% endfor %}
I got this error on one of our clients shop.
But we can use Shopify liquid all_products['the-handle'].variable!
Original customer tags wishlist uses products ID and x. I used product handle instead of product ID and +0 instead of x.
Customer tags with Product ID:
12345678
x12345678
xx12345678
Customer tags with handles:
some-product-handle
+0some-product-handle
+0+0some-product-handle
I had to change the code, spent a lot of time, but now it works fine, without any errors.