iwgt 2.4.12 → 2.4.13

package/dist/generators/snippet-generator.js

@@ -0,0 +1,484 @@
+/**
+ * Генераторы для snippet файлов (liquid, scss, js)
+ */
+/**
+ * Генерирует snippet.liquid
+ * ВАЖНО: Код автоматически оборачивается системой в div.layout с CSS-переменными
+ * НЕ добавляйте обёртку layout вручную!
+ */
+export function generateSnippetLiquid(config, cleanMode = false) {
+    const useBlocks = config.type === 'block_list_widget_type';
+    let liquid = '';
+    if (!cleanMode) {
+        liquid += `{% comment %}
+  Виджет: ${generateWidgetName(config.description)}
+  Категория: ${config.category}
+  Тип: ${config.type}
+  
+  ВАЖНО: 
+  - Этот код будет автоматически обёрнут в div.layout с классом widget-type_${config.handle}
+  - CSS-переменные из настроек будут доступны через var(--handle-настройки)
+  - Используйте widget_settings для доступа к настройкам
+  ${useBlocks ? '- Блоки доступны через data.blocks (не widget.blocks!)' : ''}
+{% endcomment %}
+
+`;
+    }
+    liquid += `<div class="widget-container">
+`;
+    // Заголовок виджета (если есть в настройках)
+    liquid += `  {% if widget_settings.show-heading %}
+    <h2 class="widget-heading">{{ widget_settings.heading-text }}</h2>
+  {% endif %}
+
+`;
+    if (useBlocks) {
+        const blockTemplate = config.blockTemplate;
+        const exampleFields = blockTemplate ? Object.keys(blockTemplate.fields).slice(0, 3) : ['name', 'image', 'link'];
+        liquid += `  {% comment %} Блоки используют шаблон: ${blockTemplate?.handle || 'не указан'} {% endcomment %}
+  {% if data.blocks and data.blocks.size > 0 %}
+    <div class="widget-blocks">
+      {% for block in data.blocks %}
+        <div class="widget-block">
+          {% comment %} Доступные поля блока: ${exampleFields.join(', ')} {% endcomment %}
+          
+          {% if block.image %}
+            {% assign img_width = widget_settings.layout-content-max-width | default: 1200 %}
+            <picture class="block-image">
+              <source media="(min-width:769px)" data-srcset="{{ block.image | image_url: img_width, format: 'webp', resizing_type: 'fit_width' }}" type="image/webp" class="lazyload">
+              <source media="(max-width:768px)" data-srcset="{{ block.image | image_url: 768, format: 'webp', resizing_type: 'fit_width' }}" type="image/webp" class="lazyload">
+              <img data-src="{{ block.image | image_url: 800, resizing_type: 'fit_width' }}" alt="{{ block.name }}" class="lazyload">
+            </picture>
+          {% endif %}
+          
+          {% if block.name %}
+            <h3 class="block-title">{{ block.name }}</h3>
+          {% endif %}
+          
+          {% if block.description or block.content %}
+            <div class="block-content">
+              {{ block.description | default: block.content }}
+            </div>
+          {% endif %}
+          
+          {% if block.link %}
+            <a href="{{ block.link }}" class="block-link">
+              {{ block.button_text | default: widget_messages.read_more }}
+            </a>
+          {% endif %}
+        </div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% comment %} Заглушка для редактора {% endcomment %}
+    {% if editor_mode? %}
+      <div class="widget-empty">
+        <p>{{ widget_messages.no_blocks | default: 'Добавьте блоки для отображения контента' }}</p>
+      </div>
+    {% endif %}
+  {% endif %}
+`;
+    }
+    else {
+        liquid += `  <div class="widget-content">
+    {% comment %} Здесь размещается контент простого виджета {% endcomment %}
+    <p>{{ widget_messages.widget_description | default: 'Контент виджета' }}</p>
+  </div>
+`;
+    }
+    liquid += `</div>
+`;
+    return liquid;
+}
+/**
+ * Генерирует snippet.scss
+ * ВАЖНО: Весь код оборачивается в класс виджета
+ * Используйте & для обращения к родительскому элементу (layout + класс виджета)
+ */
+export function generateSnippetScss(config, cleanMode = false) {
+    let scss = '';
+    if (!cleanMode) {
+        scss += `// ВАЖНО: Код автоматически оборачивается в .layout.widget-type_${config.handle}
+// Используйте & для обращения к родительскому классу
+// CSS-переменные из настроек доступны через var(--название-настройки)
+
+// КРИТИЧЕСКИ ВАЖНО: Миксин background-color устанавливает фон И автоматически
+// определяет контрастный цвет текста (светлый на тёмном фоне и наоборот)
+// Переменная --bg всегда доступна из настроек design
+`;
+    }
+    scss += `@include background-color(--bg);
+
+& {
+  // Основные стили родительского элемента
+  padding-top: var(--layout-pt, 2rem);
+  padding-bottom: var(--layout-pb, 2rem);
+  position: relative;
+}
+
+// Широкий фон
+&[style*="--layout-wide-bg:true"] {
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+}
+
+// Скрытие на устройствах
+&[style*="--hide-desktop:true"] {
+  @media (min-width: 1024px) {
+    display: none;
+  }
+}
+
+&[style*="--hide-mobile:true"] {
+  @media (max-width: 767px) {
+    display: none;
+  }
+}
+
+// Состояния на основе настроек
+&[style*="--heading-hide:true"] {
+  .widget-heading {
+    display: none;
+  }
+}
+
+// Контейнер виджета
+.widget-container {
+  max-width: var(--layout-content-max-width, 1200px);
+  margin: 0 auto;
+  padding: 0 15px;
+}
+
+// Заголовок виджета
+.widget-heading {
+  text-align: var(--align-title, left);
+  margin-bottom: 2rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+// Блоки (для block_list_widget_type)
+.widget-blocks {
+  display: grid;
+  gap: var(--slide-gap, 2rem);
+  
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(auto-fit, minmax(var(--slide-width, 300px), 1fr));
+  }
+  
+  @media (max-width: 767px) {
+    grid-template-columns: repeat(auto-fit, minmax(var(--slide-width-mobile, 150px), 1fr));
+  }
+}
+
+.widget-block {
+  position: relative;
+  
+  .block-image {
+    width: 100%;
+    aspect-ratio: var(--img-ratio, 1);
+    object-fit: cover;
+    border-radius: var(--banner-border-radius, 0);
+    overflow: hidden;
+    
+    @media (max-width: 767px) {
+      aspect-ratio: var(--img-ratio-mobile, 1);
+    }
+    
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.3s ease;
+    }
+  }
+  
+  &:hover .block-image img {
+    transform: scale(1.05);
+  }
+  
+  .block-title {
+    margin: 1rem 0 0.5rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+  
+  .block-content {
+    margin: 0.5rem 0;
+    color: var(--text-color, inherit);
+    line-height: 1.6;
+  }
+  
+  .block-link {
+    display: inline-block;
+    margin-top: 1rem;
+    padding: 0.5rem 1.5rem;
+    background: var(--button-bg, #000);
+    color: var(--button-color, #fff);
+    text-decoration: none;
+    border-radius: var(--button-radius, 4px);
+    transition: opacity 0.2s;
+    
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+// Заглушка для редактора
+.widget-empty {
+  padding: 3rem;
+  text-align: center;
+  background: #f5f5f5;
+  border: 2px dashed #ddd;
+  border-radius: 8px;
+  
+  p {
+    margin: 0;
+    color: #999;
+    font-size: 0.875rem;
+  }
+}
+
+// Адаптивность
+@media screen and (max-width: 767px) {
+  & {
+    // На мобильных используются те же переменные --layout-pt и --layout-pb
+    // Значения задаются в настройках в vw
+  }
+}
+`;
+    return scss;
+}
+/**
+ * Генерирует snippet.js
+ * ВАЖНО:
+ * - Код автоматически оборачивается в try/catch
+ * - Доступны переменные: widget (селектор) и $widget (jQuery объект)
+ * - НЕ используйте Vue.js или другие фреймворки!
+ * - На странице может быть несколько экземпляров виджета - используйте $widget.each()
+ */
+export function generateSnippetJs(config, cleanMode = false) {
+    const hasJquery = config.libraries.includes('jquery');
+    const hasCommonjs = config.libraries.includes('commonjs_v2');
+    const hasSplide = config.libraries.includes('splide') || config.libraries.includes('splide3');
+    const widgetClass = `widget-type_${config.handle}`;
+    let js = '';
+    if (!cleanMode) {
+        js += `/**
+ * Виджет: ${generateWidgetName(config.description)}
+ * Handle: ${config.handle}
+ * 
+ * ВАЖНО:
+ * - Этот код автоматически оборачивается в try/catch
+ * - Доступны переменные: widget = '.${widgetClass}' и $widget = $('.${widgetClass}')
+ * - Виджет обёрнут в .layout.${widgetClass}
+ * - На странице может быть несколько виджетов - используйте $widget.each()
+ */
+
+`;
+    }
+    if (hasCommonjs && !cleanMode) {
+        js += `// CommonJS API InSales
+// Документация: https://liquidhub.ru/collection/start
+// Основные модули: EventBus, Cart, Products, Shop
+
+`;
+    }
+    if (hasJquery) {
+        if (!cleanMode) {
+            js += `// Переменная $widget уже доступна (создана системой)
+// ВАЖНО: На странице может быть несколько виджетов одного типа
+`;
+        }
+        js += `$widget.each(function(index, el) {
+  const $widgetInstance = $(el);
+  
+  // Пример: получение настроек из CSS-переменных для каждого экземпляра
+  const settings = {
+    slideWidth: getComputedStyle(el).getPropertyValue('--slide-width'),
+    slideGap: getComputedStyle(el).getPropertyValue('--slide-gap'),
+  };
+  
+  console.log(\`Инициализация виджета #\${index}\`, settings);
+
+`;
+        if (hasSplide) {
+            js += `  // Инициализация Splide слайдера для этого экземпляра
+  const splideEl = $widgetInstance.find('.splide');
+  if (splideEl.length) {
+    new Splide(splideEl[0], {
+      type: 'loop',
+      perPage: 3,
+      perMove: 1,
+      gap: '1rem',
+      pagination: false,
+      breakpoints: {
+        768: {
+          perPage: 1,
+        },
+        1024: {
+          perPage: 2,
+        },
+      },
+    }).mount();
+  }
+
+`;
+        }
+        js += `  // Ваш код для каждого экземпляра виджета
+});
+
+`;
+        if (hasCommonjs && !cleanMode) {
+            js += `// Пример работы с EventBus (глобальные события, вне цикла)
+EventBus.subscribe('cart:add', function(cart) {
+  console.log('Товар добавлен в корзину', cart);
+});
+
+// Реакция на изменение настроек в редакторе
+EventBus.subscribe([
+  'widget:input-setting:insales:system:editor',
+  'widget:change-setting:insales:system:editor'
+], function(data) {
+  console.log('Настройка изменена:', data.setting_name, data.value);
+  // Здесь можно обновить виджет при изменении настроек
+});
+
+`;
+        }
+    }
+    else {
+        if (!cleanMode) {
+            js += `// Переменная widget уже доступна (создана системой)
+// ВАЖНО: На странице может быть несколько виджетов одного типа
+`;
+        }
+        js += `const widgetElements = document.querySelectorAll(widget);
+
+if (widgetElements.length === 0) return;
+
+console.log('Виджет ${config.handle} инициализирован, найдено экземпляров:', widgetElements.length);
+
+// Перебираем каждый экземпляр виджета на странице
+widgetElements.forEach((el, index) => {
+  // Пример: получение настроек из CSS-переменных для каждого экземпляра
+  const styles = getComputedStyle(el);
+  const settings = {
+    slideWidth: styles.getPropertyValue('--slide-width'),
+    slideGap: styles.getPropertyValue('--slide-gap'),
+  };
+  
+  console.log(\`Инициализация виджета #\${index}\`, settings);
+
+`;
+        if (hasSplide) {
+            js += `  // Инициализация Splide слайдера для этого экземпляра
+  const splideEl = el.querySelector('.splide');
+  if (splideEl) {
+    new Splide(splideEl, {
+      type: 'loop',
+      perPage: 3,
+      perMove: 1,
+      gap: '1rem',
+      pagination: false,
+      breakpoints: {
+        768: {
+          perPage: 1,
+        },
+        1024: {
+          perPage: 2,
+        },
+      },
+    }).mount();
+  }
+
+`;
+        }
+        js += `  // Ваш код для каждого экземпляра виджета
+});
+
+`;
+        if (hasCommonjs && !cleanMode) {
+            js += `// Пример работы с EventBus (глобальные события, вне цикла)
+if (typeof EventBus !== 'undefined') {
+  EventBus.subscribe('cart:add', function(cart) {
+    console.log('Товар добавлен в корзину', cart);
+  });
+  
+  // Реакция на изменение настроек в редакторе
+  EventBus.subscribe([
+    'widget:input-setting:insales:system:editor',
+    'widget:change-setting:insales:system:editor'
+  ], function(data) {
+    console.log('Настройка изменена:', data.setting_name, data.value);
+    // Здесь можно обновить виджет при изменении настроек
+  });
+}
+
+`;
+        }
+    }
+    return js;
+}
+/**
+ * Генерирует setup.json для block_list_widget_type
+ */
+export function generateSetupJson(blockTemplate) {
+    // Создаем дефолтный блок с полями из block template
+    const createDefaultBlock = () => {
+        const block = {};
+        blockTemplate.fields.forEach(field => {
+            // Генерируем дефолтные значения в зависимости от типа поля
+            switch (field.kind) {
+                case 'text':
+                case 'link':
+                    block[field.handle] = '';
+                    break;
+                case 'textarea':
+                case 'html':
+                    block[field.handle] = '';
+                    break;
+                case 'account_file':
+                case 'image':
+                    // Для изображений оставляем пустую строку или placeholder ID
+                    block[field.handle] = '';
+                    break;
+                case 'checkbox':
+                    block[field.handle] = false;
+                    break;
+                case 'number':
+                case 'range':
+                    block[field.handle] = 0;
+                    break;
+                case 'color':
+                    block[field.handle] = '#000000';
+                    break;
+                case 'collection':
+                case 'product':
+                case 'blog':
+                case 'article':
+                case 'page':
+                    block[field.handle] = null;
+                    break;
+                default:
+                    block[field.handle] = '';
+            }
+        });
+        return block;
+    };
+    // Создаем 3-4 дефолтных блока для примера
+    const defaultBlocksCount = Math.min(4, Math.max(2, blockTemplate.fields.length > 5 ? 2 : 3));
+    const blocks = Array.from({ length: defaultBlocksCount }, () => createDefaultBlock());
+    return {
+        blocks
+    };
+}
+/**
+ * Вспомогательная функция для генерации имени виджета
+ */
+function generateWidgetName(description) {
+    const words = description.split(' ').slice(0, 4);
+    return words.map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+}
+//# sourceMappingURL=snippet-generator.js.map

package/dist/generators/types.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Типы и интерфейсы для генераторов виджетов
+ */
+import type { BlockTemplate } from '../types/index.js';
+import type { BaseSetting as Setting } from '../types/settings.js';
+export interface WidgetConfig {
+    handle: string;
+    category: string;
+    type: string;
+    description: string;
+    blockTemplate?: BlockTemplate;
+    libraries: string[];
+    commonSettings: Setting[];
+}
+export interface ValidationError {
+    filter: string;
+    line: number;
+    column: number;
+    suggestion: string;
+}
+export interface ValidationResult {
+    isValid: boolean;
+    errors: ValidationError[];
+}
+export interface FixResult {
+    fixedCode: string;
+    fixes: Array<{
+        filter: string;
+        line: number;
+        suggestion: string;
+    }>;
+}
+export interface CollectionsMenuResult {
+    liquidCode: string;
+    requiredSettings: any[];
+    cssPrefix: string;
+    dataAttributes: any[];
+}
+export interface SettingsFormResult {
+    form: Record<string, any[]>;
+    count: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/generators/types.js

@@ -0,0 +1,5 @@
+/**
+ * Типы и интерфейсы для генераторов виджетов
+ */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/generators/validation.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Валидация Liquid кода
+ */
+import type { ValidationResult, FixResult } from './types.js';
+/**
+ * Валидирует Liquid код на наличие несуществующих фильтров
+ */
+export declare function validateLiquidFilters(liquidCode: string): ValidationResult;
+/**
+ * Проверяет и исправляет несуществующие фильтры в Liquid коде
+ */
+export declare function fixInvalidFilters(liquidCode: string): FixResult;
+//# sourceMappingURL=validation.d.ts.map

package/dist/generators/validation.js

@@ -0,0 +1,71 @@
+/**
+ * Валидация Liquid кода
+ */
+/**
+ * Валидирует Liquid код на наличие несуществующих фильтров
+ */
+export function validateLiquidFilters(liquidCode) {
+    const invalidFiltersList = [
+        { name: 't', suggestion: 'Используйте messages или widget_messages для переводов' },
+        { name: 'translate', suggestion: 'Используйте messages для переводов' },
+        { name: 'i18n', suggestion: 'Используйте messages для переводов' },
+        { name: 'l', suggestion: 'Используйте messages для переводов' },
+        { name: 'localize', suggestion: 'Используйте messages для переводов' },
+        { name: 'tr', suggestion: 'Используйте messages для переводов' }
+    ];
+    const errors = [];
+    const lines = liquidCode.split('\n');
+    lines.forEach((line, lineIndex) => {
+        invalidFiltersList.forEach(invalidFilter => {
+            // Ищем паттерн | filter_name
+            const regex = new RegExp(`\\|\\s*${invalidFilter.name}\\b`, 'g');
+            let match;
+            while ((match = regex.exec(line)) !== null) {
+                errors.push({
+                    filter: invalidFilter.name,
+                    line: lineIndex + 1,
+                    column: match.index + 1,
+                    suggestion: invalidFilter.suggestion
+                });
+            }
+        });
+    });
+    return {
+        isValid: errors.length === 0,
+        errors
+    };
+}
+/**
+ * Проверяет и исправляет несуществующие фильтры в Liquid коде
+ */
+export function fixInvalidFilters(liquidCode) {
+    const fixes = [];
+    let fixedCode = liquidCode;
+    // Исправляем фильтр 't' на messages
+    const tRegex = /\|\s*t\b/g;
+    let match;
+    while ((match = tRegex.exec(fixedCode)) !== null) {
+        const beforeMatch = fixedCode.substring(0, match.index);
+        const afterMatch = fixedCode.substring(match.index + match[0].length);
+        // Определяем, что это за контекст
+        const contextBefore = beforeMatch.substring(Math.max(0, beforeMatch.length - 50));
+        if (contextBefore.includes('widget_messages')) {
+            // Если это в контексте widget_messages, оставляем как есть
+            continue;
+        }
+        else {
+            // Заменяем на messages
+            fixedCode = beforeMatch + '| messages' + afterMatch;
+            fixes.push({
+                filter: 't',
+                line: fixedCode.substring(0, match.index).split('\n').length,
+                suggestion: 'Заменен на messages'
+            });
+        }
+    }
+    return {
+        fixedCode,
+        fixes
+    };
+}
+//# sourceMappingURL=validation.js.map

package/dist/server-http.js

@@ -57,7 +57,7 @@ const httpServer = createServer(async (req, res) => {
         res.end(JSON.stringify({
             status: 'ok',
             service: 'InSales Widgets MCP Server',
-            version: '2.4.12',
+            version: '2.4.13',
             transport: 'SSE',
             endpoints: {
                 sse: '/sse',

package/dist/server.d.ts

@@ -3,6 +3,10 @@ export declare class WidgetServer {
     constructor();
     private setupHandlers;
     private createWidget;
+    /**
+     * Получить справочник типов настроек виджетов
+     */
+    private getSettingsTypesReference;
     /**
      * Подключить внешний транспорт (например, SSE)
      */