Перейти к содержимому


Встроить Поиск По Youtube На Главную

Автор vint, 24 июля 2013 17:03

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 4

#1 vint

vint

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 24 Июль 2013 - 17:03

Добрый день!
Возникла проблема с встройкой поиска по Ютуб на главной странице сайта.
Хотелось бы получить помощь в реализации подобного поиска в соответствии, например вот с таким вариантом, найденным в сети: http://pcvector.net/...po-youtube.html

Изначально, поиск задумывалось реализовать с помощью Яндекс-поиска, с фильтром поиска "по Ютуб", но корректно работать в IE этот вариант не стал - результат поиска  накладывается на страницу сайта, а не открывается как положено, в отдельной вкладке.
В итоге, пытаюсь решить проблему целевым поиском от ютуб. Ключ  YouTube API  (Developer Key) получен, но нет уверенности в успешной реализации - боюсь "накосячить".
Буду признателен за помощь, если б пошагово - что и куда "привинтить", чтобы избежать бОльших проблем потом.
Думаю, тема интересная не мне одному - многие форумчане воспользуются в будущем таким мануалом по оптимизации к магазинам на Storeland.
Спасибо.

Прикрепленные файлы


#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 25 Июль 2013 - 02:06

По данной странице все четко объяснено, какие файлы необходимы и что куда вставлять.
HTML вставляете в необходимое место в шаблоне например в тот же шаблон HTML в разделе Редактор шаблонов, CSS в шаблон main.css или style.css в зависимости от дизайн-темы, JS соответственно в main.js.

Какие у вас возникают трудности при вставке, что не работает?

#3 vint

vint

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 25 Июль 2013 - 09:04

Просмотр сообщенияVaccina (25 Июль 2013 - 02:06) писал:

По данной странице все четко объяснено, какие файлы необходимы и что куда вставлять.
HTML вставляете в необходимое место в шаблоне например в тот же шаблон HTML в разделе Редактор шаблонов, CSS в шаблон main.css или style.css в зависимости от дизайн-темы, JS соответственно в main.js.

Какие у вас возникают трудности при вставке, что не работает?
Проделано следующее:

В файл HTML вставлен код:


<!-- Скрипты магазина -->
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/tubeutil.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>

<!-- Форма поиска -->
<div class="wrapper">
<form class="blocks"
action="#" method="get">
<p><input type="text"class="search" /></p>
<p><input type="Submit" class="btn" value="Поиск" /></p>
<ul class="reset autocomplete"></ul>
</form>
<ul class="reset videos"></ul>
</div>

В конец файла main.js вставлен код:


$(function(){
jQTubeUtil.init({
key:'мой ключ ',
orderby: 'viewCount',
time: 'all_time',
maxResults: 9
});

$('.search').keyup(function(){
var val = $(this).val();
jQTubeUtil.suggest(val, function(response){
var html = '';
for(s in response.suggestions){
var sug = response.suggestions[s];
html += '<li><a href="#">'+sug+'</a></li>';
}
if (response.suggestions.length)
$('.autocomplete').html(html).fadeIn(500);
else
$('.autocomplete').fadeOut(500);
});
});


$('.btn').click(function(){
show_videos();
$('.autocomplete').fadeOut(500);
return false;
});

$('.autocomplete').find('a').live('click', function(){
var text = $(this).text();
$('.blocks').find('.search').val(text);
$('.autocomplete').fadeOut(500);
show_videos();
return false;
});

function show_videos(){
var val = $('.blocks').find('.search').val();
$('.videos').addClass('preloader').html('');
jQTubeUtil.search(val, function(response){
var html = '';
for (v in response.videos) {
var video = response.videos[v],
minutes = parseInt(video.duration / 60),
seconds = video.duration % 60;
html += '<li>';
html += '<p class="image"><a href="http://www.youtube.c...d &#39;">&#39;;
html += '<img src="' + video.thumbs[1].url + '" alt="' + video.title + '" title="' + video.title + '" />';
html += '</a></p>'
html += '<p class="entry"><a href="http://www.youtube.c...ideo.videoId ">' + video.title + '</a>';
html += '<small>' + minutes + ':' + (seconds < 10 ? '0'+seconds : seconds) + '</small>';
html += '</p>';
html += '</li>';
}
$('.videos').removeClass('preloader').html(html);
});
}

});

В конец файла main.css вставлен код, указанный в файле defoult.css:

body {
background:url(../gfx/bg.jpg) repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#666;
line-height:18px;
}

.wrapper {
width:1000px;
margin:100px auto 0;
}


ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}

.blocks {
float:left;
width:100%;
margin-bottom:50px;
position:relative;
}

.blocks p {
float:left;
margin:0;
}

.blocks .search {
float:left;
width:258px;
height:42px;
line-height:42px;
padding:0 10px;
font-size:13px;
color:#8c8c8c;
background:url(../gfx/input.png) no-repeat;
border:none;
}

.blocks .btn {
float:left;
width:71px;
height:42px;
border:none;
text-indent:-9999px;
cursor:pointer;
background:url(../gfx/btn.png) no-repeat;
}

ul.autocomplete {
display:none;
width:300px;
padding:10px;
position:absolute;
top:50px;
left:0;
background:#fff;
border:1px solid #e4e4e4;
/* CSS3 */
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

ul.autocomplete li a {
display:block;
padding:5px 10px;
font-size:11px;
outline:none;
}

ul.autocomplete li a:hover {
background:#f5f5f5;
color:#991b22;
/* CSS3 */
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}

.videos {
float:left;
clear:both;
width:100%;
min-height:200px;
}

.videos.preloader {
background:url(../gfx/loader.gif) no-repeat center;
}

ul.videos li {
float:left;
width:300px;
padding:10px;
margin:0 5px 5px 0;
}

ul.videos li p {
margin:0;
padding:0;
}

.videos .image {
float:left;
width:120px;
height:90px;
font-size:0;
line-height:0;
padding:5px;
background:#fff;
border:1px solid #E6E6E6;
overflow:hidden;
}

.videos .entry {
float:right;
width:163px;
font-weight:bold;
}

.videos .entry small {
display:block;
font-weight:normal;
color:#ACACAC;
}

a {
text-decoration:none;
color:#555;
}

a img {
border:none;
}body {
background:url(../gfx/bg.jpg) repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#666;
line-height:18px;
}

.wrapper {
width:1000px;
margin:100px auto 0;
}


ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}

.blocks {
float:left;
width:100%;
margin-bottom:50px;
position:relative;
}

.blocks p {
float:left;
margin:0;
}

.blocks .search {
float:left;
width:258px;
height:42px;
line-height:42px;
padding:0 10px;
font-size:13px;
color:#8c8c8c;
background:url(../gfx/input.png) no-repeat;
border:none;
}

.blocks .btn {
float:left;
width:71px;
height:42px;
border:none;
text-indent:-9999px;
cursor:pointer;
background:url(../gfx/btn.png) no-repeat;
}

ul.autocomplete {
display:none;
width:300px;
padding:10px;
position:absolute;
top:50px;
left:0;
background:#fff;
border:1px solid #e4e4e4;
/* CSS3 */
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

ul.autocomplete li a {
display:block;
padding:5px 10px;
font-size:11px;
outline:none;
}

ul.autocomplete li a:hover {
background:#f5f5f5;
color:#991b22;
/* CSS3 */
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}

.videos {
float:left;
clear:both;
width:100%;
min-height:200px;
}

.videos.preloader {
background:url(../gfx/loader.gif) no-repeat center;
}

ul.videos li {
float:left;
width:300px;
padding:10px;
margin:0 5px 5px 0;
}

ul.videos li p {
margin:0;
padding:0;
}

.videos .image {
float:left;
width:120px;
height:90px;
font-size:0;
line-height:0;
padding:5px;
background:#fff;
border:1px solid #E6E6E6;
overflow:hidden;
}

.videos .entry {
float:right;
width:163px;
font-weight:bold;
}

.videos .entry small {
display:block;
font-weight:normal;
color:#ACACAC;
}

a {
text-decoration:none;
color:#555;
}

a img {
border:none;
}



Также, загружены файлы, содержащиеся в приложенном архиве.

Результат - на сайте появилась форма поиска, но поиск не активен. Вообщем , в силу неграмотности или невнимательности, но не получается ничего :wacko:

#4 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 25 Июль 2013 - 18:42

Вы вставляли в html в тег <head> такие строки 
<link href="css/default.css" rel="stylesheet" type="text/css" />
		 <script src="js/jquery.js" type="text/javascript"></script>
<script src="js/tubeutil.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
1. Так как содержимое defaul.css вы добавили в main.css , то файл подключать не надо. Удалите строчку 
<link href="css/default.css" rel="stylesheet" type="text/css" />
Билбиотека jQuery подключена по умолчанию, поэтому при подключении этого файла возникает js-ошибка. Удалите строку 
<script src="js/jquery.js" type="text/javascript"></script>
В оставшихся двух строках путь до подключаемых файлов прописан неправильно.
вместо js/tubeutil.js и js/init.js должно быть {ASSETS_JS_PATH}tubeutil.js и {ASSETS_JS_PATH}init.js соответственно.
Кстати, вы в конец main.js добавили содержимое файла init.js. Поэтому надо либо удалить этот код из main.js, либо не подключать файл init.js

#5 vint

vint

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 26 Июль 2013 - 06:07

Просмотр сообщенияsengun (25 Июль 2013 - 18:42) писал:

Вы вставляли в html в тег <head> такие строки 
<link href="css/default.css" rel="stylesheet" type="text/css" />
		 <script src="js/jquery.js" type="text/javascript"></script>
<script src="js/tubeutil.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
1. Так как содержимое defaul.css вы добавили в main.css , то файл подключать не надо. Удалите строчку 
<link href="css/default.css" rel="stylesheet" type="text/css" />
Билбиотека jQuery подключена по умолчанию, поэтому при подключении этого файла возникает js-ошибка. Удалите строку 
<script src="js/jquery.js" type="text/javascript"></script>
В оставшихся двух строках путь до подключаемых файлов прописан неправильно.
вместо js/tubeutil.js и js/init.js должно быть {ASSETS_JS_PATH}tubeutil.js и {ASSETS_JS_PATH}init.js соответственно.
Кстати, вы в конец main.js добавили содержимое файла init.js. Поэтому надо либо удалить этот код из main.js, либо не подключать файл init.js
Все заработало! Просто отлично!
Спасибо за оперативность и терпимость к моей неграмотности в html и css :D
Обратно в Главная


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Техника
  5. → Главная
  6. Privacy Policy