Is there a way to link a blog post directly to a pdf, instead of going to the html page.
{% for post in site.posts %}
<li>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
<h2>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
</h2>
{{ post.excerpt }}
</li>
{% endfor %}
I want to use a different url for the post.url field so that if the user clicks on the post link he directly goes to the pdf.
You can add a custom variable in posts that needs to be linked to a document and then conditionally link to the post or to the document.
Your post
---
layout: post
title: "Post one"
docurl: assets/pdf/test.pdf
---
this the post excerpt
this is the maybe useless post body
Your posts list :
<ul>
{% for post in site.posts %}
{% if post.docurl %}
<li>{{ post.title }}</li>
{% else %}
<li>{{ post.title }}</li>
{% endif %}
{{ post.excerpt }}
{% endfor %}
</ul>
But I think that an other question arise : what about User eXperience (UX) ?
You really need to clearly indicate that your link is going to open a pdf and not a page.
Related
I'm developing a Shopify website for a client who wasn't happy with the native related products section.
I started developing a custom section where my client can choose the products to display.
The only problem is I'm having a hard time find documentation relative to the product object. Or at least not understanding it well.
In my schema I added a product setting which allows to choose the product I want:
{
"type": "product",
"label": "Produit 1",
"id": "produit_premier"
}
This works fine, but the only output I'm getting is the name of my product.
How can I achieve displaying the product image?
Thanks for your help!
When you use the input type product in Shopify it returns to your handle of the product.
You need to use the all_products object to get more information regarding the product.
Update: you can use it like
This is the settings json code:
[UPDATED - FINAL]
Finished working on this, here's the final code:
<!-- GETS PRODUCT HANDLE AND ASSIGNS TO VARIABLE -->
<div class="hidden">
{% assign product = section.settings.produit_quatrieme %}
</div>
<!-- GETS PRODUCT FIRST IMAGE + LINK -->
{% for image in all_products[product].images %}
{% if forloop.first == true %}
<a href=" {{ all_products[product].url }} ">
<img src="{{image.src | img_url:"grande"}}" />
</a>
{% endif %}
{% endfor %}
<!-- GETS PRODUCT TITLE + LINK -->
{% for title in all_products[product].title %}
{% if forloop.first == true %}
<a href=" {{ all_products[product].url }} ">
<h2 class="ProductItem__Title Heading margin-none"> {{ all_products[product].title }} </h2>
</a>
{% endif %}
{% endfor %}
Add schema code to the section blocks instead of section settings. Then you can select as many products as you want.
{% for block in section.blocks %}
{% assign product = all_products[block.settings.produit_quatrieme] %}
<a href=" {{ product.url }} ">
<img src="{{product.featured_image| img_url:"grande"}}" />
</a>
<a href=" {{ product.url }} ">
<h2 class="ProductItem__Title Heading margin-none"> {{ product.title }} </h2>
</a>
{% endfor %}
If you want to display a single product then just add section instead of block, then no need to use for loop.
I'm new to Shopify. I have 5 blog categories (using multiple blogs) and I need to find a way to show each post in its own blog category. My code is currently populating the news articles and displaying the same ones in every category. How can I rewrite my for loop to loop through each category and display the articles only related to that category.
{% for article in blogs.news.articles %}
{% assign content = article.content | split: '[/email]' %}
<li class="widget-article">
<div class="widget-image">
<a href="{{ article.url }}">
<img src="{{ article.image | article_img_url: 'original' }}" alt="">
</a>
</div><!-- /.widget-image -->
<div class="widget-content">
<h3 class="widget-title">{{ article.title }}</h3><!-- /.widget-title -->
<p>
{% if content[1] %}
{{ content[1] | strip_html | truncatewords:15 }}
{% else %}
{{ content[0] | strip_html | truncatewords:15 }}
{% endif %}
</p>
</div><!-- /.widget-content -->
</li><!-- /.widget -->
{% endfor %}
Thanks
When you write "category" do you mean collection? Are you trying to associate a blog with a collection? If that's what you are trying to do then one way is to give the blog and collection the same handle.
then you could add your code to your collection template (I'd suggest as a snippet) and the snippet would start like:
{% assign blog = blogs[collection.handle] %}
{% if blog %}
<div class='blog-wrap'>...
{% for article in blog.articles %}
I am looking to create clickable images, like clickable tabs on the blogs.liquid page that filters the page into relevant blogs categories/posts. Currently, the code below just lists the tags and filters correctly.
I have tried to assign an image to each category and while it shows, it is not clickable and therefore does not filter. My hope is to just have the image be clickable and then hide the text.
<ul>
{% for tag in blog.all_tags %}
{% if current_tags contains tag %}
<li class="{{ tag | handleize }} current">{{ tag | link_to_tag: tag }} - current tag</li>
{% else %}
<li class="{{ tag | handleize }}">{{ tag | link_to_tag: tag }}</li>
{% if tag == 'cat1' %}
<img src="#1">
{% endif %}
{% if tag == 'cat2' %}
<img src="#2">
{% endif %}
{% if tag == 'cat3' %}
<img src="#3">
{% endif %}
{% endif %}
{% endfor %}
</ul>
If any of you have any suggestions that will work on the Shopify platform I would be really grateful as I still haven't managed to work it out. I am using the Supply theme in case this is helpful.
Thanks.
Silly me, if you just use the URL link that it triggers there is no need for liquid at all... e.g just link the a normal:
<a href="www.randomsite.com/blogs/education/cat1">
It will achieve the same thing.
I'm trying to block customers tagged with "Wholesale" from the cart icon but it seems to block everybody. I've also tried to add this tag markup but won't let me add in {% include %} without giving me some type of error.
{% unless customer.tag contains 'Wholesale' %}
{% include
<li class="site-nav__item">
<a href="/cart" class="site-nav__link site-nav__link--icon cart-link js-drawer-open-right" aria-controls="CartDrawer">
<span class="icon-fallback-text">
<span class="icon icon-cart" aria-hidden="true"></span>
<span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
</span>
<span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
</a>
</li> %}
{% endunless %}
Your include usage is wrong. It is used to load only snippet files. Just remove {% include and it's corresponding %} and you're good to go.
Also it's customer.tags.
{% unless customer.tags contains 'Wholesale' %}
<li class="site-nav__item">
<a href="/cart" class="site-nav__link site-nav__link--icon cart-link js-drawer-open-right" aria-controls="CartDrawer">
<span class="icon-fallback-text">
<span class="icon icon-cart" aria-hidden="true"></span>
<span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
</span>
<span class="cart-link__bubble {% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
</a>
</li>
{% endunless %}
This should probably be a comment - but I need to include a code example...
As HymnZ has mentioned - customer.tags will only work if the customer is signed in.
If the customer is not signed in, they will be treated as a 'regular' customer.
If you want to hide the cart button until any type of customer is logged in - you'd need to wrap everything in an {% if customer %}
Then, if you wish to check if the customer is wholesale, you'd use
{% unless customer.tags contains 'Wholesale' %}
So to put it all together:
{% if customer %}
{% comment %} Customer is logged in. {% endcomment %}
{% unless customer.tags contains 'Wholesale' %}
<li class="site-nav__item">
<a href="/cart" class="site-nav__link site-nav__link--icon cart-link js-drawer-open-right" aria-controls="CartDrawer">
<span class="icon-fallback-text">
<span class="icon icon-cart" aria-hidden="true"></span>
<span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
</span>
<span class="cart-link__bubble {% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
</a>
</li>
{% endunless %}
{% endif %}
* Edit *
Following on from Gino's comment:
It seems there are some inconsistencies with how Shopify handles tags. My first thought was case sensitivity, however, I couldn't quite remember if tags were case sensitive.
So I logged into my store - and tried to add 'Test' and 'test'.
Once I had added 'Test' - it appeared as 'Test', but I couldn't add 'test' - as Shopify regarded 'Test' and 'test' as the same (case insensitive).
However, in the ui - it showed 'Test' (case sensitive) - which threw me into thinking it is case sensitive (it was nearly 3am when I answered)
A quick google, I found this post from Tobi Lutke - the chap who wrote Shopify https://ecommerce.shopify.com/c/shopify-discussion/t/tag-use-6631 - please see the last comment: "Tags are always downcased automatically." ......
So of course - if the tag is downcased automatically, and you're checking against the string 'Wholesale' it won't work.
I am trying to create a navigation bar in the sidebar dynamically. I used the following code:
<ul>{% for collection in collections %}
{%if collection.title != 'Frontpage' %}
<li class="abcdef"><span class="heading">{{ collection.title | link_to: collection.url }}</span></li>
<ul>
{% for tag in collection.tags %}
<li> {{ tag }} </li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}
</ul>
It was working fine for me but with one exception that my tags must not include spaces. But I have some tags with images. Can you guys, tell me how to do that so, that i can even include space without any interuption?
I think you want to be using the link_to_tag filter.
See: Link To Tag on the Shopify Wiki. In your situation, a solution could be:
{% for tag in collection.tags %}
<li> {{ tag }} </li>
{% endfor %}