Дизайн-студия Help for site - Помощь в создании сайта. Создание и продвижение сайтов. SEO-оптимизация. Уникальный дизайн сайта. Установка CMS. Администрирование.

Задавайте вопросы по электронной почте E-mail: info@help4site.ru On-line заявка

Установка CMS сайта

Установка CMS

Продвижение сайта

Продвижение

Интернет-магазин

Интернет-магазин

Web-дизайн сайта

Web-дизайн

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

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

С точки зрения SEO-оптимизации, описание товара или категории служит в качестве указателя релевантности той или иной страницы к определенным поисковым запросам. Поэтому в описании категории и на странице описания товара мы размещаем SEO-оптимизированный текст, который позволит поисковикам ранжировать эти страницы по нужным запросам. Люди, как правило, никакого внимания не обращают на эти описания, тем более, если они знают информацию об искомом товаре. Но в компоненте интернет-магазина Joomshopping, создатели разместили вывод описания категории над списком товаров категории, из-за чего посетитель должен скролить вниз, чтобы увидеть товары. Названия категорий и товаров вместе с кратким описанием находятся по умолчанию справа от картинки категории или товара, что тоже не всегда удобно.
Сразу хочу сказать, что все изменения мы будем вносить в файлы php компонента Joomshopping, которые отвечают за вывод функций , в связи с чем будут продемонстрированы конкретные примеры в виде фрагментов модифицированного кода и в виде скриншотов того, что получилось в итоге.

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

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

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

В базовом коде компонента, по умолчанию, описание категории находится слева от изображения категории. При создании или изменении интернет-магазина, многие хотят, чтобы описание категории находилось непосредственно под изображением. Чтобы это сделать, нам нужно подключиться к хостингу с помощью FTP-клиента и добраться к файлу category_default.php, который находится по пути /www/site.com/components/com_jshopping/templates/default/category

В этом файле находим такой фрагмент - <?php print $this->category->description?> - вот этот код как раз и выводит описание категории, вырезаем и перемещаем его, как показано в коде ниже:

<?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 - краткое описание товаров в категории размещаем под картинками товаров

Размещение описания под кнопкой "купить" на странице товара 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  :)

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

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