I am wondering if there is a way to get the full URL using only liquid (Shopify templating language). I know there are the below provided but none of them (even combined) seem to achieve it. It can be done with javascript using window.location.href, but I am wondering if there is a liquid-only method. For my use having to combine javascript in with my liquid makes it become a lot more complicated, hence my question.
{{ page.url }}
{{ shop.url }}
{{ shop.domain }}
{{ collection.url }}
{{ product.url }}
{{ blog.url }}
{{ article.url }}
{{ article.comment_post_url }}
{{ canonical_url }}
For instance, if my URL was www.website.com/blogs/myblog/tagged/?123 and I wanted the entire URL, including the ?123. The answer may be no, but this would seem pretty daft given they have all of the below options but not simply one for the entire URL. In my case I am going directly to the URL in the form of a href, so it is not a problem that liquid is only being applied on page load.
Here is the one of odd method to get the values from the query string of URL, but it comes with some coding working, you can it using this link
Related
I want to inject some custom liquid in my abandoned cart email on Shopify. Shopify has docs here saying the product_title can be found under line_items under abandoned_cart.
I naturally assume you can get the product_title with something akin to...
<p>You left {{ abandoned_checkout.line_items[0].product_title }} in your cart.</p>
But this doesn't work. What's the proper way to get the product name of the first item?
If you are working with email template for "Abandoned checkout" in notification settings, this should work:
{{ subtotal_line_items[0].product.title }}
Loop code:
{% for line in subtotal_line_items %}
{{ line.product.title }}
{% endfor %}
And here is some useful documentation here:
https://help.shopify.com/en/manual/orders/notifications/email-variables#line-item
All products for the abandoned cart will keep here: subtotal_line_items and you should operate with the Product object. So in the your case it should be:
<p>You left {{ subtotal_line_items[0].product.title }} in your cart.</p>
This seems like it so be such a simple one but for whatever reason I can't see the forest for trees. So I have the current situation in Screenshot 1 where I have set three different variants for a product. The products are size based as ML...but for some reason all 3 variants are showing on the button instead of the one thats selected.
The code I use to pull this out currently is:
{% if current_variant.available %}
<button type="submit" name="add" class="border--none">
<span class="display--block padding--1 palette--background-color--green palette--color--white text-transform--uppercase letter-spacing--2px font-size--15px palette--color--white">
add to bag |
<strong>
{% for variant in product.variants %}
{{ variant.price | money_without_trailing_zeros }}
{% endfor %}
</strong>
</span>
</button>
{% else %}
What you are trying to achieve is not possible with Liquid only. Liquid is just a templating language that is rendered at server side. It does not update on client side.
You want to display the price in button only for the selected variant, but Liquid has no information about that on server side and you just loop through the prices of all available variants. Hence, you see all prices in your button.
To fix this, use the first available or selected variant price using Liquid and update rest using JavaScript at client-side.
Returns the variant object of the currently-selected variant if there
is a valid ?variant= query parameter in the URL. If there is no
selected variant, the first available variant is returned.
Doing so, your code will be like
<button type="submit" name="add" class="border--none">
<span class="display--block padding--1 palette--background-color--green palette--color--white text-transform--uppercase letter-spacing--2px font-size--15px palette--color--white">
add to bag |
<strong>
{{ product.selected_or_first_available_variant.price | money_without_trailing_zeros }}
</strong>
</span>
</button>
Then change price via JavaScript on variant change, that is dependent on your theme.
More information on Selected or First Available Variant
In the "product.liquid" template, I want to expose all the metafields to my javascript code. Right now I have a namespace called "mystuff", so I did this...
// Copy all the METAFIELDS into the meta object
let meta = {
global: {{ product.metafields.global | json }},
mystuff: {{ product.metafields.mystuff | json }}
};
and this works. However, it requires me to know in advance all the namespaces and list them one per line. Can I get the list of namespaces programmatically, like this?
let meta = {
{% for ns in product.metafields.namespaces %}
{{ ns.name }} : {{ ns | json }},
{% endfor %}
};
I tried, but this does not work. Is there a way to do it?
Step back one level and iterate just Metafields, and you might be able to see the ones you are allowed to see. I believe as App developers we can finally hide our own Metafield namespaces from prying eyes, so YMMV here.
Note that your code trying to turn this result into JSON is not recommended either. Instead, get the namespace Metafields, iterate them, and each will have a type, key and value. You get JSON values too in some fields.
There seems to be some magic happening here for {{ settings[a_prop] }} on a product page. It seems that {{ settings[a_prop] }} is equivalent to the property a_prop_productname in my settings.html (instead of a_prop, which makes more sense to me). This is all happening in my theme's product.liquid.
Can anyone explain where productname is getting pulled from? Also, normally liquid uses dot notation for settings... why do brackets work here? I can't find any examples anywhere on the internet.
https://docs.shopify.com/themes/liquid-documentation/basics/handle#handles-created
Shopify will automatically create handle based on the product/page/whatever title you provide.
https://docs.shopify.com/themes/liquid-documentation/basics/handle#attributes-handle
You can do both {{ obj[attr] }} or {{ obj.attr }} to access an object attribute.
{{ obj[attr] }} means "access the property on obj with the value of the variable attr" and {{ obj.attr }} means "access the property attr on obj".
I have some items in my shopify store that have similar themed items that compliment it well.
I know I could just add an <a href link in there, but I'd like to do something that is actually part of liquid, and would also be easier for my non-programmer partner (who also has the authority to make me sleep on the couch :-( ...) to add these links. Is there a way to add a link using the liquid formatting? Something like This would go great with ${items.ellington-coffee-table-set}!?
It would be great to be able to access a product like this collections.my-collection-handle.products.my-product-handle, but unfortunately it is not possible to get a product by its handle in liquid.
You would have to loop through the collection to find the product like this:
{% for product in collections.my-collection-handle.products %}
{% if product.handle == 'my-product-handle' %}
{{ 'my product' | link_to: product.url }}
{% endif %}
{% endfor %}
But that looks pretty messy if all you want is a link to the product, and you still have to hard-code the product's handle. This would be simpler:
{{ 'my product' | link_to: '/products/my-product-handle' }}
Still not ideal, but probably a better alternative than coding an <a href=... link manually.