Руководство Дизайнера

Тема в разделе "Руководство Дизайнера", создана пользователем Romans, 2 май 2014.

  1. Romans

    Romans Administrator Команда форума

    Сообщения:
    1.434
    Симпатии:
    780
    Стандартная тема по умолчанию, которая предлагается при установке OpenCart 2.x является базой для ваших новых идей. В ней заложен стандартный дизайн, основанный на популярном CSS фреймворке Bootstrap.
    Если Вы желаете изменить стандартную тему, Вам необходимо иметь базовые знания CSS и HTML. Но для некоторых частей дизайна вам понадобятся знания php и javascript.
     
    all-landing, Zlata Jesen и lavlan нравится это.
  2. Romans

    Romans Administrator Команда форума

    Сообщения:
    1.434
    Симпатии:
    780
    Структура папок темы по умолчанию (Default)

    Перед тем как приступить к созданию или изменение темы, изучите структуру папок и назначение файлов.

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

    Файлы представления, таблицы стилей и изображения для шаблона, расположены по пути catalog/view/theme/default

    Папкаdefault содержит следующие папки:
    template - папка с "шаблонами" (представлениями)
    stylesheet - папка с таблицами стилей
    image - папка с изображениями для шаблона (фоны, указатели,итд)

    Папка template содержит файлы шаблона c расширением tpl. Данные файлы не используют какой либо сторонний шаблонизатор, а шаблонизация производится с помощью php.

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

    module/ - шаблоны для модулей
    category.tpl – модуль Категории
    filter.tpl - Фильтр
    html.tpl - HTML контент
    information.tpl - Информация
    slideshow.tpl - Слайдшоу
    banner.tpl - Баннер
    carousel.tpl - Карусель
    bestseller.tpl – Хит продаж
    featured.tpl - Рекомендуемые
    latest.tpl - Последние
    special.tpl - Акция
    store.tpl – шаблон модуля Магазин (выбора магазина при мультимагазине)
    account.tpl – модуль Личный кабинет
    affiliate.tpl – Модуль партнерская программа
    google_hangouts.tpl – Модуль Google Hangouts
    pp_layout.tpl - PayPal Экспресс-платежи
    amazon_checkout_layout.tpl – не используется в РФ


    Директория способов доставки так же находится на уровень выше.

    payment/ - шаблоны модулей способов доставки
    bank_transfer.tpl – Банковский перевод
    cheque.tpl – Оплата наличными
    cod.tpl – Оплата при доставке
    free_checkout.tpl – Бесплатный заказ
    liqpay.tpl - LiqPay
    moneybookers.tpl - Moneybookers
    pp_express.tpl - PayPal Экспресс-платежи
    pp_express_confirm.tpl страница подтверждения для модуля PayPal Экспресс-платежи
    pp_pro.tpl – PayPal Pro
    pp_standard.tpl - PayPal Standart

    common/
    header.tpl
    - шаблон для верхней части страницы (в.т.ч. подключение стилей и скриптов)
    footer.tpl - шаблон нижней части страницы (ссылки информация, служка поддержки итд)
    home.tpl - шаблон главной страницы (структура и расположение header.tpl, footer.tpl, column_left, column_right.tpl, content_bottom.tpl, content_top.tpl )
    column_left.tpl – левая колонка страницы
    column_right.tpl – правая колонка страницы
    content_bottom.tpl – нижняя часть области контента
    content_top.tpl – верхняя часть области контента
    currency.tpl – вывод шаблона модуля для переключения валют магазина
    language.tpl – вывод шаблона модуля для переключения языков магазина
    search.tpl – шаблон модуля поиска (выводится в header.tpl как переменная $search)
    buttons.tpl – шаблон кнопок для модуля PayPal Экспресс-платежи
    cart.tpl - шаблон модуля корзины в шапке
    maintenance.tpl – шаблон страницы при переключении магазина в режим обслуживания
    success.tpl – страница о успешном результате выполнения операции (пример, оформление заказа)


    product/
    product.tpl
    – шаблон для карточки товара (основная страница товара)
    category.tpl – страница списка товаров в категории
    manufacturer_info.tpl – информация о производителе
    manufacturer_list.tpl – страница список производителя
    compare.tpl – страница сравнения товаров
    review.tpl – отзывы о товаре в product.tpl (загружается Jquery через load() )
    search.tpl – шаблон страницы поиска и вывода результатов
    special.tpl – шаблон страницы Акции


    information/
    contact.tpl
    – шаблон для станицы контактов (страница Связаться с нами)
    information.tpl – шаблон для вывода статей
    sitemap.tpl – станица Карта сайта


    extension/module/ - шаблоны для модулей
    category.tpl – модуль Категории
    filter.tpl - Фильтр
    html.tpl - HTML контент
    information.tpl - Информация
    slideshow.tpl - Слайдшоу
    banner.tpl - Баннер
    carousel.tpl - Карусель
    bestseller.tpl – Хит продаж
    featured.tpl - Рекомендуемые
    latest.tpl - Последние
    special.tpl - Акция
    store.tpl – шаблон модуля Магазин (выбора магазина при мультимагазине)
    account.tpl – модуль Личный кабинет
    affiliate.tpl – Модуль партнерская программа
    google_hangouts.tpl – Модуль Google Hangouts
    pp_layout.tpl - PayPal Экспресс-платежи
    amazon_checkout_layout.tpl – не используется в РФ


    checkout/ - шаблоны страниц Оформления заказа и Корзины покупок
    cart.tpl – страница Корзины покупок
    login.tpl – страница Авторизации
    register.tpl – страница Регистрации
    checkout.tpl – общий шаблон станицы оформления заказа
    guest.tpl – шаг, оформление без регистрации
    guest_shipping.tpl – шаг, ввод данных доставки (при оформлении без регистрации)
    payment_address.tpl – шаг, ввод личных данных адреса плательщика
    shipping_address.tpl – шаг, ввод данных нового адреса доставки
    payment_method.tpl – шаг, выбор способа оплаты
    shipping_method.tpl – шаг, выбор способа доставки
    confirm.tpl – шаблон шага подтверждения заказа


    account/ - шаблоны страниц Личного кабинета
    account.tpl – шаблон главной страницы Личного кабинета
    login.tpl – страница авторизации
    register.tpl – страница регистрации
    address_form.tpl – страница формы редактирования адреса
    address_list.tpl – страница Мои адреса
    edit.tpl – страница редактирования контактной информации
    password.tpl – изменение пароля
    forgotten.tpl – восстановление пароля
    download.tpl – страница Файлы для скачивания
    newsletter.tpl – подписка на новости
    order_info.tpl – информация о заказе
    order_list.tpl - список заказов
    recurring_info.tpl – информация о периодическом платеже
    recurring_list.tpl – список периодических платежей
    return_form.tpl – форма возврата товара
    return_info.tpl – информация о возврате
    return_list.tpl – список возвратов
    transaction.tpl – страница транзакций
    reward.tpl – страница бонусных баллов
    voucher.tpl – подарочные сертификаты
    wishlist.tpl - закладки


    affiliate/ - шаблоны страниц Партнерская программа
    account.tpl - шаблон главной страницы Личного кабинета
    login.tpl - страница авторизации
    register.tpl – страница регистрации
    edit.tpl – страница редактирования контактной информации
    password.tpl – изменение пароля
    forgotten.tpl – восстановление пароля
    payment.tpl - страница платежных реквизитов
    tracking.tpl – страница Реферальный код
    transaction.tpl – страница транзакций


    error/
    not_found.tpl
    - страница "Запрашиваемая страница не найдена!"


    mail/
    order.tpl
    – шаблон для письма (html) о новом заказе
    voucher.tpl – шаблон письма о Подарочном сертификате


    extension/payment/ - шаблоны модулей способов доставки
    bank_transfer.tpl – Банковский перевод
    cheque.tpl – Оплата наличными
    cod.tpl – Оплата при доставке
    free_checkout.tpl – Бесплатный заказ
    liqpay.tpl - LiqPay
    moneybookers.tpl - Moneybookers
    pp_express.tpl - PayPal Экспресс-платежи
    pp_express_confirm.tpl страница подтверждения для модуля PayPal Экспресс-платежи
    pp_pro.tpl – PayPal Pro
    pp_standard.tpl - PayPal Standart


    extension/total/
    shipping.tpl – шаблон предварительного расчета доставки
    coupon.tpl – шаблон модуля купонов (вывод происходит в на странице корзины)
    voucher.tpl - шаблон модуля сертификатов (вывод происходит в на странице корзины)
    reward.tpl - шаблон модуля бонусных баллов (вывод происходит в на странице корзины)

    (* ниже указанные шаблоны модулей не используемые в РФ amazon_checkout_address.tpl, amazon_checkout_cart.tpl, amazon_checkout_confirm.tpl, amazon_checkout_failure.tpl, amazon_checkout_payment.tpl, amazon_checkout_success.tpl, authorizenet_aim.tpl, authorizenet_sim.tpl, klarna_account.tpl, klarna_invoice.tpl, nochex.tpl, paymate.tpl, paypoint.tpl, paypoint_failure.tpl, paypoint_success.tpl, payza.tpl, perpetual_payments.tpl, pp_pro_iframe.tpl, pp_pro_iframe_body.tpl, pp_payflow.tpl, pp_payflow_iframe.tpl, pp_payflow_iframe_return.tpl, realex.tpl, realex_remote.tpl, realex_response.tpl, sagepay.tpl, sagepay_direct.tpl, sagepay_us.tpl, web_payment_software.tpl, worldpay.tpl, worldpay_failure.tpl, worldpay_success.tpl, twocheckout.tpl)
     
    Последнее редактирование: 21 дек 2016
    Logeus, AkageMik, oscarhandsome и 6 другим нравится это.
  3. Romans

    Romans Administrator Команда форума

    Сообщения:
    1.434
    Симпатии:
    780
    Создание своего шаблона

    Для создания своего шаблона Opencart, вам достаточно создать в директории catalog\view\theme\
    папку с названием своего шаблона (например, mystore) и в ней разместить 3 папки template, stylesheet, image

    Далее, создадим минимальный каркас для нового шаблона, а именно:

    1. в директорию stylesheet, скопируем файл stylesheet.css из шаблона по умолчанию catalog\view\theme\default\stylesheet

    2. в директории template, создадим папку common и скопируем туда файл header.tpl из шаблона по умолчанию catalog\view\theme\default\template\common\

    3. Откроем файл header.tpl и изменим путь к файлу стилей на свои
    HTML:
    <link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
    заменим на
    HTML:
    <link href="catalog/view/theme/mystore/stylesheet/stylesheet.css" rel="stylesheet">
    4. Заходим в панель администрирования:
    Меню -> Модули -> Темы -> [изменить] -> поле, Директория темы
    и выбираем новый шаблон.

    4. Заходим в панель администрирования:
    Меню -> Система -> Настройки -> [изменить] -> вкладка, Магазин -> поле, Шаблон магазина
    и выбираем новый шаблон.

    На этом этап создания каркаса нового шаблона завершен.
    Далее вы можете изменять стили в файле стилей, подключать дополнительные стили или скрипты, прописывая пути в файле header.tpl. А если Вам необходимо изменить верстку одного из модулей или частей шаблона (например footer.tpl), то достаточно создать соответствующую директорию в вашем новом шаблоне и скопировать нужный файл из шаблона по умолчанию.

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

    Если у вас есть установленные модификаторы !!!
    Перед внесением изменений в тему, посмотрите, есть ли в кеше модификатора ваши файлы, которые вы собираетесь изменить. И если они там присутствуют, вам необходимо после внесения изменений, очищать кеш модификатора в папке \system\modification или очищать нажатием кнопки Обновить в Панели управления Меню - Модули - Модификаторы
    Если этого не сделать, то произведенные изменения в файлах темы вы не увидите.
     
    Последнее редактирование: 17 мар 2016
    zubonick, AkageMik, oscarhandsome и 11 другим нравится это.
  4. Romans

    Romans Administrator Команда форума

    Сообщения:
    1.434
    Симпатии:
    780
    novichek55 нравится это.