Плагин Webasyst "Расширенная таблица товаров"

Шаблон кода для версии 1.3

В ShopScript можно расширять таблицу товаров, путём включения в неё дополнительных столбцов со свойствами и характеристиками товаров. Это подходит для размещения в них относительно небольшого объёма данных. При большом объеме данных, содержащих длинные фразы или списки, узкие колонки столбцов подходят плохо, особенно в случаях, когда размер этих данных для товаров различается существенно. Это приводит к возникновению в таблице строк разной высоты и множества пустой площади в ячейках, которую можно было бы использовать для вывода полезной информации.

Другая проблема состоит в том, что дополнительные столбцы запрограммированы на вывод только определённых данных по товару и не могут использоваться для вывода результов работы функций или ссылок.

Данный плагин как раз и предназначен для решения этих задач. Он позволяет произвести балансировку данных в таблице так, чтобы путём её распределения по ячейкам увеличить информационность и удобство работы с таблицей товаров.

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

Особенностью данного плагина является то, что дополнительные данные не выбираются пользователями из предлагаемых списков, как в других плагинах, а программируются. Проще говоря, пользователи сами создают функциональность, которая им нужна. По этой причине плагин предназначен, в первую очередь, для опытных пользователей и разработчиков, знакомых с HTML, CSS и JavaScript.

В качестве дополнительных данных доступны поля из таблиц:

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

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

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

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

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>

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