Личный блог Михаила Шашина

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

Opancart: разный фон для разных товаров

Однажды передо мной встала интересная задача, простенькое решение которой я опишу ниже.
В интернет-магазине было две категории товаров: военные модели и гражданские. Нужно было, чтобы на страницах-карточках военных моделей был один фон страницы, а на гражданских — другой.
Так как я достаточно хорошо знаком со внутренней структурой opencart, то решил, что просто пропишу в одном из неиспользуемом поле товара код цвета фона и буду его подставлять в шаблоне карточки товара. Но потом мне пришло в голову более простое решение.


В Opencart есть модуль «HTML Содержимое», в который мы можем включать любой произвольный html код для отображения его на странице. Но и Javascript-код мы туда тоже можем вставить! А значит нужно создать два элемента на основе этого модуля: один будет подставлять фон страницы для военных моделей, а другой — для гражданских.

  1. Переходим в админке OpenCart в раздел Дополнения, нажимаем на кнопку «+» напротив модуля «HTML Содержимое».Добавление модуля OpenCart
  2. Вписываем название модуля: «Замена фона на гражданский» (ну или любое понятное для Вас).
  3. Поле заголовок оставляем пустым (!).
  4. В поле описание переключаемся на вид «Исходный код» с помощью кнопки «</>» Включение режима исходного кода
  5. Вводим нужный нам Javascript код, заменяющий фон: <script>
    $('body').css('background', 'beige');
    </script>
  6. ВАЖНО! Нужно переключиться обратно на редактор текста. Если у страницы редактирования модуля сменился фон на ваш — значит Вы делаете все верно, сохраняйте результат
  7. Проделываем шаги 1-6 для другого цвета фона. Также можно поменять и цвет шрифта, например: <script>
    $('body').css('background', '#121213');
    $('body').css('color', '#fff');
    </script>
  8. Следующий этап — создаем схемы дизайна для каждого фона. Переходим Дизайн->Макеты, жмем на плюсик «+»
  9. Вводим осмысленное название,  в раздел «Вверху страницы» добавляем один из созданных на прошлом этапе модулей, сохраняем.Добавление модуля в схему дизайна
  10. Теперь достаточно на вкладке «Дизайн» в карточке товара выбрать созданную схему дизайна в поле «Переопределить дизайн».Переопределение схемы товара Openacart

Если Вы делаете интернет-магазины на заказ, то это гораздо проще объяснить заказчику, далекому от программирования, чем объяснять куда вписывать код цвета и что такое код цвета.

Если у Вас есть какие-то замечания или вопросы — смело пишите их в комментарии, обязательно учту=)

Post a comment