Option Selectors

Настройка Option Selectors

Чтобы настройки селектора сработали, необходимо удостовериться в правильности разметки — data-product-id.

Настройки задаются через метод setConfig глобального объекта Products, его вызов стоит оставлять в глобальной области видимости. Если запустить метод внутри $(document).ready(function() {}), результат может быть не предсказуем.

Свойства которые можно задать через метод setConfig:

Property	Default	Назначение
options	`{ 'default': 'option-default' }`	Через данный объект задаются шаблоны для вывода опций
fileUrl	Пустой объект	Объект для хранения картинок из раздела «Файлы»
decimal	Пустой объект	Колличество символов после запятой, для единиц измерения
filtered	true	Если значение true, то недоступные опции не выводятся в шаблон.
disableHideItem	false	Показывает недоступные варианты товаров, даже если в бек-офисе они отключены
selectUnavailable	true	Разрешить выбирать недоступный вариант (актуально если `filtered: false`)
allowUnavailable	false	Разрешить выбирать первым недоступный вариант
showVariants	true	При значении false, рендер опций не производится
initOption	true	Отмечать активные опции при инициализации?
useMax	false	Использовать максимальное колличество? Если значение true, в quantity невозможно указать колличество больше чем доступно на складе.

Пример:

js

        
          Products.setConfig({
  initOption: true,
  filtered: false,
  showVariants: true,
  fileUrl: fileUrl || {},
  useMax: false,
  decimal: {
    kgm: 1,
    dmt: 1
  },
  options: {
    'Цвет': 'option-image',
    'Размер': 'option-radio',
    'Материал': 'option-select',
    'Жесткий диск': 'option-span',
    'default': 'option-span'
  }
});

settings -> options

Через данный объект задаются шаблоны для вывода опций.

Ключ — название опции
Значение — data-template-id шаблона

Пример:

template js

        
          Products.setConfig({
  options: {
    'Цвет': 'option-color',
    'Размер': 'option-radio',
    'Материал': 'option-select',
    'Жесткий диск': 'option-span'
  }
});

        
           
<script type="text/template" data-template-id="option-select">
  <div class="<%= classes.option %> is-select">
    <label class="<%= classes.label %>"><%= title %></label>
    <select class="<%= classes.values %>" data-option-bind="<%= option.id %>">
      <% _.forEach(values, function (value){ %>
        <option
          <%= value.controls %>
          <%= value.state %>
        >
          <%= value.title %>
        </option>
      <% }) %>
    </select>
  </div>
</script>
<script type="text/template" data-template-id="option-span">
  <div class="<%= classes.option %> is-span">
    <label class="<%= classes.label %>"><%= title %></label>
    <div class="<%= classes.values %>">
      <% _.forEach(values, function (value){ %>
        <button class="<%= value.classes.all %> is-span"
          <%= value.controls %>
          <%= value.state %>
        >
          <%= value.title %>
        </button>
      <% }) %>
    </div>
  </div>
</script>
<script type="text/template" data-template-id="option-radio">
  <div class="<%= classes.option %> is-radio">
    <label class="<%= classes.label %>"><%= title %></label>
    <div class="<%= classes.values %>">
      <% _.forEach(values, function (value){ %>
        <label class="<%= value.classes.all %> is-radio">
          <input class="<%= value.classes.state %>"
            type="radio"
            name="<%= handle %>"
            <%= value.state %>
            <%= value.controls %>
          >
          <span><%= value.title %></span>
        </label>
      <% }) %>
    </div>
  </div>
</script>
<script type="text/template" data-template-id="option-color">
  <div class="<%= classes.option %> is-color">
    <label class="<%= classes.label %>"><%= title %></label>
    <div class="<%= classes.values %>">
      <% _.forEach(values, function (value){ %>
        <button class="<%= value.classes.all %> is-color"
          <%= value.controls %>
          <%= value.state %>
        >
          <%= value.title %>
        </button>
      <% }) %>
    </div>
  </div>
</script>

settings -> fileUrl

Объект для хранения картинок из раздела «Файлы»

Liquid

        
          <script>
  {% comment %}
    создание объекта с картинками из файлов для collection
  {% endcomment %}
  if (!fileUrl) {
   var fileUrl = {}
  }
  {% assign option_title  = 'Цвет' %}
  {% assign collection_handle  = 'all' %}
  {% assign image_format  = '.png' %}
  {% for option_name in collections[collection_handle].options %}
    {% if option_name.title == option_title %}
      {% for option_value in option_name.values %}
        {% capture fileName %}{{option_value.title | replace: ' ',  '_' }}{{image_format}}{% endcapture %}
        {% assign fileURL = fileName | file_url  %}
        {% if fileURL %}
          fileUrl['{{ option_value.title | downcase }}'] = '{{ fileURL }}';
        {% endif %}
      {% endfor %}
    {% endif %}
  {% endfor %}
</script>
<script>
  {% comment %}
    создание объекта с картинками из файлов для product
  {% endcomment %}
  if (!fileUrl) {
   var fileUrl = {}
  }
  {% assign option_title  = 'цвет' %}
  {% assign image_format  = '.png' %}
  {% for option in product.options %}
    {% assign option-title = option.title | downcase %}
    {% if option-title == option_title %}
     {% for value in option.values %}
       {% capture fileName %}{{value.title | replace: ' ',  '_'}}{{image_format}}{% endcapture %}
       {% assign fileURL = fileName | downcase | file_url  %}
       {% if fileURL %}
        fileUrl['{{ value.title | downcase }}'] = encodeURI('{{ fileURL }}');
       {% endif %}
     {% endfor %}
    {% endif %}
  {% endfor %}
</script>
<script>
  Products.setConfig({
    fileUrl: fileUrl
  });
</script>