Adding variant images on Shopify Order Printer App template - shopify

so I'm trying to add variant images on my template, my code already shows the variants' titles that are chosen but is there a way to add the variant's image too?
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
<thead>
<tr>
<th>Quantity</th>
<th>Item</th>
{% if show_line_item_taxes %}
<th>Taxes</th>
{% endif %}
<th>Price</th>
</tr>
</thead>
<tbody>
{% for line_item in line_items %}
<tr>
<td>{{ line_item.quantity }} x</td>
<td><b>{{ line_item.title }}</b>
{% for property in line_item.properties %}
{% if property.first contains '_io_' %}{% continue %}{% endif %}
{% if property.last == blank %}{% continue %}{% endif %}
<br>{{ property.first }}: {{ property.last }}
{% endfor %}
</td>
{% if line_item.tax_lines %}
<td>
{% for tax_line in line_item.tax_lines %}
{{ tax_line.price | money }} {{ tax_line.title }}<br/>
{% endfor %}
</td>
{% endif %}
<td>{{ line_item.price | money }}</td>
</tr>
{% endfor %}
</tbody>
</table>
Here's what this code looks like:

You will need to loop through the products of each line item. Then you can loop over the images in the product.
{% for product in line_item.product %}
{% for image in product.images %}
<img src="{{ image.src | product_img_url: '500x' }}">
{% endfor %}
{% endfor %}
Check Product Object Docs

Related

Why is django not picking up elif

So i'd like to use this 'advanced' if elif constrution in the django template, but it doesn't seem to work? It just makes it all a regular
{% for recruit in recruits_list %}
{% if recruit.accepted == "Yes" %}
<tr class="table-success">
{% elif recruit.accepted == "No" %}
<tr class="table-danger">
{% else %}
<tr>
{% endif %}
If i juse juse the == "Yes" it works. If i juse just the == "No" it works. But not in this way. What am i missing here?
I re did the whole code, not it works. Things learned:
inside {% %} code, you do not need {{ }} brackets
Check for typos (i fixed mine above already, had succes in stead of success
Complete code:
{% extends "base.html" %}
{% load static %}
{% block content %}
<h1>Recruit List</h1>
{% if recruits_list %}
<table class="table">
<tr>
<th scope="col" >Player</th>
<th scope="col">Recruited on</th>
<th scope="col">Eligeble</th>
<th scope="col">Recruiter</th>
<th scope="col">Accepted</th>
<th scope="col">Vote is up</th>
<th scope="col">Notes</th>
<th scope="col">Actions<th>
<tr>
{% for recruit in recruits_list %}
{% if recruit.%}
{% if recruit.accepted == 'Yes' %}
<tr class="table-success">
{% elif recruit.accepted == 'No' %}
<tr class="table-danger">
{% else %}
<tr>
{% endif %}
<td>{{recruit.player_name}}</td>
<td>{{recruit.date_recruited}}</td>
<td>{{recruit.date_eligeble}}</td>
<td>{{recruit.recruiter}}</td>
<td>{{recruit.accepted}}</td>
<td>{{recruit.vote_is_up}}</td>
<td>{{recruit.notes}}</td>
<td><img src="{% static 'recruits/edit.png' %}" alt="edit" width=20px ><img src="{% static 'recruits/archive.jpg' %}" alt="edit" width=40px ></td>
</tr>
{% endfor %}
</table>
{% else %}
<p>There are no recruits.</p>
{% endif %}
{% endblock %}

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

Hiding products based on customer tag Shopify search.liquid

I hope someone may be able to help with this.
I am currently setting up my store with shopify and have duplicated my products for retail and wholesale customers.
The only issue I am faced with is that the retail products are still showing when a customer with the 'wholesale' tag uses the search box.
I was wondering if I add a 'retail' tag to the relevant products, can add any code in search.liquid so that if the customer.tag contains 'wholesale' do not show products with product.tags 'retail' or something along those lines?
My current search.liquid looks like:
<!-- /templates/search.liquid -->
{% comment %}
To return only products or pages in results:
- http://docs.shopify.com/manual/configuration/store-customization/return-only-product-in-storefront-search-results
- Or manually add type=product or type=page to the search URL as a parameter
{% endcomment %}
{% comment %}
Check to enforce respond.js
{% endcomment %}
{% assign respond_js_secret_key = shop.domain | md5 %}
{% unless search.terms == respond_js_secret_key %}
{% comment %}
Avoid accessing search.results before the opening paginate tag.
If you do, the pagination of results will be broken.
{% endcomment %}
{% paginate search.results by 12 %}
<div class="grid">
<div class="grid__item">
<header class="section-header text-center">
{% if search.performed %}
{% if search.results_count == 0 %}
<h1 class="text-center">{{ 'general.search.no_results_html' | t: terms: search.terms }}</h1>
{% else %}
<h1 class="text-center">{{ 'general.search.results_for_html' | t: terms: search.terms }}</h1>
{% endif %}
{% else %}
<h1 class="text-center">{{ 'general.search.title' | t }}</h1>
{% endif %}
<hr class="hr--small">
</header>
{% include 'search-bar', search_btn_style: 'btn', search_bar_location: 'search-bar--page' %}
{% if search.performed %}
<hr class="hr--medium hr--clear">
<div class="grid-uniform">
{% for item in search.results %}
{% assign itemIswholesale = false %}
{% if item.tags contains 'wholesale' or item.title contains 'wholesale' %}
{% assign itemIswholesale = true %}
{% endif %}
{% if itemIswholesale and customer and customer.tags contains 'wholesale' %}
{% if item.object_type == 'product' %}
{% assign product = item %}
{% include 'product-grid-item' %}
{% else %}
<div>
<div>
<a href="{{ item.url }}">
<span>
<span>{{ item.title }}</span>
{{ item.content | strip_html | truncatewords: 60 }}
</span>
</a>
</div>
</div>
{% endif %}
{% else %}
{% unless itemIswholesale %}
{% if item.object_type == 'product' %}
{% assign product = item %}
{% include 'product-grid-item' %}
{% else %}
<div>
<div>
<a href="{{ item.url }}">
<span>
<span>{{ item.title }}</span>
{{ item.content | strip_html | truncatewords: 60 }}
</span>
</a>
</div>
</div>
{% endif %}
{% endunless %}
{% endif %}
{% endfor %}
</div>
{% if paginate.pages > 1 %}
{% include 'pagination' %}
{% endif %}
{% endif %}
</div>
</div>
{% endpaginate %}
{% else %}
{% include 'respond' %}
{% layout none %}
{% endunless %}
I am a complete novice and have managed to get by this far following help and tutorials online so any help would be very much appreciated.
I can't afford to subscribe to an additional app at present, such as locksmith and would really like to keep control so I can continue administration in future,
Thanks in advance,
You may try doing something like that inside the
{% if search.performed %}
condition.
First get some information about user and store it:
{% assign wholesale = false %}
{% if customer %}
{% assign customer_tags = customer.tags | split: "," %}
{% if customer_tags contains 'wholesale' %}
{% assign wholesale = true %}
{% endif %}
{% endif %}
Explanations : first you assign a false statement to the wholesale status. Then you check if it is customer ( no need to go further if user is not connected). If he is, then you check if he has a wholesale tag. If he is you assign a true statement.
Then you are able to display something different this way:
{% for result in search.results %}
{% if wholesale %}
Do something
{% else %}
Do something else
{% endif %}
{% endfor %}
Please not that you may have some issues with pagination.

Shopify Wishlist memory issue

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.

How do I shorten this liquid code?

I want to update the "New Order Notification" mail for my Shopify store with custom HTML code, but while pasting the code it simply doesn't paste 100% of it. I've contacted Shopify and they've told me there is no character limit but a file size limit of 64 or 128 kb.
The store has 18 main categories (collections). What I'm trying to do is make sure the products get sorted based on category name.
The following piece of code appears 18 times (for every category) in the custom template:
{% if verse_kantenklaar_maaltijden_salades != blank %}
<tr>
<td colspan="2">
<h2 style="margin-bottom:15px;margin-top:5px!important;font-weight:bold;">Verse kant-en-klaar maaltijden - salades</h2>
</td>
</tr>
{% for line_item_id in verse_kantenklaar_maaltijden_salades %}
{% for line_item in line_items %}
{% capture line_item_string %}{{line_item.id}}{% endcapture %}
{% if line_item_id == line_item_string %}
{% assign bonus = 'no' %}
{% for tag in line_item.product.tags %}
{% if tag == 'Bonus' %}
{% assign bonus = 'yes' %}
{% endif %}
{% endfor %}
<tr>
<td>
<img alt="" src="{{ line_item.product.featured_image | product_img_url: 'large' }}" style="width: 400px;">
</td>
<td style="text-align:left;">{{ line_item.title }} ({{ line_item.product.metafields.global.item_size }})<br>
<span style="font-size:34px;font-weight:bold;">
{% if bonus == 'yes' %}
{{ line_item.product.metafields.global.wpob | round: 2 }}
{% else %}
{{ line_item.product.metafields.global.wpo | round: 2 }}
{% endif %}
</span>
{% if bonus == 'yes' %}
<span style="font-size:18px;font-weight:bold;">BONUS</span>
{% endif %}
{% if line_item.quantity > 1 %}<span class="item_count" style="display: block;position: relative;width: 50px;text-align: center;background-color: #d14836;color: white;font-weight: 700;min-width: 80px;line-height: 40px;border-radius: 50px;">{{ line_item.quantity }}</span>{% endif %}
</td>
</tr>
{%endif%}
{% endfor %}
{% endfor %}
{% endif %}
For the full code (with 3 categories) take a look at this gist.
Is there a way to simplify (using loops) or compress this to make sure the total template stays within Shopify limits?
Or might this be caused by something else? The total code length is around 1500 lines.
For anyone interested, here's the more efficient version (thanks to Evulse):
{% assign sort_array = "" %}
{% for line_item in cart.items %}
{% for tag in line_item.product.tags %}
{% if tag == 'Tag I want second' %}
{% assign sort_array = sort_array | append: 'B:' | append: line_item.id | append: ',' %}
{% endif %}
{% if tag == 'Tag I want First' %}
{% assign sort_array = sort_array | append: 'A:' | append: line_item.id | append: ',' %}
{% endif %}
{% if tag == 'Tag I want Third' %}
{% assign sort_array = sort_array | append: 'C:' | append: line_item.id | append: ',' %}
{% endif %}
{% endfor %}
{% endfor %}
{% assign sort_array = sort_array | split: ',' | sort %}
{% for prefixed_line_item_id in sort_array %}
{% for line_item in cart.items %}
{% capture line_item_string %}{{line_item.id}}{% endcapture %}
{% assign line_item_id = prefixed_line_item_id | split: ':' | last %}
{% if line_item_id == line_item_string %}
{{line_item.product.title}}
{%endif%}
{% endfor %}
{% endfor %}