Тема "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
  • golubevmark Webasyst 6 июля 2016 10:53

    Спасибо Алексей. Поправил. Обновится в следующем обновлении темы.

  • Александр 7 июля 2016 11:15

    1) Меню навигации "личного кабинета" реализовано только в приложении Магазин к тому же не учитывает других приложений. То есть мы не увидим там ссылку на управление подписками, если установлено приложение Рассылки.

    2) Отсутствует файл product.page.html, хотя меню подстраниц продукта формируется.

  • golubevmark Webasyst 7 июля 2016 11:49

    Александр, спасибо за помощь.

    Оба ваших замечания были каким-то непонятным образом упущены при разработке. Сделаю их в первую очередь.

  • В шаблоне отсутствует ajax фильтрация, не лишним было бы её добавить.

  • golubevmark Webasyst 8 июля 2016 10:45

    Алексей. записал, сделаю.

  • golubevmark Webasyst 11 июля 2016 17:14

    Обновили исходники на github. Были исправлены все недочеты указанные выше.

  • Фильтрация по максимальной цене не верно работает. Но если отключить функцию слайдера - //that.initRangeSlider(); , то всё встает на свои места. Ошибку я не нашел, но протестировал с jqueryUI. Работает нормально.

  • Если используется скидка по сумме заказа, то при удалении товара скидка не пересчитывается. Так же прячется сама информация о скидке. Ошибка в cart.js // Render Discount

  • loony 12 июля 2016 01:48

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

    версия (в xml указана) темы в админке не выводится.

    это только у меня такое?

  • golubevmark Webasyst 12 июля 2016 12:41

    Алексей,
    Проблему со слайдером нашёл. Заключалась в том, что для полей с периодом (например размер диагонали экрана от 2 до 5) автоматически выставлялись минимальные и максимальные значения в полях. Товары, без этой характеристики соответственно не отображались, исправил.
    Также исправил баг в cart.js. Спасибо за помощь.

    loony,
    Боюсь, что тех данных что вы указали, недостаточно чтобы понять проблему. Я попытался воспроизвести у себя, скачал архив, скопировал в site/themes/ тему для сайта. Проблемы не увидел. Тестировал на Windows системе, локально.

  • smagloiv 5 августа 2016 13:51

    Не работает кнопка оплаты на /checkout/success/. Выдает ошибку Uncaught TypeError: Cannot read property 'submit' of null

  • golubevmark Webasyst 9 августа 2016 11:08

    smagloiv, спасибо за обнаружение довольно критичной проблемы. Проблему вылечил, но до github'a доберётся не раньше конца августа.

    Вылечить можно в шаблоне checkout.html.


  • Red Cat 11 августа 2016 13:10
    1. В SS7 не работает swipebox (увеличение фото) у товаров с 1-й фотографией. С несколькими фотографиями работает.
    2. При переходе из SS7 в Блог "Корзина" начинает отображаться как "Cart"
    3. В Блоге логотип ссылается не на стартовую страницу сайта "/", а на стартовую приложения "/blog/".
  • golubevmark Webasyst 11 августа 2016 13:38

    Red Cat, спасибо. Правки по 1-2 пунктам появятся на GitHub в конце месяце.

    Пункт #3 не является ошибкой. Вы можете установить ссылку с логотипа по вашему усмотрению.

  • Алексей Александрович 16 августа 2016 13:26

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

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

    В product.js правится тут function initFirstSku() { ... }

  • Алексей Александрович 4 сентября 2016 15:45

    Еще, кстати, заметил что нет поддержки встроенного видео в карточке товара.

  • Алексей Александрович 5 сентября 2016 11:08

    Еще один момент.

    Из категории товаров не всегда правильно работает изменение количества товаров добавляемого в корзину. У меня, например, с товарами добавленными вручную проблем не возникло, а вот со спарсенными товарами вылетала ошибка, что данный товар купить нельзя, т.к. его нет в наличии. Сначала думал в кривости импорта. Проверил потом из карточки - там добавляется без проблем любое кол-во. Значит ошибка в products.js. Собственно тут:заменить

    max_val = $quantity.data("max-quantity"),
    на
    input_max_data =  parseInt( $quantity.data("max-quantity") ),
    max_val = ( isNaN(input_max_data) || input_max_data === 0 ) ? Infinity : input_max_data,
    
    данный код взял из product.js
  • golubevmark Webasyst 7 сентября 2016 16:06

    Алексей, спасибо.

    products.js поправил, также сделал вывод видео на странице товара.

    Выложили изменения на github

  • Алексей Александрович 7 сентября 2016 16:12

    А с initFirstSku(); решили ничего не делать? Мне кажется это лишнее, реально же не правильно так. Я решил заменить Ваш скрипт, на скрипт выбора того SKU, который выбран в админке товара. Это логичнее.

            //initFirstSku();
            initSelected();
    
            function initSelected() {
                $('.sku-feature').each(function(index){
                    var $feature = $(this).attr('value');
    
                    $(this).prevAll('a[data-value='+$feature+']').click();
                });
            }
    
    Так же в product.cart.html добавил selected для уже выбранного SKU:
    {if $v_id == ifset($default_sku_features[$f.id])} selected{/if}
  • Алексей Александрович 19 сентября 2016 10:52

    Был немного неправ, он не выбирает товар В наличии только если выбрано в настройках магазина:

    Склады

    Покупатель может оформить заказ, даже если товара нет в наличии Товары, отсутствующие на складе, могут быть добавлены в корзину и заказаны

  • В reviews.js надо заменить в двух местах

    var $review = $link.closest(".review-item"),
    на
    var $review = $link.closest(".s-review-item"),

    Иначе не работает ответ на отзыв.

  • golubevmark Webasyst 4 октября 2016 11:44

    Алексей, спасибо. reviews.js исправлю в ближайшее время.

    По поводу initFirstSku() пока не готов дать свой комментарий. Вопрос требует изучения. Когда я делал этот функционал, был ряд трудностей из-за формата доступных sku, которые можно получить в теме. Поэтому и было придумано такое громоздкое решение.

  • Eugen Nichikov 4 октября 2016 15:32

    Марк, а вам удобно читать этот топик из админки? Нам в публичной части вот не очень :)

  • golubevmark Webasyst 4 октября 2016 15:35

    Eugen Nichikov, улыбнёшься ) но я также как и вы листаю 4 страницы, чтобы увидеть последние комментарии.

  • Eugen Nichikov 4 октября 2016 15:47

    Так это поправимо. Сделаем 16 :) может, чтобы избежать нервного срыва своего сотрудника, Webasyst придумают что-то с длинными топиками?

  • Eugen Nichikov 4 октября 2016 15:51

    Сабж пробовал использовать. Круто!

    Некоторые ошибки выше поймал и исправил сам. Не описал только из-за долбанного скроллинга :)

    Были небольшие проблемы с адаптивкой (сейчас уже не скажу что конкретно) и излишней вложенностью некоторых блоков (ссылка на личный кабинет, корзину... их нужно было перенести почти в том же виде, в котором они были).

  • golubevmark Webasyst 4 октября 2016 16:06

    В dummy полноценной адаптивности нет.

    Я придерживался концепта, что под мобильные устройства включится мобильная версия сайта. Для планшетов отлично работает аппаратное масштабирование (<meta device-width=your-min-width>), а для больших экранов шириной можно манипулировать. Она задана статически лишь для примера.

    Для сложных адаптивных вещей предполагается использование css media queries

  • Eugen Nichikov 4 октября 2016 16:20

    Это всё понятно :) Кроме нескольких моментов, которые пришлось существенно переделывать, dummy прекрасно адаптировалась под мобильные устройства.

  • Кстати, в фильтрацию товаров было бы не лишним добавить

    // Filter history
    if (!!(history.pushState && history.state !== undefined)) {
    window.history.pushState({}, '', '?'+data+'&filter');
    }
  • iluha 22 ноября 2016 18:12

    А почему нет возможности добавить товар к сравнению в карточке товара?



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