Писать на форуме DIAFAN.CMS могут только зарегистрированные пользователи. Войдите или зарегистрируйтесь.
При добавление в корзину добавить временное окошко, о том что товар добавлен в корзину.
-
- Степан (idxdoc)
- 334
-
24 января 2015 г.
-
И такое же окошко, при нажатии на сердечко.
-
-
-
-
24 января 2015 г.
-
1. Можно добавить в шаблон следующий блокКод
<div id="black"></div>
<div id="modal_shop">
<div class="modal_shop">
<div class="modal_name">Товар добавлен в корзину</div>
<div class="modal_link">
<a href="#" class="modal_close">Продолжить покупки</a>
<a href="/shop/cart/?link=modal" class="modal_cart">Перейти в корзину</a>
<div class="clear"></div>
</div></div>
</div>
2. СтилиКод
#black {position:fixed; top:0; left:0; z-index:50000; background:#000; height:100%; width:100%; opacity:0.8; display:none;}
#modal_shop{width:400px;position:fixed;display:none;z-index:50000;background:#FFF;border-radius:10px;box-shadow:0 0 15px #000;top:150px;left:50%;margin-left:-200px}
.modal_shop{padding:30px}
.modal_name{text-align:center;font-size:18px;padding:0 0 20px}
.modal_close{display:block;float:left;width:160px;padding:10px 0;border-radius:3px;background:green;color:#FFF;font-size:14px;text-decoration:none;text-align:center}
.modal_cart{display:block;float:right;width:160px;padding:10px 0;border-radius:3px;background:#CC0000;color:#FFF;font-size:14px;text-decoration:none;text-align:center}
.modal_close:hover,.modal_cart:hover{color:#FFF !important;opacity:0.8}
3. Правим файл modules/shop/js/shop.buy_form.phpКод
/*В любое место*/
$(".modal_close").click(function(){
$("#modal_shop, #black").fadeOut("slow");
return false;
});
$("input[action=buy]").click(function() {
$(this).parents('form').find('input[name=action]').val('buy');
$(this).parents('form').submit();
$("#modal_shop, #black").fadeIn("slow");setTimeout(function(){$("#modal_shop, #black").fadeOut("slow");},5000);
});
Вроде всё -
-
Поблагодарили: Dmitry (weissfl), Дмитрий (taddi)
-
-
-
24 января 2015 г.
-
Пример тут http://www.komfort-son.ru/shop/pledy/traquair-dark13/
-
-
-
-
- Степан (idxdoc)
- 334
-
24 января 2015 г.
-
Благодарю
-
-
-
-
- Denis (Drachoon)
- 154
-
25 января 2015 г.
-
Код
<form method="post" action="http://www.komfort-son.ru/" class="login">
<input type="hidden" name="action" value="auth">
<<input type="text" name="name" placeholder="Имя пользователя" autocomplete="off">
Одна скобка треугольная лишняя в всплывающей форме авторизации. -
-
-
-
- Андрей (R4W)
- 140
-
26 января 2015 г.
-
Хорошо бы чтобы кнопка "продолжить покупки" вела на previous page например или на 1 уровень выше в иерархии каталога :)
-
-
-
-
-
26 января 2015 г.
-
Подскажите пожалуйста неопытному куда именно добавлять какой шаблон? (Можно добавить в шаблон следующий блок) и стили куда прописывать?
-
-
-
-
26 января 2015 г.
-
Спасибо разобрался. Код нужно вставлять в site.php который находится в папке дизайна, стили в той же папке css ну и дальше все как написано... для кого то это покажется смешным но когда нет опыта то возникают и не такие вопросы :)
Александр Биг Эпл (ba5) подскажите на примере сайта который вы указали http://www.komfort-son.ru/shop/pledy/traquair-dark13/ есть таблица по принципу ( вкладки на jQuery) доставка, уход, отзывы - очень хорошая вещь много информации и мало места.
Внимание вопрос уважаемые знатоки: Как это сделать?
Я сделалКод<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Вкладки со скошенными углами | pcvector.net</title>
<link rel="shortcut icon" href="/favicon.ico" />
<style>
html{
background: #222 url(bg.png);
}
body{
width: 600px;
margin: 100px auto 0 auto;
font-family: 'Trebuchet MS', Arial, Helvetica;
font-size: small;
}
h2, h3, p{
margin: 0 0 15px 0;
}
#tabs{
overflow: auto;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
#tabs li{
margin: 0;
padding: 0;
float: left;
}
#tabs a{
-moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
background: #ad1c1c;
background: -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
text-shadow: 0 1px 0 rgba(0,0,0,.5);
color: #fff;
float: left;
font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
height: 35px;
padding: 0 30px;
text-decoration: none;
}
#tabs a:hover{
background: #c93434;
background: -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);
background: -ms-linear-gradient(220deg, transparent 10px, #c93434 10px);
background: -o-linear-gradient(220deg, transparent 10px, #c93434 10px);
background: linear-gradient(220deg, transparent 10px, #c93434 10px);
}
#tabs a:focus{
outline: 0;
}
#tabs #current a{
background: #fff;
background: -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);
background: -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
background: -o-linear-gradient(220deg, transparent 10px, #fff 10px);
background: linear-gradient(220deg, transparent 10px, #fff 10px);
text-shadow: none;
color: #333;
}
#content{
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(top, #fff, #ddd);
-moz-border-radius: 0 2px 2px 2px;
-webkit-border-radius: 0 2px 2px 2px;
border-radius: 0 2px 2px 2px;
-moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
-webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
padding: 30px;
}
/* Remove the rule below if you want the content to be "organic" */
#content div{
height: 220px;
}
/* --- */
#about{
color: #999;
}
#about a{
color: #eee;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#content div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#content div:first").fadeIn(); // Show first tab content
$('#tabs a').click(function(e) {
e.preventDefault();
$("#content div").hide(); //Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
});
})();
</script>
</head>
<body>
<ul id="tabs">
<li id="current"><a href="#" title="tab1">Один</a></li>
<li><a href="#" title="tab2">Два</a></li>
<li><a href="#" title="tab3">Три</a></li>
<li><a href="#" title="tab4">Четыре</a></li>
</ul>
<div id="content">
<div style="display: block;" id="tab1">
<h2>Django (Джанго)</h2>
<p>Свободный фреймворк для веб-приложений на языке Python. Изначально проект был создан для управления новостными сайтами LJWorld.com, lawrence.com и KUsports.com, принадлежащими компании The World Company (Лоуренс, Канзас (en), США).</p>
<p>Сайт на Django строится из одного или нескольких приложений, которые рекомендуется делать отчуждаемыми и подключаемыми. Это одно из существенных архитектурных отличий этого фреймворка от некоторых других (например, Ruby on Rails).</p>
</div>
<div style="display: none;" id="tab2">
<h2>Zend Framework</h2>
<p>Свободный каркас на PHP для разработки веб-приложений и веб-сервисов. Zend пытается следовать духу PHP, предоставляет простые интерфейсы и мощную функциональность для разработки приложений. Он предоставляет расширения для построения современных, быстрых и безопасных сайтов.</p>
<p>Основывается на идеях MVC. Разрабатывается компанией Zend, являющейся разработчиком самого PHP.</p>
</div>
<div style="display: none;" id="tab3">
<h2>Kohana</h2>
<p>Kohana, ранее Blue Flame, это PHP5 веб-фреймворк с открытым кодом, который использует архитектурную модель HMVC (Hierarchical Model View Controller - Иерарархические Модель-Контроллер-Вид). Его цели — быть безопасным, легким и простым в использовании.</p>
<p>Проект Kohana был создан как ветвь PHP фреймворка CodeIgniter под именем Blue Flame. Главной причиной форка был переход к более открытой для общественности модели разработки, потому, что многие пользователи были недовольны скоростью разработки и исправления ошибок в CodeIgniter.</p>
</div>
<div style="display: none;" id="tab4">
<h2>CodeIgniter</h2>
<p>Популярный MVC фреймворк с открытым исходным кодом, написанный на языке программирования PHP, для разработки полноценных веб-систем и приложений. Разработан компанией EllisLab, а также Риком Эллисом (Rick Ellis) и Полом Бурдиком (Paul Burdick).</p>
<p>Первый публичный релиз фреймворка произошел 28 февраля 2006 года. С выходом версии 2.0 28го января 2011 года CodeIgniter разделился на две ветки: CodeIgniter Core и CodeIgniter Reactor </p>
</div>
</div>
Просто создал характеристику и вставил туда html код работает, но коряво. -
-
-
-
26 января 2015 г.
-
Я вот так обычно делаю
Script
Код
$(".tab").click(function(){
tab_id = $(this).attr("id");
$(".tab").removeClass("tab_a");
$(this).addClass("tab_a");
$(".tab_d").removeClass("tab_d_a");
$("."+tab_id).addClass("tab_d_a");
});
CSS
Код
#tab_s {height:50px;}
.tab {float:left; padding:10px 20px; background:#e4efef; border-radius:3px; margin-right:10px; cursor:pointer;}
.tab:hover { background:#edf4f4;}
.tab_a {background:#FFF !important; border:3px 3px 0 0; border-left:1px #e4efef solid; border-top:1px #e4efef solid; border-right:1px #e4efef solid; cursor:text; padding-bottom:22px;}
.tab_d {display:none; border:1px #e4efef solid; padding:20px; background:#FFF; border-radius:3px;}
.tab_d_a {display:block;}
.tab_s_fix { position:fixed; top:40px; background:#FFF; width:600px; left:0; border-bottom:1px #e4efef solid; padding-top:20px; z-index:1;}
HTMLКод<div id="tab_service">
<div class="tabes">
<div id="tab_s">
<div class="tab tab_a" id="tab_01">Описание услуги</div>
<div class="tab" id="tab_02">Для кого</div>
<div class="tab" id="tab_03">Дополнительная информация</div>
</div>
</div>
<div id="tab_d">
<div class="tab_d tab_01 tab_d_a">
1
</div>
<div class="tab_d tab_02">
2
</div>
<div class="tab_d tab_03">
3
</div>
</div>
</div> -
-
-
-
26 января 2015 г.
-
Спасибо большое.
Со скриптом мне не понятно нужно создать файл js ?
Я вставил в css такой кодКод#tabs{
overflow: auto;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
#tabs li{
margin: 0;padding: 0;
float: left;
}
#tabs a{
-moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
background: #ad1c1c;
background: -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
text-shadow: 0 1px 0 rgba(0,0,0,.5);
color: #fff;
float: left;
font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
height: 35px;
padding: 0 30px;
text-decoration: none;
}
#tabs a:hover{
background: #c93434;
background: -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);
background: -ms-linear-gradient(220deg, transparent 10px, #c93434 10px);
background: -o-linear-gradient(220deg, transparent 10px, #c93434 10px);
background: linear-gradient(220deg, transparent 10px, #c93434 10px);
}
#tabs a:focus{
outline: 0;
}
#tabs #current a{
background: #fff;
background: -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);
background: -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
background: -o-linear-gradient(220deg, transparent 10px, #fff 10px);
background: linear-gradient(220deg, transparent 10px, #fff 10px);
text-shadow: none;
color: #333;
}
#content{
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(top, #fff, #ddd);
-moz-border-radius: 0 2px 2px 2px;
-webkit-border-radius: 0 2px 2px 2px;
border-radius: 0 2px 2px 2px;
-moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
-webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
padding: 30px;
}
/* Remove the rule below if you want the content to be "organic" */
#content div{
height: 220px;
}
/* --- */
#about{
color: #999;
}
#about a{
color: #eee;
}
В характеристиках создал (дополнительная информация)(поле с визуальным редактором) в html вставил такой кодКод<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$("#content div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#content div:first").fadeIn(); // Show first tab content
$('#tabs a').click(function(e) {
e.preventDefault();
$("#content div").hide(); //Hide all content$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
});
})();
// ]]></script>
<ul id="tabs">
<li id="current"><a href="#" title="tab1">Один</a></li>
<li><a href="#" title="tab2">Два</a></li>
<li><a href="#" title="tab3">Три</a></li>
<li><a href="#" title="tab4">Четыре</a></li>
</ul>
<div id="content">
<div style="display: block;" id="tab1">
<h2>Django (Джанго)</h2>
<p>Свободный фреймворк для веб-приложений на языке Python. Изначально проект был создан для управления новостными сайтами LJWorld.com, lawrence.com и KUsports.com, принадлежащими компании The World Company (Лоуренс, Канзас (en), США).</p>
<p>Сайт на Django строится из одного или нескольких приложений, которые рекомендуется делать отчуждаемыми и подключаемыми. Это одно из существенных архитектурных отличий этого фреймворка от некоторых других (например, Ruby on Rails).</p>
</div>
<div style="display: none;" id="tab2">
<h2>Zend Framework</h2>
<p>Свободный каркас на PHP для разработки веб-приложений и веб-сервисов. Zend пытается следовать духу PHP, предоставляет простые интерфейсы и мощную функциональность для разработки приложений. Он предоставляет расширения для построения современных, быстрых и безопасных сайтов.</p>
<p>Основывается на идеях MVC. Разрабатывается компанией Zend, являющейся разработчиком самого PHP.</p>
</div>
<div style="display: none;" id="tab3">
<h2>Kohana</h2>
<p>Kohana, ранее Blue Flame, это PHP5 веб-фреймворк с открытым кодом, который использует архитектурную модель HMVC (Hierarchical Model View Controller - Иерарархические Модель-Контроллер-Вид). Его цели — быть безопасным, легким и простым в использовании.</p>
<p>Проект Kohana был создан как ветвь PHP фреймворка CodeIgniter под именем Blue Flame. Главной причиной форка был переход к более открытой для общественности модели разработки, потому, что многие пользователи были недовольны скоростью разработки и исправления ошибок в CodeIgniter.</p>
</div>
<div style="display: none;" id="tab4">
<h2>CodeIgniter</h2>
<p>Популярный MVC фреймворк с открытым исходным кодом, написанный на языке программирования PHP, для разработки полноценных веб-систем и приложений. Разработан компанией EllisLab, а также Риком Эллисом (Rick Ellis) и Полом Бурдиком (Paul Burdick).</p>
<p>Первый публичный релиз фреймворка произошел 28 февраля 2006 года. С выходом версии 2.0 28го января 2011 года CodeIgniter разделился на две ветки: CodeIgniter Core и CodeIgniter Reactor</p>
</div>
</div>
Нет ли ошибок? Как вынести файл js как его обозвать? Извиняюсь за скорее всего глупые вопросы :) пока изучаю... -
-
-
-
01 июня 2018 г. , редакция: 01 июня 2018 г.
-
После установки кода, указанного в самом первом сообщении - в корзину кладет не 1, а сразу 2 товара. Происходит потому что submit() еще раз инициирует действие.
Мой вариант работает, когда удаляю строкуКод$(this).parents('form').submit();
-
-
-
-
11 августа 2015 г. , редакция: 11 августа 2015 г.
-
Ребят подскажите в чем проблема, после добавления кода перестало работать удаление из корзины...
ссылка -
-
-
-
26 марта 2019 г.
-
Здравствуйте!
Подскажите в чем может быть дело. КОд из начала темы. Стиль
#black {position:fixed; top:0; left:0; z-index:50000; background:#000; height:100%; width:100%; opacity:0.8; display:none;}
#modal_shop{width:400px;position:fixed;display:none;z-index:50000;background:#FFF;box-shadow:0 0 15px #000;top:150px;left:50%;margin-left:-200px}
.modal_shop{padding:30px}
.modal_name{text-align:center;font-size:18px;padding:0 0 20px}
.modal_close{display:block;float:left;width:160px;padding:10px 0;background:#333333;color:#FFF;font-size:14px;text-decoration:none;text-align:center}
.modal_cart{display:block;float:right;width:160px;padding:10px 0;background:#FFCE00;color:#FFF;font-size:14px;text-decoration:none;text-align:center}
.modal_close:hover,.modal_cart:hover{color:#FFF !important;opacity:0.8}
Меняю padding - ничего не меняется. Отступа снизу от кнопок нет. Куда копать? -
-
-
-
26 марта 2019 г.
-
Посмотрите стили, пропишите такие:Код
#modal_shop {
width: 450px; /* Увеличить на 50 px */
position: fixed;
display: none;
z-index: 50000;
background: #FFF;
box-shadow: 0 0 15px #000;
top: 150px;
left: 50%;margin-left: -200px;
}
/* Добавьте, у вас его нет */
.modal_link {
display: block;
margin: 0 0 15px 0;
padding: 10px;
} -
-
Поблагодарили: Дмитрий (taddi)
-
-
-
- Dmitry (weissfl)
- 161
-
27 марта 2019 г.
-
А кто нибудь подскажет, как сделать чтобы окошко появлялось не просто каждый раз при клике на кнопку "добавить в корзину", а сначала делалась бы проверка, действительно ли товар добавился в корзину. Дело в том что если включен количественный учет товаров, то если добавить больше чем есть в наличии, все равно это окошко появиться, а не должно.
-
-
-
-
- Андрей (R4W)
- 140
-
27 марта 2019 г.
-
Cмотри функцию buy cart.action.php и JS метод diafan_ajax.success()
-
-
Поблагодарили: Dmitry (weissfl)
-
-
-
Новости
-
18 июня
-
В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
-
24 апреля
-
В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
-
12 января
-
После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке.
Блоги
-
24.04.2024
-
Выпустили новую сборку DIAFAN.CMS 7.1.4.
Блоги
-
12.01.2024
-
В данном руководстве познакомим вас с панелью управления DIAFAN.CMS
Форум
-
20:10 04.10.2024
-
10:09 26.09.2024
-
17:09 23.09.2024