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

CSS - полезные решения для шаблонов и компонентов

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

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

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

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

Все изменения приведены на примере последней версии 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?>

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

joomshopping - размещение описания категории под изображением категории

Напомню, что для редактирования 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  :)

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

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

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

Комментарии   

#7 Артур 15.08.2016 10:33
Спасибо, Бро. Все получилось )))
#6 Вадиим 20.11.2014 18:49
Здравствуйте! У меня вопрос. В моем магазине в карточке товара характеристики выводятся ниже цены. Исходя из Вашего метода, что бы выводить их выше цены мне необходимо войти в файл product_default .php, найти код выводящий цену и перенести его ниже кода выводящего описание и характеристики. У меня вопрос, подскажите, какой именно код отвечает за вывод цены, а какой за вывод опций и характеристики. Проще после какого кода я должен вставить код цены. Заранее благодарен!
-1 #5 Руслан 16.11.2014 23:19
Здравствуйте!Кр уто когда разбираешься в коде) нужна помощь,никак не могу разгадать одну задачу.Скачал шаблон для джумлы,установи л куикстарт.(jsho pping уже установлен) все хорошо,только вот на странице товара,когда нажимаешь "увеличить изображение" фото открывается в новом окне,а мне нужен стандартный вывод изображения не покидая страницу товара.как это поменять,помоги те пож-ста!!!???
+2 #4 Vitalii 07.10.2014 19:16
Здравствуйте! Кто-то знает как сделать правильную структуру url на joonshopping.
У меня пропадает в УРЛ главный раздел с переходом на страницу с карточкой товара:
http:site//Фотоаппарат/оптика/кенон2005.html
В итоге в УРЛ слово Фотоаппарат исчезает и ссылка набирает вид:
http:site//оптика/кенон2005.html
Это не хорошо для продвижения, если кто-то знает как решить данную проблему, буду очень рад за рекомендации или совет!
+1 #3 György 23.09.2014 22:39
Цитирую Татьяна:
добрый день.
подскажите, пож, где поменять фон страницы с товарами. Мне надо вставить туда фоновую картинку.


Здравствуйте, компонент интернет-магази на Joomshopping имеет свои собственные шаблоны, по умолчанию стоит тема default. Кстати, можете подобрать себе шаблон для Joomshopping от студии (можно погуглить), думаю, это будет проще, чем фон ставить.

А о том как менять фон темы магазина - это уже отдельный разговор на отдельную статью...
+1 #2 Татьяна 22.09.2014 14:32
добрый день.
подскажите, пож, где поменять фон страницы с товарами. Мне надо вставить туда фоновую картинку.
+1 #1 Ольга 24.07.2014 23:09
Здравствуйте, спасибо большое за статью все очень понятно написано! Единственное при переносе строки фото получается сбоку, хотелось бы по центру, как можно исправить?