support 447 Опубликовано 21 июня, 2011 Жалоба Share Опубликовано 21 июня, 2011 В данной статье я покажу лишь один простой и понятный способ использования библиотеки 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 информации с внешних источников у себя в магазине. Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения