'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.
Related
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.
I am using a plugin that filters products. This means that products are no longer shown in the traditional product loop. I think the plugin has switched to using javascript to show products on the collection page rather than liquid.
For every product on a collection page, I wish to show its colour. Each product has a colour associated with it using a custom field.
If I manually manually enter a product handle in the below code, the colour for the product handle that has been entered successfully displays for each product.
{{ all_products["MANUALLY ENTERED PRODUCT HANDLE"].metafields.custom_fields["colour"] }}
I am also able to dynamically able to get a products handle with {!productHandle!}
For some reason however when I put the two together like this:
{{ all_products["{!productHandle!}"].metafields.custom_fields["colour"] }}
The result is that nothing is shown.
My question is, how can I dynamically pull the product handle into the custom field? I have already tried
{{ all_products[product.handle].metafields.custom_fields["colour"] }}
and
{{ all_products[product-handle].metafields.custom_fields["colour"] }}
Try saving the handle as a string. Eg:
{% capture fizz %}{{product.handle}}{%endcapture%}
{{ all_products[fizz].metafields.custom_fields["colour"] }}
Note that all_products is also limited to just 20 products.
In Shopify, when you assign an Image Alt Text to an image using the online editor, where is that value stored? Apparently, it is not stored in config/settings_data.json of the theme code.
Now I saw that my liquid code has
{{ block.settings.image | img_url: '580x', scale: 2 | img_tag: block.settings.image.alt, 'lazyload transition-in' }}
which means the alt tag value should come from settings, however that's not the case. It is stored somewhere, but I am not able to find in the theme code.
The alt attribute is stored internally for the object.
For example when you set a title for the product the title is not stored as a setting, but it's applied internally to that object.
In your example you have a block image, you target the image using block.settings.image and from there on you have access to all of the image properties seen in here https://help.shopify.com/themes/liquid/objects/image and ALT is one of them.
The file settings_data.json stores only information from settings_schema and all of the sections options.
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
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.