Тема "dummy" для разработчиков

golubevmark

Здравствуйте, меня зовут Голубев Марк, и я занимаюсь Front-end разработками в компании. Сегодня я вам представлю тему "dummy" для front-end разработчиков.

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


Немного особенностей:

- Я использовал препроцессор Stylus ( http://stylus-lang.com/ ) для генерации CSS файлов. Людям знакомым с препроцессорами, это должно значительно упростить разработку. Исходники расположены в /css/styl/ разделах приложения.

- JavaScript местами был полностью переписал и структурирован. Почти всю JS логику внутри шаблонов я вынес в отдельные файлы, чтобы не мешать код шаблона и скриптов. (Несколько моих рекомендации по оформлению JS я дам ниже)

- Файлы CSS/JS были перенесены в соответствующие подпапки, в корне темы теперь располагаются только шаблоны и системный theme.xml файл с настройками.

На данный момент подготовлены темы для приложений "Сайт" и "Магазин", в котором "Сайт" является родительским приложением, а "Магазин" наследует его общее оформление.

!!! Хочу обратить внимание что тема для "Магазина" без установленной темы для "Сайта" работать не будет. Это следствие наследования приложений.


Исходники:

скачать dummy на github

Инструкция по началу работы с Dummy для разработчиков: https://developers.webasyst.ru/templates/design-themes/dummy/


Рекомендации:

- Помещайте CSS оформление и JS скрипты согласно их применению. Общеиспользуемый функционал в родительскую тему ( например: оформление кнопок на сайте ), а частное оформление в тему приложения, где используется.

- По мере расширения JS функционала старайтесь создавать js файлы, которые будут содержать функцию конструктор. Далее подключите его асинхронно в теле шаблона через "getScript" и инициализируйте, передавая нужные параметры.

пример шаблон: "checkout.html":

... в конце шаблона

<script>
( function($) {
    $.getScript("{$wa_theme_url}js/checkout.js", function() {
        new Checkout({
            $wrapper: $(".s-checkout-page")
        })
    });
})(jQuery);
</script>

P.S.

На данный момент я представил вам alpha-версию темы, которая будет постепенно дополняться и расширяться. От заинтересованных в этом вопросе людей я бы хотел услышать ваше мнение и рекомендации.

5 июля 2016
  • Syrnik.com 15 февраля 2016 11:09

    Спасибо, полезный проект

  • Syrnik.com 15 февраля 2016 11:19

    Немного жаль, конечно, что stylus. :) придется в привычный sass/scss переводить :)

  • Владимир Сергеев 16 февраля 2016 05:07

    Спасибо!

  • Александр 16 февраля 2016 05:18

    Stylus так же хороший препроцессор. Сам проект очень хорошая задумка. Возможные рекомендации будут после изучения/теста текущей версии темы.

    Пока что есть один вопрос - насколько оправдано использование тега Smarty {strip}, как это влияет на скорость сборки шаблонов шаблонизатором и на скорость ответа сервера? В вашей реализации используется в каждом шаблоне.

  • golubevmark Webasyst 16 февраля 2016 05:33

    Тестировали, по факту на производительность не влияет.

    Я его использую, чтобы избавиться от пробелов между "inline-block" элементами. Есть много альтернативных способов ( через font-size: 0, или через комментарии <!-- --> ). Этот способ, по моему мнению, выглядит проще всех.

    Также размер сгенерированного html из-за отсутствия переносов и пробелов получается меньше, что положительно скажется на скорости загрузки страницы.

  • Александр 16 февраля 2016 05:53

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

  • - Файлы CSS/JS были перенесены в соответствующие подпапки, в корне темы теперь располагаются только шаблоны и системный theme.xml файл с настройками.

    Через визуальный редактор можно ли редактировать ccs (js) во вложенных папках (для клиентов облака) ?

  • golubevmark Webasyst 16 февраля 2016 07:57

    Дмитрий, данная функция будет публично добавлена со следующим обновлением фреймворка. На данный момент посмотреть работоспособность можно в версии для разработчиков ( dev ветка на github )

  • Syrnik.com 16 февраля 2016 08:00

    Многие разработчики тем, кстати, весьма удачно используют блоки для добавления user-defined css и всякого такого, чтобы не вносить исправления в основные файлы тем

  • golubevmark Webasyst 16 февраля 2016 08:10

    Сергей, для добавления своих css изменений, не изменяя при этом исходные css-файлы, я добавил в настройках темы "Сайт" опцию "additional_styles". Она позволяет добавлять inline-css стили, не изменяя css файлы темы.

    Это то, что вы имели ввиду ?

  • Владимир Сергеев 16 февраля 2016 08:30

    Марк, думаю, и так можно.
    Но я ещё добавлю в код проверку на существование блока со стилями из приложения сайт.

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

  • В функции вывода страниц renderNavItem в sidebar.html делаете лишний запрос:

    {$_subpages = $wa->shop->pages($page.id)}

    можно сделать проверку:

    {if isset($page.childs)}

    и вывести дочерние страницы:

    {foreach $page.childs as $subpage}
        {renderNavItem page=$subpage}
    {/foreach}
  • golubevmark Webasyst 16 февраля 2016 09:33

    Дмитрий, согласен. Уже включил ваши замечания в будущий коммит :)

  • Rat 17 февраля 2016 03:10

    Юбилейная тема в хабе ;)

  • Александр 17 февраля 2016 04:47

    Вот эта строка не верная, там должно быть лишь число(файл index.html, раздел HEAD):

    <meta name="viewport" content="width=1024px" />

    *хотя это не существенно, шаблон не адаптивен - многие просто ее удалят

  • Александр 17 февраля 2016 04:51

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

    *так же не существенно - это можно легко изменить

  • golubevmark Webasyst 17 февраля 2016 05:07

    Александр,

    про viewport: да, конечно, значение должно быть целым без "px". В будущем я сделаю адаптивность, а пока ее нет, я использовал подход с фиксированным viewport, чтобы сайт масштабировался.

    про кнопку и форму: замечание записал, в ближайшее время добавлю в коммит.

  • Александр 17 февраля 2016 05:22

    Не хватает стилизации для тегов SELECT, например на странице редактирования профиля не очень хорошо сочетается с тегами INPUT[type=text].

    *блок выбора можно оставить стандартный, но внутренние отступы и цвет границы следует подправить

  • Александр 17 февраля 2016 07:15

    На странице продукта блок выбора количества товара отправляемого в корзину: при использовании кнопок увеличения и уменьшения количества не вызывается событие "change" на элементе INPUT[name="quantity"] - что может быть не совместимо с некоторыми плагинами(например "купить в один клик"). Сама реализация понравилась, но не увидел учета "вариаций товара", а каждая из вариаций может иметь свое наличие на складе, что приведет к некорректной работе этой функции.

  • golubevmark Webasyst 17 февраля 2016 07:36

    Спасибо за замечание, записал, сделаю.

  • Александр 17 февраля 2016 09:27

    Предлагаю в некоторых местах использования $.getScript, пример с загрузкой плагина карусели bxSlider(в файле home.slider.html), предварительно проверять существование объекта плагина:

    if (!$.fn.bxSlider) {
       $.getScript(...
    } else {
        ...
    }

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

  • golubevmark Webasyst 17 февраля 2016 10:13

    Обновил исходники с учётом ваших рекомендаций.

  • Александр 18 февраля 2016 07:03

    В файле product.js в функции updatePrice следует и для зачеркнутой цены учитывать количество товара, сейчас код такой:

    price += service_price * that.volume;
    
    if ($compare.length) {
    	compare_price += service_price;
    }

    видимо должно быть так:

    price += service_price * that.volume;
    
    if ($compare.length) {
    	compare_price += service_price * that.volume;
    }

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

  • golubevmark Webasyst 18 февраля 2016 07:16

    Всё верно. мой недочёт. записал.

  • golubevmark Webasyst 18 февраля 2016 07:37

    В шаблоне формы товара "product.cart.html" изменится id формы на

    <form id="s-product-form{if $_is_dialog}-dialog{/if}" ...>

    также изменится инициализация продукта ниже:

    <script>
        ( function($) {
    
            var is_product_exist = (typeof Product === "function");
    
            function initProduct() {
                var $form = $("#s-product-form{if $_is_dialog}-dialog{/if}"),
                    options = {
                        is_dialog: {if $_is_dialog}true{else}false{/if},
                        currency: {json_encode($currency_info)},
                        services: {if count($product.skus) > 1 or $product.sku_type}{json_encode($sku_services)}{else}false{/if},
                        features: {if $product.sku_type}{json_encode($sku_features_selectable)}{else}false{/if}
                    };
    
                new Product($form, options);
            }
    
            if (!is_product_exist) {
                $.getScript("{$wa_theme_url}js/product.js?v{$wa_theme_version}", function() {
                    initProduct();
                });
            } else {
                initProduct();
            }
        })(jQuery);
    </script>
  • Александр 18 февраля 2016 07:54

    Да, так хорошо будет работать в списках продуктов с вариациями. Про смену идентификатора формы так же поддерживаю, исправит ошибку на странице продукта при попытке добавить товар с вариациями из списков рекомендуемых товаров. Сработали на упреждение :)

    На странице продукта нет возможности убрать его из списка сравнения(либо не смог отыскать).

    Так же если вы отображаете нулевой рейтинг продуктов в списках, стоит отобразить его и на странице продукта.

  • golubevmark Webasyst 18 февраля 2016 07:59

    В том же шаблоне "product.cart.html", поле ввода количества товара лишится атрибута "id" в пользу "class".

    <input class="product-quantity-field" type="text" name="quantity" value="1" data-max-quantity="{$product.count}">
  • Александр 18 февраля 2016 08:03

    В этом случае подумайте над реализацией отображения выбора количества и в списках продуктов, перенеся код инициализации этой функции в файл dummy.shop.js(замена идентификатора на класс позволит это сделать).

  • Александр 18 февраля 2016 08:25

    Файл header.layout.html не отображается в списке файлов приложения Сайт. Файл header.plugins.html не отображается в обоих приложениях. В приложении Магазин содержится лишний файл plugins.header.html

    Файл list-thumbs.html оставили в угоду текущим версиям тем оформления(то есть из за подсказок по использованию списков в админке)? :)

  • golubevmark Webasyst 18 февраля 2016 08:42

    1. записал.

    2. да, именно так.



Чтобы добавить комментарий, зарегистрируйтесь или войдите