Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

Как грамотно переверстать карточку товара под мобильные устройства


chamaerops
 Поделиться

Рекомендованные сообщения

Вводные данные: 

ОС 2.1.0.1

Шаблон: дефолтный (точнее копия дефолтного, стилизованного под свой дизайн)

 

На десктопах карточка товара выглядит следующим образом

 

post-707590-0-79352000-1472066571_thumb.png

 

Блоки слева сидят в своем DIVe col-sm-N, правый блок в своем DIVe col-sm-M.

 

Как следствие, на мобильных устройствах карточка товара выглядит вот так

 

post-707590-0-55064900-1472066433_thumb.png

 

то есть, кнопка "Купить" и прочая важна информация находятся глубоко внизу, а табы с описанием/характеристиками/отзывами - посередине. Это, как мне кажется, очень нехорошо в плане юзабилити.

 

Хочу сделать вот так

post-707590-0-27223000-1472066433_thumb.png

 

То есть по порядку:

 

1.Фото

2. Кнопка "Купить" и сопутсвующие поля с информацией

3. Табы (Описание/характеристики/отзывы)

 

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

 

Пока что в голову пришел только такой вариант:

 

Блок содержащий кнопку "корзины" в шаблоне копируется и выводится после блока с фото.

Для десктопов отображается привычная корзина с классом col-sm-M col-md-M col-lg-M hidden-xs (скрываем блок с кнопкой КУПИТЬ на мелких экранах)

 

Второй, аналогичный блок с кнопкой КУПИТЬ, размещаем в шаблоне сразу за блоком с фото и даем ему классы col-xs-12 hidden-sm hidden-md hidden-lg (то есть прячем его на больших экранах, выводим на мелких)

 

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

 

З.Ы. Сорри за микроскопические картинки, думал будут нормального размера.

Изменено пользователем chamaerops
Ссылка на комментарий
Поделиться на других сайтах


...

 

Пока что в голову пришел только такой вариант:

 

Блок содержащий кнопку "корзины" в шаблоне копируется и выводится после блока с фото.

Для десктопов отображается привычная корзина с классом col-sm-M col-md-M col-lg-M hidden-xs (скрываем блок с кнопкой КУПИТЬ на мелких экранах)

 

Второй, аналогичный блок с кнопкой КУПИТЬ, размещаем в шаблоне сразу за блоком с фото и даем ему классы col-xs-12 hidden-sm hidden-md hidden-lg (то есть прячем его на больших экранах, выводим на мелких)

 

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

 

З.Ы. Сорри за микроскопические картинки, думал будут нормального размера.

 

я бы тоже так сделал, учитывая ваш bootstrap. К тому же данные с правой колонки с кнопкой "Купить" минимальны и не поедят время загрузки. Есть нюанс - часто на кнопки вешают id для скриптов, смотрите чтобы у вас был класс, т.к. кнопка по-сути будет дублироваться.

Ссылка на комментарий
Поделиться на других сайтах


Такое решение не подходит? Или не разобрались?

Ща детальнее смотрю.

По первому заходу, мне показалось, что меня ткнули в онлайн-тренажер по СSS  :-D

А так изменен порядок вывода блоков как раз таки....

Ссылка на комментарий
Поделиться на других сайтах


я бы тоже так сделал, учитывая ваш bootstrap. К тому же данные с правой колонки с кнопкой "Купить" минимальны и не поедят время загрузки. Есть нюанс - часто на кнопки вешают id для скриптов, смотрите чтобы у вас был класс, т.к. кнопка по-сути будет дублироваться.

Вы о том, что будет дублироваться ID кнопки? А чем чревато?

Ссылка на комментарий
Поделиться на других сайтах


Ща детальнее смотрю.

По первому заходу, мне показалось, что меня ткнули в онлайн-тренажер по СSS   :-D

А так изменен порядок вывода блоков как раз таки....

 

Изменить порядок блоков можно тучей способов, но по вашему посту в шапке я понял что вы хотите "в стиле bootstrap"

Ссылка на комментарий
Поделиться на других сайтах


Вы о том, что будет дублироваться ID кнопки? А чем чревато?

 

карточка товара валидацию не пройдет, это грубая ошибка. Ну и не тру как-то...

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах


Изменить порядок блоков можно тучей способов, но по вашему посту в шапке я понял что вы хотите "в стиле bootstrap"

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

Изменено пользователем chamaerops
Ссылка на комментарий
Поделиться на других сайтах


карточка товара валидацию не пройдет, это грубая ошибка. Ну и не тру как-то...

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

Ссылка на комментарий
Поделиться на других сайтах


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

 

Весьма неплохо, т.к. в этой ситуации более красивого решения я не знаю, если учитывать что вы планируете поддерживать code convention bootstrap. В вашей ситуации это наиболее простое и эффективное решение, которое обойдется дешево и не нанесет вреда качеству кода, не повлияет на поисковую выдачу. Более сложные реализации требуют рассмотрение вашего кода, но я бы не стал запариваться, все на уровне, в самом деле, лучше может получиться, но это будет стоить дорого, не думаю что целесообразно.

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах


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

 

Скрипт там один должен быть, его легко поправить и найти, id вы же наете, нужно вместо '#your_id' поставить '.your_class', т.е. класс. Вы же делаете бэкапы перед манипуляциями? Попробуйте!

Ссылка на комментарий
Поделиться на других сайтах


решение чего? Тему читали?

Да хз, локтем клавиатуру зацепил

 

Ща детальнее смотрю.

По первому заходу, мне показалось, что меня ткнули в онлайн-тренажер по СSS  :-D

А так изменен порядок вывода блоков как раз таки....

flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки

Ссылка на комментарий
Поделиться на других сайтах

Скрипт там один должен быть, его легко поправить и найти, id вы же наете, нужно вместо '#your_id' поставить '.your_class', т.е. класс. Вы же делаете бэкапы перед манипуляциями? Попробуйте!

Вот оно что.. Скажем так - я думал, что id="button-cart" используется тут двояко - как идентификатор для целей скрипта, и для стилизации через CSS. То есть замена ID на класс, что в скрипте, что в стилях - это корректное решение?

Ссылка на комментарий
Поделиться на других сайтах


Да хз, локтем клавиатуру зацепил

 

flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки

 

у человека уже установлен bootstrap, оне не с нуля код пишет. Зачем тогда bootstrap пользоваться, чтобы потом flexbox использовать. В этом случае можно без @media легко обойтись. А js зачем, это ж верстка, зачем все по разным файлам распихивать, как потом разбираться?

Ссылка на комментарий
Поделиться на других сайтах


Вот оно что.. Скажем так - я думал, что id="button-cart" используется тут двояко - как идентификатор для целей скрипта, и для стилизации через CSS. То есть замена ID на класс, что в скрипте, что в стилях - это корректное решение?

 

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

Ссылка на комментарий
Поделиться на других сайтах


Да хз, локтем клавиатуру зацепил

 

flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки

js-познания=0, а вот через @media - я как раз и думал, что более толковый способ где-то там кроется... Спасибо за наводку, буду курить мануалы..

Ссылка на комментарий
Поделиться на других сайтах


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

скажем так, стилизацию по  ID я уже сам подвязал, но это легко правится..

Ссылка на комментарий
Поделиться на других сайтах


js-познания=0, а вот через @media - я как раз и думал, что более толковый способ где-то там кроется... Спасибо за наводку, буду курить мануалы..

 

попробуйте, но если @media flexbox и order для вас проще чем hidden сделать, тогда уж лучше переверстайте без col от bootstrap карточку, все станет проще. На зачем тогда bootstrap...

 

скажем так, стилизацию по  ID я уже сам подвязал, но это легко правится..

 

$('#button-cart'). меняем на $('.button-cart'). в /catalog/view/theme/default/template/product/product.tpl, вот и все приключение с js

Ссылка на комментарий
Поделиться на других сайтах


у человека уже установлен bootstrap, оне не с нуля код пишет. Зачем тогда bootstrap пользоваться, чтобы потом flexbox использовать. В этом случае можно без @media легко обойтись. А js зачем, это ж верстка, зачем все по разным файлам распихивать, как потом разбираться?

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

Не понял про js, зачем по разным файлам.

Ссылка на комментарий
Поделиться на других сайтах

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

Не понял про js, зачем по разным файлам.

 

Смотрите, у ТС есть левая и правая колонка, левая содержит два блока один под одним. Как не трогая верстку bootstrap воспользоваться flex-блоками?

Замечу что flex-блоки поддерживаются только новыми браузерами, часто это бывает важно и стоит учитывать.

 

Про js вы раньше писали в ключе - можно блоки переместить js-ом, дабы не плодить hidden.

Ссылка на комментарий
Поделиться на других сайтах


Тут наверное даже вопрос/ответ должен стоять по другому "Как переверстать карточку товара?" - Грамотно!
1 - Заголовок товара средним шрифтом
2 - Изображение

3. Цена (+- спец предложение)

4. Кнопка Купить
5. Краткий текст характеристик

6. Отзывы возможно

Все остальные элементы можно скрыть классом .hide
Не перегружайте страницу ненужными элементами. Если не знаете какие элементы нужные, а какие нет - проведите А/Б тест с установкой целей в Метрике.
И при сравнительном анализе поймете используют люде те элементы или почти нет.. И если нет то их убираете! Все просто)

 

ИМХО дизайн сайта, мобильной версии должен составлятся дизайнером под четким руководством маркетолога.... А не потому что "Я так вижу" ))

Ссылка на комментарий
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.