Как прикрутить свой дизайн к магазину 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
                                        Просто многие при разработке, разрабатывают архитектуру исходя из шаблонизатора, а это имхо зло :)
                      • +1
                        Будем пробовать, спасибо за инфу! Порадовала первая илюстрация с розовым слоником и покемонами которые его юзают =)
                      • +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
                                                Overhead далеко не всегда нужен. У меня несколько бизнесов, и один из них — интернет-магазин.
                                                Так вот, симпла реально отлично решает задачи моего интернет-магазина без допиливания. Очень легко настроить, очень удобно пользоваться не экспертам в it. Всё.

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

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

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