No replies to this topic

[support]

В данной статье я покажу лишь один простой и понятный способ использования библиотеки jQuery.

В данном случае мы рассмотрим как в интернет-магазин, построенный на базе VaM Shop, добавлять вывод RSS каналов. Это может быть любая информация: новости, статьи, товары, партнёрская программа других магазинов и т.д., вобщем, всё, что угодно, условие лишь одно, что б сайт-донор отдавал информацию в виде RSS.

Я пишу статью исходя из предположения, что у Вас установлен VaM Shop версии 1.3 и выше, шаблон по умолчанию - vamshop.

Используемые в статье материалы:
1. jQuery - http://jquery.com
2. jTicker - http://jasons-toolbox.com/JTicker
3. Моя предыдущая статья - Создаём новый бокс в VaM Shop - http://vamshop.ru/manual/ch13s04.html

В версии VaM Shop 1.3 и выше уже установлена библиотека jQuery, скачивать нам её нет необходимости.

Первое, что нам нужно сделать - загрузить модуль jTicker по ссылке - http://www.jasons-to...Script_Only.zip

Переписываем из архива файл jticker.js и папку магазина /jscript/jquery/plugins

Всё необходимое для работы у нас есть, теперь нам нужно создать новый бокс в магазине, для этого будет использовать материалы статьи http://vamshop.ru/manual/ch13s04.html

Подробно описывать процедуру создания бокса по второму разу я не буду, я лишь приведу код, который нужно добавить в магазин для нового бокса. Подробное описание процедуры создания нового бокса в VaM Shop Вы можете найти в статье - http://vamshop.ru/manual/ch13s04.html

Итак, мы создаём новый бокс для импорта RSS.
Создаём файл /templates/vamshop/source/boxes/rss.php со следующим содержимым:

<?php

// reset var
$box = new vamTemplate;
$box_content='';
$box->assign('tpl_path','templates/'.CURRENT_TEMPLATE.'/');

$box_content = MY_BOX_CONTENT;

$box->assign('BOX_CONTENT', $box_content);

$box->caching = 0;
$box->assign('language', $_SESSION['language']);
$box_admin= $box->fetch(CURRENT_TEMPLATE.'/boxes/box_rss.html');
$vamTemplate->assign('box_RSS',$box_admin);

?>

Создаём файл /templates/vamshop/boxes/box_rss.html со следующим содержимым:

{config_load file="$language/lang_$language.conf" section="boxes"}

<script type="text/javascript" src="jscript/jquery/jquery.js"></script>
<script type="text/javascript" src="jscript/jquery/plugins/jticker.js"></script>
{literal}
<script type="text/javascript">
$(document).ready(function() {
$("#boxRssContent").jticker({
delay: 4000,
newwindow: true,
url: "http://vamshop.ru/support/modules/smartsection/backend.php?categoryid=1",
transition: "fade",
speed: "slow"
});
});
</script>
{/literal}
<!-- Бокс rss импорт -->
<div id="boxRss">
<h5>{#heading_rss#}</h5>

<div id="boxRssContent">
{#heading_rss#}
</div>

</div>
<!-- /Бокс rss импорт -->

Здесь я остановлюсь и расскажу подробнее.
В шаблон бокса мы подлючаем библиотеку jQuery, модуль jTicker следующими строками:

<script type="text/javascript" src="jscript/jquery/jquery.js"></script>
<script type="text/javascript" src="jscript/jquery/plugins/jticker.js"></script>


А настраиваем модуль jTicker с помощью:

{literal}
<script type="text/javascript">
$(document).ready(function() {
$("#boxRssContent").jticker({
delay: 4000,
newwindow: true,
url: "http://vamshop.ru/support/modules/smartsection/backend.php?categoryid=1",
transition: "fade",
speed: "slow"
});
});
</script>
{/literal}


Здесь мы указывает адрес RSS канала, в нашем примере это статьи на сайте поддержки пользователей http://vamshop.ru/support
Указываем и другие параметры. Подробно их рассматривать не будет, понятное и простое описание jTicket доступно на официальном сайте - http://www.jasons-toolbox.com/JTicker/

В файле /templates/vamshop/source/boxes.php после:

include(DIR_WS_BOXES . 'categories.php');


Добавляем:

include(DIR_WS_BOXES . 'rss.php');

В шаблон /templates/vamshop/index.html подключаем наш новый бокс, например после:

{$box_ADMIN}


Добавляем:

{$box_RSS}

В файл стилей /templates/vamshop/stylesheet.css добавляем новые стили для нашего бокса:

/*- Бокс rss статьи */
#boxRss
{
text-align: left;
margin-bottom: 0.2em;
margin-top: 0.2em;
margin-right: 0.2em; /* отступ от правого края браузера */
padding-top: 0.2em;
padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #67748B;
}

/*- Заголовок бокса rss статьи */
#boxRss h5
{
display: block;
font: 12px Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
color: #006600;
border-bottom: 2px #e5e5e5 solid;
background: url(img/box.gif) no-repeat left center;
margin: 0 0 .4em .3em;
padding: .1em 0 0 16px;
}
/*- /Заголовок бокса rss статьи */

/*- Содержимое бокса rss статьи */
#boxRssContent
{
padding-left: 1em;
}

#boxRssContent p
{
margin: 0 0 0 0;
text-align: left;
}

/*- /Содержимое бокса rss статьи */

/*- /Бокс rss статьи */

и последний шаг, в файл /lang/russian/lang_russian.conf после:

[boxes]
heading_add_a_quickie ='Быстрый заказ'


добавляем текст заголовка нашего нового бокса:

heading_rss= 'Статьи'

Вот, собственно, и всё.
Мы сделали вывод любой RSS информации с внешних источников у себя в магазине.