Range¶

Range element is element with 2 inputs intended for numbers.

TODO dodać screen jak to wygląda, gdy już konfigurator bedzie gotowy

Options¶

min¶

float Optional parameter. Parameter represents minimal number from which user can pick number.

max¶

float Optional parameter. Parameter represents maximum number to which user can pick number.

postfix¶

string Optional parameter. Parameter represents postfix in inputs.

JSON

{
"options":
    {
      "min" : 1,
      "max" : 15,
      "postfix" : "%"
    }
}

Build-in Validators¶

Element validates if given values are numbers. When you pass min and max option it will be checked if values are between.

Available Validators¶

Element does not have available validators.

Relations Support¶

Element does not support relations between elements.

Configuration output schema¶

schema

{
  "<element_type>" : "range",
  "<element_name>" : string,
  "<element_label>" : string,
  "<element_labelDescription>" : string,
  "<element_isRequired>" : bool,
  "<element_isHidden>" : bool,
  "<element_defaultValue>" : string,
  "<element_options>" : {
    "<element_options_min>" : float,
    "<element_options_max>" : float,
    "<element_options_postfix>" : string,
  }
}

example

{
  "type" : "range",
  "name" : "range_promotions",
  "label" : "Pick range of % promotions",
  "isRequired" : true,
  "isHidden" : false,
  "defaultValue" : [2, 7],
  "options":
  {
    "min" : 1,
    "max" : 15,
    "postfix" : "%"
  }
}

Element value¶

Value is a two-element array with numbers: [min, max].

usage in module TWIG

{% if moduleConfig.range_promotions %}
    <ul>
        <li>{{ translate("From") }}: {{ moduleConfig.range_promotions.0 }}%</li>
        <li>{{ translate("To") }}: {{ moduleConfig.range_promotions.1 }}%</li>
    </ul>
{% endif %}

html output

<ul>
    <li>From: 2%</li>
    <li>To: 7%</li>
</ul>

Example of module¶

Twig¶

Twig

{% if moduleConfig.range_promotions %}
    <p>{{ translate("Promotions from") }} {{ moduleConfig.range_promotions.0 }}% {{ translate("to") }} {{ moduleConfig.range_promotions.1 }}%</p>
{% endif %}

JSON configuration¶

JSON configuration

[
  {
    "label": "Promotions",
    "state": "unfolded",
    "elements": [
      {
        "name": "range_promotions",
        "type": "range",
        "label": "Pick range of % promotions",
        "isRequired": true,
        "defaultValue": [2, 7],
        "options": {
          "min": 1,
          "max": 15,
          "postfix": "%"
        }
      }
    ]
  }
]

JSON translations¶

JSON translations

{
  "module": {
    "pl_PL": {
      "Promotions from": "Promocje od",
      "to": "do"
    },
    "en_US": {
      "Promotions from": "Promotions from",
      "to": "to"
    }
  },
  "schema": {
    "pl_PL": {
      "Promotions": "Promocje",
      "Pick range of % promotions": "Wybierz zakres % promocji"
    },
    "en_US": {
      "Promotions": "Promotions",
      "Pick range of % promotions": "Pick range of % promotions"
    }
  }
}