Импортируем RSS каналы в VaM Shop при помощи библиотеки jQuery

[VaM 364]

В данной статье я покажу лишь один простой и понятный способ использования библиотеки 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-toolbox.com/JTicker/JTicker_Script_Only.zip'>http://www.jasons-toolbox.com/JTicker/JTicker_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",'>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",'>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 информации с внешних источников у себя в магазине.