chamaerops Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 (изменено) Вводные данные: ОС 2.1.0.1 Шаблон: дефолтный (точнее копия дефолтного, стилизованного под свой дизайн) На десктопах карточка товара выглядит следующим образом Блоки слева сидят в своем DIVe col-sm-N, правый блок в своем DIVe col-sm-M. Как следствие, на мобильных устройствах карточка товара выглядит вот так то есть, кнопка "Купить" и прочая важна информация находятся глубоко внизу, а табы с описанием/характеристиками/отзывами - посередине. Это, как мне кажется, очень нехорошо в плане юзабилити. Хочу сделать вот так То есть по порядку: 1.Фото 2. Кнопка "Купить" и сопутсвующие поля с информацией 3. Табы (Описание/характеристики/отзывы) Ломаю голову как сверстать страницу таким образом, чтобы для мобильных устройств порядок вывода блоков менялся. Пока что в голову пришел только такой вариант: Блок содержащий кнопку "корзины" в шаблоне копируется и выводится после блока с фото. Для десктопов отображается привычная корзина с классом col-sm-M col-md-M col-lg-M hidden-xs (скрываем блок с кнопкой КУПИТЬ на мелких экранах) Второй, аналогичный блок с кнопкой КУПИТЬ, размещаем в шаблоне сразу за блоком с фото и даем ему классы col-xs-12 hidden-sm hidden-md hidden-lg (то есть прячем его на больших экранах, выводим на мелких) Насколько граммотна будет такая реализация? И насколько это сказывается на скорости генерации карточки товара? Возможно, есть более толковый способ? З.Ы. Сорри за микроскопические картинки, думал будут нормального размера. Изменено 24 августа 2016 пользователем chamaerops Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
pantagruel964 Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 https://jsfiddle.net/cfqnrund/ Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 Очень конструктивно.... Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 https://jsfiddle.net/cfqnrund/ Что это? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... pantagruel964 Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Очень конструктивно.... Такое решение не подходит? Или не разобрались? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 ... Пока что в голову пришел только такой вариант: Блок содержащий кнопку "корзины" в шаблоне копируется и выводится после блока с фото. Для десктопов отображается привычная корзина с классом col-sm-M col-md-M col-lg-M hidden-xs (скрываем блок с кнопкой КУПИТЬ на мелких экранах) Второй, аналогичный блок с кнопкой КУПИТЬ, размещаем в шаблоне сразу за блоком с фото и даем ему классы col-xs-12 hidden-sm hidden-md hidden-lg (то есть прячем его на больших экранах, выводим на мелких) Насколько граммотна будет такая реализация? И насколько это сказывается на скорости генерации карточки товара? Возможно, есть более толковый способ? З.Ы. Сорри за микроскопические картинки, думал будут нормального размера. я бы тоже так сделал, учитывая ваш bootstrap. К тому же данные с правой колонки с кнопкой "Купить" минимальны и не поедят время загрузки. Есть нюанс - часто на кнопки вешают id для скриптов, смотрите чтобы у вас был класс, т.к. кнопка по-сути будет дублироваться. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Такое решение не подходит? Или не разобрались? решение чего? Тему читали? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 Такое решение не подходит? Или не разобрались? Ща детальнее смотрю. По первому заходу, мне показалось, что меня ткнули в онлайн-тренажер по СSS :-D А так изменен порядок вывода блоков как раз таки.... Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 я бы тоже так сделал, учитывая ваш bootstrap. К тому же данные с правой колонки с кнопкой "Купить" минимальны и не поедят время загрузки. Есть нюанс - часто на кнопки вешают id для скриптов, смотрите чтобы у вас был класс, т.к. кнопка по-сути будет дублироваться. Вы о том, что будет дублироваться ID кнопки? А чем чревато? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Ща детальнее смотрю. По первому заходу, мне показалось, что меня ткнули в онлайн-тренажер по СSS :-D А так изменен порядок вывода блоков как раз таки.... Изменить порядок блоков можно тучей способов, но по вашему посту в шапке я понял что вы хотите "в стиле bootstrap" Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Вы о том, что будет дублироваться ID кнопки? А чем чревато? карточка товара валидацию не пройдет, это грубая ошибка. Ну и не тру как-то... 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 (изменено) Изменить порядок блоков можно тучей способов, но по вашему посту в шапке я понял что вы хотите "в стиле bootstrap" Да, просто потому что моих скудных компетенций в HTML/CSS хватает пока на такой способ - он мне предельно понятен. И нечто подобное я уже сделал в хедере с корзиной и перечнем номеров телефонов (на десктопах - горизонтальный список, на мобильных - выпадающий список при тапе). Изменено 24 августа 2016 пользователем chamaerops Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 карточка товара валидацию не пройдет, это грубая ошибка. Ну и не тру как-то... Ну, переопределить стили через класс вместо ID - дело не хитрое, но если будет продублирована кнопка корзины в которой есть ID (а она там есть), то для дублирующей кнопки нужно уникализировать ID ? Но тогда кнопка "отвяжется" от соответствующих скриптов ведь. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Да, просто потому что моих скудных компетенций в HTML/CSS хватает пока на такой способ - он мне предельно понятен. И нечто подобное я уже сделал в футере с корзиной и перечнем номеров телефонов (на десктопах - горизонтальный список, на мобильных - выпадающий список при тапе). Весьма неплохо, т.к. в этой ситуации более красивого решения я не знаю, если учитывать что вы планируете поддерживать code convention bootstrap. В вашей ситуации это наиболее простое и эффективное решение, которое обойдется дешево и не нанесет вреда качеству кода, не повлияет на поисковую выдачу. Более сложные реализации требуют рассмотрение вашего кода, но я бы не стал запариваться, все на уровне, в самом деле, лучше может получиться, но это будет стоить дорого, не думаю что целесообразно. 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Ну, переопределить стили через класс вместо ID - дело не хитрое, но если будет продублирована кнопка корзины в которой есть ID (а она там есть), то для дублирующей кнопки нужно уникализировать ID ? Но тогда кнопка "отвяжется" от соответствующих скриптов ведь. Скрипт там один должен быть, его легко поправить и найти, id вы же наете, нужно вместо '#your_id' поставить '.your_class', т.е. класс. Вы же делаете бэкапы перед манипуляциями? Попробуйте! Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... pantagruel964 Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 решение чего? Тему читали? Да хз, локтем клавиатуру зацепил Ща детальнее смотрю. По первому заходу, мне показалось, что меня ткнули в онлайн-тренажер по СSS :-D А так изменен порядок вывода блоков как раз таки.... flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 Скрипт там один должен быть, его легко поправить и найти, id вы же наете, нужно вместо '#your_id' поставить '.your_class', т.е. класс. Вы же делаете бэкапы перед манипуляциями? Попробуйте! Вот оно что.. Скажем так - я думал, что id="button-cart" используется тут двояко - как идентификатор для целей скрипта, и для стилизации через CSS. То есть замена ID на класс, что в скрипте, что в стилях - это корректное решение? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Да хз, локтем клавиатуру зацепил flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки у человека уже установлен bootstrap, оне не с нуля код пишет. Зачем тогда bootstrap пользоваться, чтобы потом flexbox использовать. В этом случае можно без @media легко обойтись. А js зачем, это ж верстка, зачем все по разным файлам распихивать, как потом разбираться? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Вот оно что.. Скажем так - я думал, что id="button-cart" используется тут двояко - как идентификатор для целей скрипта, и для стилизации через CSS. То есть замена ID на класс, что в скрипте, что в стилях - это корректное решение? да, забыл, для стилизации тоже наверняка используется. По-этому нужно менять его и в скриптах и в стилях, все верно. backup! Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 Да хз, локтем клавиатуру зацепил flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки js-познания=0, а вот через @media - я как раз и думал, что более толковый способ где-то там кроется... Спасибо за наводку, буду курить мануалы.. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 да, забыл, для стилизации тоже наверняка используется. По-этому нужно менять его и в скриптах и в стилях, все верно. backup! скажем так, стилизацию по ID я уже сам подвязал, но это легко правится.. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 js-познания=0, а вот через @media - я как раз и думал, что более толковый способ где-то там кроется... Спасибо за наводку, буду курить мануалы.. попробуйте, но если @media flexbox и order для вас проще чем hidden сделать, тогда уж лучше переверстайте без col от bootstrap карточку, все станет проще. На зачем тогда bootstrap... скажем так, стилизацию по ID я уже сам подвязал, но это легко правится.. $('#button-cart'). меняем на $('.button-cart'). в /catalog/view/theme/default/template/product/product.tpl, вот и все приключение с js Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... pantagruel964 Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 у человека уже установлен bootstrap, оне не с нуля код пишет. Зачем тогда bootstrap пользоваться, чтобы потом flexbox использовать. В этом случае можно без @media легко обойтись. А js зачем, это ж верстка, зачем все по разным файлам распихивать, как потом разбираться? Бутстрап не исключает использование флексов и это никак не трогает верстку бутсрапа, изменится только порядок блоков. Это самый безболезненный вариант. Не понял про js, зачем по разным файлам. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Бутстрап не исключает использование флексов и это никак не трогает верстку бутсрапа, изменится только порядок блоков. Это самый безболезненный вариант. Не понял про js, зачем по разным файлам. Смотрите, у ТС есть левая и правая колонка, левая содержит два блока один под одним. Как не трогая верстку bootstrap воспользоваться flex-блоками? Замечу что flex-блоки поддерживаются только новыми браузерами, часто это бывает важно и стоит учитывать. Про js вы раньше писали в ключе - можно блоки переместить js-ом, дабы не плодить hidden. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... ocdev_pro Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Тут наверное даже вопрос/ответ должен стоять по другому "Как переверстать карточку товара?" - Грамотно!1 - Заголовок товара средним шрифтом2 - Изображение 3. Цена (+- спец предложение) 4. Кнопка Купить5. Краткий текст характеристик 6. Отзывы возможно Все остальные элементы можно скрыть классом .hideНе перегружайте страницу ненужными элементами. Если не знаете какие элементы нужные, а какие нет - проведите А/Б тест с установкой целей в Метрике.И при сравнительном анализе поймете используют люде те элементы или почти нет.. И если нет то их убираете! Все просто) ИМХО дизайн сайта, мобильной версии должен составлятся дизайнером под четким руководством маркетолога.... А не потому что "Я так вижу" )) Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Назад 1 2 3 Вперёд Страница 1 из 3 Создайте аккаунт или войдите в него для комментирования Вы должны быть пользователем, чтобы оставить комментарий Создать аккаунт Зарегистрируйтесь для получения аккаунта. Это просто! Зарегистрировать аккаунт Войти Уже зарегистрированы? Войдите здесь. Войти сейчас Поделиться Больше способов поделиться... Подписчики 0 Перейти к списку тем Сейчас на странице 0 пользователей Нет пользователей, просматривающих эту страницу. Последние темы Последние дополнения Последние новости Вся активность Главная Opencart 2.x Opencart 2.x: Песочница Как грамотно переверстать карточку товара под мобильные устройства Покупцям Оплата розширень фізичними особами Оплата розширень юридичними особами Політика повернень Розробникам Регламент розміщення розширень Регламент продажу та підтримки розширень Віртуальний обліковий запис автора Політика просування оголошень API каталогу розширень Вирішення спорів щодо авторських прав Корисна інформація Публічна оферта Політика повернень Політика конфіденційності Платіжна політика Політика передачі особистих даних Політика прозорості Останні розширення Deals – адаптивный универсальный шаблон Автор: octemplates Динамичесткая инфострока в шапке + позиция в макете для opencart\ocstore 2x, 3x Автор: Lito911 Единицы Измерения Товара Автор: RoS Opencart Product Search by Image Автор: slavoglo Простой массовый редактор цен. Fast Price Edit Автор: Sha × Уже зарегистрированы? Войти Регистрация Раздел покупок Назад Приобретенные дополнения Ваши счета Список желаний Альтернативные контакты Форум Новости ocStore Назад Официальный сайт Демо ocStore 3.0.3.2 Демо ocStore 2.3.0.2.4 Скачать ocStore Документация История версий ocStore Блоги Модули Шаблоны Назад Бесплатные шаблоны Платные шаблоны Где покупать модули? Услуги FAQ OpenCart.Pro Назад Демо Купить Сравнение × Создать... Важная информация На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности. Я принимаю
chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 Очень конструктивно.... Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 https://jsfiddle.net/cfqnrund/ Что это? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
pantagruel964 Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Очень конструктивно.... Такое решение не подходит? Или не разобрались? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 ... Пока что в голову пришел только такой вариант: Блок содержащий кнопку "корзины" в шаблоне копируется и выводится после блока с фото. Для десктопов отображается привычная корзина с классом col-sm-M col-md-M col-lg-M hidden-xs (скрываем блок с кнопкой КУПИТЬ на мелких экранах) Второй, аналогичный блок с кнопкой КУПИТЬ, размещаем в шаблоне сразу за блоком с фото и даем ему классы col-xs-12 hidden-sm hidden-md hidden-lg (то есть прячем его на больших экранах, выводим на мелких) Насколько граммотна будет такая реализация? И насколько это сказывается на скорости генерации карточки товара? Возможно, есть более толковый способ? З.Ы. Сорри за микроскопические картинки, думал будут нормального размера. я бы тоже так сделал, учитывая ваш bootstrap. К тому же данные с правой колонки с кнопкой "Купить" минимальны и не поедят время загрузки. Есть нюанс - часто на кнопки вешают id для скриптов, смотрите чтобы у вас был класс, т.к. кнопка по-сути будет дублироваться. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Такое решение не подходит? Или не разобрались? решение чего? Тему читали? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 Такое решение не подходит? Или не разобрались? Ща детальнее смотрю. По первому заходу, мне показалось, что меня ткнули в онлайн-тренажер по СSS :-D А так изменен порядок вывода блоков как раз таки.... Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 я бы тоже так сделал, учитывая ваш bootstrap. К тому же данные с правой колонки с кнопкой "Купить" минимальны и не поедят время загрузки. Есть нюанс - часто на кнопки вешают id для скриптов, смотрите чтобы у вас был класс, т.к. кнопка по-сути будет дублироваться. Вы о том, что будет дублироваться ID кнопки? А чем чревато? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Ща детальнее смотрю. По первому заходу, мне показалось, что меня ткнули в онлайн-тренажер по СSS :-D А так изменен порядок вывода блоков как раз таки.... Изменить порядок блоков можно тучей способов, но по вашему посту в шапке я понял что вы хотите "в стиле bootstrap" Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Вы о том, что будет дублироваться ID кнопки? А чем чревато? карточка товара валидацию не пройдет, это грубая ошибка. Ну и не тру как-то... 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 (изменено) Изменить порядок блоков можно тучей способов, но по вашему посту в шапке я понял что вы хотите "в стиле bootstrap" Да, просто потому что моих скудных компетенций в HTML/CSS хватает пока на такой способ - он мне предельно понятен. И нечто подобное я уже сделал в хедере с корзиной и перечнем номеров телефонов (на десктопах - горизонтальный список, на мобильных - выпадающий список при тапе). Изменено 24 августа 2016 пользователем chamaerops Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 карточка товара валидацию не пройдет, это грубая ошибка. Ну и не тру как-то... Ну, переопределить стили через класс вместо ID - дело не хитрое, но если будет продублирована кнопка корзины в которой есть ID (а она там есть), то для дублирующей кнопки нужно уникализировать ID ? Но тогда кнопка "отвяжется" от соответствующих скриптов ведь. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Да, просто потому что моих скудных компетенций в HTML/CSS хватает пока на такой способ - он мне предельно понятен. И нечто подобное я уже сделал в футере с корзиной и перечнем номеров телефонов (на десктопах - горизонтальный список, на мобильных - выпадающий список при тапе). Весьма неплохо, т.к. в этой ситуации более красивого решения я не знаю, если учитывать что вы планируете поддерживать code convention bootstrap. В вашей ситуации это наиболее простое и эффективное решение, которое обойдется дешево и не нанесет вреда качеству кода, не повлияет на поисковую выдачу. Более сложные реализации требуют рассмотрение вашего кода, но я бы не стал запариваться, все на уровне, в самом деле, лучше может получиться, но это будет стоить дорого, не думаю что целесообразно. 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Ну, переопределить стили через класс вместо ID - дело не хитрое, но если будет продублирована кнопка корзины в которой есть ID (а она там есть), то для дублирующей кнопки нужно уникализировать ID ? Но тогда кнопка "отвяжется" от соответствующих скриптов ведь. Скрипт там один должен быть, его легко поправить и найти, id вы же наете, нужно вместо '#your_id' поставить '.your_class', т.е. класс. Вы же делаете бэкапы перед манипуляциями? Попробуйте! Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... pantagruel964 Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 решение чего? Тему читали? Да хз, локтем клавиатуру зацепил Ща детальнее смотрю. По первому заходу, мне показалось, что меня ткнули в онлайн-тренажер по СSS :-D А так изменен порядок вывода блоков как раз таки.... flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 Скрипт там один должен быть, его легко поправить и найти, id вы же наете, нужно вместо '#your_id' поставить '.your_class', т.е. класс. Вы же делаете бэкапы перед манипуляциями? Попробуйте! Вот оно что.. Скажем так - я думал, что id="button-cart" используется тут двояко - как идентификатор для целей скрипта, и для стилизации через CSS. То есть замена ID на класс, что в скрипте, что в стилях - это корректное решение? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Да хз, локтем клавиатуру зацепил flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки у человека уже установлен bootstrap, оне не с нуля код пишет. Зачем тогда bootstrap пользоваться, чтобы потом flexbox использовать. В этом случае можно без @media легко обойтись. А js зачем, это ж верстка, зачем все по разным файлам распихивать, как потом разбираться? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Вот оно что.. Скажем так - я думал, что id="button-cart" используется тут двояко - как идентификатор для целей скрипта, и для стилизации через CSS. То есть замена ID на класс, что в скрипте, что в стилях - это корректное решение? да, забыл, для стилизации тоже наверняка используется. По-этому нужно менять его и в скриптах и в стилях, все верно. backup! Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 Да хз, локтем клавиатуру зацепил flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки js-познания=0, а вот через @media - я как раз и думал, что более толковый способ где-то там кроется... Спасибо за наводку, буду курить мануалы.. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 да, забыл, для стилизации тоже наверняка используется. По-этому нужно менять его и в скриптах и в стилях, все верно. backup! скажем так, стилизацию по ID я уже сам подвязал, но это легко правится.. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 js-познания=0, а вот через @media - я как раз и думал, что более толковый способ где-то там кроется... Спасибо за наводку, буду курить мануалы.. попробуйте, но если @media flexbox и order для вас проще чем hidden сделать, тогда уж лучше переверстайте без col от bootstrap карточку, все станет проще. На зачем тогда bootstrap... скажем так, стилизацию по ID я уже сам подвязал, но это легко правится.. $('#button-cart'). меняем на $('.button-cart'). в /catalog/view/theme/default/template/product/product.tpl, вот и все приключение с js Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... pantagruel964 Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 у человека уже установлен bootstrap, оне не с нуля код пишет. Зачем тогда bootstrap пользоваться, чтобы потом flexbox использовать. В этом случае можно без @media легко обойтись. А js зачем, это ж верстка, зачем все по разным файлам распихивать, как потом разбираться? Бутстрап не исключает использование флексов и это никак не трогает верстку бутсрапа, изменится только порядок блоков. Это самый безболезненный вариант. Не понял про js, зачем по разным файлам. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Бутстрап не исключает использование флексов и это никак не трогает верстку бутсрапа, изменится только порядок блоков. Это самый безболезненный вариант. Не понял про js, зачем по разным файлам. Смотрите, у ТС есть левая и правая колонка, левая содержит два блока один под одним. Как не трогая верстку bootstrap воспользоваться flex-блоками? Замечу что flex-блоки поддерживаются только новыми браузерами, часто это бывает важно и стоит учитывать. Про js вы раньше писали в ключе - можно блоки переместить js-ом, дабы не плодить hidden. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... ocdev_pro Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Тут наверное даже вопрос/ответ должен стоять по другому "Как переверстать карточку товара?" - Грамотно!1 - Заголовок товара средним шрифтом2 - Изображение 3. Цена (+- спец предложение) 4. Кнопка Купить5. Краткий текст характеристик 6. Отзывы возможно Все остальные элементы можно скрыть классом .hideНе перегружайте страницу ненужными элементами. Если не знаете какие элементы нужные, а какие нет - проведите А/Б тест с установкой целей в Метрике.И при сравнительном анализе поймете используют люде те элементы или почти нет.. И если нет то их убираете! Все просто) ИМХО дизайн сайта, мобильной версии должен составлятся дизайнером под четким руководством маркетолога.... А не потому что "Я так вижу" )) Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Назад 1 2 3 Вперёд Страница 1 из 3 Создайте аккаунт или войдите в него для комментирования Вы должны быть пользователем, чтобы оставить комментарий Создать аккаунт Зарегистрируйтесь для получения аккаунта. Это просто! Зарегистрировать аккаунт Войти Уже зарегистрированы? Войдите здесь. Войти сейчас Поделиться Больше способов поделиться... Подписчики 0 Перейти к списку тем Сейчас на странице 0 пользователей Нет пользователей, просматривающих эту страницу. Последние темы Последние дополнения Последние новости Вся активность Главная Opencart 2.x Opencart 2.x: Песочница Как грамотно переверстать карточку товара под мобильные устройства Покупцям Оплата розширень фізичними особами Оплата розширень юридичними особами Політика повернень Розробникам Регламент розміщення розширень Регламент продажу та підтримки розширень Віртуальний обліковий запис автора Політика просування оголошень API каталогу розширень Вирішення спорів щодо авторських прав Корисна інформація Публічна оферта Політика повернень Політика конфіденційності Платіжна політика Політика передачі особистих даних Політика прозорості Останні розширення Deals – адаптивный универсальный шаблон Автор: octemplates Динамичесткая инфострока в шапке + позиция в макете для opencart\ocstore 2x, 3x Автор: Lito911 Единицы Измерения Товара Автор: RoS Opencart Product Search by Image Автор: slavoglo Простой массовый редактор цен. Fast Price Edit Автор: Sha
SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 ... Пока что в голову пришел только такой вариант: Блок содержащий кнопку "корзины" в шаблоне копируется и выводится после блока с фото. Для десктопов отображается привычная корзина с классом col-sm-M col-md-M col-lg-M hidden-xs (скрываем блок с кнопкой КУПИТЬ на мелких экранах) Второй, аналогичный блок с кнопкой КУПИТЬ, размещаем в шаблоне сразу за блоком с фото и даем ему классы col-xs-12 hidden-sm hidden-md hidden-lg (то есть прячем его на больших экранах, выводим на мелких) Насколько граммотна будет такая реализация? И насколько это сказывается на скорости генерации карточки товара? Возможно, есть более толковый способ? З.Ы. Сорри за микроскопические картинки, думал будут нормального размера. я бы тоже так сделал, учитывая ваш bootstrap. К тому же данные с правой колонки с кнопкой "Купить" минимальны и не поедят время загрузки. Есть нюанс - часто на кнопки вешают id для скриптов, смотрите чтобы у вас был класс, т.к. кнопка по-сути будет дублироваться. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Такое решение не подходит? Или не разобрались? решение чего? Тему читали? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 Такое решение не подходит? Или не разобрались? Ща детальнее смотрю. По первому заходу, мне показалось, что меня ткнули в онлайн-тренажер по СSS :-D А так изменен порядок вывода блоков как раз таки.... Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 я бы тоже так сделал, учитывая ваш bootstrap. К тому же данные с правой колонки с кнопкой "Купить" минимальны и не поедят время загрузки. Есть нюанс - часто на кнопки вешают id для скриптов, смотрите чтобы у вас был класс, т.к. кнопка по-сути будет дублироваться. Вы о том, что будет дублироваться ID кнопки? А чем чревато? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Ща детальнее смотрю. По первому заходу, мне показалось, что меня ткнули в онлайн-тренажер по СSS :-D А так изменен порядок вывода блоков как раз таки.... Изменить порядок блоков можно тучей способов, но по вашему посту в шапке я понял что вы хотите "в стиле bootstrap" Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Вы о том, что будет дублироваться ID кнопки? А чем чревато? карточка товара валидацию не пройдет, это грубая ошибка. Ну и не тру как-то... 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 (изменено) Изменить порядок блоков можно тучей способов, но по вашему посту в шапке я понял что вы хотите "в стиле bootstrap" Да, просто потому что моих скудных компетенций в HTML/CSS хватает пока на такой способ - он мне предельно понятен. И нечто подобное я уже сделал в хедере с корзиной и перечнем номеров телефонов (на десктопах - горизонтальный список, на мобильных - выпадающий список при тапе). Изменено 24 августа 2016 пользователем chamaerops Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 карточка товара валидацию не пройдет, это грубая ошибка. Ну и не тру как-то... Ну, переопределить стили через класс вместо ID - дело не хитрое, но если будет продублирована кнопка корзины в которой есть ID (а она там есть), то для дублирующей кнопки нужно уникализировать ID ? Но тогда кнопка "отвяжется" от соответствующих скриптов ведь. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Да, просто потому что моих скудных компетенций в HTML/CSS хватает пока на такой способ - он мне предельно понятен. И нечто подобное я уже сделал в футере с корзиной и перечнем номеров телефонов (на десктопах - горизонтальный список, на мобильных - выпадающий список при тапе). Весьма неплохо, т.к. в этой ситуации более красивого решения я не знаю, если учитывать что вы планируете поддерживать code convention bootstrap. В вашей ситуации это наиболее простое и эффективное решение, которое обойдется дешево и не нанесет вреда качеству кода, не повлияет на поисковую выдачу. Более сложные реализации требуют рассмотрение вашего кода, но я бы не стал запариваться, все на уровне, в самом деле, лучше может получиться, но это будет стоить дорого, не думаю что целесообразно. 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Ну, переопределить стили через класс вместо ID - дело не хитрое, но если будет продублирована кнопка корзины в которой есть ID (а она там есть), то для дублирующей кнопки нужно уникализировать ID ? Но тогда кнопка "отвяжется" от соответствующих скриптов ведь. Скрипт там один должен быть, его легко поправить и найти, id вы же наете, нужно вместо '#your_id' поставить '.your_class', т.е. класс. Вы же делаете бэкапы перед манипуляциями? Попробуйте! Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
pantagruel964 Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 решение чего? Тему читали? Да хз, локтем клавиатуру зацепил Ща детальнее смотрю. По первому заходу, мне показалось, что меня ткнули в онлайн-тренажер по СSS :-D А так изменен порядок вывода блоков как раз таки.... flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 Скрипт там один должен быть, его легко поправить и найти, id вы же наете, нужно вместо '#your_id' поставить '.your_class', т.е. класс. Вы же делаете бэкапы перед манипуляциями? Попробуйте! Вот оно что.. Скажем так - я думал, что id="button-cart" используется тут двояко - как идентификатор для целей скрипта, и для стилизации через CSS. То есть замена ID на класс, что в скрипте, что в стилях - это корректное решение? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Да хз, локтем клавиатуру зацепил flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки у человека уже установлен bootstrap, оне не с нуля код пишет. Зачем тогда bootstrap пользоваться, чтобы потом flexbox использовать. В этом случае можно без @media легко обойтись. А js зачем, это ж верстка, зачем все по разным файлам распихивать, как потом разбираться? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Вот оно что.. Скажем так - я думал, что id="button-cart" используется тут двояко - как идентификатор для целей скрипта, и для стилизации через CSS. То есть замена ID на класс, что в скрипте, что в стилях - это корректное решение? да, забыл, для стилизации тоже наверняка используется. По-этому нужно менять его и в скриптах и в стилях, все верно. backup! Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 Да хз, локтем клавиатуру зацепил flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки js-познания=0, а вот через @media - я как раз и думал, что более толковый способ где-то там кроется... Спасибо за наводку, буду курить мануалы.. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 да, забыл, для стилизации тоже наверняка используется. По-этому нужно менять его и в скриптах и в стилях, все верно. backup! скажем так, стилизацию по ID я уже сам подвязал, но это легко правится.. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 js-познания=0, а вот через @media - я как раз и думал, что более толковый способ где-то там кроется... Спасибо за наводку, буду курить мануалы.. попробуйте, но если @media flexbox и order для вас проще чем hidden сделать, тогда уж лучше переверстайте без col от bootstrap карточку, все станет проще. На зачем тогда bootstrap... скажем так, стилизацию по ID я уже сам подвязал, но это легко правится.. $('#button-cart'). меняем на $('.button-cart'). в /catalog/view/theme/default/template/product/product.tpl, вот и все приключение с js Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... pantagruel964 Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 у человека уже установлен bootstrap, оне не с нуля код пишет. Зачем тогда bootstrap пользоваться, чтобы потом flexbox использовать. В этом случае можно без @media легко обойтись. А js зачем, это ж верстка, зачем все по разным файлам распихивать, как потом разбираться? Бутстрап не исключает использование флексов и это никак не трогает верстку бутсрапа, изменится только порядок блоков. Это самый безболезненный вариант. Не понял про js, зачем по разным файлам. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Бутстрап не исключает использование флексов и это никак не трогает верстку бутсрапа, изменится только порядок блоков. Это самый безболезненный вариант. Не понял про js, зачем по разным файлам. Смотрите, у ТС есть левая и правая колонка, левая содержит два блока один под одним. Как не трогая верстку bootstrap воспользоваться flex-блоками? Замечу что flex-блоки поддерживаются только новыми браузерами, часто это бывает важно и стоит учитывать. Про js вы раньше писали в ключе - можно блоки переместить js-ом, дабы не плодить hidden. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... ocdev_pro Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Тут наверное даже вопрос/ответ должен стоять по другому "Как переверстать карточку товара?" - Грамотно!1 - Заголовок товара средним шрифтом2 - Изображение 3. Цена (+- спец предложение) 4. Кнопка Купить5. Краткий текст характеристик 6. Отзывы возможно Все остальные элементы можно скрыть классом .hideНе перегружайте страницу ненужными элементами. Если не знаете какие элементы нужные, а какие нет - проведите А/Б тест с установкой целей в Метрике.И при сравнительном анализе поймете используют люде те элементы или почти нет.. И если нет то их убираете! Все просто) ИМХО дизайн сайта, мобильной версии должен составлятся дизайнером под четким руководством маркетолога.... А не потому что "Я так вижу" )) Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Назад 1 2 3 Вперёд Страница 1 из 3 Создайте аккаунт или войдите в него для комментирования Вы должны быть пользователем, чтобы оставить комментарий Создать аккаунт Зарегистрируйтесь для получения аккаунта. Это просто! Зарегистрировать аккаунт Войти Уже зарегистрированы? Войдите здесь. Войти сейчас Поделиться Больше способов поделиться... Подписчики 0 Перейти к списку тем Сейчас на странице 0 пользователей Нет пользователей, просматривающих эту страницу. Последние темы Последние дополнения Последние новости Вся активность Главная Opencart 2.x Opencart 2.x: Песочница Как грамотно переверстать карточку товара под мобильные устройства
chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 Скрипт там один должен быть, его легко поправить и найти, id вы же наете, нужно вместо '#your_id' поставить '.your_class', т.е. класс. Вы же делаете бэкапы перед манипуляциями? Попробуйте! Вот оно что.. Скажем так - я думал, что id="button-cart" используется тут двояко - как идентификатор для целей скрипта, и для стилизации через CSS. То есть замена ID на класс, что в скрипте, что в стилях - это корректное решение? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Да хз, локтем клавиатуру зацепил flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки у человека уже установлен bootstrap, оне не с нуля код пишет. Зачем тогда bootstrap пользоваться, чтобы потом flexbox использовать. В этом случае можно без @media легко обойтись. А js зачем, это ж верстка, зачем все по разным файлам распихивать, как потом разбираться? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Вот оно что.. Скажем так - я думал, что id="button-cart" используется тут двояко - как идентификатор для целей скрипта, и для стилизации через CSS. То есть замена ID на класс, что в скрипте, что в стилях - это корректное решение? да, забыл, для стилизации тоже наверняка используется. По-этому нужно менять его и в скриптах и в стилях, все верно. backup! Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 Да хз, локтем клавиатуру зацепил flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки js-познания=0, а вот через @media - я как раз и думал, что более толковый способ где-то там кроется... Спасибо за наводку, буду курить мануалы.. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
chamaerops Опубликовано: 24 августа 2016 Автор Поделиться Опубликовано: 24 августа 2016 да, забыл, для стилизации тоже наверняка используется. По-этому нужно менять его и в скриптах и в стилях, все верно. backup! скажем так, стилизацию по ID я уже сам подвязал, но это легко правится.. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 js-познания=0, а вот через @media - я как раз и думал, что более толковый способ где-то там кроется... Спасибо за наводку, буду курить мануалы.. попробуйте, но если @media flexbox и order для вас проще чем hidden сделать, тогда уж лучше переверстайте без col от bootstrap карточку, все станет проще. На зачем тогда bootstrap... скажем так, стилизацию по ID я уже сам подвязал, но это легко правится.. $('#button-cart'). меняем на $('.button-cart'). в /catalog/view/theme/default/template/product/product.tpl, вот и все приключение с js Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
pantagruel964 Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 у человека уже установлен bootstrap, оне не с нуля код пишет. Зачем тогда bootstrap пользоваться, чтобы потом flexbox использовать. В этом случае можно без @media легко обойтись. А js зачем, это ж верстка, зачем все по разным файлам распихивать, как потом разбираться? Бутстрап не исключает использование флексов и это никак не трогает верстку бутсрапа, изменится только порядок блоков. Это самый безболезненный вариант. Не понял про js, зачем по разным файлам. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Бутстрап не исключает использование флексов и это никак не трогает верстку бутсрапа, изменится только порядок блоков. Это самый безболезненный вариант. Не понял про js, зачем по разным файлам. Смотрите, у ТС есть левая и правая колонка, левая содержит два блока один под одним. Как не трогая верстку bootstrap воспользоваться flex-блоками? Замечу что flex-блоки поддерживаются только новыми браузерами, часто это бывает важно и стоит учитывать. Про js вы раньше писали в ключе - можно блоки переместить js-ом, дабы не плодить hidden. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... ocdev_pro Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Тут наверное даже вопрос/ответ должен стоять по другому "Как переверстать карточку товара?" - Грамотно!1 - Заголовок товара средним шрифтом2 - Изображение 3. Цена (+- спец предложение) 4. Кнопка Купить5. Краткий текст характеристик 6. Отзывы возможно Все остальные элементы можно скрыть классом .hideНе перегружайте страницу ненужными элементами. Если не знаете какие элементы нужные, а какие нет - проведите А/Б тест с установкой целей в Метрике.И при сравнительном анализе поймете используют люде те элементы или почти нет.. И если нет то их убираете! Все просто) ИМХО дизайн сайта, мобильной версии должен составлятся дизайнером под четким руководством маркетолога.... А не потому что "Я так вижу" )) Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Назад 1 2 3 Вперёд Страница 1 из 3 Создайте аккаунт или войдите в него для комментирования Вы должны быть пользователем, чтобы оставить комментарий Создать аккаунт Зарегистрируйтесь для получения аккаунта. Это просто! Зарегистрировать аккаунт Войти Уже зарегистрированы? Войдите здесь. Войти сейчас Поделиться Больше способов поделиться... Подписчики 0 Перейти к списку тем Сейчас на странице 0 пользователей Нет пользователей, просматривающих эту страницу.
SlideShow Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Бутстрап не исключает использование флексов и это никак не трогает верстку бутсрапа, изменится только порядок блоков. Это самый безболезненный вариант. Не понял про js, зачем по разным файлам. Смотрите, у ТС есть левая и правая колонка, левая содержит два блока один под одним. Как не трогая верстку bootstrap воспользоваться flex-блоками? Замечу что flex-блоки поддерживаются только новыми браузерами, часто это бывает важно и стоит учитывать. Про js вы раньше писали в ключе - можно блоки переместить js-ом, дабы не плодить hidden. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
ocdev_pro Опубликовано: 24 августа 2016 Поделиться Опубликовано: 24 августа 2016 Тут наверное даже вопрос/ответ должен стоять по другому "Как переверстать карточку товара?" - Грамотно!1 - Заголовок товара средним шрифтом2 - Изображение 3. Цена (+- спец предложение) 4. Кнопка Купить5. Краткий текст характеристик 6. Отзывы возможно Все остальные элементы можно скрыть классом .hideНе перегружайте страницу ненужными элементами. Если не знаете какие элементы нужные, а какие нет - проведите А/Б тест с установкой целей в Метрике.И при сравнительном анализе поймете используют люде те элементы или почти нет.. И если нет то их убираете! Все просто) ИМХО дизайн сайта, мобильной версии должен составлятся дизайнером под четким руководством маркетолога.... А не потому что "Я так вижу" )) Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Назад 1 2 3 Вперёд Страница 1 из 3 Создайте аккаунт или войдите в него для комментирования Вы должны быть пользователем, чтобы оставить комментарий Создать аккаунт Зарегистрируйтесь для получения аккаунта. Это просто! Зарегистрировать аккаунт Войти Уже зарегистрированы? Войдите здесь. Войти сейчас Поделиться Больше способов поделиться... Подписчики 0
Рекомендованные сообщения