Refill Element
Refill Element an embeddable component for searching and adding products users buy on their own and allow users to add products using the barcode of the product.
elements.create(refill,options?)Elements.create(refill)
Method parameters
| Field | Parameter | Description |
|---|---|---|
| type | refill | The type of Element being created, which is refill in this case. |
| options | Object | Options for creating the Refill Element. |
Option properties
| Field | Parameter | Description |
|---|---|---|
| countryFilter | object | By default countryFilter is true. It enables users to search products based on the location which country they’re in.Enabled with Foodin provided Google Maps API key. Or you can specify your own google_maps_api to enable Google Maps API with your own key. |
| allowedCountries | array | By default, the Refill Element will display all countries for selection.You can specify which countries are displayed in the Refill Element with a list of two-letter country codes. If only one country is specified, the country field will not display. |
| allowedStores | array | By default, the Refill Element will all stores available in the area.You can specify which stores will be displayed in the Refill Element including their username they have on Foodin |
| search | object | Search option is turned on by default, you can turn it off by passing false parameters. |
| barcodeScan | Boolean | By default search element will display barcode Scan search. Whether you will turn it off depends on your app capabilities and needs. |
Search Properties
Search enables customers to search for products within a store or a country, add and update their Pantries straight from your app.
| Field | Parameter | Description |
|---|---|---|
| image | boolean | By default, images will be displayed in Search. You can choose not to display them to save up on bandwidth. |
| quantity | boolean | By default, quantity is displayed in the Search. Enables customers to select the quantity of the product they are adding. |
| brand | boolean | By default, brand is not displayed in the Search. You can display it below the product name. |
| category | tab grid | Specify the layout how to display categories. By default products will be displayed in tabs depending on their corresponding stores |
| price | string | By default, price is displayed in the Search. Enables customers to check prices and update them if they don’t match the stores prices. |
| image | boolean | By default, images will be displayed in Search. You can choose not to display them to save up on bandwidth. |
Create a Refill Element inside a country
// Create the Refill Element with a country filter
var refillElement = elements.create("refill", {
countryFilter: {
googleMapsApi: "YOUR_API_KEY",
},
});elements.getElement("refill");Method parameters
| Field | Parameter | Description |
|---|---|---|
| type | refill | The type of Element being created, which is refill in this case. |
Elements.update(options)
element.update(options);Option properties
| Field | Parameter | Description |
|---|---|---|
| item | object | Find the item you want to update |
Item requests
| Field | Parameter | Description |
|---|---|---|
| upc | string | Pass the upc number or the rrc number to select the item that needs updating |
| rrc | string (Optional) | Pass the store unique identifier to select a store item if you are updating for that store |
| price | string (Optional) | Update prices in case they have changed |
| salePrice | string (Optional) | Update prices in case they have been purchased on sale |
| quantity | integer (Optional) | Update quantity of products bought |
| expirationDate | string (Optional) | Update latest expiration date of the product |
Update search Element
var searchElement = elements.getElement('search');
searchElement.update({
upc:”00001221000551”,
price: {
regular: “3.44”,
sale: “”
},
});