Search Date Picker - Fast and simple collection of search-specific browser events

Search Date Picker is awesome tool!

Getting started

Install

npm install

Run Demo

npm run start

Build with webpack

npm run build

Example Configuration

Configuratio in index.html

<script src="https://unpkg.com/@quasiris/search-data-picker@1.7.1/dist/main.bundle.js"></script>
<script>
   const configFile = {
                          "sessionConfigurations": {
                              "storage": "cookie",
                              "expiration": 43200
                          },
                          "endpointConfigurations": {
                              "url": "https://qsc-dev.quasiris.de/api/v1/search-data-picker/quasiris/search-data-picker-demo"
                          },
                          "pickerConfigurations": {
                              "documents": [
                                  {
                                      "type": {
                                          "click": {
                                              "selector": ".products .product",
                                              "elements": {
                                                  "selectors": [
                                                      {
                                                          "key": "value",
                                                          "selectors": ".info > h3"
                                                      }
                                                  ],
                                                  "attributes": [
                                                      {
                                                          "key": "id",
                                                          "attributes": "id"
                                                      },
                                                      {
                                                          "key": "class",
                                                          "attributes": "class"
                                                      }
                                                  ]
                                              }
                                          },
                                          "results": {
                                              "selector": ".products-list_products",
                                              "elements": {
                                                  "selectors": [
                                                      {
                                                          "key": "id",
                                                          "selectors": "a",
                                                          "attribute": "href"
                                                      }
                                                  ],
                                                  "attributes": [
                                                      {
                                                          "key": "id",
                                                          "attributes": "id"
                                                      },
                                                      {
                                                          "key": "class",
                                                          "attributes": "class"
                                                      }
                                                  ]
                                              }
                                          }
                                      }
                                  }
                              ],
                              "sorting": [
                                  {
                                      "selector": "body > div > section.sorting > div > select"
                                  }
                              ]
                          }
                      };

    const url = 'https://qsc-dev.quasiris.de/api/v1/admin/config/hornbach-de/merge/search-data-picker';
    picker.initPicker.fromConfigFile(configFile) or picker.initPicker.fromUrl(url);
</script>