I've successfully injected a custom cart field if item.product.tags matches a certain condition. However, this field repeats for every instance of the line_item. How can I control/limit the returned field to display once if there's multiple items that match the condition?
{% for item in cart.items %}
{% if item.product.tags contains "trunkbox" %}
<label for="po_number">PO Number</label>
<input type="text" name="attributes[PO Number]" required class="required" id="po_number" value="{{ cart.attributes['PO Number'] }}" />
{% endif %}
{% endfor %}
May You are asking for a loop break to insert your custom input only once?
{% for item in cart.items %}
{% if item.product.tags contains "trunkbox" %}
<label for="po_number">PO Number</label>
<input type="text" name="attributes[PO Number]" required class="required" id="po_number" value="{{ cart.attributes['PO Number'] }}" />
{% break %}
{% endif %}
{% endfor %}
Related
I have one hidden dropdown and two variant-selector dropdowns. One dropdown is for color and the second one is for size. I want to add size data in data-size="" and color data in data-color="" in the dropdown of name=id.
<form method="post" action="/cart/add">
{% if product.variants.size > 1 %}
{% for option in product.options_with_values %}
<select class="variant-selector {{option.name}}" data-var="{{forloop.index}}">
{% if product.available %}
{% for values in option.values %}
<option value="{{values}}">{{values}}</option>
{% endfor %}
{% endif %}
</select>
{% endfor %}
<select name="id" style="display:none;" id="data{{forloop.index}}">
{% for variant in product.variants %}
{% if variant.available %}
<option data-size="" data-color="" value="{{ variant.id }}" >{{ variant.title }}</option>
{% endif %}
{% endfor %}
</select>
{% if variant.available%}
<input type="hidden" min="1" type="number" name="quantity" value="1" />
<input type="submit" value="{{ 'products.product.add_to_cart' | t }}" class="btn add-to-cart" />
{% else %}
<input type="submit" value="{{ 'products.product.sold_out' | t }}" class="btn add-to-cart" disabled="disabled">
{% endif %}
{% endif %}
</form>
As Dave B comment I don't need option.value in the loop of product.variants in Shopify. I simply add data-size="{{ variant.option1 }}" and data-color="{{ variant.option2 }}"
<select name="id" style="display:none;" id="data{{forloop.index}}">
{% for variant in product.variants %}
{% if variant.available %}
<option data-size="{{ variant.option1 }}" data-color="{{ variant.option2 }}" value="{{ variant.id }}" >{{ variant.title }}</option>
{% endif %}
{% endfor %}
</select>
First time using Liquid.. I am an old-time Vbasic programmer.
I had added some customization to our Shopify Store. I have worked out the basic details for the mechanics of the code and have it working, but I would like the items to be properly capitalized when it creates the dropbox.
{% if section.settings.show_collection_tags and section.settings.collection_tags == 'dropdown' %}
{% if collection.url.size == 0 %}
{% assign collection_url = routes.all_products_collection_url %}
{% else %}
{% assign collection_url = collection.url %}
{% endif %}
{% assign has_tags = false %}
{% capture tags_html %}
<span class="tags filter">
<label for="filter-by">{{ 'collections.general.filter_by' | t }}:</label>
<select id="filter-by" class="redirect">
<option value="{{ collection_url }}">{{ 'collections.general.all_items' | t }}</option>
{% for tag in collection.all_tags %}
{% unless BadTags contains tag %}
<option value="{{ collection_url }}/{{ tag | handle }}" {% if current_tags contains tag %}selected="selected"{% endif %}>{{ tag }}</option>
{% assign has_tags = true %}
{% endunless %}
{% endfor %}
</select>
</span>
{% endcapture %}{% if has_tags %}{{ tags_html }}{% endif %}
{% endif %}
I tried using | Capitalize following {{{ tag | handle but that didn't work.
Where am I going wrong?
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.
I wonder if is it possible to remove specific product option dropdown and display it inside a <p> tag or just a normal string? Imagine I have 3 product options:
Color
Size
Type
We all know that all those options will be displayed inside a dropdown menu. What about like I wanted to display the Size option as a normal string or text? How can we do that?
Here's an image to make it clearer.
product.liquid
<select name="id" id="ProductSelect" class="product-single__variants">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }} </option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
I just found the answer for this. I'll post it in here to help others with the same problem as I have.
In product.liquid:
<!-- product options -->
{% capture option_titles %}Size,Flavor{% endcapture %}
{% assign option_titles = option_titles | split:',' %}
{% for option in product.options %}
{% if option_titles contains option %}
{% capture option_index %}option{{ forloop.index }}{% endcapture %}
{% assign option_values = product.variants | map: option_index | uniq %}
{% if option == 'Flavor' and option_values.size > 1 %}
<label for="option">{{ option }}</label>
{{ option_values | join:', ' }}
{% elsif option_values.size == 1 %}
<label for="option">{{ option }}</label>
{{ option_values }}
{% endif %}
{% endif %}
{% endfor %}
<!-- end product options --->
You have to modify product.liquid template and instead of that drop down you have to create that as a LI or Text the you are set for that . 😃
This is for a Shopify site. Is there a way to display only certain line item properties in the cart? I have several and it looks messy so only want to display a chosen two or three.
I am assuming you have set up your line item properties similar to how it suggests on the Shopify wiki (Line Item Properties).
You will have something like this in product.liquid:
<div>
<p><label for="property1">Property 1:</label></p>
<p><input type="text" id="property1" name="properties[Property1]" /></p>
</div>
Then put this code in cart.liquid, beneath the cart item's title:
{% for p in item.properties %}
{% if p.first == 'Property2' or p.first == 'Property5' %}
{% unless p.last == blank %}
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
<br />
{% endunless %}
{% endif %}
{% endfor %}
The code above is straight from the Line Item Properties article on the Shopify wiki (section 3.1 Displaying line item properties on the cart page). I've just added the if statement on the second line to only display the properties I want:
{% for p in item.properties %}
{% if p.first == 'Property2' or p.first == 'Property5' %}
...
{% endif %}
{% endfor %}
Or, if you want to display several properties in a row (e.g. the first 3 properties), you could do it like this (without the if statement):
{% for p in item.properties limit:3 %}
...
{% endfor %}