Для людей, хорошо знающих шаблоны и умеющих работать с PHP тут ничего нового не будет. Для людей, не умеющих писать на РНР и не особо искушенных в шаблонах - может что-то новое расскажу. Мне самому пришлось покопаться, поискать, чтобы сделать как нужно.
Итак, какая у меня была задача?
Нужно было переделать вид витрины и отображения категорий. У меня был стандартный шаблон joom shopping, который отображает категории вот так:
Мне нужно было разместить все изображения на "плитках" с названиями категорий ровно под ними и без описаний категорий
Настройки встроенной темы ничего такого не позволяют, значит надо копать в шаблонах. Нужные шаблоны - это файлы maincategory.php (витрина на главной странице) и category_default.php (основной список категорий). Но внутри них для непосвященного взгляда творится лютый АДЪ из мешанины тегов HTML и PHP. Чтобы разобраться нужно выделить какие теги за что отвечают. Желательно знать хотя бы HTML5/CSS3 и понимать как оно должно выглядеть.
По сути фрагменты кода РНР вставляются в HTML-разметку и сами по себе только подставляют значения тех или иных обьектов, не влияя на разметку страницы. Поэтому наша работа выявить нужные куски кода и воткнуть их в нашу разметку. От некоторых кусков кода можно вообще отказаться.
Вот код файла category_default.php, его и поковыряем. Естественно сначала скопируем исходный файл куда-нибудь в надёжное место.
В самом начале мы обьявляем о запуске шаблона. Этот пункт - самое начало, трогать не будем, иначе у нас просто ничего не сработает.
print $this->_tmp_category_html_start;
?>
Потом начинается изменяемая часть, например обьявление названия категории (name) и ее описания (description). Описание категории можно отключать, это не повлияет на работу. Здесь можно вставлять РНР-код в любое форматирование, которое вам нужно для названия категории. То есть весь HTML можно менять как бог на душу положит. Главное - не прозевать закрывающие теги div.
<div class="jshop" id="comjshop">
<h1><?php print $this->category->name?></h1> // Имя категории
<div class="category_description">
<?php print $this->category->description?> // Описание категории
</div>
А теперь начинается та часть, которую нам по исходному заданию надо кастомизировать. Думаю пояснить по структуре страницы. JoomShopping новых версий сверстано на блоках, без таблиц, с использованием сетки колонок от Bootstrap. Отсюда - знакомые классы sblock. Эта сетка - адаптивная и "резиновая", умеющая автоматически увеличивать и уменьшать число колонок в зависимости от разрешения экрана. Поэтому же, меняя дизайн страницы категорий на нестандартный, вам придется вот эту бутстраповскую сетку убивать и заменять своей.
Что мы делаем в этом куске кода? Мы считаем категории и сколько их поместится в ряд. Если мы убиваем родную вёрстку, эта часть кода для нас несущественна.
<div class="jshop_list_category">
<?php if (count($this->categories)) : ?>
<div class = "jshop list_category">
<?php foreach($this->categories as $k=>$category) : ?>
<?php if ($k % $this->count_category_to_row == 0) : ?>
<div class = "row-fluid">
<?php endif; ?>
<div class = "sblock<?php echo $this->count_category_to_row;?> jshop_categ category">
А вот и наши барашки! Смотрите, в блоке c sblock2 image живет наша картинка категории и ссылка! Если Вы понимаете в HTML, то легко нарежете всё как надо. В нашем случае ссылка - это <?php print $category->category_link;?>, картинка - это <?php print $this->image_category_path;?>/<?php if ($category->category_image) print $category->category_image; else print $this->noimage;?>, тег alt - это <?php print htmlspecialchars($category->name)?>, название ссылки - это <?php print htmlspecialchars($category->name)?>
<div class = "sblock2 image">
<a href = "<?php print $category->category_link;?>"> // Вот ссылка картинки! Её бережём!
<img class="jshop_img" src="<?php print $this->image_category_path;?>/<?php if ($category->category_image) print $category->category_image; else print $this->noimage;?>" alt="<?php print htmlspecialchars($category->name)?>" title="<?php print htmlspecialchars($category->name)?>" />
</a>
Дальше - ссылка на категорию <?php print $category->category_link?>, текстовое название категории <?php print $category->name?> и короткое описание <?php print $category->short_description?>. Эти фрагменты кода можно поместить в Вашу разметку без всяких проблем.
</div>
<div class = "sblock2">
<div class="category_name">
<a class = "product_link" href = "<?php print $category->category_link?>">
<?php print $category->name?>
</a>
</div>
<p class = "category_short_description">
<?php print $category->short_description?>
</p>
</div>
</div>
Следующий кусок кода - продолжение разметки категорий по сетке. Если Вы уже "грохнули" предыдущую разметку - спокойно добивайте и эту.
<?php if ($k % $this->count_category_to_row == $this->count_category_to_row - 1) : ?>
<div class = "clearfix"></div>
</div>
<?php endif; ?>
<?php endforeach; ?>
<?php if ($k % $this->count_category_to_row != $this->count_category_to_row - 1) : ?>
<div class = "clearfix"></div>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
А это - наш хвост файла, не несущий никакой разметки HTML и оставляемый без изменений.
<?php print $this->_tmp_category_html_before_products;?>
<?php include(dirname(__FILE__)."/products.php");?>
<?php print $this->_tmp_category_html_end;?>
</div>
Собственно вот и всё. Если Вы знаете HTML, то легко справитесь дальше самостоятельно. А если не знаете, то лучше и не браться вовсе. Не исключаю что в моём тексте есть ошибки. Обычно они моментально выявляются, выбрасывая ошибки РНР. Найдёте - поправляйте. Но, надеюсь, общий принцип всё же понятен: находите нужные фрагменты кода и вставляйте в свой шаблон.
14.06.2024, 11:43:28