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

Пример после версточной коррекции натянутого шаблона

Следить
Главная
21:38
05 фев
#
Разработчик написал:

Следующая информация предназначена тем, кто занимается подгонкой шаблонов под заказчика. Рассмотрено решение некоторых задач на примере шаблона Electronics. Работать с такими очень легко, так как они собраны на базе библиотек Impera CMS Template Constructor и TemplateMonster Impera Finery.


1)   в правом сайдбаре необходимо убрать каталог, так как в этом шаблоне он уже есть в меню сверху.

  • идем на страницу дизайн -> Файлы шаблона
  • переходим в папку right - она содержит файлы (модули) правой колонки шаблона
  • щелкаем на редактирование файл categories.htm - он отвечает за внешний вид блока подкатегорий
  • заключаем в комментарий ненужный более вызов модуля
  • жмем кнопку Сохранить


    синим цветом ниже показаны внесенные изменения в файл, троеточием обозначены некие строчки кода:
    {* <!-- правая колонка: подкатегории --> *}{strip}
    
        {* include file = '../../../common_parts/AIMatrix/Constructor/items.htm'
                     ...
                     ...
                     ... = '</div></div>' *}
    
    {/strip}
    вообще говоря, вместо комментирования вызова модуля можно было просто стереть этот вызов, если вы уверены, что позже не захотите вернуть этот блок



2)   на главной странице не отображается банер, но показывается из пунктов "Хиты", "Акционные" и тому подобные самого верхнего меню.

  • сначала идем на страницу страницы -> Специальные страницы
  • замечаем, что url страницы каталога у вас такой http://сайт/sections/products
  • в то время как демо шаблона было рассчитано на http://сайт/sections/cat, поправку чего сейчас сделаем


  • идем на страницу дизайн -> Файлы шаблона
  • переходим в папку header - она содержит файлы (модули) шапки шаблона
  • щелкаем на редактирование файл banner.htm - он отвечает за внешний вид баннера
  • находим строку {$path = ($path|lower == 'cat') ? '' : $path} в этом файле
  • исправляем слово cat на слово products
  • жмем кнопку Сохранить


    синим цветом ниже показаны внесенные изменения в файл:
    {* <!-- шапка сайта: баннер --> *}{strip}
    
        ...
        ...
        {$path = ($path|lower == 'products') ? '' : $path}
        ...
        ...
    
    {/strip}



3)   блок "Дизайны сайта" нужно убрать из правого сайдбара

  • идем на страницу дизайн -> Файлы шаблона
  • переходим в папку right - она содержит файлы (модули) правой колонки шаблона
  • щелкаем на редактирование файл themes.htm - он отвечает за внешний вид блока смены дизайнов
  • заключаем в комментарий ненужный более вызов модуля
  • жмем кнопку Сохранить


    синим цветом ниже показаны внесенные изменения в файл:
    {* <!-- правая колонка: дизайны --> *}{strip}
    
        {* include file = '../../../common_parts/AIMatrix/themes.htm'
                     ...
                     ...
                     ... = '</div>' *}
    
    {/strip}



4)   на главной у акционных товаров старая цена не имеет зачёркивания.

  • идем на страницу дизайн -> Файлы шаблона
  • переходим в папку cards - она содержит файлы (модули) мини карточек товаров и статей-новостей
  • щелкаем на редактирование файл restyling.htm - он отвечает за локальный рестайлинг
  • в конец этого файла добавляем коррекцию стиля старой цены
  • жмем кнопку Сохранить


    синим цветом ниже показаны внесенные изменения в файл:
    {* <!-- карточки: переопределения некоторых стилей --> *}{strip}
    
        ...
        ...
        span.price-discount {
            text-decoration: line-through;
        }
    
    {/strip}



5)   на главной дублируется блок "Хиты продаж" в основной колонке и сайдбаре справа.

  • идем на страницу дизайн -> Файлы шаблона
  • переходим в папку right - она содержит файлы (модули) правой колонки шаблона
  • щелкаем на редактирование файл specials.htm - он отвечает за внешний вид блока особых товаров
  • заключаем вызов модуля в этом файле внутрь условия "показывать только в списке товаров"
  • жмем кнопку Сохранить


    синим цветом ниже показаны внесенные изменения в файл:
    {* <!-- правая колонка: товары (специальные) --> *}{strip}
    
        {if $is_on_category|default:false}
            {include file = ...
                            ...
                            ...}
        {/if}
    
    {/strip}
    собственно, данное условие можно понимать как "если покупатель находится на странице категории (то есть в списке товаров), тогда модуль хитов будет показан в правой колонке"



6)   в банере на главной обрезана левая кромка рамки вокруг миниатюр справа.

  • идем на страницу дизайн -> Файлы шаблона
  • переходим в папку header - она содержит файлы (модули) шапки шаблона
  • щелкаем на редактирование файл restyling.htm - он отвечает за локальный рестайлинг
  • в конец этого файла добавляем коррекцию стиля контейнера миниатюры
  • жмем кнопку Сохранить


    синим цветом ниже показаны внесенные изменения в файл:
    {* <!-- шапка сайта: переопределения некоторых стилей --> *}{strip}
    
        ...
        ...
        .nivo-thumb-wrapper {
            border-left: #ddd 2px solid !important;
        }
    
    {/strip}



7)   в самой верхней строке меню хотелось бы убрать пункты "Комплект", "Файлы", "Склады".

  • идем на страницу дизайн -> Файлы шаблона
  • переходим в папку header - она содержит файлы (модули) шапки шаблона
  • щелкаем на редактирование файл signpost.htm - он отвечает за внешний вид меню-семафора
  • находим в этом файле 3 подряд расположенные строки
            a_text_configurator = 'Комплекты'
            a_text_media = $settings->files_main_path|default:'Руководства'
            a_text_stocks = $settings->stocks_main_path|default:'Торговые точки'
  • корректируем данные строки, приравнивая каждую к пустой строке
  • жмем кнопку Сохранить


    синим цветом ниже показаны внесенные изменения в файл:
    {* <!-- шапка сайта: блок ссылок разводки по страницам --> *}{strip}
    
        {include file = '../../../common_parts/AIMatrix/Constructor/signpost.htm'
                 ...
                 ...
                 a_text_configurator = ''
                 a_text_media = ''
                 a_text_stocks = ''
                 ...
                 ...
                 ... = '</ul>'}
    
    {/strip}
    то есть сообщаем вызываемому модулю, что эти 3 кнопки не имеют надписи (не показывать их вообще)



8)   раз система ещё не поддерживает, то пока не нужен блок переключения языков.

  • идем на страницу дизайн -> Файлы шаблона
  • переходим в папку header - она содержит файлы (модули) шапки шаблона
  • щелкаем на редактирование файл languages.htm - он отвечает за внешний вид блока переключения языков
  • заключаем в комментарий ненужный более вызов модуля
  • жмем кнопку Сохранить


    синим цветом ниже показаны внесенные изменения в файл:
    {* <!-- шапка сайта: блок переключения языков --> *}{strip}
    
        {* include file = ... *}
    
    {/strip}



9)   в списке товаров категории не нужно отображать код товара, к тому же при отображении плитками код налазит на название.

  • идем на страницу дизайн -> Файлы шаблона
  • переходим в папку cards - она содержит файлы (модули) мини карточек товаров и статей-новостей
  • щелкаем на редактирование файл product-card.htm - он отвечает за внешний вид карточки товара в списке
  • находим строку {* <!-- буквенный код товара (vendorCode) --> *} в этом файле
  • заключаем в комментарий следующий за этой строкой фрагмент кода
  • жмем кнопку Сохранить


    синим цветом ниже показаны внесенные изменения в файл:
    {* <!-- карточки: товар в списке --> *}{strip}
    
        ...
        ...
    
        {* <!-- буквенный код товара (vendorCode) --> *}
        {* if ($item->pcode|default:'')|regex_replace:'/[\s\t\r\n]/':'' != ''}
            <div class="vendorCode" title="Код товара: {$item->pcode|strip_tags|escape}">
                {$item->pcode}
            </div>
        {/if *}
    
        ...
        ...
    
    {/strip}
    вообще говоря, вместо комментирования фрагмента его можно просто удалить, если вы уверены, что позже не захотите вернуть его



10)   хотелось бы убрать у товаров ссылку "Отложить" в списке товаров категории.

  • идем на страницу дизайн -> Файлы шаблона
  • переходим в папку cards - она содержит файлы (модули) мини карточек товаров и статей-новостей
  • щелкаем на редактирование файл product-card.htm - он отвечает за внешний вид карточки товара в списке
  • находим строку {* <!-- кнопка Отложить --> *} в этом файле
  • заключаем в комментарий следующую за этой строкой ссылку
  • жмем кнопку Сохранить


    синим цветом ниже показаны внесенные изменения в файл:
    {* <!-- карточки: товар в списке --> *}{strip}
    
        ...
        ...
    
        {* <!-- кнопка Отложить --> *}
        {* <a class="defer_button" ... >
            Отложить
        </a> *}
    
        ...
        ...
    
    {/strip}
    вместо комментирования ссылки ее можно просто удалить



11)   текст, который выделен жирным - приподнят немного вверх.

  • идем на страницу дизайн -> Файлы шаблона
  • переходим в папку layout - она содержит файлы (модули) компоновки шаблона
  • щелкаем на редактирование файл restyling.htm - он отвечает за локальный рестайлинг
  • находим строку <style type="text/css"> в этом файле
  • после нее добавляем коррекцию стиля жирного текста
  • жмем кнопку Сохранить


    синим цветом ниже показаны внесенные изменения в файл:
    {* <!-- компоновка: переопределения некоторых стилей --> *}{strip}
    
        ...
        ...
    
        <style type="text/css">
    
            b {
                vertical-align: middle;
            }
    
            ...
            ...
    
    {/strip}



12)   при открытии фотографии товара в лайтбоксе, меню отображается поверх лайтбокса.

  • идем на страницу дизайн -> Файлы шаблона
  • переходим в папку product - она содержит файлы (модули) страницы товара
  • щелкаем на редактирование файл restyling.htm - он отвечает за локальный рестайлинг
  • в начало файла добавляем коррекцию стиля лайтбокса
  • жмем кнопку Сохранить


    синим цветом ниже показаны внесенные изменения в файл:
    {* <!-- товар: переопределения некоторых стилей --> *}{strip}
    
        #fancybox-overlay {
            z-index: 65000 !important;
        }
        #fancybox-wrap {
            z-index: 65001 !important;
        }
    
        ...
        ...
    
    {/strip}



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

  • идем на страницу дизайн -> Файлы шаблона
  • щелкаем на редактирование файл product.tpl - он отвечает за внешний вид страницы товара
  • находим строку <div id="attributes"> в этом файле
  • дополняем строку скрывающим стилем
  • жмем кнопку Сохранить


    синим цветом ниже показаны внесенные изменения в файл:
    {* <!-- центральная часть страницы товара --> *}{strip}
    
        ...
        ...
    
        <div id="attributes" style="display: none;">
            ...
            ...
        </div>
    
        ...
        ...
    
    {/strip}

12:59
14 авг
#
Разработчик написал:

Модификация задачи под номером 13 из предыдущего поста.

Новая постановка задачи гласит:

На странице товара блок характеристик справа от основной фотографии должен показывать только выпадающий селектор вариантов товара.

Решение состоит в добавлении следующих строк в конец стилевого файла шаблона. Это файл http://сайт/design/Electronics/css/global.css

#buy_block #attributes {
    display: block !important;
}

#buy_block #attributes > * {
    display: none;
}

#buy_block #attributes > p {
    display: block;
}

#buy_block #attributes > p[title] {
    display: none;
}


Решение основано на особенностях генерируемой html-разметки правого блока свойств товара в шаблоне Electronics: здесь селектор вариантов единственный, обернутый в тег <p>, не имеющий атрибута title.

Суть действия решения:

  • безусловно разрешаем показ блока характеристик (вдруг решение накладывают поверх предыдущего решения задачи 13);
  • затем запрещаем показ всех первородных дочерных объектов внутри блока характеристик;
  • далее разрешаем показ всех первородных объектов <p>;
  • и запрещаем показ первородных объектов <p>, содержащих атрибут title.

22:08
24 ноя
#
?
EraUa написал:

Снова вопрос по этому шаблону к разработчику.

Подскажите, пожалуйста, как добавить в этот шаблон две функции которые в нём не реализованы:

1) Возможность комментирования отзывов

2) Кнопку "Сообщить о наличии"

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

Спасибо!

10:39
11 дек
#
?
EraUa написал:

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

23:47
21 дек
#
?
Андрей написал:

На страницах товаров и в категории при отображении товаров списком изображения товаров погоняются под определеннный размер, не соблюдая пропорции. Ранее рассматривался вариант устранения искажения на страницах каталога. На странице товара вопрос еще открыт. Может еще кому интересно:

Открываем файл редактирования стилей global.css, находим строку

#primary_block #image-block img#bigpic {
    width: 304px;
    height: 304px;
    cursor: pointer;
}

и меняем значение width: 304px; на width: auto;

Теперь фото не растягивается, схраняет пропорции.

Вопрос к более продвинутым: как теперь выровнять его по центру? Сейчас выравнивает по левому краю.

Пробовал в стилях добавить align="center" - не работает.

12:33
22 дек
#
Разработчик написал:

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

/* большая фотография товара */

#primary_block #image-block {
    width: 304px;
    height: 304px;
    border-width: 1px;
    border-style: solid;
    position: relative;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#primary_block #image-block img#bigpic {
    max-width: 304px;
    width: auto;
    height: auto !important;
    max-height: 304px;
    cursor: pointer;
}

/* миниатюры дополнительных фото под большой фотографией товара */

#thumbs_list li a {
    display: table-cell;
    border-width: 1px;
    border-style: solid;
    width: 80px;
    height: 80px;
    text-align: center;
    vertical-align: middle;
}

#thumbs_list li a, #thumbs_list li a img {
    width: auto;
    max-width: 80px;
    height: auto;
    max-height: 80px;
    overflow: hidden !important;
    margin: 0px !important;
    padding: 0px !important;
}
23:57
22 дек
#
?
EraUa написал:

Спасибо! Решение будет полезным, мы уже правда приловчились загружать на сайт фото с пропорциями 1:1, но обработка фото занимает время, попробуем свести доработаки.

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

1) Возможность комментирования отзывов

2) Кнопку "Сообщить о наличии"

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

17:38
05 янв
#
?
Андрей написал:

Вопрос к разработчику:

С большой фотографией все окей, спасибо!

А вот насчет миниатюр- не получается- фото все так же растянуты. Более того в стилях у меня не было строки #thumbs_list li a, #thumbs_list li a img - была только #thumbs_list li a img . К ней характеристики я заменил, но дела нет )). Подскажите, в чем может быть причина?

17:35
06 янв
#
?
vat написал:

Разработчик ошибся.
Вместо global.css смотрите дизайн -> файлы шаблона -> папка html -> папка product -> файл restyling.htm.
Там есть #thumbs_list li a img {

А вот #primary_block #image-block img#bigpic точно находится в global.css.

22:56
22 янв
#
?
EraUa написал:

Снова хочу напомнить о задаче добавить:

1) Возможность комментирования отзывов

2) Кнопку "Сообщить о наличии"

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

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

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


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


Хостинг для сайта

Хостинг для интернет магазина

Svai.net

Украина
г. Черкассы
5+ Заказать

TutHost.ua

Украина
г. Киев
Заказать

Mirohost.net

Украина
г. Киев
? Заказать

HyperHosting.com.ua

Украина
г. Винница
i подробнее Заказать

Agava.ru

Россия
г. Москва
Заказать

Ukraine.com.ua

Украина
г. Киев
5 Заказать
Импераготовасотрудничатьс провайдерами Важно Учтите Этот список перечисляет лишь некоторых хостинг-провайдеров, у которых существуют специальные тарифные планы для интернет магазинов, а сам список не означает, что другие провайдеры чем-то хуже.

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

Демо Главная Хронология Соглашение Материалы Контакты