Плавающая корзина для вашего магазина! - [VM1] Дизайн, оформление

А как быстро сделать демку без денежных затрат? Просто я не думал раньше об этом.

Нужно убрать не используемые slick

<script type="text/javascript">
$(document).ready(function($){
	$('#slick-2').dcSlick({
			location: 'right',
			align: 'top',
			offset: '250px',
			speed: 'fast',
			tabText: 'Оформить вашу покупку',
			autoClose: true
	});
});
</script>

чтобы она всегда была на глазах и при прокручивании страницы оставалась на одном и том же месте

Ну плавающая я так понял плавать должна по сайту. В Вашем же случае порнография. Ваше решение делается стилями CSS.
Сделайте демку посмотрим.  Просить денег не стоит.

Ну так уберите все slick, кроме того номера, что используется у вас, slick 2

Плавающая - именно так народ ищет решение именно такой задачи. Если вам нужна порнография, то вы сможете посмотреть вот тут - porntube.ru. "Решение делается стилями CSS" - пока я не пнул сообщество - никаких дельных советов ни один форумчанин не дал. Если у вас есть решение - выкладывайте и нечего тут выкаблучиваться. А манию величия я давно заметил у многих жителей этого форума. Если проф. в своем деле - помоги другим. Именно для этого создаются подобные форумы. Никого не хотел обидеть. И при чем тут "Просить денег не стоит"?? Где я лично с вас попросил денег?

Ребят, вопрос ей-Богу из области фантастики "для начинающих". zmancer прав. Но, привожу решение. Минут 7-8 ушло с учётом того, что чуток усложнил задачу с ховером  :
templates/шаблон/index.php:

Код: html4strict

<div id="floated">
    Превед! Йа плавающий блок!
    <jdoc:include type="modules" name="" style="" />
</div>

templates/шаблон/css/template.css:

Код: css

#floated {
	position:fixed; top:50px; width:100px; padding:10px;
	right:-80px; background:#aaa;
}
#floated:hover {
	cursor:pointer; color:#fff;
	right:0; background:#080;
}

Плавный выезд и прочие свистелки это + 1-2 строчки jQuery написать.

пока я не пнул сообщество

А как быстро сделать демку без денежных затрат?

Распространяя ссылки на порно сайты вам наверно не место здесь?

Если у вас не подключен jquery - то подключаем.

"Решение делается стилями CSS" - пока я не пнул сообщество - никаких дельных советов ни один форумчанин не дал. Если у вас есть решение - выкладывайте и нечего тут выкаблучиваться.

100 кБ. - копейки, тем более браузеры уже научились не подгружать повторно библиотеку, если она стянута хоть с одного сайта.

И по поводу репозитория тоже можно долго спорить.

А что у вас за шаблон?

Думаю, что вы тоже в начале своего обучения использовали функции "копировать" и "вставить". Или вы сразу родились таким и уже все знали?

Плавающая - именно так народ ищет решение именно такой задачи.

Если у вас есть решение - выкладывайте и нечего тут выкаблучиваться. А манию величия я давно заметил у многих жителей этого форума. Если проф. в своем деле - помоги другим. Именно для этого создаются подобные форумы.

Да проверял я уже..
Оглянитесь - многие тянут "дополнительные библиотеки" и что теперь?
Перепишите часть функционала и выложите решение. Я в этом пока не силен.
Для многих на этом форуме даже фраза "прикрутить на уровне шаблона" вызывает эпилептический припадок. Некоторые учатся разбирая готовый код, используют его как пример. Слово "тупые" оскорбительно для них. Думаю, что вы тоже в начале своего обучения использовали функции "копировать" и "вставить". Или вы сразу родились таким и уже все знали?
По вашей просьбе добавил информацию о дополнительных 100 кб.

Уважаемый beagler, прошу либо удалить эту тему, если она не соответствует правилам форума, либо не допускать оффтопа и оскорблений по отношению к другим участникам форума.

Плавающая корзина для вашего магазина!
-------------------------------------------------
Искал на форуме, не нашел. Многие тоже ищут.
Решил разобраться в этом вопросе и помочь другим.
-------------------------------------------------
Цель: получить плавающую корзину, чтобы она всегда была на глазах и при прокручивании страницы оставалась на одном и том же месте.
Важно! (по просьбе NightGuard)

Спойлер

[свернуть]

Шаг 01
********************************************
Идем сюда http://www.designchemical.com/lab/jquery-slick-plugin/examples/ и смотрим какие возможности можно получить используя волшебный скрипт.
Скрипт можно скачать отсюда http://efimov.ws/assets/files/develop/2011/07/jquery-slick.1.2.zip.
У меня, без особых стараний, получилось так:

Спойлер

[свернуть]

Обратите внимание на Slick 2 - будем работать с ней.
Берем с архива dcslick.css и кладем сюда: ВАШ_САЙТ/templates/ВАШ_ШАБЛОН/css/
Берем с архива jquery.slick.1.2.min.js и кладем сюда: ВАШ_САЙТ/js/
Естественно можете пихать их куда угодно. Только запомните путь.

Шаг 02
********************************************
Подключаем CSS и скрипт js к основному файлу шаблона. Ищем в папке с шаблоном (ВАШ_САЙТ/templates/ВАШ_ШАБЛОН/) index.php и между тегами <head> и </head> вписываем:
<link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/dcslick.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo $this->baseurl ?>/js/jquery.slick.1.2.min.js"></script>

Если у вас не подключен jquery - то подключаем.

Спойлер

[свернуть]

Шаг 03
********************************************
Файлы распиханы, скрипты подключены? Тогда идем дальше. Если вы закрыли index.php - самое время его открыть снова.
Опять же, между тегами <head> и </head> вставляем:

Код

<script type="text/javascript">
$(document).ready(function($){
	$('#slick-2').dcSlick({
			location: 'right',
			align: 'top',
			offset: '250px',
			speed: 'fast',
			tabText: 'Оформить вашу покупку',
			autoClose: true
	});
});
</script>

Вот в этом блоке наш slick 2 и часть его настроек:
 

Код

 $('#slick-2').dcSlick({
			location: 'right',
			align: 'top',
			offset: '250px',
			speed: 'fast',
			tabText: 'Оформить вашу покупку',
			autoClose: true

Вот это offset: '250px', например - отступ сверху страницы
Вот это tabText: 'Оформить вашу покупку', - текст на закладке
autoClose: true - автозакрытие
Поэксперементируйте сами.

Шаг 03
********************************************
Теперь идем в наш dcslick.css, который мы закинули в каталог сайта ранее:
Приведу часть настроек, которые я изменял (отмечено зеленым). Вы можете использовать и другие настройки.

.dc-slick {
width: 260px; /* Ширина контента */
height: none;
background: #f70; /* Цвет контента */
padding: 10px; /* Отступ от краев */
font-family: Arial;
*****
.dc-slick .dc-slick-content {
overflow: auto; /* Required for content that may exceed browser width/height */
color: #fff; /* Цвет текста в контенте */
height: 160px; /* высота контента */
*****
.dc-slick .tab {
cursor: pointer;
font-size: 14px; /* Размер шрифта текста закладки */
line-height: 12px;
background: #f70; /* Цвет закладки */
padding: 10px;
color: #fff; /* Цвет текста на закладке */
font-weight: bold;
}
.dc-slick, .dc-slick .tab {
border: 3px solid #000; /* Цвет границы */

Думаю ясно что закладка - это то, что видно в начале. А контент - это то, что появляется при нажатии на закладку.

Шаг 03
********************************************
Осталось воткнуть div на сайт.
И снова здравствуй index.php
Сначала думал куда же воткнуть этот злощастный код?
Воткнул перед footer. У меня шаблон собран в artisteer, поэтому нашел:

Код

<div class="art-footer">

и сразу после него вставил еще один div:

Код

<div id="slick-2"><a href="">Ссылка на корзину</a>
</div>

Внутри него можете понапихать чего угодно. Но мы условились на добавлении ссылки на корзину. Открываем корзину в браузере. Копируем ссылку и вставляем между кавычками a href=""

FINISH
********************************************
Проверяем работу