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

[chamaerops]

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

 

Вот и мне кажется, что глупо перепиливать всю карточку товара через @mеdia, тем более что это уже сделано в бутстрапе. Тем более, это куда больший объем работ с куда большей вероятностью наговнокодить  :-D

[ArtemPitov]

кратко 

<div class="col-xs-12"></div>

 

Больше ничего не придумаете в мобильной верстке, она там везде "строчная" 

Змінено 24 серпня 2016 користувачем ArtenPitov

[ocdev_pro]

Ну например блок с кнопкой купить если у вас уходит в самый низ а надо после картинки можно на js переместить
Что то типа такого:
 

var cart = $('.block_cart').html();
$(cart).prepedTo(.image); Содержимое .block_cart переместится к .image

Ну а там почитайте о prependTo, before, after и найдете для себя удобный метод перемещения элементов на jquery

[pantagruel964]

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

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

 

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

Обернуть во флекс и селфить нужные блоки. Новые браузеры - это все, кроме браузера №8, за последний год не встречал проблем.

 

js-ом использовать append-prepend, там скрипт на несколько строчек, зачем отделые файлы

[SlideShow]

Обернуть во флекс и селфить нужные блоки. Новые браузеры - это все, кроме браузера №8, за последний год не встречал проблем.

 

js-ом использовать append-prepend, там скрипт на несколько строчек, зачем отделые файлы

 

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

[ocdev_pro]

Да почему же отдельные... Там же в product.tpl где начинается $(document).ready(... и писать эти самые пару строчек. Человек который далек от особенностей работы CSS возможно горазно проще будет манипулировать DOM элементами чем лепить горбатого стилями... Да и учтите Opera Mini и UC Browser может flexbox и не схавать... а я много таких знаю, что юзают их

[chamaerops]

Тут наверное даже вопрос/ответ должен стоять по другому "Как переверстать карточку товара?" - Грамотно!

1 - Заголовок товара средним шрифтом

2 - Изображение

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

4. Кнопка Купить

5. Краткий текст характеристик

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

Все остальные элементы можно скрыть классом .hide

Не перегружайте страницу ненужными элементами. Если не знаете какие элементы нужные, а какие нет - проведите А/Б тест с установкой целей в Метрике.

И при сравнительном анализе поймете используют люде те элементы или почти нет.. И если нет то их убираете! Все просто)

 

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

Ровно это и оставлено, плюс добавлено поле "Есть/нет в наличии". Ну, и звезды, для микроразметки.

 

А насчет дизайнера.. Скажем так, если б бюджет подразумевал дизайнера/маркетолога, то он бы подразумевал и веб-программиста.  :-D

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

 

Если обобщать - то сейчас делается некий необходимый минимум для запуска ИМ, благо ВСЕ конкуренты в моей нише имеют еще более убогие сайты (лишь у одного из них -адаптивная верстка), чем даже то, что на данном этапе есть у меня. Добрая треть из них вообще торгует на prom.ua (как, собственно и я пока тоже). Но подразумевается, что после выхода на некоторое количество корзин в день, часть оборота выделится на дошлифовку и доведения магазина до ума. Хотя это вообще-то процесс перманентный - 

 

кратко 

<div class="col-xs-12"></div>

 

Больше ничего не придумаете в мобильной верстке, она там везде "строчная" 

Ну это само собой, вопрос - в очередности вывода блоков.

[ocdev_pro]

И вы оттуда же)) пром.уа - я поступил иначе, потерпел месяц-другой и усердно пыхтел над свои магазином, а потом начал на нем продавать, так и не вложив не копейки в пром... Хотя до сих пор заманивают и периодически названивают... Многие ведь торгуют у них, но самому все какие-то подозрения.. отдай 100$ им, потом еще 50$ что бы шаблон можно было допилить... А что дальше неизвестно, обещают трафик, лиды. Но негатива на них почему-то много))

[ArtemPitov]

Ну это само собой, вопрос - в очередности вывода блоков.

 

Все опять просто 

 

1) Шапка + меню (скрытое конечно)

2) Название товара (-/+)

3) Изображение 

4) Цена + опции + купить (или + название ) 

5) Табы 

 

Все должно выводиться в логической последовательности 

 

ЗЫ // Ненавижу мобильную верстку  :ph34r:

[SlideShow]

...

ЗЫ // Ненавижу мобильную верстку  :ph34r:

 

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

[ocdev_pro]

Все опять просто 

 

1) Шапка + меню (скрытое конечно)

2) Название товара (-/+)

3) Изображение 

4) Цена + опции + купить (или + название ) 

5) Табы 

 

Все должно выводиться в логической последовательности 

 

ЗЫ // Ненавижу мобильную верстку  :ph34r:

Да ладно в мобильной верстке нет ничего сложного если вы используете отдельно шаблон для мобилной версии и для обычной)) Тыщу раз об этом писал, но все же к Бутстрапу привязаны вот и никак не разделят. 

Преимущество №1 это супер легкость мобильного шаблона.. И гугл любит ее) На главной странице смотрите в разделе мобильной версии Opencart

[pantagruel964]

Кхм.. вопрос был - как грамотно переверстать.

Встречный вопрос - вы сможете грамотно это реализовать?

[chamaerops]

На проме мне не нравится то, что там рядом же = куча конкурентов. Как правило, клиент звонит и начинает разговор с фразы "Я вот тут ваше обьявление увидел". Блин, делаешь подобие сайта (насколько это позволяет пром), а люди видят "обьявление". Ну, процентов 10 клиентов звонит с вопросом "Это магазин "такойто.ком.юа?, мне нужно то-то..."  Ну и почасти СЕО там нехорошо...

[pantagruel964]

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

Даже не хочу заводить разговор про ущербность бутстраповской верстки..

[ocdev_pro]

Даже не хочу заводить разговор про ущербность бутстраповской верстки..

Мужик ну ты меня понял ))) 8-)

[SlideShow]

Да ладно в мобильной верстке нет ничего сложного если вы используете отдельно шаблон для мобилной версии и для обычной)) Тыщу раз об этом писал, но все же к Бутстрапу привязаны вот и никак не разделят. 

Преимущество №1 это супер легкость мобильного шаблона.. И гугл любит ее) На главной странице смотрите в разделе мобильной версии Opencart

 

адаптивные проекты дешевлве мобильных версий, чаще

 

я за мобильную версию

[ArtemPitov]

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

 

Не не, верстать под них не люблю просто.

Правильно верстать от мобильного к десктопу, а я делаю на оборот. Потом сижу голову ломаю как оно должно быть на мобиле и еще это все "оттестить" нужно.

 

Недавно со скриптом парился, оказывается стандартный браузер на андроидах не хочет отправлять больше 2х параметров через onClick="myFunc(par1, par2, par3)";  :cry:

[chamaerops]

Кхм.. вопрос был - как грамотно переверстать.

Встречный вопрос - вы сможете грамотно это реализовать?

Если это вопрос мне - то дублированием блока и пряча/выводя нужный блок в зависимости от разрешения (инструментарий бутстрапа) - то да.

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

 

З.Ы, Рад, что тема нашла отклик у других. Спасибо всем.

Змінено 24 серпня 2016 користувачем chamaerops

[SlideShow]

Даже не хочу заводить разговор про ущербность бутстраповской верстки..

 

и это хоршо, т.к. разговор скорее стоит вести в другом ключе - рыночные отношения и конкуренция 

[ArtemPitov]

Да ладно в мобильной верстке нет ничего сложного если вы используете отдельно шаблон для мобилной версии и для обычной)) Тыщу раз об этом писал, но все же к Бутстрапу привязаны вот и никак не разделят. 

Преимущество №1 это супер легкость мобильного шаблона.. И гугл любит ее) На главной странице смотрите в разделе мобильной версии Opencart

неее, я для себя открыл мобайл детект  ;)  :-D

и впилил прямо при старте в загрузку, теперь есть такое, if ($this->isMobile) {}

[ocdev_pro]

Если разобраться 1 раз, то ничего там страшного. А верстать так же как и под мобильную) Времени займет на времени примерно столько же +- 2 часа

[ocdev_pro]

Не не, верстать под них не люблю просто.

Правильно верстать от мобильного к десктопу, а я делаю на оборот. Потом сижу голову ломаю как оно должно быть на мобиле и еще это все "оттестить" нужно.

 

Недавно со скриптом парился, оказывается стандартный браузер на андроидах не хочет отправлять больше 2х параметров через onClick="myFunc(par1, par2, par3)";  :cry:

Ну тут обратно же вопрос к заказчику. Я обычно требую дизайн под 480px хотя бы. А если нету, то делаю на свое усмотрение и тогда без вопросом. Правда опыта у меня в верстке уже 6 лет, практически с 98% точностью угадываю, что хочет клиент в мобильной верстке)

[SlideShow]

Не не, верстать под них не люблю просто.

Правильно верстать от мобильного к десктопу, а я делаю на оборот. Потом сижу голову ломаю как оно должно быть на мобиле и еще это все "оттестить" нужно.

 

Недавно со скриптом парился, оказывается стандартный браузер на андроидах не хочет отправлять больше 2х параметров через onClick="myFunc(par1, par2, par3)";  :cry:

 

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

[chamaerops]

адаптивные проекты дешевлве мобильных версий, чаще

 

я за мобильную версию

На перспективу держу в уме AMP, но там уже точно не сам писать буду  :-D

[SlideShow]

Ну тут обратно же вопрос к заказчику. Я обычно требую дизайн под 480px хотя бы. А если нету, то делаю на свое усмотрение и тогда без вопросом. Правда опыта у меня в верстке уже 6 лет, практически с 98% точностью угадываю, что хочет клиент в мобильной верстке)

 

мощно! 98%, я больше люблю согласованные макеты...