I am trying to get the comment form with all comments on a custom template article page of drupal. I can get the whole content with {{ page.content }} or get the comments by using {{ node.field_comments }} and make a loop on it (assuming my field comment machine name is field_comments).
But does anyone know I to render the whole comments block with :
links to add a comment
comments
comment form
Thank you very much for your help !
Try to use the new and refined comment module. It's in the core so all you have to do is enable it. After that just make a comment type, add it to your article and display. That's pretty much it.
In template files for a content type (eg node--article.html.twig), you have the 'content' variable available. I use this bit of Twig to render the whole comments block:-
{{ content.comment }}
I struggled with this too, but just for the next visitor, I got 2 out of 3 (I didn't want the form on my page)
- links to add a comment -> {{ content.links }}
- comments -> {{ content.comment_node_TYPE }}
To get the correct name for content.comment_node_TYPE, visit your Mange fields page for that content type and see what the comment field is called
e.g. my "Audio" content type names the field {{ content.comment_node_audio }}
Hope this helps someone in future
Related
I've been searching this for a while but can't seem to get it right. I have a basic Nuxt project with the following directory structure (ignore the fun.vue) :
The idea is to be able to navigate to a single post with paths like http://localhost:3000/posts/1
This works, if I manually go to .../posts/1 I get my page defined in _id.vue.
The problem is that, in my index page, I cannot get <NuxtLink> to go to single post pages. I have a basic v-for looping over my fetched posts array, like so:
<template>
<div>
<div v-for="post in posts" :key="post.id">
{{ post.title }}
<NuxtLink to="`posts/${post.id}`">Link to post</NuxtLink>
</div>
</div>
</template>
I would expect, upon clicking on the 2nd post's link for example, to navigate to posts/2, but instead I get /%60posts/$%7Bpost.id%7D%60. Why isn't the template string converted normally? I've also tried using a computed value with no success, and the Nuxt Routing docs haven't been of much help.
Highly appreciate any help regarding this.
You forgot the semicolon:
:to="`/posts/${post.id}`"
or even better
:to="{ name: 'post-id' }" // post-id or basically the name you gave to your component
As shown here: https://router.vuejs.org/api/#router-link-props
You can use something like this
the ":" in front of it will make it dynamic and you can use template literals
in between those double quotes
<NuxtLink :to="`posts/${post.id}`">Link to post</NuxtLink>
I tried your code in my development environment. You also may forgot to add "/" in front of "posts":
<NuxtLink :to="`/posts/${post.id}`">Link to post</NuxtLink>
If you put your code without "/" in a Nuxt "layout", it adds "posts" iteratively to your "URL" and makes the destination wrong:
http://localhost:3000/posts/posts/2
This happens when you click on post 1 and after to post 2.
im probably having this issue due to my lack of my experience with the liquid and the shopify platform in general.
Here's my issue:
In the current theme im working on, when a product is added to card it is always adding the smallest available size. Im not 100 % confident this is the code that is actually doing it but im fairly positive it is.
onclick=" Shopify.addItem('{{ product.variants.first.id}}', 1);
Currently when this code is fired the products smallest size (assuming its the first) is added to the cart.
I tried to take a look at the shopify API documentation for product.variants but it seems the theme or store is not using the latest version since I cant find any references to this first property.
What I would like if for there to be control in terms of product size when the add to cart action is triggered. Instead of adding the smallest size always it can persay add product.variants.{SIZE}.id instead (Not actual code just a guess)
If anyone could point me in the right direction of proper documentation for something like this or if you've had a similar question I would greatly appreciate it!
this is easy :)
yes this is the code sending the product to the cart and this theme don't support product variants. You should add the variants support.
some theory:
Variants is an array.
variants.first is a liquid function for easily take the first element of the array, check the liquid docs for more details.
The important part is, to add an item you need to send the variant id. always is the variant id.
now the magic:
you need to iterate on product.variants, keep on someplace the variant id and finally pass the value to the function.
onclick=" Shopify.addItem('{{ product.variants.first.id}}', 1);
by
onclick=" Shopify.addItem( {{ variant.id }}, 1);
you can use wherever you want, you can use select, or even got for a pure js / ajax solution using the cart API
extra detail the 1 is the qty, you can set it dinamic too.
I don't know your desing, so on psedo-code with multiple buttons you can do:
{% for variant in product.variants %}
<button onclick="Shopify.addItem('{{ variant.id }}', 1)">
{{ variant.title }}
</button>
{% endfor %}
Almost all themes, free or paid, have proper functioning code to handle changes in variations. When a customer selects a variant, via a change in a select element or perhaps the click of a radio button, the existing code should update the currently selected variant properly. Your example of an onclick set to the first variant is probably one the most primitive modes of operation, and as you see, less than satisfactory.
As a beginner, your best bet is to download the Debut theme from Shopify and study the basics of how variant selection work from the position of working code. Only then could you hope to be able to mod your own themes.
'Currently I want to display View All "Collection Title". I do this successfully using the prepend. However, when creating a shopify theme one of the requirements is language support / translation.
<div class="collection-cta">{{ product_collection.title | prepend: 'View All ' | link_to: product_collection.url }}</div>
I am having trouble figuring how how to prepend the shopify translation markup.
{{ 'collections.general.view_all' | t }}
This outputs the View All text translation correctly, but getting to work inside of prepend:'' has proven to be problematic. I haven't been able to find strong documentation on this so any perspective would be great.
How about this?
{{product_collection.title}} {{ 'collections.general.view_all' | t }}
No need to use link_to... I'm not entirely clear on the inner workings of liquid, but it does expect a certain number of arguments... adding prepend and the translation tag may have thrown it.
So split it all out - and it should work.
Each product has the custom fields options. Can I output those custom fields on each product item in the product list page? If so, how? I have tried adding the ProductOtherDetails and the %%SNIPPET_ProductCustomFieldItem%% in the CategoryProductsItem.html, but got no output at all of any of the items I have tried. Any suggestions or pointers on how and if this is possible?
As of September 2015, you can now access %%GLOBAL_ProductCustomFields%% on any template file that renders a particular panel's individual items. For example:
-Snippets/CategoryProductsItem.html for category list pages
-Snippets/HomeFeaturedProductsItem.html for the featured products panel
I recommend adding the custom field name as a class to each field for easy hiding, and accessing of the value in case the custom fields ever change you won't be accessing them via :nth-child CSS which would break. You can do so by modify Snippets/ProductCustomFieldItem.html to add the custom field name to the CSS class or ID like this:
<div class="DetailRow %%GLOBAL_CustomFieldName%%">
<div class="Label">%%GLOBAL_CustomFieldName%%:</div>
<div class="Value">
%%GLOBAL_CustomFieldValue%%
</div>
</div>
Doing so, will output like this in each item in the category list.
Above, I am using the custom fields to send through shipping time, as well as "Starting At" to prepend to the list page price if the item is a parent which has children of higher prices. In my opinion, these features greatly increase the user experience.
For Faceted Search (handlebars.js)
I recommend adding this to Panels/FacetedSearchProductGrid.html:
{{#each product.custom_fields}}
{{ id }} : {{ name }} : {{ value }}
{{/each}}
Those filters will be limited to the Product pages specifically. The only way around it is to hash together a solution using jQuery to go and fetch items in question from the product page. A pain, but do-able with unnecessary effort.
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".