### Managed Recommendation Example

Source: https://developer.helloretail.com/sdk/recoms/javascript_sdk

Example demonstrating how to load managed recommendations. Specify the recommendation box ID, desired format, and context including hierarchies, brand, and URLs.

```javascript
hrq = window.hrq || [];
hrq.push([
    "loadRecom",
    // requests:
    [
        {
            // Managed recom
            "key": "{recommendation box id}",
            "format":"html",
            "context": {
                "hierarchies":[["Clothing","Women"]],
                "brand": "Nike",
                "urls": ["https://example.com/path/to/product.html"]
            }
        },
    ],
    // Callback
    function(result) {
        // Do something with data here.
        if (!result.success) {
            console.error(result.message);
            return;
        } 
        for (let i = 0; i < result.responses.length; i++) {
            console.log(result.responses[i]);
        }
    }
]);


```

--------------------------------

### Example Hello Retail Product JSON

Source: https://developer.helloretail.com/guides/feeds/feeds_history

This is an example of a Hello Retail product data object in JSON format. It includes various fields describing a product.

```json
{
    "productNumber": "1",
    "title": "Example title",
    "inStock": true,
    "url": "https://example.com/products/1",
    "imgUrl": "https://cdn.example.com/products/1/thumbnail.png",
    "description": "Description of the product",
    "price": 19.95,
    "ean": "e12345",
    "oldPrice": "22.95",
    "priceExVat": 15.96,
    "oldPriceExVat": 18.36,
    "currency": "DKK",
    "brand": "Examplish",
    "keywords": "example,showcase,feed,data",
    "created": 1682690820,
    "hierarchies": [
        ["fashion", "women's", "shirts"],
        ["fashion", "men's", "shirts"]
    ]
}
```

--------------------------------

### Recommendations using Javascript SDK

Source: https://developer.helloretail.com/sdk/recoms/javascript_sdk

This section details the usage of the `loadRecom` method from the Hello Retail Javascript SDK to fetch product recommendations. It outlines the arguments required and provides examples for both managed and unmanaged recommendation setups.

```APIDOC
## Recommendations using Javascript SDK

### Description
To load recommendations from Hello Retail, you need to use the `loadRecom` method. This method takes a list of `RecomRequest` objects and a callback function.

### Method
`window.hrq.push(["loadRecom", requests, callback])`

### Parameters
#### Requests
- **requests** (Array<RecomRequest>) - Required - A list of `RecomRequest` objects for product recommendations. Each request will be processed, and the response will contain a list of responses in the same order as the given requests. Products will not be repeated within the responses to one API call.

#### Callback
- **callback(result)** (Function) - Required - A callback function that is called with the result of the request.

### Request Example (Managed Recommendations)
```javascript
hrq = window.hrq || [];
hrq.push([
    "loadRecom",
    // requests:
    [
        {
            // Managed recom
            "key": "{recommendation box id}",
            "format":"html",
            "context": {
                "hierarchies":[["Clothing","Women"]],
                "brand": "Nike",
                "urls": ["https://example.com/path/to/product.html"]
            }
        },
    ],
    // Callback
    function(result) {
        // Do something with data here.
        if (!result.success) {
            console.error(result.message);
            return;
        } 
        for (let i = 0; i < result.responses.length; i++) {
            console.log(result.responses[i]);
        }
    }
]);
```

### Request Example (Unmanaged Recommendations)
```javascript
hrq = window.hrq || [];
hrq.push([
    "loadRecom",
    // requests:
    [
        // Unmanaged recom
        {
            "trackingKey":"frontpage-1", // The key is used to group the analytics in MyHelloRetail
            "fields":["title","url"],
            "hideAdditionalVariants":true,
            "count":8,
            "context":{
                "urls": ["https://mywebshop.com/woman/shoes/product-abc"] // The url to the current page you are calling the box from
            },
            "sources":[
                {
                    "type":"RETARGETED",
                    "limit": 2
                },
                {
                    "type":"TOP",
                    "filters":{
                        "hierarchies":{"$in":[["Clothing", "Woman"]]}
                    }
                }
            ]
        }
    ],
    // Callback
    function(result) {
        // Do something with data here.
        if (!result.success) {
            console.error(result.message);
            return;
        } 
        for (let i = 0; i < result.responses.length; i++) {
            console.log(result.responses[i]);
        }
    }
]);
```

### Response
The returned result also follows the structure that is documented in the documentation for the REST API.
```

--------------------------------

### Product Feed Example (JSONL)

Source: https://developer.helloretail.com/guides/quick-start

Example format for a product catalog feed using JSON Lines. Ensure your product data adheres to this structure for Hello Retail to process it.

```json
{"title":"{product title}", "url":"{product url}", "imgUrl":"{product image url}", "price":"{product price}"},
{"title":"{product title}", "url":"{product url}", "imgUrl":"{product image url}", "price":"{product price}"},
{"title":"{product title}", "url":"{product url}", "imgUrl":"{product image url}", "price":"{product price}"},
{"title":"{product title}", "url":"{product url}", "imgUrl":"{product image url}", "price":"{product price}"}
```

--------------------------------

### Initialize and use querystring_storage

Source: https://developer.helloretail.com/guides/templates/javascript_modules

Demonstrates creating a storage instance and performing basic put and get operations.

```javascript
import "querystring_storage";
var storage = querystring_storage.create("test-data", {use_pretty_json: true});
storage.put('filter', 'brand:Nike')
var filter = storage.get('filter')
```

--------------------------------

### Unmanaged Recommendation Example

Source: https://developer.helloretail.com/sdk/recoms/javascript_sdk

Example for loading unmanaged recommendations. This includes a tracking key for analytics, fields to retrieve, item count, context, and sources with specific types and filters.

```javascript
hrq = window.hrq || [];
hrq.push([
    "loadRecom",
    // requests:
    [
        // Unmanaged recom
        {
            "trackingKey":"frontpage-1", // The key is used to group the analytics in MyHelloRetail
            "fields":["title","url"],
            "hideAdditionalVariants":true,
            "count":8,
            "context":{
                "urls": ["https://mywebshop.com/woman/shoes/product-abc"] // The url to the current page you are calling the box from
            },
            "sources":[
                {
                    "type":"RETARGETED",
                    "limit": 2
                },
                {
                    "type":"TOP",
                    "filters":{
                        "hierarchies":{"$in":[["Clothing", "Woman"]]}
                    }
                }
            ]
        }
    ],
    // Callback
    function(result) {
        // Do something with data here.
        if (!result.success) {
            console.error(result.message);
            return;
        } 
        for (let i = 0; i < result.responses.length; i++) {
            console.log(result.responses[i]);
        }
    }
]);


```

--------------------------------

### Product Data Object Example

Source: https://developer.helloretail.com/guides/feeds/feeds_history

An example JSON object representing a single product in the Hello Retail feed.

```APIDOC
## Product Data Object Example

This is an example JSON object representing a single product in the Hello Retail feed.

```json
{
    "productNumber": "1",
    "title": "Example title",
    "inStock": true,
    "url": "https://example.com/products/1",
    "imgUrl": "https://cdn.example.com/products/1/thumbnail.png",
    "description": "Description of the product",
    "price": 19.95,
    "ean": "e12345",
    "oldPrice": "22.95",
    "priceExVat": 15.96,
    "oldPriceExVat": 18.36,
    "currency": "DKK",
    "brand": "Examplish",
    "keywords": "example,showcase,feed,data",
    "created": 1682690820,
    "hierarchies": [
        ["fashion", "women's", "shirts"],
        ["fashion", "men's", "shirts"]
    ]
}
```
```

--------------------------------

### Request Product Recommendations

Source: https://developer.helloretail.com/api/recoms

Examples of how to send a POST request to the recommendations endpoint using various programming languages.

```curl
curl -X POST \
  -H "Content-Type: application/json" \
  -d '{
    "websiteUuid": "{website uuid}",
    "requests": [
        {
            "key": "{recommendation box ID}"
        }
    ]
}' \
  https://core.helloretail.com/serve/recoms
```

```python
import requests

api_url = "https://core.helloretail.com/serve/recoms"
headers = {
    "Content-Type": "application/json"
}
payload = {
    "websiteUuid": "{website uuid}",
    "requests": [
        {
            "key": "{recommendation box ID}"
        }
    ]
}
response = requests.post(api_url, headers=headers, json=payload)
print(response.json())
```

```php
<?php
$apiUrl = 'https://core.helloretail.com/serve/recoms';
$data = [
    "websiteUuid" => "{website uuid}",
    "requests" => [
        ["key" => "{recommendation box ID}"]
    ]
];
$options = [
    'http' => [
        'header'  => ["Content-Type: application/json"],
        'method'  => 'POST',
        'content' => json_encode($data),
    ],
];
$context  = stream_context_create($options);
$result = file_get_contents($apiUrl, false, $context);
if ($result === FALSE) { /* Handle error */ }
echo $result;
?>
```

```ruby
require 'net/http'
require 'uri'
require 'json'

api_url = URI.parse('https://core.helloretail.com/serve/recoms')
headers = {
  'Content-Type' => 'application/json'
}
payload = {
  websiteUuid: '{website uuid}',
  requests: [
    { key: '{recommendation box ID}' }
  ]
}
http = Net::HTTP.new(api_url.host, api_url.port)
http.use_ssl = true
request = Net::HTTP::Post.new(api_url.request_uri, headers)
request.body = payload.to_json
response = http.request(request)
puts response.body
```

```java
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;

public class HelloRetailRecomsApiExample {
    public static void main(String[] args) throws Exception {
        String apiUrl = "https://core.helloretail.com/serve/recoms";
        String jsonInputString = """
        {\n  \"websiteUuid\": \"{website uuid}\",\n  \"requests\": [\n    {\n      \"key\": \"{recommendation box ID}\"\n    }\n  ]\n}""";
        URL url = new URL(apiUrl);
        HttpURLConnection con = (HttpURLConnection) url.openConnection();
        con.setRequestMethod("POST");
        con.setRequestProperty("Content-Type", "application/json");
        con.setDoOutput(true);
        try(OutputStream os = con.getOutputStream()) {
            byte[] input = jsonInputString.getBytes("utf-8");
            os.write(input, 0, input.length);
        }
        int code = con.getResponseCode();
        System.out.println(code);
        // Read response as needed
    }
}
```

```csharp
using System;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;

class Program
{
    static async Task Main()
    {
        var apiUrl = "https://core.helloretail.com/serve/recoms";
        var json = @"{
    \"websiteUuid\": \"{website uuid}\",
    \"requests\": [
        { \"key\": \"{recommendation box ID}\" }
    ]
}";
        using var client = new HttpClient();
        var content = new StringContent(json, Encoding.UTF8, "application/json");
        var response = await client.PostAsync(apiUrl, content);
        var responseString = await response.Content.ReadAsStringAsync();
        Console.WriteLine(responseString);
    }
}
```

--------------------------------

### Example Response with Rendered HTML

Source: https://developer.helloretail.com/api/search

An example of an API response that includes rendered HTML, showcasing the structure for products, categories, and the HTML content itself.

```APIDOC
## Example Response with Rendered HTML

### Description
This example demonstrates a response that includes rendered HTML content, alongside pagination details for 'products' and 'categories'.

### Response Example
```json
{
    "success": true,
    "query": "*",
    "products": {
        "start": 0,
        "requestedCount": 5,
        "returnedCount": 5,
        "totalCount": 12
    },
    "categories": {
        "start": 0,
        "requestedCount": 5,
        "returnedCount": 4,
        "totalCount": 4
    },
    "html": "<! -- the html rendered from the liquid template configured on My Hello Retail -->"
}
```
```

--------------------------------

### Search API Request Examples

Source: https://developer.helloretail.com/api/search

These snippets demonstrate how to authenticate and send a search query to the Hello Retail API.

```bash
curl -X POST \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer <YOUR_API_KEY>" \
  -d '{
    "query": "running",
    "key": "{search config key}",
    "products": {
        "returnFilters": true,
        "start": 0,
        "count": 10,
        "fields": ["title", "price", "url", "extraData.size", "extraDataNumber.rating"],
        "filters": ["brand:Nike"],
        "sorting": ["price desc"]
    },
    "categories": {
        "start": 0,
        "count": 5,
        "fields": ["title", "url"]
    },
    "redirects": {
        "start": 0,
        "count": 1
    },
    "format": "json"
}' \
  https://core.helloretail.com/serve/search
```

```python
import requests

api_url = "https://core.helloretail.com/serve/search"
api_key = "<YOUR_API_KEY>"
headers = {
    "Content-Type": "application/json",
    "Authorization": f"Bearer {api_key}"
}
payload = {
    "query": "running",
    "key": "{search config key}",
    "products": {
        "returnFilters": True,
        "start": 0,
        "count": 10,
        "fields": ["title", "price", "url", "extraData.size", "extraDataNumber.rating"],
        "filters": ["brand:Nike"],
        "sorting": ["price desc"]
    },
    "categories": {
        "start": 0,
        "count": 5,
        "fields": ["title", "url"]
    },
    "redirects": {
        "start": 0,
        "count": 1
    },
    "format": "json"
}
response = requests.post(api_url, headers=headers, json=payload)
print(response.json())
```

```php
<?php
$apiUrl = 'https://core.helloretail.com/serve/search';
$apiKey = '<YOUR_API_KEY>';
$data = [
    "query" => "running",
    "key" => "{search config key}",
    "products" => [
        "returnFilters" => true,
        "start" => 0,
        "count" => 10,
        "fields" => ["title", "price", "url", "extraData.size", "extraDataNumber.rating"],
        "filters" => ["brand:Nike"],
        "sorting" => ["price desc"]
    ],
    "categories" => [
        "start" => 0,
        "count" => 5,
        "fields" => ["title", "url"]
    ],
    "redirects" => [
        "start" => 0,
        "count" => 1
    ],
    "format" => "json"
];
$options = [
    'http' => [
        'header'  => [
            "Content-Type: application/json",
            "Authorization: Bearer $apiKey"
        ],
        'method'  => 'POST',
        'content' => json_encode($data),
    ],
];
$context  = stream_context_create($options);
$result = file_get_contents($apiUrl, false, $context);
if ($result === FALSE) { /* Handle error */ }
echo $result;
?>
```

```ruby
require 'net/http'
require 'uri'
require 'json'

api_url = URI.parse('https://core.helloretail.com/serve/search')
api_key = '<YOUR_API_KEY>'
headers = {
  'Content-Type' => 'application/json',
  'Authorization' => "Bearer #{api_key}"
}
payload = {
  query: 'running',
  key: '{search config key}',
  products: {
    returnFilters: true,
    start: 0,
    count: 10,
    fields: ['title', 'price', 'url', 'extraData.size', 'extraDataNumber.rating'],
    filters: ['brand:Nike'],
    sorting: ['price desc']
  },
  categories: {
    start: 0,
    count: 5,
    fields: ['title', 'url']
  },
  redirects: {
    start: 0,
    count: 1
  },
  format: 'json'
}
http = Net::HTTP.new(api_url.host, api_url.port)
http.use_ssl = true
request = Net::HTTP::Post.new(api_url.request_uri, headers)
request.body = payload.to_json
response = http.request(request)
puts response.body
```

```java
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;

public class HelloRetailSearchApiExample {
    public static void main(String[] args) throws Exception {
        String apiUrl = "https://core.helloretail.com/serve/search";
        String apiKey = "<YOUR_API_KEY>";
        String jsonInputString = """
        {\n  \"query\": \"running\",\n  \"key\": \"{search config key}\",\n  \"products\": {\n    \"returnFilters\": true,\n    \"start\": 0,\n    \"count\": 10,\n    \"fields\": [\"title\", \"price\", \"url\", \"extraData.size\", \"extraDataNumber.rating\"],\n    \"filters\": [\"brand:Nike\"],\n    \"sorting\": [\"price desc\"]\n  },\n  \"categories\": {\n    \"start\": 0,\n    \"count\": 5,\n    \"fields\": [\"title\", \"url\"],\n  },\n  \"redirects\": {\n    \"start\": 0,\n    \"count\": 1\n  },\n  \"format\": \"json\"\n}""";
        URL url = new URL(apiUrl);
        HttpURLConnection con = (HttpURLConnection) url.openConnection();
        con.setRequestMethod("POST");
        con.setRequestProperty("Content-Type", "application/json");
        con.setRequestProperty("Authorization", "Bearer " + apiKey);
        con.setDoOutput(true);
        try(OutputStream os = con.getOutputStream()) {
            byte[] input = jsonInputString.getBytes("utf-8");
            os.write(input, 0, input.length);
        }
        int code = con.getResponseCode();
        System.out.println(code);
        // Read response as needed
    }
}
```

```csharp
using System;
using System.Net.Http;
using System.Text;
```

--------------------------------

### JSON Response Example

Source: https://developer.helloretail.com/api/search

This is an example of a JSON response containing search results, category information, and filter options. It includes details about products, available filters, and sorting preferences.

```json
{
    "success": true,
    "query": "cap",
    "products": {
        "start": 0,
        "requestedCount": 2,
        "returnedCount": 2,
        "totalCount": 12,
        "results": [
            {
                "title": "Blue Cap",
                "extraData": {
                    "color": "Blue"
                },
                "extraDataList": {
                    "sizes": ["XL", "L", "M"]
                },
                "price": 100,
                "url": "https://shop.example.com/blue-cap",
                "suggestedResult": false
            },
            {
                "title": "Red Cap",
                "extraData": {
                    "color": "Red"
                },
                "extraDataList": {
                    "sizes": ["L", "M", "S"]
                },
                "price": 200,
                "url": "https://shop.example.com/red-cap",
                "suggestedResult": false
            }
        ],
        "filters": [
            {
                "name": "hierarchies",
                "settings": {
                    "name": "hierarchies",
                    "type": "LIST",
                    "title": "Categories"
                },
                "values": [
                    {
                        "title": "Hats$",
                        "count": 12,
                        "query": "hierarchies:Hats$",
                        "selected": true
                    },
                    {
                     "title": "Shirts$",
                        "count": 12,
                        "query": "hierarchies:Shirts$",
                        "selected": true
                    }

                ]
            },
            {
                "name": "isOnSale",
                "settings": {
                    "name": "isOnSale",
                    "type": "BOOLEAN",
                    "title": "On Sale",
                    "filteringText": "Yes",
                    "negatedFilteringText": "No"
                },
                "values": [
                    {
                        "title": "No",
                        "count": 8,
                        "query": "isOnSale:false",
                        "selected": false
                    },
                    {
                        "title": "Yes",
                        "count": 4,
                        "query": "isOnSale:true",
                        "selected": false
                    }
                ]
            },
            {
                "name": "price",
                "settings": {
                    "name": "price",
                    "type": "RANGE",
                    "title": "Pris"
                },
                "min": "16.0",
                "max": "90.0",
                "selectedMin": "10",
                "selectedMax": "300"
            },
        ],
        "sorting": [
            {
                "name": "inStock",
                "settings": {
                    "name": "inStock",
                    "title": "Sort by stock status",
                    "ascendingText": "In stock first",
                    "descendingText": "Out of stock first"
                },
                "descending": {
                    "query": "inStock desc",
                    "selected": false
                },
                "ascending": {
                    "query": "inStock asc",
                    "selected": false
                }
            },
            {
                "name": "price",
                "settings": {
                    "name": "price",
                    "title": "Sort by price",
                    "ascendingText": "Cheapest first",
                    "descendingText": "Most expensive first"
                },
                "descending": {
                    "query": "price desc",
                    "selected": true
                },
                "ascending": {
                    "query": "price asc",
                    "selected": true
                }
            }
        ],
        "suggestedProductStatus": "MIXED"
    },
    "categories": {
        "start": 0,
        "requestedCount": 4,
        "returnedCount": 2,
        "totalCount": 2,
        "results": [
            {
                "title": "Accessories",
                "url": "https://shop.example.com/category/accessories",
                "extraData": {
                    "type": "misc"
                }
            },
            {
                "title": "Clothing",
                "url": "https://shop.example.com/category/clothing",
                "extraData": {
                    "type": "fashion"
                }
            }
        ]
    },
    "redirects": {
        "start": 0,
        "requestedCount": 1,
        "returnedCount": 1,
        "totalCount": 3,

```

--------------------------------

### JSONL Product Feed Example

Source: https://developer.helloretail.com/guides/feeds/data_formats

A standard JSONL file structure where each line represents a distinct product object.

```json
{"title":"Product 1","url":"https://example.com/products/1","price":99.95,"imgUrl":"https://example.com/products/1.jpg","extraData":{ "size":"42", "rate":"20" },"extraDataNumber":{ "width":100 },"extraDataList":{ "colorsInStock": ["blue","green","red"]}}
{"title":"Product 2","url":"https://example.com/products/2","price":199,"imgUrl":"https://example.com/products/2.jpg","extraData":{ "size":"35", "rate":"18" },"extraDataNumber":{ "width":200 },"extraDataList":{ "colorsInStock": ["orange","purple","beige"]}}
{"title":"Product 3","url":"https://example.com/products/3","price":399,"imgUrl":"https://example.com/products/3.jpg","extraData":{ "size":"19", "rate":"45" },"extraDataNumber":{ "width":150 },"extraDataList":{ "colorsInStock": ["yellow","black","white"]}}
{"title":"Product 4","url":"https://example.com/products/4","price":410,"imgUrl":"https://example.com/products/4.jpg","extraData":{ "size":"25", "rate":"47" },"extraDataNumber":{ "width":225 },"extraDataList":{ "colorsInStock": ["red","orange","yellow"]}}
```

--------------------------------

### Render product with manual click tracking

Source: https://developer.helloretail.com/sdk/tracking/click_tracking

Example of creating a DOM element for a product and attaching a click handler that pushes the tracking code to the Hello Retail queue.

```javascript
function renderProduct(product) {
    const productNode = document.createElement("a");
    productNode.href = product.originalUrl;
    productNode.onclick = function() {
        hrq = window.hrq || [];
        hrq.push([
            "trackClick",
            product.trackingCode
        ]);
    };
    productNode.innerHTML = `<p>${product.title}</p><img src="${product.imgUrl} width="200"></a>`;
    return productNode;
}
```

--------------------------------

### GET /products

Source: https://developer.helloretail.com/sdk/pages/javascript_sdk

Retrieves a list of products with their associated metadata, pricing, and stock information.

```APIDOC
## GET /products

### Description
Retrieves a list of products including stock status, pricing, and identifiers.

### Method
GET

### Endpoint
/products

### Response
#### Success Response (200)
- **keywords** (string) - Comma-separated list of keywords
- **inStock** (boolean) - Indicates if the product is currently in stock
- **productNumber** (string) - Unique identifier for the product
- **variantProductNumbers** (array) - List of variant product identifiers
- **price** (number) - Current price of the product
- **previousPrice** (number) - Original price before discount
- **score** (number) - Product relevance or rating score

#### Response Example
{
  "keywords": "{keyword-1}, {keyword-1}, {keyword-1}",
  "inStock": true,
  "productNumber": "{product number}",
  "variantProductNumbers": [],
  "price": 233.44,
  "previousPrice": 500.23,
  "score": 7.0
}
```

--------------------------------

### Basic GraphQL Personalization Request

Source: https://developer.helloretail.com/api/configuration/search

A static mutation example for updating search boosts for a specific algorithm.

```graphql
mutation UpdateSearchPersonalization {
  updateSearchAlgorithmPersonalization(
    personalization: {
      algorithmId: "1234"
      personalizedFields: [
        {
          field: "product.pi.budgetZone"
          boostValue: 5
        }
        {
          field: "product.pi.productCluster"
          boostValue: 3
        }
      ]
    }
  ) {
    allowedFields
    availableFields
    personalizedFields {
      field
      boostValue
    }
  }
}
```

--------------------------------

### GET /serve/tile/click

Source: https://developer.helloretail.com/guides/newsletter_content

Provides a clickable link for a product tile, directing users to the relevant campaign or product. Requires the same parameters as the image endpoint to ensure consistency.

```APIDOC
## GET /serve/tile/click

### Description
Provides a clickable link for a product tile, directing users to the relevant campaign or product. Requires the same parameters as the image endpoint to ensure consistency.

### Method
GET

### Endpoint
https://core.helloretail.com/serve/tile/click

### Query Parameters
- **template** (String) - Required - Template id
- **campaign** (String) - Required - Campaign id
- **index** (Int) - Required - First offset in result set
- **excludeFromCampaigns** (String list) - Optional - Comma-separated list of campaign-ids to exclude from search
- **email** (String) - Required - User's email address

### Request Example
```html
<a href="https://core.helloretail.com/serve/tile/click?campaign=66277f536de91f4c06fbdba3&amp;index=0&amp;email=user@example.com">
    Clickable Product Tile
</a>
```

### Response
#### Success Response (200)
- **redirect_url** (URL) - The URL to redirect the user to upon clicking the tile.
```

--------------------------------

### HTML Response Structure from Hello Retail SDK

Source: https://developer.helloretail.com/sdk/pages/javascript_sdk

This is an example of the data structure returned when requesting HTML format. It includes product rendering information and potentially empty fields for `result`.

```json
{
    "firstLoad": true,
    "products": {
        "start": 0,
        "count": 50,
        "total": 500,
        "html": "<div>Products rendered using the design selected for the page</div>",
        "result": [], // this will be empty in case of HTML in format
        "javascript": "/* javascript from the design selected for the page */",
        "style": "/* css from the design selected for the page */"
    }
}

```

--------------------------------

### JSON Response Structure from Hello Retail SDK

Source: https://developer.helloretail.com/sdk/pages/javascript_sdk

This is an example of the data structure returned when requesting JSON format. It includes product details in the `result` array, allowing for custom rendering.

```json
{
    "firstLoad": true,
    "products": {
        "start": 0,
        "count": 50,
        "total": 500,
        "html": "",
        "result": [
            {
                "title": "abc",
                "url": "{url}",
                "imgUrl": "{image url}",
                "currency": "DKK",
                "priceLowered": true,
                "description": "{description}",

```

--------------------------------

### JSONL Feed with Metadata

Source: https://developer.helloretail.com/guides/feeds/data_formats

Example of a JSONL feed including a metadata object to define filterable fields at the start of the stream.

```json
{"helloRetailMetaDataType":"FIELD_METADATA","metadata":{"filterableFields":["extraData.size", "extraData.rate","extraDataNumber.width","extraDataList.colorsInStock"]}}
{"title":"Product 1","url":"https://example.com/products/1","price":99.95,"imgUrl":"https://example.com/products/1.jpg","extraData":{ "size":"42", "rate":"20" },"extraDataNumber":{ "width":100 },"extraDataList":{ "colorsInStock": ["blue","green","red"]}}
{"title":"Product 2","url":"https://example.com/products/2","price":199,"imgUrl":"https://example.com/products/2.jpg","extraData":{ "size":"35", "rate":"18" },"extraDataNumber":{ "width":200 },"extraDataList":{ "colorsInStock": ["orange","purple","beige"]}}
{"title":"Product 3","url":"https://example.com/products/3","price":399,"imgUrl":"https://example.com/products/3.jpg","extraData":{ "size":"19", "rate":"45" },"extraDataNumber":{ "width":150 },"extraDataList":{ "colorsInStock": ["yellow","black","white"]}}
{"title":"Product 4","url":"https://example.com/products/4","price":410,"imgUrl":"https://example.com/products/4.jpg","extraData":{ "size":"25", "rate":"47" },"extraDataNumber":{ "width":225 },"extraDataList":{ "colorsInStock": ["red","orange","yellow"]}}
```

--------------------------------

### Initialize Hello Retail SDK

Source: https://developer.helloretail.com/guides/quick-start

Include this snippet in the `<head>` of your website to enable activity tracking and initialize the SDK with your website UUID.

```html
<script async src="https://helloretailcdn.com/helloretail.js"></script>
<script>
    window.hrq = window.hrq || [];
    hrq.push(['init', 
        {
            websiteUuid: "{website uuid}"
        }
    ]);
</script>
```

--------------------------------

### Execute Hello Retail SDK Method via Command Queue

Source: https://developer.helloretail.com/guides/troubleshooting

Push SDK method calls directly to the command queue for execution once the script is ready. This is simpler for single method calls.

```javascript
hrq = window.hrq || [];
hrq.push([
    "setCart",
    {
        total: 314, // set a total of 314 of your shop's currency
        productNumbers: ["{product id}", "{product id}"]
    }
]);

```

--------------------------------

### Product Hierarchy Examples

Source: https://developer.helloretail.com/guides/customer_bias

Examples of product hierarchy paths (breadcrumbs) used to categorize items in the catalog.

```text
Men › Shoes › Sport
```

```text
Offers › Shoes
```

--------------------------------

### Initialize and use local_storage

Source: https://developer.helloretail.com/guides/templates/javascript_modules

Demonstrates creating a namespaced local storage instance and performing basic operations.

```javascript
import "local_storage";
var storage = querystring_storage.create("test-data");
storage.put('filter', 'brand:Nike')
var filter = storage.get('filter')
```

--------------------------------

### HTML Integration Example with Hello Retail SDK

Source: https://developer.helloretail.com/sdk/pages/javascript_sdk

Implement client-side integration to load page content in HTML format. The callback function handles injecting the returned HTML, CSS, and executing JavaScript. The `format` option defaults to 'html'.

```javascript
hrq = window.hrq || [];
hrq.push([
    "loadPage",
    "{page id}",
    {
        "id": 256,
        "url": "{url}",
        "firstLoad": true,
        "format": "html", // it is optional, HTML is the default value
        "params": {"filters": {"hierarchy": ["{hierarchy-1}", "{hierarchy-2}"]}},
        "products": {
            "start": 0,
            "count": 50,
            "filters": [
                "brand: {brand}",
                "price: [10 TO 10]"
            ],
            "sorting": [    // NOTICE: setting sorting manually overrides the search template sorting settings
                "title DESC"
            ]
        }
    },
    (data) => {
        //Inject the returned HTML into the page
        // execute the returned javascript to set interactive parts of the page
        //Inject the returned CSS
    }
]);

```

--------------------------------

### Product Data Structure Example

Source: https://developer.helloretail.com/guides/customer_bias

This is an example of a product data structure that includes custom extraData fields, such as 'margin', which can be used to categorize products.

```json
{
    "title": "Air Max X",
    "description": "Ultra light and fast running shoes",
    "price": 1200,
    "url": "htpps://shop.example.com/men/shoes/air-max-x",
    "imgUrl": "htpps://shop.example.com/images/shoes/air-max-x.jpg",
    "extraData": {
        "margin": "high"
    },
    ...
    
}
```

--------------------------------

### Wait for Hello Retail SDK Initialization with Callback

Source: https://developer.helloretail.com/guides/troubleshooting

Use this method to ensure the SDK object is ready before executing methods. Push a callback function to the command queue that receives the SDK object.

```javascript
hrq = window.hrq || [];
hrq.push(function(sdk) {
    // The sdk object is ready to use. You could use it to track a cart for instance
    sdk.setCart({total:314, productNumbers:["{product id}", "{product id}"]});
});

```

--------------------------------

### Rendered HTML API Response Example

Source: https://developer.helloretail.com/api/search

Example of an API response structure when HTML rendering is enabled, showing the inclusion of an html property instead of results.

```json
{
    "success": true,
    "query": "*",
    "products": {
        "start": 0,
        "requestedCount": 5,
        "returnedCount": 5,
        "totalCount": 12
    },
    "categories": {
        "start": 0,
        "requestedCount": 5,
        "returnedCount": 4,
        "totalCount": 4
    },
    "html": "<! -- the html rendered from the liquid template configured on My Hello Retail -->",
}
```

--------------------------------

### Initialize and Route Hello Retail in an SPA

Source: https://developer.helloretail.com/sdk/pages/spa_example

This HTML document includes the Hello Retail script initialization and a routing mechanism that triggers SDK reloads and updates category filters on hash changes. It must be served from a web server to avoid cross-site request limitations.

```html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shop</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <!-- Initialize helloretail -->
    <script async src="https://helloretailcdn.com/helloretail.js"></script>
    <script>
        window.hrq = window.hrq || [];
        hrq.push(['init', {
            websiteUuid: "{website uuid}"
        }]);
    </script>
</head>
<body>
    <div class="container">
        <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
            <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
                <span class="fs-4">My Shop</span>
            </a>

            <ul class="nav nav-pills">
                <li class="nav-item"><a href="#Music" class="nav-link">Music</a></li>
                <li class="nav-item"><a href="#Clothing>Hoodies" class="nav-link">Clothing &gt; Hoodies</a></li>
                <li class="nav-item"><a href="#Clothing>Accessories" class="nav-link">Clothing &gt; Accessories</a></li>
            </ul>
        </header>
      </div>
      <div class="container">
        <div class="row">
            <div class="col" id="page-content">
                <h2>SPA example page</h2>
                <p>Use the navigation links at the top to switch between category pages</p>
            </div>
        </div>

      </div>

      <script>
        // Add code in your routing system (could be Vue Routing or React Router) that handles
        // the case where the visitor has navigated to a category page. In this simple example we
        // are just listening for hashchange and navigate based on that
        addEventListener("hashchange", hashChanged);
        function hashChanged() {
            // Code in this function is just boilerplate to make the example work
            handleNavigation();

            // Use the command queue to make sure hello retail is ready
            window.hrq = window.hrq || [];
            hrq.push(sdk => {
                // If the user has navigated to a category page
                // set the correct filter parameters to the data attribute
                const currenthierarchy = getCurrenthierarchy();
                if (currenthierarchy.length > 0) {
                    insertPageDiv(currenthierarchy);
                }
                // On every navigation call reload for automatic view tracking and 
                // initialization of other managed products
                sdk.reload();
            });
        }
        hashChanged();

        // Code for inserting the page div in the correct container with
        // the correct filter
        function insertPageDiv(currenthierarchy) {
            const div = document.createElement("div");
            div.id = "helloretail-category-page-649ebd2e80e793164328b45a";
            div.dataset.filters = JSON.stringify({
                hierarchies: currenthierarchy
            });
            const container = document.getElementById("page-content");
            container.innerHTML = "";
            container.appendChild(div);
        }
        // Get the current hierarchy from the url. In real
        // applications there are presumably better way of getting 
        // parameters from the url. Maybe as part of the routing system
        function getCurrenthierarchy() {
            let hash = decodeURIComponent(document.location.hash);
            const currenthierarchy = hash.length > 1 ? 
            hash.substring(1).split(">") : [];
            return currenthierarchy;
        }
        // Boilerplate code for handling navigation in this example
        function handleNavigation() {
            let hash = decodeURIComponent(document.location.hash);
            hash = hash == "" ? "#" : hash;
            const elems = document.querySelectorAll(".nav-link");
            [].forEach.call(elems, function(el) {
                el.classList.remove("active");
                if (el.getAttribute("href") == hash) {
                    el.classList.add("active");
                }
            });

            const params = new URLSearchParams(document.location.search);
            params.delete('hr-page');  
            const url = [location.protocol, '//', location.host, location.pathname, params.toString(), location.hash].join('');
            window.history.replaceState({}, "", url);
        }
    </script>

</body>
</html>
```

--------------------------------

### JSON Integration Example with Hello Retail SDK

Source: https://developer.helloretail.com/sdk/pages/javascript_sdk

Implement API integration to load page content in JSON format. The callback function processes the structured data to generate custom HTML. Specify `"format": "json"` and `"products.fields` for desired product attributes.

```javascript
hrq = window.hrq || [];
hrq.push([
    "loadPage",
    "{page id}",
    {
        "id": 256,
        "url": "{url}",
        "firstLoad": true,
        "format": "json", // it is optional, HTML is the default value
        "params": {"filters": {"hierarchy": ["{hierarchy-1}", "{hierarchy-2}"]}},
        "products": {
            "start": 0,
            "count": 50,
            "fields": [{field}, "price"], // product fields to return when using the JSON response format. By default it will return all fields.
            "filters": [
                "brand:{brand}",
                "price:[10 TO 10]"
            ],
            "sorting": [
                "title DESC"
            ]
        }
    },
    (data) => {
        //Use the API response data to generate your own html content and inject it in your page.
    }
]);

```

--------------------------------

### GET /products (JSON Feed with Pagination)

Source: https://developer.helloretail.com/guides/feeds/feeds_history

Retrieves the product feed with pagination support. The system will request the feed using an HTTP GET request with an 'Accept: application/json' header.

```APIDOC
## GET /products (JSON Feed with Pagination)

### Description
Retrieves the product feed with pagination support. The system will request the feed using an HTTP GET request with an 'Accept: application/json' header.

### Method
GET

### Endpoint
/products

### Request Headers
- **Accept**: application/json

### Response
#### Success Response (200)
- **Content-Type**: application/json; charset=utf-8

### Response Example (Minimum)
```json
{ "products":[] }
```
```

--------------------------------

### GET /products (Standard JSON Feed)

Source: https://developer.helloretail.com/guides/feeds/feeds_history

Retrieves the product feed as a JSON object. The system will request the feed using an HTTP GET request with an 'Accept: application/json' header.

```APIDOC
## GET /products (Standard JSON Feed)

### Description
Retrieves the product feed as a JSON object. The system will request the feed using an HTTP GET request with an 'Accept: application/json' header.

### Method
GET

### Endpoint
/products

### Request Headers
- **Accept**: application/json

### Response
#### Success Response (200)
- **Content-Type**: application/json; charset=utf-8

### Response Example (Minimum)
```json
{ "products":[] }
```
```

--------------------------------

### Configure Product Layout View

Source: https://developer.helloretail.com/guides/templates/overlay/mobile

Sets the product display format to either a 2x2 grid or a space-efficient list.

```text
{# boolean product_grid_layout = true #}
```

--------------------------------

### GET /products (JSON Feed with Delta)

Source: https://developer.helloretail.com/guides/feeds/feeds_history

Retrieves a delta feed of products, including a deltaToken for tracking changes. The system will request the feed using an HTTP GET request with an 'Accept: application/json' header.

```APIDOC
## GET /products (JSON Feed with Delta)

### Description
Retrieves a delta feed of products, including a deltaToken for tracking changes. The system will request the feed using an HTTP GET request with an 'Accept: application/json' header.

### Method
GET

### Endpoint
/products

### Request Headers
- **Accept**: application/json

### Response
#### Success Response (200)
- **Content-Type**: application/json; charset=utf-8

### Response Example (Minimum)
```json
{ "products": [], "deltaToken": "12345678" }
```
```

--------------------------------

### REST API Search Request Example

Source: https://developer.helloretail.com/guides/quick-start

Example JSON body for a REST API search request. Specify query, configuration key, format, and content-type. Configure product search parameters like filters and sorting.

```json
{
    "query": "running",
    "key": "{search config id}",
    "format": "json",
    "products": {
        "returnFilters": true,
        "start":0,
        "count":10,
        "fields":["title","price", "url"],
        "filters": ["{filter name}"],
        "//sorting": ["price desc"]
    }
}
```