Shopify Wishlist memory issue - shopify

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.

Related

multi tag filter not getting product info in shopify using custom code withou app

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

How to show size and colors separately in shoplify?

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.

In Shopify how do I set the sort order of comments by most recent first?

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

Shopify liquid :How to get variant inventory from ajax cart

This question sounds similar to my own question cart-template-variant. I am doing the same thing with ajax cart header.liquid. I just wanted to access inventory from cart object same as cart-template question {% if item.variant.inventory_quantity < 1 %}. I am initially trying to print {{item.variant.inventory_quantity}} into header.liquid since it is ajax cart. inside {% for item in cart.items %} I have printed {{item.variant.inventory_quantity}} but when I add in stock or out of stock product into the cart. It always returns 0. Which is the cart object property I am not passing properly?
I am actually following below advise but I have missed something here.
The code for Ajax cart is in header.liquid. It has a Cart object, which has many properties. See https://help.shopify.com/themes/liquid/objects/cart#cart-items
One of them is items (i.e. cart.items), which gives all the items added to cart. Around line 100, you will see a for loop {% for item in cart.items %}.
Here item = line_item. The line_item has many properties. See https://help.shopify.com/themes/liquid/objects/line_item.
One of them is variant. i.e. line_item.variant. So here inside for loop will be item.variant.
So now you have variant properties. See https://help.shopify.com/themes/liquid/objects/variant
variant.inventory_quantity is one of them.
header.liquid (Ready to share entire file if required.)
<form action="/checkout" method="post" id="cart">
<ul data-money-format="{{ shop.money_format }}" data-shop-currency="{{ shop.currency }}" data-shop-name="{{ shop.name | escape }}">
<li class="mm-subtitle"><a class="continue ss-icon" href="#cart"><span class="icon-close"></span></a></li>
{% if cart.item_count == 0 %}
<li class="empty_cart">{{ 'layout.general.empty_cart' | t }}</li>
{% else %}
{% for item in cart.items %}
{{item.variant.inventory_quantity}}
<a href="/#" >Will be dispatched by June 7</a>
<li class="cart_item {% if forloop.last %}last_cart_item{% endif %}">
<p class="mm-counter">
<span class="icon-minus minus"></span><input type="number" min="0" class="quantity" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" data-line-id="{{ forloop.index }}" readonly /><span class="icon-plus plus"></span>
</p>
<a href="{{ item.url }}">
{% if item.image %}
<div class="cart_image">
<img src="{{ item | img_url: '410x' }}" alt="{{ item.title | escape }}" />
</div>
{% endif %}
<div class="item_info">
{{ item.product.title }}
{% unless item.product.has_only_default_variant or item.variant.title contains "Title" %}
{% for option in item.product.options %}
{% unless option contains "Title" %}
- {{ item.variant.options[forloop.index0] }} {% unless forloop.last %}/{% endunless %}
{% endunless %}
{% endfor %}
{% endunless %}
{% if item.properties %}
{% for p in item.properties %}
{% if p.last != blank %}
<div class="line-item">
{{ p.first }}: {{ p.last }}
</div>
{% endif %}
{% endfor %}
{% endif %}
<div class="price">
<span class="money">{{ item.price | money }}</span>
</div>
</div>
</a>
</li>
{% endfor %}
<li class="mm-label">
<p class="mm-counter price">
<span class="money">{{ cart.total_price | money }}</span>
</p>
<a href="/cart">
<strong>{{ 'layout.general.subtotal' | t }}</strong>
</a>
</li>
<li class="mm-subtitle clearfix">
{% if settings.display_special_instructions %}
<textarea id="cart-note" name="note" rows="2" placeholder="{{ 'layout.general.cart_note' | t }}" class="clearfix">{{ cart.note }}</textarea>
{% endif %}
{% if settings.display_tos_checkbox %}
<aside class="tos tos_checkbox">
<input type="checkbox" class="tos_agree" id="sliding_agree" required />
<label class="tos_label" for="sliding_agree">
{{ settings.tos_richtext }}
</label>
</aside>
{% endif %}
<input type="submit" class="action_button right" value="{{ 'layout.general.checkout' | t }}" />
{{ 'layout.general.edit_cart' | t }}
</li>
{% endif %}
</ul>
</form>

Only displaying available options on shopify

In Snippets/product-form.liquid there's a block of code:
<div class="swatch_options">
{% for option in product.options %}
{% include 'product-swatch' with option %}
{% endfor %}
</div>
This is displaying options for products with X's over the unavailable swatches:
<div data-value="option name" class="swatch-element color optionName-swatch available soldout">
<div class="tooltip">Option Name</div>
<label for="optionName">
<span class="crossed-out"></span>
</label>
</div>
When those non-compatible variants are clicked, a large "UNAVAILABLE" message is displayed:
<p class="modal_price" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="USD">
<meta itemprop="seller" content="site">
<link itemprop="availability" href="http://schema.org/InStock">
<meta itemprop="itemCondition" content="New">
<span class="sold_out">Unavailable</span>
<span itemprop="price" content="10.00" class="">
<span class="current_price "></span>
</span>
<span class="was_price"></span>
<span class="sale savings"></span>
</p>
I've tried checking for variant.available, product.variants.first.available, and variant.inventory_quantity > 0 before {% include 'product-swatch' with option %}, without success.
How do I hide the non-compatible variants?
Edit: Here's what's currently inside of product-swatch.liquid:
{% comment %}
Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}
{% assign file_extension = 'png' %}
{% assign swatch = product-swatch %}
{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}
{% for option in product.options %}
{% if option == swatch %}
{% assign found_option = true %}
{% assign option_index = forloop.index0 %}
{% assign downcased_option = swatch | downcase %}
{% if downcased_option contains 'color' or downcased_option contains 'colour' %}
{% assign is_color = true %}
{% endif %}
{% endif %}
{% endfor %}
<div class="swatch clearfix" data-option-index="{{ option_index }}">
<div class="option_title">{{ swatch }}</div>
{% assign values = '' %}
{% for variant in product.variants %}
{% if variant.available %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}
<input id="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} />
<div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }}-swatch {% if variant.available %}available{% else %}soldout{% endif %}">
{% if is_color %}
<div class="tooltip">{{ value }}</div>
{% endif %}
{% if is_color %}
<label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" style="background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: '50x' }}); background-color: {{ value | split: ' ' | last | handle }};">
<span class="crossed-out"></span>
</label>
{% else %}
<label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}">
{{ value }}
<span class="crossed-out"></span>
</label>
{% endif %}
</div>
{% endunless %}
{% endif %}
{% endfor %}
</div>
It seems you're looking for the Linked Options functionality.
Have a look at this doc:
https://help.shopify.com/themes/customization/navigation/link-product-options-in-menus
The code is hosted on GitHub:
https://gist.github.com/carolineschnapp/1083007
It's adjusted to work with swatches as well (I suppose you're using the default implementation).
Edit your product-swatch.liquid file under "snippets" folder.
Find {% for variant in product.variants %} and Put {% if variant.available %} right after it.
Find {% endfor %} and Put {% endif %} right before it.
If its not working, share the codes of product-swatch.liquid with us.