Расширенная таблица товаров для Shop-Script

Плагин позволяет создавать в таблице товаров новые столбцы, элементы управления и поля для вывода информации путём программирования.

Доступны поля из таблиц:

• Товары (shop_product) - 'products'
• Характеристики (shop_product_features) - 'features'
• Изображения (shop_product_images) - 'images'
• Списки (shop_set_products) - 'sets'
• Категории (shop_category) - 'categories'
• Все категории (shop_category) - 'allcategories' (для получения полного пути к категориям)
• Артикулы (shop_product_skus) - 'skus'
• Группы товаров, если установлен плагин "Группы товаров" (shop_productgroup_product_group) - 'groups'

Если этих таблиц недостаточно для получения требуемой функциональности, то по запросу расширим их список.

В настройках плагина можно загрузить примеры базовых шаблонов кода для 1.3 и 2.0

Примечание. Базовые шаблоны имеют ограничение на объём кода. Ниже дан расширенный шаблон:

• позволяет выбрать положение столбца (в начале, за столбцом с выбранным номером, в конце)
• даёт возможность задать стиль и ширину столбца
• добавляет флажки в диалог "Настройки списка товаров" для управления видимостью столбцов в таблице.

Архив шаблона кода для Webasyst 1.3

Если у кого-то возникнут предложения по расширенному шаблону для 2.0, то можем их рассмотреть.

Общий подход к настройке шаблонов.

Выбор таблиц

Для получения нужных полей товара необходимо задать таблицы, в которых эти поля находятся (ниже будет пример для просмотра доступных полей). Делается это в блоке кода ТАБЛИЦЫ

// ТАБЛИЦЫ

    'products',
    'features',
    'skus',
    'sets',
    'categories',
    'allcategories',
    'images',
    'groups',

// КОНЕЦ

Пример 1. Контроль отсутствия описания у товара

Описания товаров хранятся в таблице товаров shop_product. Значит, нужно раскомментировать строку "properties":

// ТАБЛИЦЫ

    'products',
  //    'features',
  //  'sets',
  //  'categories',
  //  'images',
  //  'groups',

// КОНЕЦ

После этого в коде нужно реализовать проверку равенства нулю длины описания.

Если данные из каких-то таблиц не используются, то строки

Место добавления новых столбцов в таблицу товаров

Выбор места (в начало, в конец или между) производится в блоках кода "ВЫБОР МЕСТА ДОБАВЛЕНИЯ ЗАГОЛОВКА СТОЛБЦА" и "ВЫБОР МЕСТА ДОБАВЛЕНИЯ ДАННЫХ".

После выбора варианта добавления заголовка (1, 2 или 3) раскомментируйте соответствующие строки в блоке добавления данных.

Пример 2. Добавление столбца в начало таблицы товаров. Вывод данных под названием не требуется

// ВЫБОР МЕСТА ДОБАВЛЕНИЯ ЗАГОЛОВКА СТОЛБЦА 

let colName = 
`
    <div class="s-column" style="width:32px">
        <div class="s-header-column-wrapper">Код</div>
    </div>    
`;

//$(el).append(colName); // в конец таблицы (1)    

  $(el).prepend(colName); // в начало таблицы (2)

let indexColumn = 1; // за столбцом с индексом (начало с 0) (3)
//$(el).find('div.s-column').eq(indexColumn).after(colName);

// КОНЕЦ
  
...
  
// ВЫБОР МЕСТА ДОБАВЛЕНИЯ ДАННЫХ

//$(el).closest('.s-column-name').find('.asexttable-panel').append('id: ' + Math.floor(data[i]['id'])); // панель под названием товара

let divEl = "<div class='as-code' style='width:32px;'>"+id+"</div>";

//$(el).closest(rowClass).append(divEl); // (1)

  $(el).closest(rowClass).prepend(divEl); // (2)

//$(el).closest(rowClass).find('div.s-column').eq(indexColumn).after(divEl);  // (3)

// КОНЕЦ

Получение списка доступных полей

Добавьте в код на странице настройки плагина над примечанием "ВЫБОР МЕСТА ДОБАВЛЕНИЯ ЗАГОЛОВКА СТОЛБЦА" вывод данных в консоль браузера:

console.log(r.data);

Примеры вывода данных из основных полей

Для вывода данных из основных полей необходимо в качестве свойства объекта указать название поля:

data[i]['id']; // ID товара
data[i]['description']; // Описание
data[i]['badge']; // Наклейка
data[i]['total_sales']; // Общее количество проданного товара
data[i]['edit_datetime']; // Время редактирования

Пример вывода данных дополнительных полей

По умолчанию в качестве разделителя дополнительных полей используется символ #, но можно задать другой символ в настройках плагина. Для получения значений полей необходимо разбить эту строку на элементы массива по данному разделителю:

let categories = r.data.categories;

// Добавить перед выводом панели под названием товара

let categoriesStr = categories.find(cat => cat.id == data[i]['id']).categories;
let categoriesArr = categoriesStr.split('#');            
let categoryResult = categoriesArr.join(',');
categoryResult = `<div>${categoryResult}</div>`;

$(el).closest('.s-product-name').find('.asexttable-panel').append('id: ' + Math.floor(data[i]['id']) + categoryResult); // панель под названием товара

В Webasyst 1.3 таблица товаров имеет ограничение по высоте строк. Для его отмены добавим стиль:

<style>
  table.zebra.single-lined td div{
    height:unset;
  }  
</style>

После этого данные отобразятся в строке под названием товара.