This is a section of code for listing the name of a product in list-item.html:
<h4 class="listItem-title">
{{name}}
</h4>
Below the name, I would like to add "Date Added: " and the date it was added to the website, but only if the item is in the "What's New" category. I can't figure out the syntax for saying "If this product is in the What's New category, then display "Date Added: " and date it was added.
Does anyone have a clue where I would start to do this? I am still very new to BigCommerce.
You can use {{date_added}} to display the date that the product was added, but adding logic to display it in a specific category is a little more complex.
In list-item.html, {{category}} is scoped to the individual product being rendered, so doing something like the example below will only work if the item appears only in the What's New Category.
{{#if category '===' 'What's New'}}
{{date_added}}
{{/if}}
Another option would be to create a custom template for the category page. That would give you the control to create a custom list-item.html component that references {{date_added}} just on a certain category page. This video is a good starting point for creating custom templates, and you can find documentation here.
Related
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.
How should I add an image field to an odoo survey?
In a survey I need the option to upload an image (or even more than one).
I found this, but I can't figure where or what.
First of all, we have to give the creator of the survey the opportunity to add a binary field to a survey page (used for the image upload)
Create a custom model that inherits from the survey.question model. Add a ('binary','Upload') element in the state field.
Then on addons/survey/views/survey_views.xml find the with the id survey_question_form and change it accordingly (for example when you add a question of type Binary you might want to hide some elements that refer to other types of questions)
After that go to addons/survey/views/survey_templates.xml and add a template:
<template id="binary_field" name="Image">
<input type="image" class="form-control" t-att-name="prefix"/>
</template>
Then, on the same file, find the template with the id = page and add
<t t-if="question.type == 'binary'"><t t-call="survey.binary_field"/></t>
Start testing the whole process by restarting your server with -d your_database_name -u survey and move from there.
More changes might be needed in addition to what I have mentioned.
We want to add custom fields that can be modified on the back end, yet also populate on the front end using custom fields. We have tried following, yet the fields didn't populate on the front end. See below for examples of the code and corresponding output:
Example Code
Result
How can we get these fields to properly populate on the front end?
I would start by reading the BigCommerce Stencil Documentation. The way you are calling the custom field values is not how they suggest calling these values.
The custom_fields are only accessible on the product detail page at this time in Stencil.
To display them on the product detail page, you can loop through each custom_field value with the following code.
{{#each product.custom_fields}}
<dt class="productView-info-name">{{name}}:</dt>
<dd class="productView-info-value">{{{value}}}</dd>
{{/each}}
You can check to see what values are available on each page by either reading the Stencil docs linked above, or debugging your page by removing the closing '/' and adding '?debug=bar' to the end of your localhost URL. Refresh your page and you will see all available store data in JSON format below the rendered page.
For more control over which custom field you output where you can create a reusable loop.
i.e. Create templates/components/products/custom-fields.html
{{#each product.custom_fields}}
{{#if name '===' ../custom_field}}
{{{value}}}
{{/if}}
{{/each}}
Then from your product_view.html you can specify the field value to output with a single line:
{{> components/products/custom-field custom_fields='custom field name'}}
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.
I have created a TitlePane and wish to load data dynamically from a get method into the Title property. As of the current this all works. However, now when the data is loaded (4 separate types), its all getting mushed together. I wish to divide this received data evenly (25%) across the title.
For example:
<div id="tp2" data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'I'm a TitlePane
Too'">
Click arrow to close me.
</div>
In this example the title is set to "I'm a TitlePane Too".
I wish to change the title so that each of the four words is evenly distributed across the title section of the pane. However there are no extra properties for doing this sort of thing.
Use the "set" method to set the new title.
E.g:-
<div id="tp2" data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'I'm a TitlePane
Too'">
Click arrow to close me.
</div>
//For this above example, title is replaced as follows in JS
dijit.byId('tp2').set('title','New title');
Update: If this title pane is created dynamically without an ID, then get the widget object using the css query.
dijit.getEnclosingWidget(dojo.query(".dijitTitlePane")[0]).set('title','New title');
dojo.query(".dijitTitlePane") => will give array of all titlepane domNodes. From this chose the one you need. I chose at "0"th index i.e. 1st title pane node in the page.
Then I get the widget object of that domNode and then set the title.