I've created a new custom property for a product and I need to access it in the HTML template.
I can see that these are held under product.custom_fields, but how do you reference a key and value of a specific custom property?
For example, I have a custom field with key of 'note' and value of 'one'.
I've tried displaying 'note' and 'one' on the HTML template the following way:
{{ product.custom_fields.note[key] }}
I'm however getting 500 errors. I haven't found a reference that would explain how to do this.
I just found a much cleaner solution for accessing a custom field by name:
{{#filter custom_fields 'your-custom-property-name' property='name' }}
{{value}}
{{else}}
a fallback string in case you don't have it
{{/filter}}
This is an undocumented feature of the filter helper from handlebars-helpers repo. It allows you to filter on a specific property.
Try this
{{#each product.custom_fields}}
{{#if name '==' 'note'}}
{{name}}: {{value}}
{{/if}}
{{/each}}
Related
When there is a link present, we want something like this HTML:
<img src="{{src}}"></img>
When there is no link present, we want something like this HTML:
<img src="{{src}}"></img>
Is there a clean way to do this? I consider the following solution bad, because it's dangerous to have to separately remember to open and close the <a> tag:
{{#if url}}<a href="{{url}}" title="{{title}}" target="_blank">{{/if}}
<img src="{{src}}">
{{#if url}}</a>{{/if}}
I considered using a block helper, but can't think of how to do so without adding more complexity. Maybe something like:
{{#linkWrap url}}<img src="{{src}}">{{/linkWrap}}
But then it's hard to see how we set the title and target and everything gets awkward.
I think you are on the right track, but I would recommend using a Handlebars Partial Block instead of a Block Helper. This will allow to pass one piece of template (the block) to another piece of template by which it will be wrapped (the partial).
Handlebars provides us with {{> #partial-block }} as a way to render a block of template within a partial. We can use this to create our "linkWrap" partial:
{{#if link}}
<a href="{{link.url}}" target="{{link.target}}" title="{{link.title}}">
{{> #partial-block}}
</a>
{{else}}
{{> #partial-block}}
{{/if}}
This gives us a clean and simple partial that will allow us to wrap any section of our template with a link as long as we have a link object to pass to our partial. Note that I have opted to use an object to represent the link so that I can pass a single parameter to the partial instead of passing the url, title, etc. properties individually.
For anywhere we wish to render a link around some markup in our template, we can do so in the following way:
{{#> linkWrap link=link}}
<img src="{{image.src}}">
{{/linkWrap}}
If the link object is null or undefined, the img element will be rendered without a parent anchor element.
I have created a supplementary fiddle for reference.
In Bigcommerce's Stencil object model docs : here is the link
I am not seeing any reference to a basic page's id. Though I can see the "pageID" shown when hovering over the page name in the admin interface.
Is this pageID value accessible through Handlebars at all?
Currently it seems it's only possible to get the pageid for the page you are viewing. This probably isn't what you need. You probably want the pageid for every page in the pages list. Hopefully they can add that soon. However, just in case it helps you, this is how I'm getting the pageid for the page that is currently being viewed:
{{#each breadcrumbs}}
{{#if #last}}
{{this.pageid}}
{{/if}}
{{/each}}
I'm using this method to load a specific stylesheet based on the page. I have a mapping of stylesheets for each page in config.json:
"settings": {
"page_stylesheets": {
"151": {"file_name": "my-custom-stylesheet.css"}
}
I added a block in the of templates/layouts/base.html:
{{#block "pageStyles"}} {{/block}}
Then, at the top of my templates/pages/page.html file, I have the following:
{{#partial "pageStyles"}}
{{#each breadcrumbs}}
{{#if #last}}
{{#with (lookup ../../theme_settings.page_stylesheets this.pageid)}}
{{{stylesheet (concat 'assets/css/' this.file_name)}}}
{{/with}}
{{/if}}
{{/each}}
{{/partial}}
I want to render only one field of a form. When i put {{form_end(form)}} every other field are coming (symfony doc show it clearly) but how to render only one field ? If i dont put {{form_end(form)}}, there is only one field, but no save button
thanks
Yes, CSS can do the trick. But do you want the working of your application to depend on client side styling rules? In most cases it might beter not to render the field HTML at all.
There are two ways in which you can fix this in your template.
Put {% do form.field_you_want_to_hide.setRendered %} before your {{form_end(form)}}.
This will mark the field as rendered and thus it will not show up when form_rest is called.
Instead of {{form_end(form)}}, use {{ form_end(form, {'render_rest': false}) }}, as explained in the Symfony Twig documentation.
It would be even better to change your form class such that the fields are removed from your form. Is it your own form you would like to render, or a form from a third party bundle?
In my file I have a call to an external handlebars partial like this
{{> docs/setup/install }}
This works fine. 'install' is the name of the partial.
I want to dynamically call other files using the partial helper. Something like this
{{> docs/setup/{{filename}} }}
This obviously is not working. It is an example of what I am trying to achieve.
How do I pass the dynamic {{filename}} to the include partial helper?
I am on node and using the express-hbs library.
You may want to use "subexpressions".
Refer to the documentation available here : https://handlebarsjs.com/guide/partials.html#dynamic-partials
Is there a variable passed into every handlebar.js template that contains all the context content that is accessible by the template?
e.g. I'm creating a template, but I don't know all the context content accessible by the template. I want to be able to type into the template {{ debug }} and handlebars.js will spit out all the context content into the HTML
You can use the following code to iterate through this object:
{{#each this}}
{{#key}}: {{this}}
{{/each}}
or a similar piece of code iterating through #root object:
{{#each #root}}
{{#key}}: {{this}}
{{/each}}
Handlebars has built-in helper log.
You just need to set logging level to DEBUG.
Handlebars.logger.level = 0;
Then use helper:
{{log this}}
EDIT: Sorry, this will not write context to HTML, helper uses console.log. For outputting to HTML you need to write custom helper that will use for example JSON.stringify.
Though this question is somewhat old, someone might find this usefull. You can just dump the handlebars current context into plain text with;
{{{.}}}