Доброго времени суток.
Решил добавить на сайт возможность сделать Мой выбор (аналог отложить товар).
Сделал через куки на jquery. Может конечно криво, но вроде работает, кроме 3 моментов.
Есть страница детальная - карточка и страница Мой выбор.
Суть: на детальной странице есть кнопка Мой выбор. Нажимаем и этот "товар" появляется на странице Мой выбор.
Вот кусок кода детальной страницы
<span id="no-a" style="cursor:pointer;" onclick="add();"><i class="fa fa-heart-o" aria-hidden="true"></i> Мой выбор</span>
<span id="add" style="cursor:pointer;" ><i class="fa fa-heart" aria-hidden="true"></i> Выбран </span>
<style>
#add{display:none;}
</style>
<!--выше и ниже обычные переменные для вывод на детальной странице, их смысла писать нет.-->
<div id="title" style="display:none;"><?php echo $title;?></div>
<div id="mesto" style="display:none;"><?php echo $this->item->address;?></div>
<div id="img" style="display:none;">/images/bt_property/<?php echo $this->item->id;?>/original-<?php echo $this->item->image;?></div>
<div id="rib" style="display:none;"><?php echo $this->item->ribbon;?></div>
<div id="looke" style="display:none;"><?php echo $this->item->hits;?></div>
<div id="opisan" style="display:none;"><?php echo $this->item->description;?></div>
<span id="cennik" style="display:none;"><?php echo $this->item->price; ?></span>
<script type="text/javascript" src="<?php echo JURI::root(); ?>/components/com_bt_property/assets/js/jQuery.js"></script>
<script type="text/javascript" src="<?php echo JURI::root(); ?>/components/com_bt_property/assets/js/jquery.cookie.js"></script>
<script type="text/javascript">
var flag = true;
function getCookie(name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
if(getCookie("count")){
var arrs;
var n = Number(getCookie("count"));
var jsontext;
for(var i = 0 ; i <= n; i++){
arrs = JSON.stringify(getCookie(i.toString()));
jsontext = getCookie(i.toString());
var contact = JSON.parse(jsontext);
if(contact.src_title == document.location.href)
{
flag = false;
}
}
}
if(!flag){
document.getElementById("no-a").style.display="none";
document.getElementById("add").style.display="inline-block";
}
function array2json(arr) {
var parts = [];
var is_list = (Object.prototype.toString.apply(arr) === '[object Array]');
for(var key in arr) {
var value = arr[key];
if(typeof value == "object") { //Custom handling for arrays
if(is_list) parts.push(array2json(value)); /* :RECURSION: */
else parts[key] = array2json(value); /* :RECURSION: */
} else {
var str = "";
if(!is_list) str = '"' + key + '":';
//Custom handling for multiple data types
if(typeof value == "number") str += value; //Numbers
else if(value === false) str += 'false'; //The booleans
else if(value === true) str += 'true';
else str += '"' + value + '"'; //All other things
// :TODO: Is there any more datatype we should be in the lookout for? (Functions?)
parts.push(str);
}
}
var json = parts.join(",");
if(is_list) return '[' + json + ']';//Return numerical JSON
return '{' + json + '}';//Return associative JSON
}
function add(){
var data = {
"title":document.getElementById("title").innerHTML,
"src_title":document.location.href,
"img":document.getElementById("img").innerHTML,
"mesto":document.getElementById("mesto").innerHTML,
"rib":document.getElementById("rib").innerHTML,
"looke":document.getElementById("looke").innerHTML,
"opisan":document.getElementById("opisan").innerHTML,
"cennik":document.getElementById("cennik").innerHTML,
};
var json = array2json(data);
var n;
document.getElementById("no-a").style.display="none";
document.getElementById("add").style.display="inline-block";
if(getCookie("count")){
n = Number(getCookie("count")) + 1;
}
else
n = 0;
str = n;
str +=" =";
str +=json;
str +="; path=/";
document.cookie = str;
str ="count=";
str +=n;
str +="; path=/";
document.cookie = str;
}
</script>
и код на страницы Мой выбор
if(isset($_COOKIE["count"]))
{ ?>
<script type="text/javascript">
function getCookie(name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
var arrs;
var n = Number(getCookie("count"));
var jsontext;
var text = "";
for(var i = 0 ; i <= n; i++){
arrs = JSON.stringify(getCookie(i.toString()));
jsontext = getCookie(i.toString());
var contact = JSON.parse(jsontext);
//text +="<div class='col-xs-12 col-sm-6 col-md-4'><td class=\"image\"><a href=\""+contact.src_title +" \"><img alt=\""+contact.title +"\" src=\""+contact.img +"\" /></a></td><td><div><a href=\""+contact.src_title +"\"><h3>"+contact.title +"</h3></a><div class=\"location\">"+contact.ad_titl +"</div><div class=\"tag price\">"+contact.pr_title +" Цена за день</div></div></td><td>"+contact.vi_title +"</td>"
text +="<div class='col-xs-12 col-sm-6 col-md-4'>"
text +="<div class='property-box'>"
text +="<figure class='ribbon'>"
text +=""+contact.rib+""
text +="</figure>"
text +="<div class='property-image-box'><a href=\""+contact.src_title +" \">"
text +="<img class='img-responsive' alt=\""+contact.title +"\" src=\""+contact.img +"\" />"
text +="</a></div>"
text +="<span class='property-hits'><i class='fa fa-eye'></i> "+contact.looke+"</span>"
text +="<div class='property-summary-box'><h3 class='property-title'>"+contact.title+"</h3>"
text +="<div class='property-adress-box'><span><i class='fa fa-map-marker'></i> "+contact.mesto+"</span></div>"
text +="<div class='property-description'>"+contact.opisan+"</div>"
text +="<div class='row property-more'>"
text +="<div class='col-xs-6 col-sm-6'><a class='btn readmore'>Подробнее</a></div>"
text +="<div class='col-xs-6 col-sm-6'><div class='box-price'><span class='price'>"
text +=""+contact.cennik+""
text +="</span></div></div></div>"
text +="<a class='btn delet'>Удалить</a>"
text +="</div>"
text +="</div>"
text +="</div>";
}
document.getElementById("similar-properties").innerHTML = text;
</script>
<?php }
else {
echo '<div class="col-sm-12">'Нет выбранных'</div>';
}
?>
Так вот все вроде работает нормально, кроме 3 моментов:
1. При добавлении более одного "товара" все слетает. Кнопка становится Мой выбор, вместо положенного Выбран на уже выбранном "товаре", а другой просто не добавляется. На странице Мой выбор ничего нет.
2. Внизу каждого "товара" на странице Мой выбор есть кнопка УДАЛИТЬ, как сделать, чтобы при нажатии на нее удался только этот товар (на котором нажали) из раздела/куки.
3. Все браузеры норм показывают, а в Safari на iphone/ipade ничего не работает.
Подскажите, кто может, пожалуйста.