{% assign price = product.price | money %}
{% capture dot_separator %} <span class='Button__SeparatorDot'></span> {% endcapture %}
{% capture addToCartText %} ADD TO CART {{ dot_separator }} {{ product_price_formatted }} {% endcapture %}
{{ addToCartText }}
My goal is to show the "addToCartText" text this way
Goal: ADD TO CART . 287$
Where the dot is created using css
Right now it's showing like this
Current output: ADD TO CART < span class='Button__SeparatorDot'></ span> 287$
How would I tell liquid to read the html as it is?
Try to use strip_html filter https://shopify.github.io/liquid/filters/strip_html/
like so:
{% capture dot_separator %} < span class='Button__SeparatorDot'></ span> {% endcapture %}
{% capture addToCartText %} ADD TO CART {{ dot_separator | strip_html }} {{ product_price_formatted }} {% endcapture %}
{{ addToCartText }}
Related
I am working a shopify shop but not trying to sell products but rather appointments.
I am using a shopify extension called Sesami to do so.
In the customer/account.liquid page I want to show the next coming appointment (or appointments) and a different information to people who don't have any future appointment coming.
I have been trying to do this with the following code :
{% if customer.orders != blank %}
{% for order in customer.orders %}
{%- for line_item in order.line_items -%}
{% for property in line_item.properties limit:1 %}
{% assign today_date = 'now' | date: '%s' %}
{% assign pre_date = property.last | date: '%s' %}
{% if pre_date >= today_date %}
{{ line_item.product.title | link_to: line_item.product.url }}
{% for property in line_item.properties limit:1 %}
{% if property != blank %}
{{ property.last | date: format: 'abbreviated_date' }}
{{ 'customer.orders.at' | t }}
{% endif %}
{%- endfor -%}
{% for property in line_item.properties offset:1 %}
{{ property.last }}
{%- endfor -%}
{{ line_item.image | img_url: 'small' | img_tag }}
{{ order.fulfillment_status_label }}
{% endif %}
{% endfor %}
{%- endfor -%}
{% endfor %}
{% else %}
Content for people with no booking at all
{% endif %}
But the problem is that the forloop stays open and therefore shows the content I am hoping to display to people with no upcoming appointment multiple times based on the total number of past appointments.
I imagine there is a much simpler way to do this and am hoping you can help me find it !
Thanks a lot,
Julien
Consider using {% break %} when you'd like the loop to stop it's current iteration.
https://shopify.github.io/liquid/tags/iteration/#break
I'm trying to get a Shopify collection page to display different .js embeds on a specific part of the page, depending on the URL of the current page.
Can this be done using {% if page.url == %} if so, how would I have variants of page URLs and specific embed codes?
The page URL looks like this:
https://www.example.com/collections/technology/technology-connected-home
The embed code looks like this:
<script type="text/javascript" src="https://apps.example.com/app/js/18218989163.js"></script>```
Each Shopify store has different types of pages: index (aka home), product, collection, page, blog, article, and cart. Here is the full list of page types.
So, this page.url will only work on a page object of type page for all other types you need to use the proper page object to get the url:
collection.url
product.url
etc...
In your case I'd suggest using case/when, add your logic in a snippet and render it in theme.liquid.
Here is an example:
{% if request.page_type == 'page' %}
{% case page.url %}
{% when '/pages/about-us' %}
{{ 'pages__about-us.js' | script_tag }}
{% when '/pages/contact-us' %}
{{ 'pages__contact-us.js' | script_tag }}
{% else %}
{{ 'pages__generic.js' | script_tag }}
{% endcase %}
{% endif %}
ref
You gonna have to check for request.page_type before creating your case/when or another approach would be to check the type at the top of the snippet, like:
{% comment %} Set page object type {% endcomment %}
{% case request.page_type %}
{% when 'page' %}
{% assign page_object = page %}
{% when 'collection' %}
{% assign page_object = collection %}
{% when 'product' %}
{% assign page_object = product %}
{% endcase %}
{% comment %} Load JS based on page URL{% endcomment %}
{% case page_object.url %}
{% when '/pages/about-us' %}
{{ 'pages__about-us.js' | script_tag }}
{% when '/pages/contact-us' %}
{{ 'pages__contact-us.js' | script_tag }}
{% else %}
{{ 'pages__generic.js' | script_tag }}
{% endcase %}
This isn't a bulletproof solution, however it should be enough for you to build on top of it.
Good luck!
I recommend using page.handle and identifying the handle. I do not believe page.url will do what you need
You can also try this as handle can never be changed.
{% case page.handle %}
{% when 'about-us' %}
{{ 'pages_about-us.js' | script_tag }}
{% when 'contact-us' %}
{{ 'pages_contact-us.js' | script_tag }}
{% else %}
{{ 'pages_generic.js' | script_tag }}
{% endcase %}
I am building a theme and require the links to the log in / log out / register pages but don't want the classic shortcode. I simply want the URL nothing else.
How are these urls called without the anchor tags?
Classic shortcode:
{% if shop.customer_accounts_enabled %}
{% if customer %}
My Account
{{ 'Log Out' | customer_logout_link }}
{% else %}
{{ 'Log In ' | customer_login_link }}
{{ 'Register' | customer_register_link }}
{% endif %}
{% endif %}
Required format:
{{ customer_logout_link_url }}
{{ customer_login_link_url }}
{{ customer_register_link_url }}
As far as I know, this isn't possible. The docs don't offer a way to do it.
Depending on why you want to do this, though, there is an alternative. This answer shows how you can add custom classes to the generated link, if that's what you need to do. A simpler version of it looks like:
{{ "Log Me Out!" | customer_logout_link | replace: '<a', '<a class="button button--primary"' }}
You can capture whatever is echoed as a link, then use that variable instead:
{% capture customer_logout_link_url %}{{ 'Log Out' | customer_logout_link }}{% endcapture %}
{% capture customer_login_link_url %}{{ 'Log In ' | customer_login_link }}{% endcapture %}
{% capture customer_register_link_url %}{{ 'Register' | customer_register_link }}{% endcapture %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
My Account
{{ customer_logout_link_url }}
{% else %}
{{ customer_login_link_url }}
{{ customer_register_link_url }}
{% endif %}
{% endif %}
i want to do something like this in Shopify:
{% for i in (0..10) %}
{% capture slide %}slide{{i}}{% endcapture %}
{{ settings.slide }}//i need the value of this one
// i want to get the values for settings.slide1, settings.slide2 etc
{% endfor %}
Another example:
{% for i in (0..10) %}
{{ settings.slide[i] }}//i need the value of this one
{% endfor %}
This is a simplified version of what im trying to achieve.
Thanks
Try this:
{% for i in (0..10) %}
{% assign current_slide = 'slide' | append: i %}
{{ settings[current_slide] }}
{% endfor %}
I'd like to be able to display the text "Showing 1-24 of 242 products" (or "Showing 25-48 of 242 products" etc.) on each collection page of a Shopify site.
I thought there'd be a simple bit of Liquid code to do this but either my Google-foo is very weak, or it doesn't exist.
Does anyone have a snippet of code they can share to achieve this?
Your Google-foo somehow missed the obvious, which is a search of the Shopify documentation on how Shopify works. Try this for the answer to your question:
Pagination
We have this:
{% if collection.products.size > 0 %}
<span><h1 class="title">{{collection.title}}</h1></span> {% if current_tags %}>> {{ current_tags.first }}{% endif %} {{tag}} ({{ paginate.current_offset | plus: 1 }} -
{% if paginate.next %}
{{ paginate.current_offset | plus: paginate.page_size }}
{% else %}
{{ paginate.items }}
{% endif %} of {{ paginate.items }})
{% if collection.description.size > 0 %}
<p>{{ collection.description }}</p>
{% endif %}
{% else %}
<h1>{{collection.title}}</h1> <span>{{tag}} (0 results)</span>
{% endif %}
Check the official Pagination Shopify Docs.
The following piece of code:
Showing items {{ paginate.current_offset | plus: 1 }}-{% if paginate.next %}{{ paginate.current_offset | plus: paginate.page_size }}{% else %}{{ paginate.items }}{% endif %} of {{ paginate.items }}.
to output something like this:
Showing items 26-50 of 345.