Инструкция как добавить товары в слоты с 1 по 25

Как найти место: КОНТЕНТ КАРТОЧЕК (25 СЛОТОВ) или var ТОВАРЫ

Сейчас слоты 1–10 заполнены (показываются), а слоты 11–25 пустые (не показываются).

Главное правило: если хоть одно из полей картинка / название / описание / обычнаяЦена / ценаСейчас заполнено — слот появляется на странице. Если все пустые — слот не показывается.

📝 Что означает каждое поле

⚠️ Важные правила синтаксиса:

• Текст всегда в кавычках: название: 'Часы'
• Числа (цены, рейтинг) — без кавычек: ценаСейчас: 2490
• После каждого поля ставится запятая , (кроме последнего поля в слоте — там можно без запятой)
• Между слотами тоже ставится запятая ,

3 готовых примера

Пример A — обычный товар со скидкой

    /* ---------- СЛОТ 12 (заполнен) ---------- */
    {
      картинка: 'https://site.ru/img/nabor.jpg',
      название: 'Набор кистей Art',
      выделенное: 'Art',
      описание: 'Профессиональный набор из 12 кистей для рисования. Подходит для акварели, гуаши и акрила.',
      обычнаяЦена: 1800,
      ценаСейчас: 990,
      текстБесплатно: '',
      бейдж: '-45%',
      рейтинг: 4.7,
      ссылка: 'https://site.ru/nabor'
    },

Пример B — бесплатный товар — рекламируете страницу подписки (когда обе цены пустые)

Если оставить обычнаяЦена: '' и ценаСейчас: '', то вместо цены покажется текст из поля текстБесплатно:

    /* ---------- СЛОТ 13 (заполнен) ---------- */
    {
      картинка: 'https://site.ru/img/checklist.jpg',
      название: 'Чек-лист продуктивности',
      выделенное: 'продуктивности',
      описание: 'Скачайте бесплатный чек-лист из 20 пунктов и наведите порядок в делах за один день.',
      обычнаяЦена: '',
      ценаСейчас: '',
      текстБесплатно: 'СКАЧАЙ БЕСПЛАТНО',
      бейдж: 'FREE',
      рейтинг: 5.0,
      ссылка: 'https://site.ru/checklist'
    },

Пример C — товар только с одной ценой (без скидки)

Заполните только ценаСейчас, а обычнаяЦена оставьте пустой:

    /* ---------- СЛОТ 14 (заполнен) ---------- */
    {
      картинка: 'https://site.ru/img/kruzhka.jpg',
      название: 'Термокружка Steel',
      выделенное: 'Steel',
      описание: 'Держит тепло до 8 часов. Нержавеющая сталь, объём 450 мл, не протекает.',
      обычнаяЦена: '',
      ценаСейчас: 1290,
      текстБесплатно: '',
      бейдж: 'NEW',
      рейтинг: 4.6,
      ссылка: 'https://site.ru/kruzhka'
    },

🖼 Про картинки

В поле картинка нужна прямая ссылка на изображение. Такая ссылка обычно заканчивается на .jpg, .png, .webp.

• ✅ Правильно: 'https://site.ru/foto/chasy.jpg'(загрузите картинку на сайт, а url ссылку вставьте в карточку товара)
• ❌ Неправильно: ссылка на страницу магазина, а не на само фото.

Как еще получить прямую ссылку на фото:

1. Загрузите картинку на ваш сайт / хостинг картинок.
2. Откройте картинку в браузере, кликните правой кнопкой → «Копировать адрес изображения».
3. Вставьте этот адрес в поле картинка внутри кавычек.

Если оставить картинка: '', но заполнить название — товар всё равно покажется, только с серой заглушкой вместо фото.

📋 Итоговая шпаргалка

Если после правки товары пропали — почти всегда виновата пропущенная запятая или лишняя/недостающая кавычка.

🎨 Где менять дизайн виджета товаров

📍 Место 1 — Выбрать готовую тему (самое простое)

Найдите в коде самый верх скрипта — блок настроек CFG. Там есть строчка:

var CFG = {
    дизайн: 'A',                              // Тема: 'A', 'B', 'C', 'D' или 'V'

Меняете букву в кавычках — и меняется вся цветовая тема виджета.

Доступно 5 готовых тем:

Пример — переключить на золотую тёмную тему:

    дизайн: 'D',

Сохранили → обновили страницу → тема поменялась. Больше ничего трогать не нужно.

📍 Место 2 — Настроить цвета каждой темы вручную (тонкая настройка)

Если готовые темы не подошли и хотите свои цвета, найдите ниже в коде блок:

ТЕМЫ ОФОРМЛЕНИЯ (5 ДИЗАЙНОВ)

var ТЕМЫ = {
    A: { // Оранжевый премиум'--goods01-bg':'transparent','--goods01-card-bg':'#ffffff','--goods01-border':'#F5852A',
      '--goods01-primary':'#F5852A','--goods01-primary-hover':'#e0741c','--goods01-text':'#2b2b2b',
      '--goods01-title':'#1f1f1f','--goods01-accent':'#F5852A','--goods01-btn-text':'#ffffff',
      '--goods01-muted':'#8a8a8a','--goods01-old-price':'#9a9a9a','--goods01-save':'#2e9e5b',
      '--goods01-badge-bg':'#F5852A','--goods01-title-font':'Arial, Helvetica, sans-serif',
      '--goods01-glow':'rgba(245,133,42,0.45)'
    },
    B: { ... },
    C: { ... },
    D: { ... },
    V: { ... }
  };

Здесь каждая тема (A, B, C, D, V) — это набор цветов. Меняете цвет той темы, которая у вас выбрана в CFG.дизайн.

Что означает каждая настройка цвета