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'}}
Related
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.
Currently custom fields show up as text on product pages.
Custom Field #1 Name: Material, Custom Field #1 Value: Cotton
Is there some other option instead to just pass data to the template? For example I'd like to display a 'NEW' label on the product page if new == true.
Sort of like https://springmerchant.com/bigcommerce/product-labels/
Right now we're using handlebars and if-statements to hide custom fields with a __prefix. For example __new: true.
If you're developing your template in stencil, there are a couple of options... You can loop through the custom fields until you find the correct one and then check the value... Ex:
{{#each product.custom_fields}}
{{#if name "==" "__new"}}
{{#if value "==" "true"}}
YOUR HTML CODE HERE
{{/if}}
{{/if}}
{{/each}}
Alternatively, you can put all your custom_fields into an array and use javascript to populate various aspects of the site:
<script>
var custom = [];
{{#each product.custom_fields}}
custom.push({'name':"{{name}}",'value':"{{value}}"});
{{/each}}
YOUR CODE TO LOOP THROUGH JSON ARRAY AND DO VARIOUS TESTS AND STUFF
</script>
If you don't have access to stencil templates and are just doing development through the control panel, you could write javascript to parse the default custom_field html and then use the data accordingly.
None of the solutions are particularly clean, but they all work.
I'm working with Prestashop 1.6 and I need to add a checkbox and text field in the order summary page, as shown below.
I'm lost on which hooks to use to do so. These fields should be also shown in the invoice. For the hook of the invoice I believe it is the DisplayPDFInvoice hook, but for the order summary (display and get information) I don't know which hooks to use.
Can you give me some tips? Thanks for any help
You can use hook hookDisplayBeforeShoppingCartBlock to render any content on cart summary page. Don't forget to register this hook to your module.
I have tried using the same and got the results as below:
Code:
public function hookDisplayBeforeShoppingCartBlock()
{
return '<div>Text Area : </div><textarea rows="3" cols="30">This is a text area rendered from hookDisplayBeforeShoppingCartBlock</textarea><br><br><input type="checkbox" name="vehicle" value="Bike">checkbox 1<br><input type="checkbox" name="vehicle" value="Car">checkbox 2';
}
The above code is used just to show an example, you can render any template file from there. As you can see that this hook renders content above cart block so you can use javascript to move it below cart block.
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.
In odoo 8 the website is generated from Qweb templates. The webpages can also contain fields (say like in the 'Contact Us' form).
In the normal Odoo Form view it is easy to make a field invisible or readonly dynamically based on the user entry in some other field.
How can the similar thing be done in the Website view?
You can use a t-if statement, wrapped around the field you want to hide. Something like:
<div t-if="o.company_id">
<span t-field="o.company_id.partner_id.name">
</div>
In this example, the "name" field will be hidden if "company_id" is not set.
Here's a link to the QWeb reference.
If you want to omit some fields on dynamic basis. You can use "t-if" in your template, When you print it QWEB.