Как прикрутить свой дизайн к магазину Simpla

    image
    В этой заметке я хочу показать вам процесс создания нового дизайна для скрипта интернет-магазина Simpla.

    В корне файловой структуры магазина вы найдете папку design. Эта папка содержит так называемые темы дизайна. По умолчанию вам в распоряжение предоставлена примитивная тема «default» (/design/default/). Мы возьмем ее за основу при создании своей темы.

    Весь процесс создания темы можно представить вот в таком виде:



    Теперь рассмотрим процесс подробнее.

    Макет дизайна


    Желательно, чтобы макет дизайна соответствовал следующей структуре:


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

    Верстка


    Никаких специальных требований к верстке макета нет. Она может быть табличная, дивная, а может быть вообще wap-версия магазина. Верстайте так, как вам нравится.

    CSS


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

    В визуальном редакторе текста в панели управления автоматически подключаются ваши стили из файла /css/style.css. Таким образом обеспечивается одинаковое отображение текста при редактировании и на сайте. Учтите это.


    Картинки


    В папку images вы просто складываете все картинки для вашего дизайна.

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

    Эта картинка должна называться thumbnail.jpg и иметь размер 150x150px.

    Шаблоны Smarty


    В теме дизайна обязательно должны присутствовать следующие файлы:


    По сути — практически весь внешний вид магазина задается шаблоном index.tpl, в центре которого подключаются шаблоны центрального блока, в зависимости от выбранного раздела сайта.

    Просто копируем весь наш html в файл index.tpl.

    После того как мы скопировали в index.tpl свой html-код, необходимо заменить дизайнерскую «рыбу» на соответствующие переменные:

    Формируем мета-теги


    Для того, чтобы на каждой странице магазина выводились нужные мета-теги, нужно использовать переменные $title, $keywords, $description. Вот так:

    <title>{$title|escape}</title>
    <meta name="description" content="{$description|escape}" />
    <meta name="keywords" content="{$keywords|escape}" />



    Так как в движке используется mod_rewrite, нужно добавить следующую строку в до любых обращений к ресурсам:
    <base href="http://{$root_url}/">


    Отображаем меню каталога товаров


    Так как вложенность каталога неограничена — это меню вынесено в отдельный рекурсивный шаблон. Просто подключаем его:
    {include file=categories.tpl categories=$categories}


    Выводим меню сайта


    Там, где у нас должно находится меню сайта, пишем примерно следующее:
    {foreach from=$sections item=s}
    <a tooltip='section' section_id='{$s->section_id}' href='sections/{$s->url}'>{$s->name|escape}</a>
    {/foreach}


    Отображаем выбор валюты


    Для этого вставляем в шаблон вот такую форму:
    <form name=currency method=post>
    <p>валюта магазина:
    <select tooltip=currency name="currency_id" onchange="window.document.currency.submit();">
    {foreach from=$currencies item=c}
    <option value="{$c->currency_id}" {if $c->currency_id==$currency->currency_id}selected{/if}>
    {$c->name|escape}
    </option>
    {/foreach}
    </select>
    </p>
    </form>


    Формируем корзину пользователя


    {if $cart_products_num}
    В <a href="cart/">корзинe</a> {$cart_products_num} товаров
    на сумму {$cart_total_price*$currency->rate_from/$currency->rate_to|string_format:"%.2f"} {$currency->sign|escape}
    {else}
    Корзина пуста
    {/if}


    Создаем форму поиска


    <form name=search method=get action="index.php" onsubmit="window.location='search/'+this.keyword.value; return false;">
    <input type=hidden name=module value=Search>
    <input type="text" name=keyword value="{$keyword|escape}"/><input type="submit" value="Найти"/>
    </form>


    Подключаем «счастье админа»


    Для того, чтобы при наведении курсора на различные объекты сайта у администратора появлялись всплывающие меню действий над объектами, включите следующий код в свой шаблон:

    {if $smarty.session.admin == 'admin'}
    <script src="js/admintooltip/php/admintooltip.php" language="JavaScript" type="text/javascript"></script>
    <link href="js/admintooltip/css/admintooltip.css" rel="stylesheet" type="text/css" />
    {/if}


    Далее для тех объектов, над которыми должны всплывать меню, нужно добавить два параметра: tooltip и object_id. Например, для разделов меню:
    <span tooltip='section' section_id='{$s->section_id}'>{$s->name|escape}</span>


    И, самое главное, выводим основную часть страницы


    Скрипт формирует центральную часть страницы из соотвествующих шаблонов, а в index.tpl мы просто вставляем переменную {$content}. Как-то так:
    <div id="main_content">
      {$content}
    </div>


    * This source code was highlighted with Source Code Highlighter.


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

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

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

    Ну. И что?
    Реклама
    Комментарии 66
      0
      Спасибо за проделанную работу, иллюстрации супер.
      Частенько заказывают верстку с интеграцией в какую-нибудь экзотическую cms, однако симпа еще ни разу не попадалась, все таки не так она распространена еще(

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

      ps. А почему минусуют? О_о
        –3
        Так или иначе это реклама коммерческой CMS, автор которой призывает ее же и улучшать своими силами.
          0
          я предлагаю не улучшать, а использовать ее
            –2
            Про «использовать» можно было писать в туториале к движку при покупке. В данном случае это реклама.
              +3
              В таком случае давайте запретим разработчикам писать на хабре про свои продукты, ведь это по сути дела тоже реклама?
                0
                Все ваши комментарии полны негатива и саркастических смайлов. Напишите хоть что-нибудь полезное сами. :-) Можно даже рекламу, если другим это принесёт пользу.
              +1
              Эммм… допустим мне заказали верстку и интеграцию в симпу. Я должен сказать заказчику что он не прав и что надо было брать опенсорс решения?
              Все таки статья по большей части по прикрутке дизайна, а кто чем пользуется — это личный выбор.
                +6
                А когда рассказывают про программирование под Windows 7, рекламируют коммерческую Windows 7? :)
                  0
                  Замечу — реклама отличной коммерческой CMS. :) Долго искал такой магазинчик — простенький и удобный. Вот скоро готовим запуск магазина по DJ оборудованию. :)
                    0
                    И нам понравилось, купим. Под небольшой магазин домашнего кофейного оборудования — в самый раз.
                0
                smarty порой сильно тормозит :/
                  0
                  надо многоуровневое кэширование накладывать
                    0
                    Возьмите другой шаблонизатор, в чем проблема? Хотя очень хороших я не видел :(
                      –3
                      Почему не использовать xsl? Чем шаблонизаторы лучше?
                        +1
                        1) У XSL трудно понятный (невменяемый я бы сказал) синтаксис, и к тому же там надо больше пистаь кода (не люблю)
                        2) Непонятно, где найти хорошо оптимизированный и высокопроизводительный (а не написанный тяп-ляп) обработчик XSL

                        Или вы про обработчик, встроенный в браузер говорите?
                          +1
                          Я обсуждаю xsl в принипе.
                          Сам возненавидел его когда пришлось с ним работать. Но теперь, когда я с ним рабобрался, то удивляюсь почему он не стандарт де-факто? Почему любят использовать всякие смарти и прочие темплейты?
                            0
                            А в XSL есть наследование шаблонов или аналогичная опция? Если нет, мне он вряд ли подошел бы.
                              0
                              В привычном ООП-виде нет. Но есть include позволяющий подцепить один шаблон из другого и есть перекрытие правил.
                              В принципе возможности XSLT несравнимо богаче в части обработки XML, но логика там принципиально отличается от того, к чему привыкли в php-шаблонах.
                            0
                            1. Каждому свое :) xsl — это 5
                            2. ????

                            На браузере xsl :)
                            0
                            Потому что XSL будет выполняться на стороне клиента, и шансов написать кросс-браузерный xsl нет практически. Потому что парсеры XSL сложны в реализации, и стандарт де-факто — saxon — далеко не встроен в браузер.
                              0
                              Xsl вовсе не обязан выполняться на стороне клиента. Он будет обрабатываться всё так же на сервере. А клиенту будет отдаваться готовый html — всё как обычно.
                                0
                                Xsl онлайн сервер-сайд? будт жестокий фейл в производительности. Попробуйте с командной строчки пните саксоном махонький xml с махоньким xslt.
                                  0
                                  xsl обрабатывается быстро. Тем более что в php5 есть его встроенная поддержка.
                                  Перефразирую: xsl обрабатывается не медленнее шаблонов.
                                  Попробуйте и вы.
                            0
                            Шаблонизатор должен выбираться пользователем модулем.
                            А по умолчанию php (он и сам шаблонизатор).
                            Да, предоставьте наконец выбор пользователю, что вы делаете только для себя.
                            Один блин xslt выбрал, другой Смарти.

                            Предоставьте выбор пользователю, вы для них делаете cms.
                              –2
                              Да ерунда, поменять шаблнизатор как правило дело 15 минут. если только система не спроектирована криво.
                                +1
                                Серьезно? И все шаблоны и логику за 15 минут.
                                  0
                                  А вы автору предлагаете для всех существующих шаблонизаторов поткомплекту шаблонов сделать что ли?
                                    0
                                    API :)
                                      0
                                      Какой еще API? Шаблоны кто в итоге писать будет?))

                                      Если вы про систему адаптеров, чтобы можно было подключить любой шаблонизатор, то это бессмысленная и ненужная затея. Никто не меняет шаблонизаторы по 10 раз на дню, чтобы она была нужна, кроме ZF никто вроде такими извращениями не страдает.
                                        0
                                        Просто многие при разработке, разрабатывают архитектуру исходя из шаблонизатора, а это имхо зло :)
                                          0
                                          Тут не спорю)
                          +1
                          Будем пробовать, спасибо за инфу! Порадовала первая илюстрация с розовым слоником и покемонами которые его юзают =)
                            0
                            Это Аня Хиддекель мне нарисовала.
                            У диска Simpla обложка будет прикольная скоро
                            +2
                            Как раз сейчас я занимаюсь поиском сервиса для создания своего интернет-магазина.
                            Нужно как раз что-нибудь вроде Simpla, хотя она мне кажется слишком дорогой (да, я нищеброд :)
                            Или что-нибудь вроде Insales.ru — недавно на хабре был пост про этот сервис. Но они совсем недавно появились, и я боюсь что глючный получится магазин.
                            Денег на «битрикс-бизнес» у меня нет:)

                            Хабралюди, подскажите, есть ли ещё сервисы для создания интернет-магазина своими руками, наподобие Insales?

                            Познаний в программировании, чтобы самостоятельно возиться с osCommerce у меня нет. Да и времени не много.

                              0
                              Найми человека у которого есть познания и время.
                                +4
                                Денег нет, знаний нет, времени нет.
                                Интересная у вас ситуация.
                                  0
                                  нет знаний в области программирования. Не программист я, ну что с этим поделать? У меня есть моя профессия, довольно далекая от программирования, и изучать чужое ремесло я не хочу.

                                  Времени нет по той причине, что есть основная работа.
                                  Деньги в общем-то есть) но инвестировать в создание интернет-магазина я принципиально не хочу, потому что не уверен в успешности моей задумки. Максимум, на что готов — несколько сотен рублей в качестве арендной платы за аренду магазина.
                                    +1
                                    Ну значит интернет-магазин не для вас. С таким подходом потратите Ваши несколько сотен, а главное время, в пустую.
                                      0
                                      Делать поспешные выводы и умозаключения — удел недалеких людей, извините уж за прямоту
                                        0
                                        За прямоту извиняю, а вот за оскорбление нет.

                                        С заказчиками магазинов сталкиваюсь 3-4 раза в месяц (работа такая) и знаю что говорю.

                                        Человек, который, таким образом реагирует на совет, тем более не готов к видению бизнеса.
                                  +2
                                  «Денег на «битрикс-бизнес» у меня нет»
                                  И слава богу )) Ну если б были — всяко не стоит.

                                  P.S. sure, imho
                                    +1
                                    Кончно есть, помотрите www.webasyst.ru/shop/
                                      0
                                      это как раз то, что нужно. Спасибо!
                                      И стоимость тарифа «киоск» вполне приемлемая — 250 рублей.
                                      Вот только мучает вопрос — не будет ли такой магазин тормозить? Вам неприходилось с ним работать?
                                      0
                                      www.tochka-starta.ru/free-start-edition — фришный проект
                                      –4
                                      да, тоже было интерено, почему именно смарти а не xslt?
                                        0
                                        Наверно ему так удобнее и больше нравится.
                                        Безусловно нужно пробовать новое, но кому как.
                                        0
                                        А на каких условиях можно предлагать свои темы-дизайны? По чем они будут продаваться, какая часть пойдет разработчику? Будет ли на вашем сайте ссылка на сайт разработчика?
                                          +1
                                          Я бы предложил сделать так:
                                          вы создаете тему, сами назначаете ей цену и условия использования, а я просто предлагаю ее покупателю симплы. Предлагаю или в частном порядке, или создам раздел на сайте.
                                          Суть в том, что мне выгодно когда у покупателя есть выбор тем, ему выгодно получить готовый дизайн, а вам выгодно продать свой дизайн.
                                          Конечно, не факт что вашу тему сразу купят, но с другой стороны вы можете этим заниматься в свободное время :)
                                            +1
                                            Суть в том, что мне выгодно когда у покупателя есть выбор тем, ему выгодно получить готовый дизайн, а вам выгодно продать свой дизайн.


                                            как только наберете обороты предлагайте народу дублировать темы на templatemonster. там и с условиями для дизайнеров всё прозрачнее, и вам косвенная популяризация ;)
                                          –3
                                          не дороговато ли 400$ для такого??
                                            +3
                                            Для такого… это что вы хотели сказать?
                                            Советую сделать вам подобный и продавать дешевле ;)
                                              –2
                                              Не надо советовать делать «такое». Оооочень посредственный продукт.
                                                +1
                                                Да, уже не первый раз заметил, что поклонники этой разработки не адекватно реагируют на критику.
                                                  +1
                                                  Я проводил подробный маркетинговый анализ данного срипта, и скажу что он фору даст многим нынесуществующим.

                                                    0
                                                    Вам надо было не анализы проводить, а попробовать создать несколько каталогов и разместить несколько десятков товаров с разными свойствами, сделать блок новинок, акций, сделать товары со скидками, добавить страны производителей, добавить пояснения к картинкам, EAN код, дату окончания скидки на товар, добавить варианты доставки, оплаты, наценку на группу товаров, добавить прикрепленные и составные товары и еще кучу всего, что делает админ нормального магазина каждый день. И когда Вы все это сделаете в Simpla, то поймете, что это CMS не для магазина, а максимум для киоска с ассортиментом из 20 товаров.
                                                      +1
                                                      да что вы говорите! Именно это я и проделал. Да, большинства из того, что вы перечислили нету, но дописывается за копеечные деньги, которые у вас возьмут за настройку той же hostcms и битрикс
                                                        0
                                                        Ну раз там этого нет (а я перечислил далеко не все), значит этот продукт нельзя назвать полноценным. Магазином уж точно.

                                                        А за копейки «дописывается», это сколько? Допишите мне? Я не шучу, за сколько я могу получить систему описанную выше?
                                                          –1
                                                          И забыл про мультиязычность
                                                            +1
                                                            Во-первых, я не до конца понимаю некоторые ваши желания, потому что не знаю, что функционально под ними подразумеваете.
                                                            Скидки на товары, артикул, скидки по группам пользователей обойдется в 100 у.е. — это сказал программер, который все это делает на симпла.
                                                            Многое вами перечисленное есть в скрипте, если не нашли воспользуйтесь инструкцией.

                                                            Найдите в моем блоге обзор Simpla, я тоже многим был недоволен, и там много комментариев Дениса, смотрите
                                                              0
                                                              Ну тех задание я писать не буду, лень. Но принцип понятен, если самые простые вещи стоят четверть стоимости лицензии, то могу предположить какова будет стоимость полнофункционального магазина.

                                                              А Вы из команды разработчиков?
                                                          0
                                                          Ну прям киоск… в киоске должно быть 50 жвачек, 200 пива и 400 сигарет, да и дорого для киоска 400 баксов. Вот для проекта «интернет-бутик» — в самый раз. D&G = Дорого энд Глупо? Ну да. Суперторговец, мегапродавец, который с трудом «асилил» Word, Excel и Одноклассников ждёт именно этого: простых решений.

                                                          У меня есть знакомое блондинко — так она в ЖЖ продает пальто из Парижа. Привозит под заказ по 100%-ной предоплате! И прекрасно себя чувствует.
                                                  –1
                                                  Только мне одному надоело смотреть на то, как появляются «мега-классные цмс», которые по сути такие же как и все остальные?

                                                  Мда… появляется аякс, красивые админки, приятные демки, документация, даже у кого-то скринкасты… Но вам не кажется, что «Список товаров», «Отдельный товар», «Список статей», «Лучшие товары» вы уже слышали четыре-пять лет назад??!!! А фраза «Общая часть одинакова для всех страниц магазина, включает в себя дизайн всей страницы» известна еще раньше. Все копируют друг у друга, меняя как будто только интерфейсы функций и классов.

                                                  Товарищ proc прав, когда говорит о том, что это красивая поделка. Только, блин, мега-разработчики все равно хотят за поделку $400.

                                                  Серьезные е-коммерческие проекты уже давно требуют значительной адаптации ЦМСок под себя. Тут без программистов не обойтись. Отбросьте нафиг мысли о том, что кто-то кроме программистов скачивает и устанавливает ваши продукты! Если делать продукт, которым смогут пользоваться даже идиоты, им будут пользоваться только идиоты! (с) Umputun

                                                  Где новые идеи в этой области? Кто выйдет за рамки? Кто решится на прорыв?

                                                  P.S.: И лучше бы вы смарти не вставляли по дефолту. Или без нее не уметь?
                                                    0
                                                    Я не программист, а установил Simpla. Скажу больше — купил, настраиваю, проблем нет. Может я недостаточно требователен?
                                                      0
                                                      И как продажи?
                                                      0
                                                      Overhead далеко не всегда нужен. У меня несколько бизнесов, и один из них — интернет-магазин.
                                                      Так вот, симпла реально отлично решает задачи моего интернет-магазина без допиливания. Очень легко настроить, очень удобно пользоваться не экспертам в it. Всё.

                                                      А если нужно допилить — действительно написано для людей.

                                                      *выехал за еще одной лицензией simpla*
                                                      0
                                                      Отличная CMS для магазина, очень долго выбирал и остановил свой выбор на ней. Кто-то говорит что в ней многово не хватает, я скажу что в ней нет ничего лишнего. Единственное что $400 дороговато, но думаю о цене всегда можно договориться:)

                                                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                      Самое читаемое