Настройка 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>

Новости и статьи
Обновления платформы
Документация по API insales
API для написания интеграций
Разработка приложений
Пошаговая документация
Партнерская программа
Станьте партнером InSales