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

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

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

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

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

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

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

template.php

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

<?php theme_tapir_table_alter(); ?>

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

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

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

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

.newremove

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

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

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

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