Joomshopping как изменить шаблон

Joomshopping — редактирование карточки товара и категории

Друзья, эта статья на тему редактирования карточек товара и категорий в компоненте интернет-магазина Joomshopping для Joomla будет полезна практически всем, у кого есть интернет магазин, построенный на Joomshopping или кто собирается делать, для веб-мастеров, которые занимаются разработкой сайтов. Статья полезна в первую очередь тем, что в ней показаны самые популярные изменения, которые обычно требуется сделать в компоненте Joomshopping, чтобы он начал радовать глаз владельца и пользователя

Все изменения приведены на примере последней версии Joomshopping 3.17.1 на момент написания данной статьи. Но по опыту могу сказать, про прежние версии компонента Joomshopping для Joomla 2.5 особо не отличаются по тем файлам, которые мы будем менять.

Итак, как отредактировать страницу категории товаров и страницу товара в Joomshopping?

Описание категории внизу под картинкой на странице категории в Joomshopping

<?php defined('_JEXEC') or die(); ?>
<div class="jshop">
<h1><?php print $this->category->name?></h1>
<div class="jshop_list_category">
<?php if (count($this->categories)){ ?>
<table class = "jshop list_category">
    <?php foreach($this->categories as $k=>$category){?>
        <?php if ($k%$this->count_category_to_row==0) print "<tr>"; ?>
        <td class="jshop_categ" width="<?php print (100/$this->count_category_to_row)?>%">
          <table class = "category">
            <tr>
            <td class="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>
            </td>
            </tr>
        <tr>
        <td>
               <a class = "product_link" href = "<?php print $category->category_link?>"><?php print $category->name?></a>
               <p class = "category_short_description"><?php print $category->short_description?></p>
            </td>
        </tr>
           </table>
        </td>    
        <?php if ($k%$this->count_category_to_row==$this->count_category_to_row-1) print '</tr>'; ?>
    <?php } ?>
        <?php if ($k%$this->count_category_to_row!=$this->count_category_to_row-1) print '</tr>'; ?>
</table>
<?php }?>
</div>
<?php include(dirname(__FILE__)."/products.php");?>
</div>
<?php print $this->category->description?>

Визуально должно получиться вот так:

Напомню, что для редактирования php и css файлов я рекомендую использовать программку Notepad++ для Windows и Juffed если Вы пользуетесь Linux (Ubuntu).

Размещение короткого описания и названия категории под картинкой категории

Идем по пути /www/site.com.ua/components/com_jshopping/templates/default/category и находим файл category_default.php, который открываем в редакторе и находим следующий код:

<td>
        <a class = "product_link" href = "<?php print $category->category_link?>"><?php print $category->name?></a>
        <p class = "category_short_description"><?php print $category->short_description?></p>
</td>

Этот код вырезаем, поскольку он находится в таблице (во второй колонке одного ряда, в первой колонке находится изображение), то чтобы переместить описание вниз создаем новую строку (добавляем тег <tr> и вставляем этот вырезанный код туда и закрываем строку </tr>). Чтобы не путались, привожу полный код измененного файла с выделением измененных участков желтым:

<?php defined('_JEXEC') or die(); ?>
<div class="jshop">
<h1><?php print $this->category->name?></h1>
<div class="jshop_list_category">
<?php if (count($this->categories)){ ?>
<table class = "jshop list_category">
    <?php foreach($this->categories as $k=>$category){?>
        <?php if ($k%$this->count_category_to_row==0) print "<tr>"; ?>
        <td class="jshop_categ" width="<?php print (100/$this->count_category_to_row)?>%">
          <table class = "category">
            <tr>
            <td class="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>
            </td>
            </tr>
        <tr>
        <td>
               <a class = "product_link" href = "<?php print $category->category_link?>"><?php print $category->name?></a>
               <p class = "category_short_description"><?php print $category->short_description?></p>
            </td>
        </tr>
           </table>
        </td>    
        <?php if ($k%$this->count_category_to_row==$this->count_category_to_row-1) print '</tr>'; ?>
    <?php } ?>
        <?php if ($k%$this->count_category_to_row!=$this->count_category_to_row-1) print '</tr>'; ?>
</table>
<?php }?>
</div>
<?php include(dirname(__FILE__)."/products.php");?>
</div>
<?php print $this->category->description?>

Произведенные изменения сохраняем и заливаем на сервер измененный файл.

Перенос краткого описания под картинку категории на странице главной категории Joomshopping

Опять через FTP-клиент идем по пути /www/site.com.ua/components/com_jshopping/templates/default/category и находим файл главной категории maincategory.php и находим следующий код:

<td>
        <a class = "product_link" href = "<?php print $category->category_link?>"><?php print $category->name?></a>
        <p class = "category_short_description"><?php print $category->short_description?></p>
</td>

Этот код вырезаем, но перед этим создаем новую строку (добавляем тег <tr> и вставляем этот код туда, как я писал выше). Чтобы не путались, привожу полный код измененного файла с выделением измененных участков желтым:

<?php defined('_JEXEC') or die(); ?>
<?php if ($this->params->get('show_page_heading') && $this->params->get('page_heading')) {?>    
<div class="shophead<?php print $this->params->get('pageclass_sfx');?>"><h1><?php print $this->params->get('page_heading')?></h1></div>
<?php }?>
<div class="jshop">
<?php print $this->category->description?>
<div class="jshop_list_category">
<?php if (count($this->categories)){?>
<table class = "jshop">
    <?php foreach($this->categories as $k=>$category){?>
        <?php if ($k%$this->count_category_to_row==0) print "<tr>"; ?>
        <td class = "jshop_categ" width = "<?php print (100/$this->count_category_to_row)?>%">
          <table class = "category">
             <tr>
               <td class="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>
               </td>
             </tr>
         <tr>
           <td>
                   <a class = "product_link" href = "<?php print $category->category_link?>"><?php print $category->name?></a>
                   <p class = "category_short_description"><?php print $category->short_description?></p>
               </td>
         </tr>
           </table>
        </td>    
        <?php if ($k%$this->count_category_to_row==$this->count_category_to_row-1) print '</tr>'; ?>    
    <?php } ?>
        <?php if ($k%$this->count_category_to_row!=$this->count_category_to_row-1) print '</tr>'; ?>    
</table>
<?php } ?>
</div>
</div>

Перенос краткого описания под картинку на главной странице компонента магазина

Да, Вы угадали, нам снова нужно воспользоваться FTP-клиентом, переходим по пути /www/site.com.ua/components/com_jshopping/templates/default/category и находим файл mainpage.php

Чтобы перенести краткое описание и название категорий, проделываем абсолютно все те же манипуляции с кодом, что и для карточки страницы главной категории

Перенос краткого описания, цены и кнопок «купить» и «подробнее» под картинку товара на странице товаров категории Joomshopping

По пути /www/site.com.ua/components/com_jshopping/templates/default/list_products находим файл product.php

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

Ниже в коде я выделю желтым сделанные изменения в коде страница списка товаров категории

<?php if ($this->params->get('show_page_heading') && $this->params->get('page_heading')) {?>    
<div class="shophead<?php print $this->params->get('pageclass_sfx');?>"><h1><?php print $this->params->get('page_heading')?></h1></div>
<?php }?>
<div class="jshop">
<?php print $this->category->description?>
<div class="jshop_list_category">
<?php if (count($this->categories)){?>
<table class = "jshop">
    <?php foreach($this->categories as $k=>$category){?>
        <?php if ($k%$this->count_category_to_row==0) print "<tr>"; ?>
        <td class = "jshop_categ" width = "<?php print (100/$this->count_category_to_row)?>%">
          <table class = "category">
             <tr>
               <td class="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>
               </td>
             </tr>
         <tr>
           <td>
                   <a class = "product_link" href = "<?php print $category->category_link?>"><?php print $category->name?></a>
                   <p class = "category_short_description"><?php print $category->short_description?></p>
               </td>
         </tr>
           </table>
        </td>    
        <?php if ($k%$this->count_category_to_row==$this->count_category_to_row-1) print '</tr>'; ?>    
    <?php } ?>
        <?php if ($k%$this->count_category_to_row!=$this->count_category_to_row-1) print '</tr>'; ?>    
</table>
<?php } ?>
</div>
</div>

а вот так это выглядит на сайте:

Размещение описания под кнопкой «купить» на странице товара Joomshopping

Перемещаясь по пути  /www/site.com.ua/components/com_jshopping/templates/default/product находим файл product_default.php

В нем ищем следующий кусок кода, отвечающий за вывод описания товара:

<div class="jshop_prod_description">
     <?php print $this->product->description; ?>
</div>  

Вырезаем и размещаем его под кодом кнопки «назад», как показано ниже в готовом коде (код большой, поэтому приведу лишь его последний фрагмент с изменением):

.................
<?php
if ($this->config->product_show_button_back){?>
<div class="button_back">
<input type="button" class="button" value="<?php print _JSHOP_BACK;?>" onclick="<?php print $this->product->button_back_js_click;?>" />
</div>
<?php }?>
    <div class="jshop_prod_description">
        <?php print $this->product->description; ?>
    </div>  
<?php
    print $this->_tmp_product_html_before_related;
    include(dirname(__FILE__)."/related.php");
    print $this->_tmp_product_html_before_review;
    include(dirname(__FILE__)."/review.php");
?>
<?php print $this->_tmp_product_html_end;?>
</div>

Пожалуй, хватит на сегодня, теперь Вы уже наверняка должны знать, как редактировать карточку категории и товара в Joomshopping 

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

Если Вас интересуют кое-какие вопросы относительно расположения или вывода элементов на странице товара, или просто я что-то непонятно объяснил, то спрашивайте пожалуйста в комментариях и я приведу Вам готовые решения А еще я могу Вам сделать интернет-магазин, в котором уже будут внедрены данные изменения

Спасибо за внимание! Удачи!