Opencart 2.3. Как в мобильной версии в карточке товара поменять местами расположение блоков?

Question

[kk95]

по умолчанию в Opencart 2.3 карточка товара в мобильной версии выглядит так (сверху-вниз): фото товара , потом идет его описание, и только потом кнопка купить. В итоге чтоб добраться до покупки приходиться "долго проматывать экран вниз". Нужно чтобы кнопка купить была перед описанием.
Там два блока : col-sm-8 (фото и описание товара) и col-sm-4 (цена и кнопка купить)
И при переходе в мобилку, у col-sm-4 пропадает float: left; ну и соотвественно он опускается вниз.

Как его вставить между блоком с фото и блоком с описанием ? Только скриптом или можно просто с помощью CSS (если да , то как) ?

Comments

[Антон Р.]

Я бы добавил свой div с кнопкой ВЫШЕ описания и с помощью медиа css задавал бы что и когда появлялось бы (display: none;). Первое что приходит в голову.

[alex-1917]

а лучше приложить кусок верстки

Answer 1

[alex-1917]

1. col-sm-4 переставь выше блока col-sm-8
   
2. для блока col-sm-4 добавь класс float-md-right
   

Comments

[daroyar]

спасибо огромное за совет, очень помогли мне тоже!! единственное, не могу понять как в это м куске кода добавить класс float-md-right <?php $class = 'col-sm-4'; ?>

[daroyar]

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

[alex-1917]

daroyar, вопрос изначально был такой :

Как в мобильной версии в карточке товара поменять местами расположение блоков?

мой варик это делает.
чтобы кнопку эту перемещать куда-то между, нужно более сложное решение в плане верстки и тогда все получится, НО на практике в 98% делают проще, быстрее и нагляднее - делают ДВА одинаковых блока с чем-либо и манипулируют ими - один виден для декстопа, второй для мобилок.
Что именно дублировать - вопрос политики, быстрее всего продублировать конечно кнопку, но кнопка может быть привязана к скрипту через ID - уже не варик, и как лишняя ссылка на странице тоже не варик.
С другой стороны, в 60% ПЛАТНЫХ недешёвых шаблонах именно так и сделано)))

[alex-1917]

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

[daroyar]

спасибо за развернутые ответы! Но ведь если дублировать блоки, то и описание товара получается дублируется, а это плохо для сео?

[alex-1917]

daroyar, конечно плохо для сео.
НО я же упомянул - выбор того, что дублировать - вопрос политики.
Кому-то похрен на сео - ему проще продублировать блок с контентом.
Кому-то похрен на семантику - он дублирует блок с кнопкой.
Кому-то похрен клиентов)) - он дублирует огромный (по весу в кБ) блок с фотками.
И т.д.
Политика мать её...

А кто-то просто сверстает правильно и все решится само собой. ТС не указал кусок верстки - вот и получает такие ответы...

[daroyar]

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

[alex-1917]

daroyar,
я про то, что карту товара надо верстать согласно мировым трендам, все АБ-тестирвоания уже проведены и идеальная карта товара - это скрин ниже, а если она не такая, то покрасьте дизайнера в зеленый цвет и выкиньте в траву.

[alex-1917]

daroyar,
или так: