support 436 Posted June 21, 2011 Report Share Posted June 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 информации с внешних источников у себя в магазине. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.