On a store im working on, when you follow a link to a specific variant (/products/the-product?variant=12345678901) the image on the product page is the featured image of the product. It needs to be the variant image of the selected variant.
How do I go about doing this? I've tried editing product.liquid to:
{% assign featured_image = product.selected_or_first_available_variant.featured_image %}
{% assign featured_image = variant.image %}
but neither work.
How should I do this?
The proper way to target this is the following.
{% assign featured_image = product.selected_or_first_available_variant.image | img_url: 'master' %}
Refer to the Variant Object documentation: https://help.shopify.com/themes/liquid/objects/variant
Related
I have a dynamic dropbox using jinja loop. As part of the condition, I want to use a value from another dropbox. For this, I am setting up a global variable using scenario_id = $('#scenario').val(); in an onchange function for the other combo. It works ok. I also show it on the page.
However, when I use scenario_id as part of the if statement, it does not work. It does not use the correct value. It is potentially null ( I am not sure).
So, the below code does not create a correct select field. If I replace the scenario_id with a static known id, it works okay for that selected scenario.
Can you please help me to be able to use dynamic value here?
Kind Regards,
Sofia
<SELECT name="source1" id="source1">
{% for node in allowed_values_nodes %}
{% if node[0]==edge.source_id and node[2]== scenario_id%}
<OPTION value = {{node[0]}} selected>{{node[1]}}</option>
{% endif %}
{% if node[0]!=edge.source_id and node[2]== scenario_id%}
<OPTION value = {{node[0]}}>{{node[1]}}</option>
{% endif %}
{% endfor %}
</SELECT>
I added the code already.
I want to create a simple list of every article URL in my blog (I have >150).
My current code:
{% for article in blogs['myblog'].articles %}
{{article.url}}
{% endfor %}
The problem is that it only outputs 50 URLs, as per the standard Shopify pagination limit. How could I overcome this? Any solutions using Ajax or otherwise would be highly appreciated.
You can overwrite the pagination limit simply by wrapping the call with the pagination tag and passing the number you want to paginate.
{% paginate blogs['myblog'].articles by 999 %}
{% for article in blogs['myblog'].articles %}
{{article.url}}
{% endfor %}
{% endpaginate %}
PS: Please note that the more articles you have the longer it will take for the DOM to load.
I am sure every Shopify newbie eventually gets to this point. On the Product page I need the Description to change when the Variant changes. In other words, if the customer chooses "A - Grade" from the Condition pull-down I need the Description to change to a Grade A Description. Same with grade B and C.
if customer chooses Grade A
change product description
I achieved this already by putting an IF statement in the Shopify->Sections->product-template.liquid. However, this solution requires a screen refresh which does not look good to the customer. Makes the page look broken.
{% if product.selected_variant.option1 == "A - Grade" %}
<B>A-GRADE</B>: Very light use, if any, ...
{% endif %}
{% if product.selected_variant.option1 == "B - Grade" %}
<B>B-GRADE</B>: Normal use, no dings or dents...
{% endif %}
{% if product.selected_variant.option1 == "C - Grade" %}
<B>C-GRADE</B>: Medium to heavy use, might ...
{% endif %}
Again, this requires a page-refresh. Even if you code the refresh to happen automatically it still looks bad especially if the customer is on a slower connection.
There is already some code in the themes.js that changes the price and image when you select a new varriant:
this.$container.on('variantChange' + this.settings.namespace, this._updateAddToCart.bind(this));
this.$container.on('variantImageChange' + this.settings.namespace, this._updateImages.bind(this));
this.$container.on('variantPriceChange' + this.settings.namespace, this._updatePrice.bind(this));
this.$container.on('variantSKUChange' + this.settings.namespace, this._updateSKU.bind(this));
I do not know any javascript so I am lost. Can't we just copy the existing variantPriceChange function and change it into a variantDescriptionChange?
I am setting up Paypal on a website and am using liquid to pull the cart value into the Paypal JS.
I have achieved this with the following code:
{% capture paypal_price %}
{%- include 'ecommerce/price_total', format_type: 'formatted' -%}
{% endcapture %}
and
value: "{{ paypal_price | remove:'£' }}"
Functionally it pull through the correct price but as you can see from the image below and error occurs as it pushes it down onto a new line.
Liquid Issue in Console
Is this a known issue and does anyone have a fix for this?
The following amendment to the Liquid fixed it :)
{{ paypal_price | remove:'£' | strip_newlines }}
I want to create a list which is clickable and which would allow me to take a survey when I click it.
{% extends "layout.html" %}
{% block title %}
Take Survey
{% endblock %}
{% block main %}
<div class="list-group">
{ for search in searches }
{{search.topic}}
{ endfor }
</div>
{% endblock %}
When I click it I want it to go to a page which shows the questions of the survey whose topic was being shown.
I have created SQL tables for users,surveys,questions and options. Surveys are linked to users, questions are linked to surveys and options are linked to questions.
I just need a way to access the survey id({{search.id}}) in my take route where I could run a SQL query using the survey id to link everything.
Just a disclaimer, I am a beginner in HTML so please try to explain elaborately.
There are multiple ways that you can do this with html, here are a few of them
create a hidden input with the value that u need, and later when u need it retrieve it from that input
<input type="hidden" id="searchId" name="searchId" value="3487">
add a custom attribute to an element, and later when needed retrieve it from that element
<div class="list-group">
{ for search in searches }
{{search.topic}} data-search-id="{{search.id}}"
{ endfor }
</div>
There are also multiple ways you can do this without html
insert a script that has the search id, and later retrieve that id from javascript
{% block main %}
<div class="list-group">
{ for search in searches }
{{search.topic}}
{ endfor }
<script>
// just make sure that this variable is unique, so u dont cause errors or overwrite another variable by mistake
const MY_APP_SEARCH_ID ={{search.id}}
</script>
</div>
{% endblock %}
You could also generate a unique url for each survey
{{search.topic}}
and then handle that search id from the \take endpoint