I am trying to create a single link (inside a snippit) that will link to any given page but I can't figure out how to do it. I am using this general structure:
{{ 'Link Text' | link_to: X }}
I don't know what the parameter for x should be to access page/product on my site. Appreciate any help.
From: http://wiki.shopify.com/Link_to
{{ 'Typo' | link_to: 'http://typo.leetsoft.com' }}
This should create a link that looks like:
Typo
More info on links in liquid here: http://wiki.shopify.com/Link
Update 1:
You should also be able to use relative links:
{{ 'Typo' | link_to: 'pages/home' }} <!-- relative to current page -->
{{ 'Typo' | link_to: '/pages/home' }} <!-- relative to site root -->
{{ 'Typo' | link_to: '../pages/home' }} <!-- relative to parent dir -->
Update 2:
Ore better yet, you can reference the page's handle: {{ 'Title' | pages.pagehandle.url }}
http://wiki.shopify.com/Pages
http://wiki.shopify.com/Page
Related
From the Bootstrap Vue table documentation it is possible to render data customized.
https://bootstrap-vue.org/docs/components/table#scoped-field-slots
The example shows the following template:
<template v-slot:cell(index)="data">
{{ data.index + 1 }}
</template>
I'm using PUG as a template language and I'm having some trouble with its syntax. I didn't find the correct way to "translate" the above example to PUG syntax.
This doesn't work because of the colon:
template(v-slot:cell(index)="data") {{ data.index + 1 }}
Also this does not seem to be correct:
template(v-slot(cell(index)="data")) {{ data.index + 1 }}
Update #1
This is my field definition:
fields: [
"index",
{
key: "name",
label: this.$t("document.name"),
sortable: true
}
]
And this is the template:
b-table#filesList(
v-if="list.length > 0"
:items="list"
:fields="fields"
stacked="md"
striped
responsive
)
template(v-slot:cell(index)="data") {{ data.index + 1 }}
This only shows an empty "Index" column. If I change the template to the deprected slot and slot-scope synctax it's working:
template(slot="index" slot-scope="data") {{ data.index + 1 }}
Here's the pug "translation" of the code example in the link you provided.
I haven't used pug before, but the code below looks like it's working in this codepen.
Since you need virtual fields, you need to provide a fields array to the fields prop on b-table. That includes all the fields you want to show.
b-table(small, :fields="fields", :items="items", responsive="sm")
template(v-slot:cell(index)="data") {{ data.index + 1 }}
template(v-slot:cell(name)="data")
b.text-info {{ data.value.last.toUpperCase() }},
b {{ data.value.first }}
template(v-slot:cell(nameage)="data") {{ data.item.name.first }} is {{ data.item.age }} years old
template(v-slot:cell()="data")
i {{ data.value }}
Update
The above syntax requires Bootstrap version 2.0.0 and up.
The table slot naming for 2.0.0-rc.28 (and ONLY this version). was [field], HEAD[field] and FOOT[field].
In version 2.0.0-rc.27 and below it's field, HEAD_field, FOOT_field.
If you're using a version below that, i would suggest you update if you can, to get the latest features and fixes. But if you can't, you can instead clone the github repo and generate the documentation for the version you're using. This will allow you to see what is available at the time, and avoid future confusion.
There is a fb pixel still imbedded in the header of my shopify store. using the facebook pixel helper it says I still have a fb pixel in my header. I looked into it and saw it is in my {{ content_for_header }}.
I have tried .remove() and | remove: and I still have the fb pixel in the header of my theme.liquid
You can't use replace or remove filter on content_for_header
It's not recommended to modify the content_for_header but, I will show you how to modify it.
First, comment it
{%- comment -%}
{{ content_for_header }}
{%- endcomment -%}
This will let you update the file with theme watch
Second, Use capture for custom content_for_header
{% capture custom_content_for_header %}
{{ content_for_header | replace: 'your-text-to-be-replaced', 'new-text'
{% endcapture %}
Last, print your custom content for header
{{ custom_content_for_header }}
You can remove or replace strings like below
Replace
{{ content_for_header | replace: 'string to be replaced', 'inserted' }}
To remove
{{ content_for_header | remove: '' }}
Otherwise you can't really edit {{ content_for_header }}
I'm building a nuxt onepager that is feeded with content from the Wordpress Rest Api.
I'm already getting the Wordpress menu structure and every menu item is stored in {{ item.title }}. To scroll later to the requested div with it's id {{ item.title }} i want to complete the {{ item.title }} with a #.
My idea so far is:
<nuxt-link to="'#'{item.title}'" exact class="nav-link">{{ item.title }}</nuxt-link>
You could bind it as follows :
<nuxt-link :to="'#'+item.title" exact class="nav-link">{{ item.title }}</nuxt-link>
I have a j2 file that i want to edit and copy to my remote server (as apart of my ansible play). The file has several 3 variables indicated by braces {{ }}. How can I only target the 2nd variable named {{ bar }} and ignore the other 2 in the file so they're left alone and copied to my remote server? For example, my test.j2 file contains:
line 1 {{ foo }}
line 2 {{ bar }}
line 3 {{ foo2 }}
Can I explicitly address {{ bar }} variable in my ansible playbook? If so, how would i write it (syntactically) in my ansible playbook?
What follows isn't something I would recommend, but if you need to template only bar and nothing else (or if bar is always templated first before the rest), you can probably use the {% raw %} block:
{% raw %}line 1 {{ foo }}{% endraw %}
line 2 {{ bar }}
{% raw %}line 3 {{ foo2 }}{% endraw %}
Basically the idea is to mark non-bar variables as raw so that jinja doesn't template them.
yet another alternative:
line 1 {{ '{{foo}}' }}
line 2 {{ bar }}
line 3 {{ '{{foo2}}' }}
You can use the {% raw %} block as #bow mentions or there's also a shorthand for smaller chunks of code, it's shorter but not necessarily more readable than just using a raw block.
line 1 {{ '{{' }} foo {{ '}}' }}
line 2 {{ bar }}
line 3 {{ '{{' }} foo {{ '}}' }}
http://jinja.pocoo.org/docs/2.9/templates/#escaping
I successfully implemented a slider that shows different content on each page of a Shopify store. Out of the five pages where I would like to put unique content (an about page, a blog feed, another manually added static content page, the homepage, and the catalog page), I can't provide unique content for the homepage and the catalog page because I can't reference them in liquid.
I created a test snippet to show all potentially useful variables in order to discover a means of referencing my pages in a conditional:
<div class="grid__item__nm--wrap">
<span><h1>THIS IS WHAT THE PAGE HANDLE IS:</h1> {{ page.handle }}</span>
<span><h1>THIS IS WHAT THE PAGE TITLE IS:</h1> {{ page.title }}</span>
<span><h1>THIS IS WHAT THE PAGE TEMPLATE SUFFIX IS:</h1> {{ page.template_suffix }}</span>
<span><h1>THIS IS WHAT THE PAGE ID IS:</h1> {{ page.id }}</span>
</div>
(Note: The above snippet works fine and doesn't need troubleshooting. I post it as a succinct way to demonstrate what I'm doing.)
Including this snippet in theme.liquid works for all the pages I added to the navigation and for the "About Us" page, showing the different propertiers. However, nothing is output for any of the properties on the homepage or the catalog page.
The best I can do is to show the same content on the homepage and catalog page through the "else" case. This is not good enough. I want different content for the homepage and catalog page. In fact, ideally I would like to exclude the catalog page (but not the homepage) from the inclusion of the snippet that generates the slider. I don't know how to do either of those things without having any properties to use for referencing the catalog page.
According to Shopify schema, a page is something with the url as follow - //mystorelink.com/pages/page-handle . So when you use {{ page.title }} it will display the page title only when the url is in the above format.
Don't confuse between a "Shopify page" and a "webpage" for both are completely different.
A Shopify page is a template while a webpage is a normal html page. In order for your requirement refer to following link types and templates
/ or //myshoplink.com -> index.liquid -> {{ page_title }} & {{ page_description }}
/collections/xyz -> collection.liquid -> {{ collection.title }} & {{ collection.description }}
/products/xyz or /collections/abc/products/xyz -> product.liquid -> {{ product.title }} & {{ product.description }}
/pages/xyz -> page.liquid -> {{ page.title }} & {{ page.description }}
etc similarly for other templates.
P.S. You can have multiple product/collection/pages etc. templates using suffix values, but {{ <template>.title }} remains the same
P.P.S. If nothing is to be changed you can plainly use {{ page_title }} and {{ page_description }} everywhere. It defaults to the template currently in use.
For the benefit of anyone else, here is a more comprehensive testing snippet for finding identifiers to use in Liquid conditionals, based on the accepted answer:
<div class="grid__item__nm--wrap">
<span><h1>THIS IS WHAT THE SHOPIFY PAGE TITLE IS:</h1> {{ page.title }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY PAGE HANDLE IS:</h1> {{ page.handle }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY PAGE TEMPLATE SUFFIX IS:</h1> {{ page.template_suffix }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY PAGE ID IS:</h1> {{ page.id }}</span>
<span><h1>THIS IS WHAT THE RENDERED PAGE TITLE:</h1> {{ page_title }}</span>
<span><h1>THIS IS WHAT THE RENDERED PAGE META DESCRIPTION IS:</h1> {{ page_description }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY COLLECTION TITLE IS:</h1> {{ collection.title }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY COLLECTION HANDLE IS:</h1> {{ collection.handle }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY COLLECTION ID IS:</h1> {{ collection.id }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY COLLECTION DESCRIPTION IS:</h1> {{ collection.description }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY PRODUCT TITLE IS:</h1> {{ product.title }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY PRODUCT HANDLE IS:</h1> {{ product.handle }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY PRODUCT ID IS:</h1> {{ product.id }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY PRODUCT DESCRIPTION IS:</h1> {{ product.description }}</span>
</div>