Тема "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
  • Роман 22 марта 2017 00:27

    Разработка и допил темы ведется или все загнулось? На рабочем магазине кто-то использует? Чисто с визуальными правками, не более..

  • На счет ведется ли допил не знаю. Некоторые мои шаблоны в маркете сделаны на этой теме.

  • golubevmark Webasyst 22 марта 2017 10:40

    iluha, добавлю возможность добавить товар в сравнение из карточки в будущих релизах темы.

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

    Алексей, спасибо за ссылки. Мне было интересно изучить вашу реализацию.

  • Добавил на Git issue с улучшением фильтрации. Сейчас при фильтрации все доступные параметры попадают в url, из-за этого не работает плагин "SEO Фильтры". В новой функции будут добавляться только выбранные характеристики.

  • golubevmark Webasyst 5 мая 2017 10:26

    Алексей, спасибо. Ознакомлюсь в ближайшее время.

  • Кирилл Михайлов 13 мая 2017 18:57

    Марк, хочу к вам обратится с таким вопросом... так как вы разработали эту тему Dummi, может подскажите существует ли где то описанная структура файлов для шаблонов тем дизайна, у меня задача такая что есть готовый шаблоны дизайна и их надо натянуть на вебасист, или может подскажите как это сделать и где об этом прочитать. Я перебрал практически всю документацию, но она больше для вебасиста и редактирования готовых тем, я поэтому вопросу даже тему отдельную создал на форуме, но пока еще ни кто не ответил, может вы подскажите)))

  • golubevmark Webasyst 15 мая 2017 10:49

    Доброго времени суток Кирилл.

    У меня нет ссылки на ресурс с информацией, которую вы ищете.

    С ходу я не вижу сложности. CSS/JS/Images располагаются в соответствующих папках, названия которых вы можете менять, по вашему усмотрению. Относительно шаблонов, вы можете изучить некоторые наши темы, Default или Dummy, чтобы определить какие шаблоны являются системными, а какие выделены для упрощения кода.

  • Михаил 20 мая 2017 03:01

    Извините, когда ждать адаптивную версию?

    Считаю это очень важным аспектом.

  • Евгений Леман 19 сентября 2017 16:21

    Это вроде уже обсуждалось, но ответа найти не смог. Как, собственно, и вопроса... Насильное переопределение выбранных по умолчанию характеристик на странице продукта является запланированным? Или всё же упущением? То есть если я в админке в кач-ве артикула по умолчанию выберу iPhone "gold-128Gb", то текущий скрипт всё равно будет сбрасывать это на "Grey-16Gb" только лишь потому, что эти варианты идут первыми. В этом месте код не самый "приятный" для чтения и каждый раз мои потуги самостоятельного решения проблемы заканчивались словами "Ой, всё равно никто не заметит" :) Тем не менее, это каждый раз немного раздражает.

  • Den 5 октября 2017 01:28

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

  • golubevmark Webasyst 13 октября 2017 18:08

    Сделали незначительные изменения в теме и обновили ее на github.

    Алексей Александрович, мы еще раз протестировали артикулы (initFirstSKU), и описанный вами проблемный кейс не смогли воспроизвести. В наших тестах все работает как задумано

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

    Спасибо всем заинтересованным людям за замечания и предложения.

  • Евгений Леман 13 октября 2017 18:28
    Алексей Александрович, мы еще раз протестировали артикулы (initFirstSKU), и описанный вами проблемный кейс не смогли воспроизвести. В наших тестах все работает как задумано

    Пруф!

    А вот как на самом деле. В админке:

    На витрине:


    Выбранный по умолчанию "128Gb, Золотой" артикул на витрине заменяется на первый по списку, хотя он есть в наличии.

  • Алексей Александрович 13 октября 2017 19:45

    Еще, кстати, есть проблема с lazyloading после фильтрации товаров.

    1. После загрузки страницы фильтруем товары по любому параметру
    2. Листаем вниз - подгрузка не произойдет

    Ошибка там в скрипте подгрузки, не правильно считается положения paging на странице после фильтрации. Я решил проблему при помощи lazyload.js, и сделал по принципу темы Default

  • Den 15 октября 2017 21:28

    Марк, спасибо что обратил внимание на мой вопрос

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

    Я выяснил в чем проблема. Почему то поиск в твоей теме конфликтует с популярным плагином SEO-фильтр

    Стоит выключить данный фильтр и всё сразу работает.

    При этом если вернуться на тему default то конфликта в поиске нет. Буду благодарен за решение проблемы. Также о данном баге отрепорчу создателям плагина.


  • Алексей Александрович 16 октября 2017 11:09

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

  • Евгений Леман 21 августа 2018 23:33

    На случай, если поддержка темы еще ведется. Предустановка артикула через GET не работает. Если в фильтре выбрать, например, красный цвет, то по возможности система будет давать ссылку именно на артикул красного цвета: https://demo2-ru.webasyst.com/...

    В dummy это игнорируется.

  • golubevmark Webasyst 22 августа 2018 16:24

    Евгений, спасибо за замечание. Могу я вас попросить проверить, есть ли у вас этот код в product.js?

  • Евгений Леман 22 августа 2018 17:35

    Обновление было? Пропустил. Нет, такого кода нет, но его добавление не помогло. Помогло с маленьким изменением одной строки: 

    $selected = $form.find(".inline-select .selected");

  • golubevmark Webasyst 30 ноября 2018 18:09

    Вышло обновление темы:

    • Поддержка обновлённой системы авторизации и режима «оформления заказа в корзине».
    • Отображение расписания работы интернет-магазина на текущую неделю с учетом обновлённых настроек режима работы и указанных дополнительных выходных и рабочих дней.
  • Александр Тарасенко 3 декабря 2018 14:05

    Вот сейчас будет резко но справедливо.

    Выкиньте, удалите, сотрите этот мертворожденный проект нафиг! 

    И не сбивайте больше людей темой "для разработчиков"!

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

    И получается разрыв шаблона, вы говорите разработчикам тем - используйте Dummy - она для вас, а все разработчики плагинов говорят - на default работает - работает, идите нафиг проблема в вашей теме.

    До сих пор разгребаем проблемы из-за того что для своего первого проекта взяли тему dummy, например чтобы не быть голословным, оформление заказа:

    Dummy:

    <div class="s-step-wrapper" id="step-{$checkout_current_step}" data-step-id="{$checkout_current_step}">

    Default:

    <div class="checkout-step step-{$step_id} {if $current_step_index > 0 && $current_step_index > $s@iteration}is-done{/if}" data-step-index="{$s@iteration}">

    Плагин СДЭК использует:

    $('.checkout-step.step-shipping .shipping-' + key + ':first')

    ИТОГ со всеми производными от Dummy плагин работать не будет, и совершенно правильно скажет "идите нафиг на default работает"


    И написал этот пост так как только сегодня было потрачено два часа на всплывшею проблему с классами!

  • Евгений Леман 3 декабря 2018 14:52

    Выкиньте, удалите, сотрите этот мертворожденный проект нафиг!

    Не, ну погорячился же :) JS в теме лучше и удобнее. А это главное. Сохранять структуру дефолтной темы - идиотизм. Тут скорее вопрос к плагинам. Ну или модераторам. Мол какого хрена такое опубликовано?

  • enso_studio@mail.ru 3 декабря 2018 16:40

    Плагин СДЭК использует: $('.checkout-step.step-shipping .shipping-' + key + ':first')

    привязка к внешним классам/id это не особо удачная идея, лучше уж по имени - 'select[name="rate_id[{$plugin.key}]"]' т.к. оно неизменно во всех темах.

    но тут есть еще одна проблема - в бекенде магазина другие имена перенных :)

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



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