Категории

Делаем корзину раздвижной ShopOs

Установка!
В индех

<div class="slide-out-div">
<a class="handle" href="{$cart}">Корзина</a>
<a href="{$cart}"><h3>Корзина</h3></a>
<p>{$box_CART}</p>
<p align="center"></p><a href="{$checkout}"><h3>{#link_checkout#}</h3></a><p></p>
</div>

В general.js.php

в style.css

/****** корзина ******/
.slide-out-div {
padding: 20px;
width: 250px;
background-image: url(img/cartbg.jpg);
background-repeat: repeat-x;
background-color: #EAE7D4;
border: #b9b9b9 1px solid;
}
/****** корзина ******/

box_cart.html

{config_load file="$language/lang.conf" section="boxes"}
{if $deny_cart neq 'true'}

<script type="text/javascript" src="jscript/jscript_ajax_cart.js"></script>
<div id="divShoppingCart">

<table class="adn"><tr><td class="hdb vcent">
<table border="0" width="100%" cellspacing="0" cellpadding="1">
<tr>
<td>
<table border="0" width="100%" cellspacing="0" cellpadding="3">
<tr>
<td >

<table border="0" width="100%" cellspacing="0" cellpadding="0" >
{if $empty=='false'}
<tr >
<td width="100%" align="left">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
{foreach name=aussen item=products_data from=$products}
<tr>
<td align="left"> {$products_data.QTY} x </td>
<td width="100%" align="left"><a href="{$products_data.LINK}" title="{$products_data.NAME}">{$products_data.NAME|os_truncate:$smarty.const.MAX_DISPLAY_CART:"...":true}</a></td>
</tr>
{/foreach}
</table>

</td>
<td align="center">
<img src="{$tpl_path}img/cart_big_full.gif" alt="" hspace="0" vspace="3" />
</td>
</tr>

{if $DISCOUNT}
<tr class="cartBox">
<td colspan="2" align="right" class="productDiscountPrice">{#text_discount#} {$DISCOUNT}</td>
</tr>{/if}
<tr class="cartBox">
<td colspan="2" align="center"><a href="{$LINK_CHECKOUT}">{#text_checkout#}</a></td>
</tr>
{else} 
<tr class="cartBox">
<td width="100%" class="cartBoxContents" align="right">
{#text_empty_cart#}
</td>
<td align="center">
<img src="{$tpl_path}img/cart_big_empty.gif" alt="" hspace="0" vspace="3" />
</td>
</tr>
{/if}

{if $empty=='false'}
<tr class="cartBox1">
<td colspan="2" class="cartBox1">
<table width="100%" cellspacing="0" cellpadding="0" class="cartBox1">
<tr>
<td width="100%" class="cartBoxContents" align="right"></td>
<td class="price"><nobr> {$UST}<strong>{#text_total#}</strong> {$TOTAL} </nobr></td>
</tr>
</table>
</td>
</tr>
{else} 

{/if}
</table>

</td>
</tr>

</table>
</td>
</tr>
</table>
</td></tr></table>
</div>

{/if}

Картинки и jquery.tabSlideOut.v1.3.js в архиве!

Забыл демо ))) _ttp://komuvoda.ru/

Спасибо, все отлично!!!

Подскажите, у меня в шаблолне shopblue съехали снизу края что в корзине , что в поиске . Как это можно подправить

скрин меняете а то не возможно смотреть 10мб :o

Вот.

Удалите с index.html эти 2 метки! {box_cart} и {box search}

Удалил ,прокешил, с корзиной стало все в порядке, а поиск не изменился.

надо еще box_cearch.html поправить!

Если не сложно подскажите что там именно подправить?

Вот став посмотри

{config_load file="$language/lang.conf" section="boxes"}
{$FORM_ACTION}
<table class="adn"><tr><td class="hdb vcent">

<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td class="infoBox" align="left"><table width="95%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td class="blockTitle">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td valign="middle">{$INPUT_SEARCH}</td>
<td valign="middle" width="100%">{$BUTTON_SUBMIT}</td>
</tr>
<tr>
<td colspan="2"><div class="ajaxQuickFind" id="ajaxQuickFind" style="text-align: left;"></div>
</td>
</tr>
</table>
<br />
<a href="{$LINK_ADVANCED}">{#text_advanced_search#}</a> </td>
</tr>
</table></td>
</tr>
</table>
</td></tr></table>
{$FORM_END}
{literal}
<script language="javascript" type="text/javascript">
function ajaxQuickFind(elt) {
// if(ajaxQuickFindUpForm.keywords.value.length > 2)
loadXMLDoc('ajaxQuickFind', hashFormFields(ajaxQuickFindUpForm), true);
}
var timeout = null;
var ajaxQuickFindUpForm = null;
function ajaxQuickFindUp(elt) {
ajaxQuickFindUpForm = elt.form;
if (timeout) clearTimeout(timeout);
timeout = setTimeout('ajaxQuickFind()', 500);
}
</script>
{/literal}

;D Спаибо,! все стало в норме

Хэлп. Всё вписал, скопировал. Корзина вставляется блоком, всё раздвигая на странице. Как сделать чтобы она всё таки выезжала. Или я что то не туда вставляю.....

Подскажите а как сделать чтобы корзина была справа?

надо в место tabLocation: 'left', написать tabLocation: 'right', и картинку подогнать!<script src="<?php echo _HTTP_THEMES_C; ?>javascript/jquery.tabSlideOut.v1.3.js"></script>
<script type="text/javascript">
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle',
pathToTabImage: '<?php echo _HTTP_THEMES_C; ?>img/cart_tab.png',
imageHeight: '122px',
imageWidth: '40px',
tabLocation: 'left',
speed: 300,
action: 'click',
topPos: '200px',
leftPos: '20px',
fixedPosition: true
});

});
</script>

Такая же проблема. Как будто скрипт не запускается (или руки кривые:), а вставляется только блок в индексе. Где может быть ошибка?
Скачал из архива файл скрипта в папку "javascript", скопировал файл box_cart.html в папку boxes, в индексе добавил Код из первого поста (теоретически в любое место), добавил стиль в style.css, добавил код в файл general.js.php.

Также, все добавил все прописал. Сайт http://babymarket24.ru. Не работает никак.
Подскажите.

Также, все добавил все прописал. Сайт http://babymarket24.ru. Не работает никак.
Подскажите.

У вас по этой ссылке пусто
<script src="http://babymarket24.ru/themes/babymarket/javascript/jquery.tabSlideOut.v1.3.js"></script>
смотрите все правильно сделали?

Все по инструкции, файл на месте, уже и 777 дал ему. и перезаливал несколько раз.

Теперь файл видно. решил проблему путем изменения регистра у слов. Но в итоге все равно не работает. Куда смотреть.. везде просмотрел.

Как вы там сделали что фаил не видет

http://babymarket24.ru/themes/babymarket/javascript/jquery.tabSlideOut.v1.3.js

куда положили jquery.tabSlideOut.v1.3.js ?

файл теперь http://babymarket24.ru/themes/babymarket/javascript/jquery.tabslideout.v1.3.js без верхнего регистра.

его теперь видно. но все равно не работает.

файл теперь http://babymarket24.ru/themes/babymarket/javascript/jquery.tabslideout.v1.3.js без верхнего регистра.

его теперь видно. но все равно не работает.
Что то не вижу

в индехе нету class="slide-out-div"

делайте все по инструкции, и все заработает!

Ув. Martin спасибо за помощь. Инфу брал с вашего сайта(частенько его посещаю, не забрасывайте его, полезная информация), а там как раз вы пропустили этот класс)) Все заработало, осталось поиграться с css.

Скажите а будет ли также работать поиск и еще пару фишек на этом скрипте если он один раз уже используется корзиной? или нужно будет для каждой фитчи подключать свой js?

Спасибо что заметили, поправил, что то какой то глюк.

Скажите а будет ли также работать поиск и еще пару фишек на этом скрипте если он один раз уже используется корзиной? или нужно будет для каждой фитчи подключать свой js?

А что вам мешает пробовать ;)

Аналогично никак не получается прикрутить, хотя сделал без ошибок. Стоит блоком.
Файл скрипта доступен:
http://nsvyaz.ru/themes/cleanshop/javascript/jquery.tabSlideOut.v1.3.js
Все сделал по инструкции. Нормально работает на shopos-portable, а на реальном хостинге не хочет, хотя, все сделано идентично!

M-Martin, подскажи пожалуйста, почему может не работать, может быть в админке что-то подкрутить надо?

Не знаю, как искать точку отказа.
При загрузке главной страницы crome находит ошибки. см. скрин.

Slider

Слайдер?

Рядом с сайтом пихнул shopos-portable: http://probe.nsvyaz.ru/
корзина работает нормально.
хз... похоже, придется переинсталировать движок, навернулся похоже.
Хотя, странно, что \jscript\jquery\jquery.js в 2.5.9 и portable - весьма различаются! может дело в нем, ведь дебаг chrome именно на него кажет.

Уважаемый M-martin, хотел бы обратить Ваше внимание на проблему. По моим трехдневным изысканиям делаю вывод, что раздвижная корзина не работает на версии shopos 2.5.9.
Сам я не рублю ничего не в php, не в js. Однако, заметил следующее:
при замене папок jscript и modules в 2.5.9 на аналогичные из shopos-portabe - все работает отлично.
обратите внимание на jquery.js и на default.php
Очень прошу посмотреть, в чем же проблема.

А что за проблема? У вас на сайте работает!
причем здесь default.php, jquery.js, папоки jscript и modules?

По адресу probe.nsvyz.ru установлена 2.5.9 с jscript и modules из shopos-portable - работает.
По адресу nsvyaz.ru установлена 2.5.9 (тема немного кастомизирована) с родными папками - не работает.

у вас Jquery несколько раз включается!

попробуйте отключить блок Лучшие товары, и вообще выключите все плагины, и по одному включайте.

Помогло частично: со стандартным jquery.js не работает. (вложил два jquery.js). Ставлю от портабл - легчает.
Далее: отключение плагинов вот что показало: не работает, если включена карусель товаров или плагин от nebox "заказ звонка" с включенным jquery.
Блок лидеров продаж не влияет.

День добрый!

Прошу совета. После того, как шаблон shopblue на версию 2.5.9 и у корзины немного крыша съехала.

Атрибуты задваиваются, скрин прилагается. Куда глянуть, что подкрутить?

Заранее благодарен!

Сори дизу кинул, плывет не корзина, плывет инфа о товаре. Поправил ..\shopblue\module\product_info\product_info.html и по уже добавленному товару получил нужный результат (скрин 1), но когда новый товар добавляю, то по нему инфа плывет (скрин 2), есть подозрение что и ..\modules\product_info.php нужно править, но в каком месте?

А может быть у вас два варианта карточки товара, например \shopblue\module\product_info\product_info.html тот который вы поправили, другой вариант например \shopblue\module\product_info\product_info.111.html не правленный и новые товары выводятся именно в этом ( у меня что похожее было). Попробуйте при добавлении нового товара в разделе "Дополнительно", где указывается вес, код товара и т.д., там есть "шаблон информации о товаре" вот может нужно там шаблон поменять.

Благодарю! Вылечил!
Так и оказалось (привычка делать бэкапы сыграла шутку :) ) оригинальный файл в папке оставался с расширением .html1 его я и выбрал в качестве шаблона представления о товаре, в результате получил изначальный корявый результат. Ради интереса попробовал использовать без расширения, с расширением rar и т.п. php хавает, видимо видит, что внутри тэги и нормально обрабатывает, не думал, что он такой всеядный.
В общем спасибо за подсказку.

подскажите пожалуйста, может я что-то не то сделал.
сайт wellcom.ge

все нормально работает, только как сделать чтоб на всех страницах сайта это раздвигающее меню работало?

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

проблема решена.

был конфликт jQuery.

прочитал на форумах других вставил
<script type="text/javascript">
jQuery.noConflict();
</script>
и
заменил все $ на jQuery

если кому понадобиться, чтоб не искали)

а как сделать чтоб в раздвижной корзине открывался файл "shopping_cart.php" вместо блока корзины?

Вот у меня проблема.
Шаблон Cleanshop. Корзина показывается только админу. Для остальных снизу слева.
На шаблоне Default все нормально работает.
С чем это может быть связано?
Заранее спасибо.

:-\ Все перепробовал! Уже мозг вынес себе... все подключается и скрипты и стили, заменил все $ на jQuery и воткнул noConflict, отключил все посторонние плагины, и всеравно конфликт какойто... Обращаюсь к Вам, т.к. мозг уже закипел
http://shop.memphistours.ru

______________________________________
не работает, снес нафиг!

Как сделать, чтобы после каждого добавления товара в корзину, раздвижной блок выезжал? Реально?

реально, при помощи при помощи явы или аякса

при клике по ссылке делать событие, которое будет выдвигать корзину.
тут либо править стандартные скрипты шопоса, либо делать на jQuery. если второе, то поправить нужно будет еще и ссылки.
В нете есть готовые решения, прикрутить все нужно только.

А где изменить максимальное число символов названия товара в раздвижной корзине?

Все, нашел) В настройках магазина

После добавления в корзину идет перезагрузка страницы. Пофиг если меняю в настройках магазина Ajax-корзина.
Так и должно быть?

Нет. Если включено AJAX, то должно быть без перезагрузки, если только не перекидывает в карточку товара у которого есть атрибуты.

Может я что-то не понимаю...
Сейчас сайт в личку сброшу. Посмотрите, пожалуйста, если не трудно

Может кому пригодится)

Проблема вылечилась исправлением регистра у файлов

jscript/jscript_JsHttpRequest.js
и includes/classes/JsHttpRequest.php

Neboxу спасибо за подсказку!

Все более менее поправил, неровности и тд, но осталась одна небольшая проблема :(

Делаем корзину раздвижной ShopOs

увеличить для контейнера корзины, в классах, значение z-index

Установил все правильно, а корзина правильно не работает...
Она просто висит слева и не убирается и не выдвегается и нету картинки "корзина"!
В чем может быть проблема???

Возможные варианты:
- неправильно подключена (прописана) библиотека jquery
- неправильно подключен (прописан) js
- неправильно прописаны классы
- конфликт js скриптов из-за переменной $

У меня возникла такая проблема теперь, на большинства страницах корзина работает как надо, а на остальных она где то на сайте просто висит и не задвигается и не выдвигается. В чем проблема???

Значит проблема сужается до конфликта js скриптов из-за переменной $
Попробуй отключить в админке Jquery

Значит проблема сужается до конфликта js скриптов из-за переменной $
Попробуй отключить в админке Jquery

отключил Jquery и корзина стала висеть на всех страницах, а что если попробовать поменять $ переменные на другие?

отключил Jquery и корзина стала висеть на всех страницах, а что если попробовать поменять $ переменные на другие?

Ты решил переписать библиотеку Jquery? :)
Надо java script править. Скинь, который ты использовал

/*
tabSlideOUt v1.3

By William Paoli: http://wpaoli.building58.com

To use you must have an image ready to go as your tab
Make sure to pass in at minimum the path to the image and its dimensions:

example:

$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab -doesnt have to be an anchor
pathToTabImage: 'images/contact_tab.gif', //relative path to the image for the tab
imageHeight: '133px', //height of tab image
imageWidth: '44px', //width of tab image
});

or you can leave out these options
and set the image properties using css

*/

(function($){
$.fn.tabSlideOut = function(callerSettings) {
var settings = $.extend({
tabHandle: '.handle',
speed: 300,
action: 'click',
tabLocation: 'left',
topPos: '200px',
leftPos: '20px',
fixedPosition: false,
positioning: 'absolute',
pathToTabImage: null,
imageHeight: null,
imageWidth: null,
onLoadSlideOut: false
}, callerSettings||{});

settings.tabHandle = $(settings.tabHandle);
var obj = this;
if (settings.fixedPosition === true) {
settings.positioning = 'fixed';
} else {
settings.positioning = 'absolute';
}

//ie6 doesn't do well with the fixed option
if (document.all && !window.opera && !window.XMLHttpRequest) {
settings.positioning = 'absolute';
}

//set initial tabHandle css

if (settings.pathToTabImage != null) {
settings.tabHandle.css({
'background' : 'url('+settings.pathToTabImage+') no-repeat',
'width' : settings.imageWidth,
'height': settings.imageHeight
});
}

settings.tabHandle.css({
'display': 'block',
'textIndent' : '-99999px',
'outline' : 'none',
'position' : 'absolute'
});

obj.css({
'line-height' : '1',
'position' : settings.positioning
});

var properties = {
containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
};

//set calculated css
if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
obj.css({'left' : settings.leftPos});
settings.tabHandle.css({'right' : 0});
}

if(settings.tabLocation === 'top') {
obj.css({'top' : '-' + properties.containerHeight});
settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
}

if(settings.tabLocation === 'bottom') {
obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
settings.tabHandle.css({'top' : '-' + properties.tabHeight});

}

if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
obj.css({
'height' : properties.containerHeight,
'top' : settings.topPos
});

settings.tabHandle.css({'top' : 0});
}

if(settings.tabLocation === 'left') {
obj.css({ 'left': '-' + properties.containerWidth});
settings.tabHandle.css({'right' : '-' + properties.tabWidth});
}

if(settings.tabLocation === 'right') {
obj.css({ 'right': '-' + properties.containerWidth});
settings.tabHandle.css({'left' : '-' + properties.tabWidth});

$('html').css('overflow-x', 'hidden');
}

//functions for animation events

settings.tabHandle.click(function(event){
event.preventDefault();
});

var slideIn = function() {

if (settings.tabLocation === 'top') {
obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'left') {
obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'right') {
obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'bottom') {
obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
}

};

var slideOut = function() {

if (settings.tabLocation == 'top') {
obj.animate({top:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'left') {
obj.animate({left:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'right') {
obj.animate({right:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'bottom') {
obj.animate({bottom:'-3px'}, settings.speed).addClass('open');
}
};

var clickScreenToClose = function() {
obj.click(function(event){
event.stopPropagation();
});

$(document).click(function(){
slideIn();
});
};

var clickAction = function(){
settings.tabHandle.click(function(event){
if (obj.hasClass('open')) {
slideIn();
} else {
slideOut();
}
});

clickScreenToClose();
};

var hoverAction = function(){
obj.hover(
function(){
slideOut();
},

function(){
slideIn();
});

settings.tabHandle.click(function(event){
if (obj.hasClass('open')) {
slideIn();
}
});
clickScreenToClose();

};

var slideOutOnLoad = function(){
slideIn();
setTimeout(slideOut, 500);
};

//choose which type of action to bind
if (settings.action === 'click') {
clickAction();
}

if (settings.action === 'hover') {
hoverAction();
}

if (settings.onLoadSlideOut) {
slideOutOnLoad();
};

};
})(jQuery);

и вот адрес сайта http://automarket37.ru/ , там на странице "прайс-лист" такая фигня происходит с корзиной

подскажите пожалуйста с корзиной!заранее спасибо!

Немного подкорректировал, попробуй заменить свой код, который выше, заменить этим

теперь у меня корзина стала висеть на всех страницах сайта))

я разобрался, проблема была в настройках чпу, где были длинные названия, корзина не работала, я отключил чпу кроме чпу товаров и все у меня заработало)) Yorg, спасибо за помощь!!))

У меня явный конфликт со слайдером. Как быть? чет пока не пойму

карзину починил, слайдер поломал ...

кагбэ подправил, но корзина отображается ввиде блока, если я нахожусь в карточке товара.... вот тут пока застрял ...

Народ, подскажите кто сталкивался!!

походу конфликт версий я разрешил (иначебы не отрабатывало вообще никак, изент ит?)

Из-за css может бть корявое отображение в карточке товара? (во всех других местах раздвижная корзина отображается нормально)

Корзина открывается за основным меню как сделать чтобы открывалась поверх текста.

увеличить в классе css значение z-index

а можно по подробней где это находится а то я так и не нашел.

дайте адрес магазина, напишу где и что конкретно поменять

www.steeltuning.ru

найди в файле шаблона style.css
класс
slide-out-div
и добавь туда;
z-index: 100

и картинку поменяй, она у тебя левосторонняя :)

спасибо, все заработало

Источник