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

Следить
Главная
19:53
07 июл
#
?
написал:

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

  • цвет
  • размер

и под каждый цвет чтоб загружались свои фотки.

11:42
08 июл
#
написал:

Конечно Impera CMS подходит и для магазинов одежды. Ведь соответствующие эффекты смены зависимых фотографий при выборе свойств товара - это задача визуального модуля клиентской стороны, просто вызываемого в нужной точке шаблона (дизайна), а в админпанели для подготовки товаров под такие эффекты уже есть все необходимое:

  • вы можете создать список из скольки угодно свойств товаров
    • каждому свойству задать название
    • задать перечень его возможных значений
    • привязать каждое свойство к набору некоторых категорий, в которых свойство актуально

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

Подробности покажу на скриншотах (все картинки кликабельны для увеличения). Первым делом через главное меню админпанели заходим в список свойств товаров, чтобы сформировать используемый в нашем магазине набор этих свойств. К тому же список всегда сможем дополнять и позже, по мере поступления нового товара с какими-то неупоминавшимися ранее свойствами или их значениями.



Страница списка свойств товаров выглядит следующим образом. Здесь предположим, мы уже якобы создали два свойства: Размер и Цвет. Еще ниже будет показано, как добавлялось отдельное свойство. Сейчас же просто отметим, что каждое свойство имеет 3 флажка по управлению, на каких страницах мы хотели бы использовать данное свойство:

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



Теперь скриншот, как добавлялось свойство Размер. Важно отметить, что при продаже товаров разной тематики, но в силу причин имеющих одинаковые названия свойств, менеджер магазина должен сам решить, как ему удобнее поступить с такими свойствами - создать одно (например Размер) и в нем собрать все возможные значения из всех тематик, или создать несколько похожих по именам свойств (например Размер обуви, Размер одежды, Размер экрана и тому подобное), но уже только с присущими им тематическими значениями.

На скриншоте показано, что было создано одно свойство, а в нем собраны значения как для одежды, так и для обуви. Однако, еще раз напомним, последнее слово в этом вопросе за менеджером магазина.

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



На всякий случай покажем ниже, как добавлялось второе свойство. Чтобы вы могли понять - у каждого свойства могут быть свои привязки к категориям и брендам, лишь незначительно или же в корне отличающиеся от предыдущего свойства. Разве что в магазинах, торгующих одним типом товаров, все свойства как правило привязаны ко всем категориям и брендам по единой схеме.

Сравните с предыдущим скриншотом отличия в пометке категорий и брендов.



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



Мы попали в список товаров. На следующем скриншоте показаны 3 пути - не суть важно. Для простоты предположим, хотим отредактировать первый товар в списке, чтобы назначить ему свойства и загрузить фотографии для свойств. Щелкнем по названию товара.

Снова просьба не обращать внимание на несоответствие тематики товарного состава.



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

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



Останется в вашем шаблоне (дизайне) клиентской стороны сайта модифицировать модуль визуализации - та часть кода, которая обычно отрисовывает блок фотографий и подключает к блоку яваскрипт плагин типа Lightbox для увеличения фотографий.

Изменения состоят в том, чтобы например в теги <img> тех картинок, что предназначены для смены по свойствам, добавить опции (скажем data-property="имя" и data-value="значение") с именем и значением свойства.

Вымышленный пример, что получается в конце отрисовки:

  <div class="lightbox">

      <!-- большое фото -->
      <div class="big-photo">
          <a href="image1.jpg">
              <img src="image1.jpg" />
          </a>
      </div>

      <!-- дополнительные картинки -->
      <div class="other-photos">

          <a href="image2.jpg">
              <img src="image2.jpg" data-property="цвет" data-value="синий" />
          </a>

          <a href="image3.jpg">
              <img src="image3.jpg" data-property="цвет" data-value="красный" />
          </a>

          <a href="image4.jpg">
              <img src="image4.jpg" data-property="цвет" data-value="черный" />
          </a>

      </div>
  </div>

  <!-- яваскрипт увеличения фотографий -->
  <script>
      jQuery('.lightbox a').lightbox();
  </script>


И далее на селектор свойства Цвет, а это надо смотреть как он реализован или будет реализован в вашем шаблоне, навешивается событие onChange с яваскриптом, который отыскивает в контейнере <div class="other-photos"> нужную картинку с таким же именем и текущим значением (поиск ведется сравнением по опциям data-property="" и data-value=""), какое сейчас выбрали в селекторе, и передает опцию src="" этой картинки в большую картинку контейнера <div class="big-photo">. Тем самым создается эффект переключения фотографии при выборе другого значения свойства.

Пример обработчика события:

  function property_onChange ( name, value ) {

      // признак ЕЩЕ НЕ ПОКАЗАЛИ
      var changed = false;

      // перебираем дополнительные картинки
      jQuery('.lightbox .other-photos img').each(function () {

          // если уже показали
          if (changed) return;

          // если это не картинка от нужного свойства
          if (jQuery(this).attr('data-property') != name) return;
          if (jQuery(this).attr('data-value') != value) return;

          // копируем url картинки в картинку большого фото
          var url = jQuery(this).attr('src');
          jQuery('.lightbox .big-photo img').attr('src', url);

          // признак УЖЕ ПОКАЗАЛИ
          changed = true;
      });

      // сообщаем ПОКАЗАЛИ или НЕТ
      return changed;
  }


На самом деле не сложно, и под силу любому веб-программисту, мало-мальски знакомому с разметкой, событиями элементов разметки и яваскриптами.

13:00
26 фев
#
?
написал:

Это все прекрасно, НО:

Подскажите как при наличии цветов/размеров добавлять в корзину товар с разными цветами/размерами - так как при попытке добавить товар с другим цветом/размером пр наличии в корзине уже добавленного товара с другим цветом/размером - старый товар просто заменяется на новый... То есть я не могу добавить разные варианты товаров так как с точки зрения ЦМС это один и тот же товар...

Также если я добавляю товар (кол-во=1) добавляется один товар, если я еще раз нажму добавить - в корзине все равно останется только один товар (по идее должен добавиться еще один) и только если я в кол-ве выберу 2 то добавится (заменится) на нужное кол-во...

12:50
29 мая
#
?
написал:

Хотелось бы получить ответ, исправили этот баг или нет?

Написание ответа

Перед публикацией рекомендуется использовать Предпросмотр, чтобы увидеть конечный вид сообщения.


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