Stencil provides access the Custom Fields of a Product in a template file as documented in Product Other Details
{{product.custom_fields}}
{{#each custom_fields}}
<li>{{name}}: {{{value}}}</li>
{{/each}}
How do I access the MetaFields that are created in the Product API
POST /catalog/products/{product_id}/metafields?
Product metafields aren't currently surfaced as a Stencil property. Their original purpose was to store metadata against the product object for backend apps (data like shipping origin for ShipperHQ), so they're available via the REST API but not exposed on the front end. If you wanted to access metafields on the frontend, you could build out middleware (using a serverless function, for example) to call the API and pipe that data to the storefront.
It would be good for us to understand your use case better though. Do you want to display metafield values in the template, or base some kind of frontend logic around their values?
While one cannot natively display product metafields in Stencil, there is an app in the Bigcommerce marketplace that allows one do to so. The app also lets one view, create, update, and delete metafields for products, categories, variants, and brands. You can export metafields and import them with a csv file. The app is not free, however, there is a 7 day free trial. This answer is to give an alternative solution to the problem mentioned.
Related
I am using a Shopify 2.0 theme that supports standard Shopify metafields.
I can easily create product metafields that appear correctly on each product listing page in admin.
My question is can I create different sets of metafileds to attach to specific product types? Or am I expecting too much from the standard Shopify metafield functionality?
On this page https://stencil.bigcommerce.com/docs/product-resources BigCommerce has mentioned that Product Object has "Options" but in the theme, I am not able to retrieve anything from options property. I am trying to access this in Category Page.
I want to do above because I have to add product attributes on product listing page "templates\components\products\card.html". I need this here because I have to remove quick view option and directly put the product option under product title on this page. Over here I am able to get product's id, name, sku etc but not getting any properties from product options.
I have already asked to BigCommerce Support team and they don't have any solutions and referred me to check here.
The category page calls the common product card model, which does not include the product options property:
https://stencil.bigcommerce.com/docs/common-product-card-model
To get product option data on the category page, you'll need to call the API. One lightweight solution for handling this is to use AWS Lambda with Amazon API Gateway. API Gateway defines an endpoint URL that you can use to trigger a Lambda function that runs a request to the BigCommerce API for product data.
https://docs.aws.amazon.com/lambda/latest/dg/with-on-demand-https.html
I am doing some work for a client who uses BigCommerce Stencil Theme and I am pretty new to BC. Until now most of my work with them has been basic theme formatting and styling.
They are asking if I can add checkboxes next to items in cart to indicate an alternative delivery system, and then add a field to address for a hotel room. It seems like built into BC checkout customization you can add fields to addresses so that doesn't seem like an issue, but I'm not so sure about the checkboxes. I would imagine I would need access to the underlying PHP to make this happen which doesn't seem possible. Is this accurate? If not, how might I go about doing this?
I see that I can add the checkboxes themselves to the template files, but as far as sending any data with the checkout I don't know how I'd go about doing this.
For the hotel room address field, you are correct that the simplest solution would be to use the built-in custom address field feature.
For the checkbox/alternate delivery system, we're close to releasing a new Checkout JS SDK that will give you the ability to create a completely custom checkout experience. The SDK is basically a Javascript wrapper for our Storefront Checkout API and it includes operations for checkout actions (like creating a new shipping consignment for an alternate delivery method).
The Checkout SDK doesn't give you access to the underlying PHP; instead, it allows you to create your own frontend using React or whatever framework you prefer. The logic for custom checkout steps would exist in your frontend, and you would send your data to the checkout via the BC Checkout API.
https://stencil.bigcommerce.com/docs/customizing-checkout
We are wanting to add custom product attributes to a BigCommerce store using API so that the main global product page will have the custom product attributes for cigars in our case.
Below are the product attributes so you get an idea on what it will include. We need the ability to have these attribute fields in the admin so when we add or import products they will be populated manually or automatically on the import.
County, Wrapper, Binder, Package, Size, Strength, Shape.
An example of those customs fields you can see on this other website.
http://www.thecigarstore.com/Cigars/Rocky-Patel/Rocky-Patel-Sun-Grown-Toro.htm
This is BigCommerce's API page on this.
http://developer.bigcommerce.com/docs/api/v2/resources/products/custom_fields
As mentioned here, this seems to be a bug in the API. I am not sure what are Bigcommerce plans to fix it, but I imagine there's plenty of people waiting to be fixed.
I'm toying with developing a Shopify App that uses the DaisyAPI dynamic image service for Shopify. In order to make the correct call to the Daisy API, I need to know what Product the customer is looking at. It seems like, to reliably do that, I will need to manipulate their product.liquid theme to insert a hidden value containing the Product ID so that Jquery can pick up that value and insert it into the API call.
What's the best way to ensure every product page contains the product ID in such a way jQuery can reliably find it? Am I overlooking something obvious?
Many thanks!
Another option would be to use the Ajax API to request the product. Of you know you're on a product page simple make a request to the same URL and append .json. You will then have a json representation of the product that you can do whatever yo want with.
To get you js into the theme you can use a script tag which will load js from you server onto the shop.
You are missing a very obvious and cool Liquid filter.
In Liquid, pump the Object for it's JSON.
var p = {{ product | json }};
And then go to town... you cannot go far on the client without this concept. Get the JSON man.. get the JSON...