Форум русской поддержки Joomla!® CMS
27.06.2017, 00:56:05 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Вдруг будет полезно: изменение вида витрины магазина или страниц категорий встроенного шаблона

 (Прочитано 183 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Hurgrave
Новичок
*

Репутация: +2/-0
Offline Offline

Сообщений: 9


« : 21.04.2017, 13:12:23 »

Для людей, хорошо знающих шаблоны и умеющих работать с 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, то легко справитесь дальше самостоятельно. А если не знаете, то лучше и не браться вовсе. Не исключаю что в моём тексте есть ошибки. Обычно они моментально выявляются, выбрасывая ошибки РНР. Найдёте - поправляйте. Но, надеюсь, общий принцип всё же понятен: находите нужные фрагменты кода и вставляйте в свой шаблон.
Записан
Biss
Завсегдатай
*****

Репутация: +75/-0
Offline Offline

Пол: Мужской
Сообщений: 770



« Ответ #1 : 21.04.2017, 14:15:49 »

 Smiley Не важно, делали вы все это для себя или клиенту, но я бы рекомендовал шаблон вам переопределить так как это всё слетит при первом обновлении...
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet