Перейти к содержанию
tarvolok

[РЕШЕНО] Выравнивание кнопок КУПИТЬ на одну высоту

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

Помогите справиться с проблемой, думаю актуальной для каждого второго (если не первого):

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

шаблон дефолтный, версия движка 1.5.4.1

P.S. Пытался весь день привязать кнопку к нижнему краю бокса и делать выравнивание относительно него, но так и не получилось...

Благодарю за помощь.

post-27652-0-63095100-1361137593_thumb.jpg

Поделиться сообщением


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

предположу лишь.

А если поставить этому элементу в css:

position:relative;
bottom: 5px;

Поделиться сообщением


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

Огромное спасибо за быстрый ответ, но, к сожалению, данный вариант не работает почему-то... все кнопки приподнимаются на 5px и всё. Может не туда применяю, но перепробовал уже во все блоки связанные с кнопкой "купить" так или иначе. Правил стиль:

input.button {
margin: 0;
border: 0;
height: 24px;
padding: 0px 12px 0px 12px;
}

Поделиться сообщением


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

вы чего... там делов на минуту

.box-product .name a

указываете фиксированную высоту максимального текста и все.

Конечно есть варианты по уменьшению длины названия... но думая Вам и так нормально .

  • +1 2

Поделиться сообщением


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

вы чего... там делов на минуту

Вспомнилось выражение у юристов: Поставить запятую ни стоит ни чего, а знать где её поставить иногда стоит целое состояние.

Так же и у нас: Изменить стиль делов на минуту, а знать где изменить это уже опыт и знания, накопленные годами.

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

Поделиться сообщением


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

ох эти звездочки...

по хорошему если только стилями, то можно этот рейтинг спозиционировать относительно блока товара... в верхний угол.

Поделиться сообщением


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

Это уже обсуждалось. Пользуйтесь поиском, чтобы не плодить десятки одинаковых тем.

https://opencartforum.com/topic/10978-выравнимание-кнопки-купить-на-главной-страни/page__view__findpost__p__70943

Я вообще не понимаю, что все так аккуратничают с этой стандартной тяп-ляпной версткой.

Цена - кнопка Купить - название товара - звездочки (если есть). Так, по-моему, гораздо удобнее. И никакой пляски.

Поделиться сообщением


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

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

Поделиться сообщением


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

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

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

Поделиться сообщением


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

вы чего... там делов на минуту

.box-product .name a

указываете фиксированную высоту максимального текста и все.

Конечно есть варианты по уменьшению длины названия... но думая Вам и так нормально .

Спасибо за наводку. Стили и классы другие, но идея выставить высоту и максимальную высоту для блока с описанием помогла :)

Плюс заслужили

Поделиться сообщением


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

По личному опыту. Удалось добиться желаемого результата задав нужный " height: px; " +  добавить " display; block; "

 

В моем случае, это:

 

height: 45px;

display; block;

 

Все товары идеально ровные. Наименование товара не превышает трех строк. 

Поделиться сообщением


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

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

Поделиться сообщением


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

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

а тут со звездочками не решение? 

https://opencartforum.com/topic/11175-riad-voprosov/?do=findComment&comment=87172

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

Но в случае большого и разнообразного количества товаров - лучше всего ставить в контроллере ограничение на количество символов и уже потом верстать

Что значит: "у всех товаров приблизительно одинаковая длина.." ??? Не понял... :oops: 

Поделиться сообщением


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

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

Но в случае большого и разнообразного количества товаров - лучше всего ставить в контроллере ограничение на количество символов и уже потом верстать

 

Очень соглашусь с Вами, Einshtein =) Поэтому, я попытался обратить внимание на то, что у меня название максимум в три строки) Кстати говоря, с ограничением символов тоже вариант! 

Поделиться сообщением


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

Что значит: "у всех товаров приблизительно одинаковая длина.." ??? Не понял... :oops:

ну типа количество символов у всех названий товаров приравнивается к количеству строк. То-есть названия у всех товаров помещаются в 2 строки или все названия помещаются в 3 строки

Поделиться сообщением


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

то есть ты имеешь в виду, что при ограничении знаков в названии может получиться так в карточках: 
"Великолепный мелафон Алисы"...а при ограничении знаков во втором выйдет так: "Великолепный мелафон Грамо..."  (Великолепный мелафон Грамозяки) прально я понимаю?
все же может проще ограничить по высоте в три строки и там и там, просто под "Алисиным мелафоном"  останется промежуток из незаполненной строки? 

Поделиться сообщением


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

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

Поделиться сообщением


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

Мы с Einshtein давние знакомцы и работали вместе над пару проектов, так что мы не противопоставляем 2 решения одной и той же проблемки, а лишь ведем здоровую беседу...сарказма тут точно не будет

Поделиться сообщением


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

Мы с Einshtein давние знакомцы и работали вместе над пару проектов, так что мы не противопоставляем 2 решения одной и той же проблемки, а лишь ведем здоровую беседу...сарказма тут точно не будет

 

Ни разу в этом не сомневался) Einshtein, приятный собеседник. Лично с ним не знаюсь, но неоднократно его читал, с чего могу сделать некоторые положительные выводы. На счет сарказма,это так, к слову было сказано... ничего личного)  

Поделиться сообщением


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

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

"Великолепный мелафон Алисы"...а при ограничении знаков во втором выйдет так: "Великолепный мелафон Грамо..."  (Великолепный мелафон Грамозяки) прально я понимаю?

все же может проще ограничить по высоте в три строки и там и там, просто под "Алисиным мелафоном"  останется промежуток из незаполненной строки? 

Проблема с высотой заключается в том, что если в магазине есть товары с коротким названием (например iphon5) и с длинными (например Инкубатор для перепелов "Перепелочка" 270 яиц автоматический переворот) то в товарах с коротким названием отступ между названием и нижней границей блока будет слишком велик, что ооочень не красиво (особенно если учесть, что нужно учитывать еще 1 строку для рейтинга - отступ вообще гигантский получается и витрина теряет свою функциональность).

Когда я работал тут (на качество магазина не смотрите...после меня там 3 блондинки уже работало :D магазин доживает последние дни) , то пытался сделать именно такое выравнивание по строкам (это можно увидеть в теме на которую ссылается rb2), но увидев эти высокие промежутки между блоками - понял что такой вариант не очень приемлемый для моего случая...

Вариант который предлагает уважаемый rb2 со сменой позиций кнопки купить и названия товара - тоже не очень подошел. Все же остается отступ между первой строкой товаров и второй строкой...

В общем в итоге мной было принято решение ограничить количество символов в названии товара. Но естественно я не знал о программном методе ограничения символов и поэтому дал задание контентам сделать всем товарам названия не более 23 символов. Таким образом они отлично помещались в 2 строки и я мог ограничить блоки высотой....Правда со временем мы отказались и от этого способа...

Поделиться сообщением


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

А ещё можно схитрить ;)

overflow:hidden;

Для поля с названием.

И писать название полностью, не заморачиваясь на работу с контроллером.

Поделиться сообщением


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

А ещё можно схитрить ;)

overflow:hidden;

Для поля с названием.

И писать название полностью, не заморачиваясь на работу с контроллером.

 

Отчасти да... об этом говорил в предыдущих сообщениях)

Поделиться сообщением


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

Может только намекали? Я не видел там упоминания этого метода.

Хотя он и далеко не всем подходит. Ведь название просто обрубится.. 

Но для некоторых этот вариант оказывался наиболее оптимальным.

Всяко лучше, чем насильно рубить в контроллере длину посимвольно и получить потом индексацию фиг знает чего.

 

апд: упс.. страницы категорий же вроде бы не индексируются? ну да ладно. на главной странице всё равно оно может отображаться

Поделиться сообщением


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

Может только намекали? Я не видел там упоминания этого метода.

Мы всего навсего интересуемся темами в которых пишут наши коллеги по общему делу, поэтому не повторяясь  понимаем друг друга))) 

вот тут overflow:hidden;

https://opencartforum.com/topic/22831-prizhat-knopku-kupit-k-nizu-granitcy-bloka-tova/?do=findComment&comment=172477

и тут https://opencartforum.com/topic/22813-modul-all-in-one-tab/?do=findComment&comment=172493

:-)

Поделиться сообщением


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

Добрый день!

Подскажите, пожалуйста, а как сделать все ровно в данной ситуации?

Картинки выходят разной высоты и текст от одной до трех строчек.

Советы из темы не помогли(

 

0.jpg

Поделиться сообщением


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От seregin
      310.00 руб
      Скачать/Купить дополнение


      Opencart: Стикеры для товаров
      Модуль отображает стикеры "Процент скидки", "Хит", "Новый", "Отсутствие на складе", "Стикеры зависимые от цены" и "Пользовательские стикеры"(с возможностью установить своё название) у товаров.

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

      Совместим с Opencart: 2.1.0.1 - 3.0.2.0
      Совместим с ocStore: 2.1.0.1 - 2.3.0.2.3

      Стикеры подключаются ко всем стандартным модулям и страницам с товарами.

      Для не стандартных модулей необходимо сделать дополнительную адаптацию. Стоимость адаптации от 100 — 250 рублей в зависимости от количества модулей.

      Для стандартных модулей поддержка бесплатная.

      Демонстрация

      Главная страница: Переход на сайт
      Настройки: Переход на сайт

      Доступы в Административную Панель:

      Логин: demo
      Пароль: demo
      Добавил seregin Добавлено 08.03.2016 Категория Модули Системные требования Сайт разработчика http://seregin-pro.ru/ Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop Не проверялось  
    • От nikitaxzx
      http://cg09891-opencart-18.tw1.ru/index.php?route=product/category&path=59
      ребят вот сайт очень маленькая кнопка корзинки купить подскажите как правильно поменять изображение 

      картинку прикрепил, как примерно надо 

    • От seregin
      Модуль отображает стикеры "Процент скидки", "Хит", "Новый", "Отсутствие на складе", "Стикеры зависимые от цены" и "Пользовательские стикеры"(с возможностью установить своё название) у товаров.

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

      Совместим с Opencart: 2.1.0.1 - 3.0.2.0
      Совместим с ocStore: 2.1.0.1 - 2.3.0.2.3

      Стикеры подключаются ко всем стандартным модулям и страницам с товарами.

      Для не стандартных модулей необходимо сделать дополнительную адаптацию. Стоимость адаптации от 100 — 250 рублей в зависимости от количества модулей.

      Для стандартных модулей поддержка бесплатная.

      Демонстрация

      Главная страница: Переход на сайт
      Настройки: Переход на сайт

      Доступы в Административную Панель:

      Логин: demo
      Пароль: demo
    • От efremovav
      Скачать/Купить дополнение


      (OC 2) Подсказки DaData PRO (Opencart/Ocstore 2.x)
      ВНИМАНИЕ! ПОДДЕРЖКА МОДУЛЯ ПРЕКРАЩЕНА! НА ВОПРОСЫ ПО МОДУЛЮ НЕ ОТВЕЧАЮ!
      Подсказки по ФИО, адресу, e-mail на страницах регистрации, авторизации и оформления заказа для Opencart/OcStore 2.x.
      Модуль разработан на основе API сервиса подсказок DaData.ru для Opencart/OcStore 2.x. (добавлена поддержка Opencart 2.3.x)
       
      Внимание! Не обновляйте модуль до последних версий, если в текущей всё работает и не наблюдается проблем!
      Версия для Opencart/OcStore 1.5.x тут: Подсказки DaData для oc 1.5.x
       
      Возможности модуля:
      -подсказки по ФИО, e-mail, адресу (только РФ);
      -возможность определения города\региона по ip-адресу;
      -множество настроек, что позволяет использовать модуль с любым модулем оформления заказа, и с любым набором полей.

      демо: http://efremovav.16mb.com/ocstore2 (админка demo/demo)

      Для использования модуля требуется зарегистрироваться на сервисе daData.ru и получить API-ключ, регистрация бесплатная. Ограничения запросов и прочую информацию смотрите на сайте сервиса.
      -------------------------------------------------------------------------------------------
      ИНСТРУКЦИЯ ПО УСТАНОВКЕ И БАЗОВОЙ НАСТРОЙКЕ МОДУЛЯ:
      0. Для Opencart 2.3 и выше качаем и устанавливаем файл Suggest_PRO_v.1.3.1(opencart_2.3.x).ocmod.zip
      1. Установить через Установщик дополнений (если настроен FTP в админке) или скопировать содержимое папки upload в корень сайта;
      p.s.: Если вы используете модификатор Local copy OCMOD by iSenseLabs загружайте содержимое папки upload из архива в корень сайта!
      2. Модули ->Подсказки DaData PRO - установить
      3. В настройках модуля во вкладке Основные настройки задать API-ключ daData (ключ можно получить на сайте daData.ru после регистрации в личном кабинете), статус-включено. Сохранить настройки (кнопка Сохранить в правом верхнем углу страницы);
      4. На вкладке Основные настройки нажмите одну из кнопок установки демо-данных: "Обычный заказ\регистрация" или "Simple - упрощенная регистрация и заказ" (если используется модуль Simple)
      ! если используется стандартное оформление заказа (НЕ Simple): в файле /catalog/view/theme/default/template/(extension - для OC.2.3.x)/module/suggest.tpl раскомментировать следующее (убрать /** и **/):
      /***Раскомментировать код ниже, если НЕ используется модуль Simple***/$(document).ready(function (e) {/**initDaData();$(document).ajaxComplete(function (e, xhr, settings) {if (settings.url.indexOf("checkout/") > 0 || settings.url.indexOf("account/") > 0) {initDaData(e);}});**/  
      ! если используется Simple: в настройках модуля Simple на вкладке Javascript добавить строку:
      initDaData(); В некоторых случаях требуется отключить определение города по ip, для корректной работы модуля.

      5. В админке сайта заходим в меню Дизайн->Схемы, находим в списке схемы Аккаунт (account) и Оформление заказ (checkout), в редактировании каждой из этих схем добавляем модуль Подсказки DaData PRO в позицию "Внизу страницы" (content bottom), сохраняем.
      6. Обновляем кэш модификаторов (раздел Дополнения->Менеджер дополнений)
      7. Модуль работает.
       
      ВСЕ ШАГИ ВЫПОЛНЯЕМ ПО ПОРЯДКУ!
      -------------------------------------------------------------------------------------------
      P.S.: В связи с разнообразием сочетаний модулей доставок, множества вариаций настроек модуля Simple и прочих деталей оформления заказа, модуль подсказок DaData может работать некорректно при некоторых вариантах. Просьба купивших оставлять в теме поддержки комментарии о совместимости этого модуля с другими, и о возникающих проблемах, чтобы помочь другим с этим вопросом.
      Также Вас может заинтересовать:
      Шкала статусов заказа - добавляет удобную шкалу для изменения статусов заказа в админке.
      Price Control - массовое изменение цен в Вашем магазине в один клик.
      Купон "Бонусные баллы на счёт" - модуль добавляет тип купона "Бонусные баллы на счёт", использование которого позволит начислить покупателю бонусные баллы для оплаты следующей покупки.
      Бонусные баллы - статистика - удобная статистика по приходу/расходу бонусных баллов для администратора.
      Рекомендуемые товары PRO (бесплатно) - позволяет использовать таймер обратного отсчёта и выводить описание в html-формате на базе стандартного модуля "Рекомендуемые".
      Добавил efremovav Добавлено 10.06.2016 Категория Модули Системные требования Сайт разработчика Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      2.2
      2.1
      2.0 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop  
    • От efremovav
      ВНИМАНИЕ! ПОДДЕРЖКА МОДУЛЯ ПРЕКРАЩЕНА! НА ВОПРОСЫ ПО МОДУЛЮ НЕ ОТВЕЧАЮ!
      Подсказки по ФИО, адресу, e-mail на страницах регистрации, авторизации и оформления заказа для Opencart/OcStore 2.x.
      Модуль разработан на основе API сервиса подсказок DaData.ru для Opencart/OcStore 2.x. (добавлена поддержка Opencart 2.3.x)
       
      Внимание! Не обновляйте модуль до последних версий, если в текущей всё работает и не наблюдается проблем!
      Версия для Opencart/OcStore 1.5.x тут: Подсказки DaData для oc 1.5.x
       
      Возможности модуля:
      -подсказки по ФИО, e-mail, адресу (только РФ);
      -возможность определения города\региона по ip-адресу;
      -множество настроек, что позволяет использовать модуль с любым модулем оформления заказа, и с любым набором полей.

      демо: http://efremovav.16mb.com/ocstore2 (админка demo/demo)

      Для использования модуля требуется зарегистрироваться на сервисе daData.ru и получить API-ключ, регистрация бесплатная. Ограничения запросов и прочую информацию смотрите на сайте сервиса.
      -------------------------------------------------------------------------------------------
      ИНСТРУКЦИЯ ПО УСТАНОВКЕ И БАЗОВОЙ НАСТРОЙКЕ МОДУЛЯ:
      0. Для Opencart 2.3 и выше качаем и устанавливаем файл Suggest_PRO_v.1.3.1(opencart_2.3.x).ocmod.zip
      1. Установить через Установщик дополнений (если настроен FTP в админке) или скопировать содержимое папки upload в корень сайта;
      p.s.: Если вы используете модификатор Local copy OCMOD by iSenseLabs загружайте содержимое папки upload из архива в корень сайта!
      2. Модули ->Подсказки DaData PRO - установить
      3. В настройках модуля во вкладке Основные настройки задать API-ключ daData (ключ можно получить на сайте daData.ru после регистрации в личном кабинете), статус-включено. Сохранить настройки (кнопка Сохранить в правом верхнем углу страницы);
      4. На вкладке Основные настройки нажмите одну из кнопок установки демо-данных: "Обычный заказ\регистрация" или "Simple - упрощенная регистрация и заказ" (если используется модуль Simple)
      ! если используется стандартное оформление заказа (НЕ Simple): в файле /catalog/view/theme/default/template/(extension - для OC.2.3.x)/module/suggest.tpl раскомментировать следующее (убрать /** и **/):
      /***Раскомментировать код ниже, если НЕ используется модуль Simple***/$(document).ready(function (e) {/**initDaData();$(document).ajaxComplete(function (e, xhr, settings) {if (settings.url.indexOf("checkout/") > 0 || settings.url.indexOf("account/") > 0) {initDaData(e);}});**/  
      ! если используется Simple: в настройках модуля Simple на вкладке Javascript добавить строку:
      initDaData(); В некоторых случаях требуется отключить определение города по ip, для корректной работы модуля.

      5. В админке сайта заходим в меню Дизайн->Схемы, находим в списке схемы Аккаунт (account) и Оформление заказ (checkout), в редактировании каждой из этих схем добавляем модуль Подсказки DaData PRO в позицию "Внизу страницы" (content bottom), сохраняем.
      6. Обновляем кэш модификаторов (раздел Дополнения->Менеджер дополнений)
      7. Модуль работает.
       
      ВСЕ ШАГИ ВЫПОЛНЯЕМ ПО ПОРЯДКУ!
      -------------------------------------------------------------------------------------------
      P.S.: В связи с разнообразием сочетаний модулей доставок, множества вариаций настроек модуля Simple и прочих деталей оформления заказа, модуль подсказок DaData может работать некорректно при некоторых вариантах. Просьба купивших оставлять в теме поддержки комментарии о совместимости этого модуля с другими, и о возникающих проблемах, чтобы помочь другим с этим вопросом.
      Также Вас может заинтересовать:
      Шкала статусов заказа - добавляет удобную шкалу для изменения статусов заказа в админке.
      Price Control - массовое изменение цен в Вашем магазине в один клик.
      Купон "Бонусные баллы на счёт" - модуль добавляет тип купона "Бонусные баллы на счёт", использование которого позволит начислить покупателю бонусные баллы для оплаты следующей покупки.
      Бонусные баллы - статистика - удобная статистика по приходу/расходу бонусных баллов для администратора.
      Рекомендуемые товары PRO (бесплатно) - позволяет использовать таймер обратного отсчёта и выводить описание в html-формате на базе стандартного модуля "Рекомендуемые".
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

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

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