• урок
  • pantey

Темизации кнопки «удалить» на странице корзины в Ubercart 3.

10.12.2013

Сегодня продолжаем изучение особенностей Drupal, а в частности поговорим о темизаци кнопки «удалить» на странице корзины в Ubercart. Задача довольно тривиальная, но которую приходится реализовывать если не постоянно, то очень часто. Итак, начнём с исходных данных:

Мы имеет, некий товар, который добавлен в корзину в Ubercart, по у молчанию он имеет следующий вид (используем как всегда Drupal 7 и стандартный шаблон Bartik)

Все выводится довольно прилично, но с этим не согласны дизайнеры, которые постоянно хотят что-то дополнительно внести на страницу или изменить. В данном случаем мы будет изменять кнопку «Удалить» на какое-то изображение.

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

  • Удалить название кнопки - как вы понимаете это «value»
  • Добавить новый класс CSS для ячейки «td», где находится наша кнопка

Теперь приступаем к реализации, открываем наш файл

  1. template.php

Текущего шаблона, в данном файле мы будем переписывать вывод таблицы корзины Ubercart используя

  1. <?php theme_tapir_table_alter(); ?>

Если у вас нет файла template.php, то вам необходимо его создать. Конечный результат кода у вас должен выглядеть так:

  1. /**
  2. * Implements theme_tapir_table_alter();
  3. */
  4. <?php function themename_tapir_table_alter(&$table, $table_id) {
  5. if ($table_id == 'uc_cart_view_table') { //выбрали таблицу корзины по id
  6. foreach (element_children($table) as $key) {
  7. if (!empty($table['#parameters'][1][$key]['nid'])) {
  8. $table[$key]['remove']['#value'] = ''; //удалили value для кнопки
  9. $table[$key]['remove']['#cell_attributes']['class']['0'] = 'newremove'; //добавили новый класс для ячейки с кнопкой
  10. }
  11. }
  12. }
  13. }
  14. ?>

После сохранения не забываем чистить кеш и смотрим результ:

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

  1. .newremove

Теперь все что нам осталось, это прописать стили для нового класса (.newremove).В моем случае стили выглядят вот так

  1. .newremove input[type="submit"]{
  2. background:none;
  3. background-image:url(../images/rem_cart.png);
  4. background-repeat:no-repeat;
  5. background-position:center;
  6. border:none;
  7. }

Прописать их естественно нужно в файле со стилями, в моем случае это style.css, думаю в вашем так же. В результате мы получим вот такую картину:

На этом можно считать, что с задачей мы справились.

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Комментарии (2)

Profile picture for user Anton
Виталий
27.04.2014

А можно как то добавить кнопки "+" и "-", что бы можно было бы изменять количество товара не ручным вводом цифры, а кликом мыши.

Profile picture for user Anton
Илья
16.09.2014

Добрый день Павел побывал скачать некоторые модули Ubercart и еще па рачку
не вышла на сайте дрыпал не доступна для загрузки е сле есть возможность скин те орхив со всеми необходимыми модулями для магозина