I'd like to get a certain menu to display in the header on my product page instead of site-wide.
my theme.liquid file has the {% section 'header' %} tag within the <body> so my header is showing fine on all pages as expected.
the sections/header.liquid has the following schema:
{% schema %}
{
"name": "Header",
"settings": [
{
"type": "link_list",
"id": "menu",
"default": "main-menu",
"label": "Heading Navigation Menu"
}
]
}
{% endschema %}
I thought when you go into the theme editor on Shopify that you'd be able to individually select what shows up in the in menu part of my 'Heading Navigation Menu' section per page (Home, Collections, Blog, etc.), but at this point it's static. Ideally I'd be able to go in there and select a different menu I create in the Navigation setting for certain pages.
I ended up handling this with a switch statement and the template object.
In my navigation bar in my sections/header.liquid I created the switch statement:
<nav>
<ul>
{% case template.name %}
{% when 'article' %}
<li>
Show that
</li>
{% when 'cart' or 'blog' or 'product' %}
<li>
Show that and this
</li>
{% else %}
<li>
Show this
</li>
{% endcase %}
</ul>
</nav>
You can put whatever element you like inside of the individual cases and it will check whatever your template name is to put display that element.
Shopify documentation for both:
template object
switch statement
Not sure if this is the most effective way to do this, but hope this helps anyone trying to accomplish something similar.
Related
I am attempting to add a product meta fields in a quick view product option on my product collection,
Here is the code I am using, the meta field in the tag is not working
{%- if collection.title == "vluevlockers" -%}
<div class="sizing-text">
<h2 class="help-text">sizing information of the frames</h2>
<p>{{ product.metafields.custom.frames_set_blueblocker }}</p>
<div class="bold_options"> </div>
</div>
{%- endif -%}
When I try to console.log the meta field it gives me null, But the same meta field is working fine on the single product page.
I have an issue with a block I am editing for a client of mine in which they want to have a page popup within a section. The page selection is working great, styling is looking great however the selected page is duplicating across all the blocks within the section.
For example, the section itself is called 'Slideshow With Text', this section has blocks which contain an image, some text, a button and now this page popup and it just scrolls through each block. When I add a page to the first block, it works exactly how intended. However, when I add a page to the second block, it ignores my chosen page and uses the page selected in the first block.
Here is my code for reference:
Schema - last setting in block.
{
"type": "page",
"id": "page_popup",
"label": "Page Popup"
},
{
"type": "text",
"id": "page_popup_text",
"label": "Page Popup Text",
"default": "Page Pop Up Text"
}
Liquid - to display block within the other block elements.
{% if block.settings.page_popup != blank %}
<div>
{{ block.settings.page_popup_text }} {% render 'icon', name: 'right-caret' %}
<div class="page-popup" id="pagepopup">
<div class="page-popup-wrap content container {% if settings.table_styles_enabled %} table is-striped is-bordered {% endif %}">
<div class="one-whole column">
<h5 class="center">{{ pages[block.settings.page_popup].title }}</h5>
<div class="feature_divider"></div>
{{ pages[block.settings.page_popup].content }}
</div>
</div>
</div>
</div>
{% endif %}
I'm presuming I am getting this issue as 'page_popup' is storing for the entire section and not on a per block basis however, I'm not sure how to separate this.
Any ideas would be appreciated.
Luke
What I want to do:
Capture two variables {{section.settings.{{title}}_modal_title}}
Context:
The links in the linklist are not really used as links, but purely so user can reorganize it in their Shopify portal.
External javascript file creates elements (modals) on click event, value from section.settings.XXX_modal_title is supposed to be used in the created modals.
The linklist:
<ul class="menu">
{% for link in linklists.main-menu.links %}
<li data-menu="{{ link.title | upcase }}" class="menu-link">
<p class="menu-title">[{{ link.title | upcase }}]</p> <-- Click event
</li>
{% endfor %}
</ul>
What I tried:
My first try was adding the liquid tag itself with .insertAdjacentHTML('afterbegin', {{section.settings.${attLowerCase}_modal_title}}) when the element is created, but soon realized that liquid renders the values first. The output of doing this is literally "{{ }}"
My second try was to capture two variables and put it in a hidden input.
{% assign title = link.title | downcase %}
{% capture section_title_variable %}
{{section.settings.{{title}}_modal_settings}}
{% endcapture %}
<hr class="item-line">
<p class="ueq-menu-title">[{{ link.title | upcase }}]</p>
<input type="hidden" id="about_modal_title" value="{{section_title_variable}}">
In depth example:
section.settings
{
"type": "text",
"id": "about_modal_title",
"label": "About window title",
"default": "ABOUT"
},
User clicks on link ABOUT
<ul class="menu">
{% for link in linklists.ueq-menu.links %}
<li data-menu="{{ link.title | upcase }}" class="menu-link"> <-- "ABOUT"
{% assign title = link.title | downcase %} <-- downcase to "about"
{% capture section_title_variable %}
{{section.settings.{{title}}_modal_title}}
{% endcapture %}
<hr class="item-line">
<p class="menu-title">[{{ link.title | upcase }}]</p>
<input type="hidden" id="about_modal_title" value="{{section_title_variable}}"> <-- captured should look like this {{section.settings.about_modal_title}}
</li>
{% endfor %}
</ul>
on click event, get the value from hidden input, and use it when creating elements.
"Why not use {% javascript %}?"
I prefer to do it this way, since most of my script files are external. I like to keep it that way.
"Why capture it like that?"
The links in the linklist are already known, this was in the design. Thats why in sechema one of them is called "about_modal_title". Since this is used inside a for loop, this was the only way I could come up with to connect the title and schema settings with each other.
If someone knows a better way to do this instead of putting it in a hidden input, please let me know :)
In proper Liquid syntax, curly-brackets are never embedded inside curly-brackets
The syntax {{ something_{{ you }}_want }} is illegal Liquid syntax - once an expression is started, using either {{ or {%, everything up to the next }} or %} is evaluated as one template command.
In your example, you're looking to combine two strings in order to get the name of a setting that you want to access. In a dedicated programming language, we would expect there to be nice shortcuts for something like this. Liquid, however, is first and foremost a templating language, and doesn't have such shortcuts. Instead, we will need to accomplish our goal in two steps.
The first thing we need to know is that we can access properties in two ways: {{ settings.fieldname }} is equivalent to {{ settings['fieldname'] }}
Thanks to that second syntax, we can access an arbitrary setting using a variable:
{% assign field = 'fieldname' %}
{{ settings[fieldname] }}
So to do something more complicated, we just need to use assign (or capture - just be aware that capture includes whitespace as well!) to get a variable that contains the name of the field we want to access, then pass that in to the square brackets:
{% assign title_field = link.title | downcase | append: '_modal_title' %}
{{ section.settings[title_field] }}
I have a form set up using Django's form facilities and it gets rendered in the template like so:
{% block content %}
<h1>Register to join Forge Design</h1>
<form method="post" action="">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="{% trans 'Submit' %}" />
</form>
{% endblock %}
I have the fields First name, Last name, Email and Available date, which will render out my fields vertically with their labels left aligned. What I would like is to control each field such that I will have a layout like in the screenshot below:
Desired form layout
Could anyone best advise how to customise so that I can intersperse labels in between fields such as the "Name" and "Email Address *" and change the positioning of the first and last name labels so that they sit below their respective fields. Is this something I must do by replacing in the template {{form.as_p}} with the individual {{form fields}} and then wrapping that in a div to be controlled by CSS?
Thanks
You can access to each field by name define in your form
{{ form.first_name.errors }} # Error of your field first name
{{ form.first_name.label_tag }} # Label of your field first name, generate a label tag
{{ form.first_name }} # Input for your field first name
https://docs.djangoproject.com/en/1.10/topics/forms/#rendering-fields-manually
I would like to change the number of products displayed on a page in shopify, after the user click on the button.
However nothing happens after I click on the button.
Is it because the liquid cannot be rendered in a script tag?
// set 25 products display on the page by default
{% assign number = 25 %}
{% paginate collection.products by number %}
<div>
// content of products description go here
</div>
//after user click on the button, it will change the number of products displayed on a page
<span><strong>Show </strong></span>
<button onclick="view()">50 </button>
<span>100 </span>
<span>All</span>
{% endpaginate %}
<script>
//after user click on the button, it will change the number of products displayed on a page to 5 items.
// However Nothing happens after I click on the button.
function view(){
{% assign number = 5 %}
{% paginate collection.products by 5 %}
{% endpaginate %}
}
You should do it using different templates.
Create several collection templates like
collection.12.liquid
collection.24.liquid
collection.48.liquid
in these templates, put the content of collection.liquid and paginate products as 12, 24 and 48
then put a link with these pages like
<div>
Show:
12
24
48
</div>
Using ?view= yiu will load the template 12, 24, or 48 where you paginate products by 12, 24, or 48