cart через colorbox

eeeMan · 18 липня 2014

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

есть скрипт common.js в котором есть код отвечающий за вывод мини корзины

/* Ajax Cart */
$('#cart > .heading a').live('click', function() {
 
 $('#cart').addClass('active');
 
 $('#cart').load('index.php?route=module/cart #cart > *');
 
 $('#cart').live('mouseleave', function() {
 $(this).removeClass('active');
 });
});

как отредактировать, что бы корзина открылась в модальном окне?

chukcha · 18 липня 2014

man colorbx ({html

snastik · 18 липня 2014

смотрите ко мне в cosmio. Там такое реализовано.

eeeMan · 18 липня 2014

man colorbx ({html

а можно более развернуто пожалуйста? =)

смотрите ко мне в cosmio. Там такое реализовано.

да, ништячок, как реализовали?

chukcha · 18 липня 2014

откройте страницу colorbox, почитайте свойства и методы

да, ништячок, как реализовали?

Т.е. вам нужен готовый код?

eeeMan · 18 липня 2014

Т.е. вам нужен готовый код?

кусок кода который отвечает именно за вывод корзины в колорбоксе, {load или html}, я точно не понял еще как сделать

snastik · 18 липня 2014

да посмотрите же в код скриптов. В то как работает метод addToCart

eeeMan · 18 липня 2014

addtocart вот так

$.colorbox({width: '500px',  transition: 'elastic', html:'тут html с текстом о добавлении'});

но это не годится, т.к. html то не подойдет для подгрузки cart.tpl

chukcha · 18 липня 2014

да посмотрите же в код скриптов. В то как работает метод addToCart

Это бесполезно...

Тупо содрать код у человека не получается.

snastik · 18 липня 2014

В код скрипта шаблона Cosmio

в common.js

eeeMan · 18 липня 2014

В код скрипта шаблона Cosmio

в common.js

воо, благодарю!

snastik · 18 липня 2014

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

eeeMan · 18 липня 2014

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

ок, думаю это не очень быстро будет)

eeeMan · 18 липня 2014

использую дефолтный шаблон, доп модулей не ставил, не работает почему то remove, когда во всплывающей корзине жму удалить товар, то в этом окне ничего не происходит, в корзине тоже не удаляется, в консоле следующая инфа - index.php?route=module/cart&remove=undefined

eeeMan · 20 липня 2014

вопрос решен

Змінено 22 липня 2014 користувачем eeeMan

eeeMan · 22 липня 2014

common.js

$(document).ready(function() {
	/* Search */
	$('.button-search').bind('click', function() {
	
		url = $('base').attr('href') + 'index.php?route=product/search';
				 
		var search = $('input[name=\'search\']').val();
		
		
		if (search) {
			url += '&search=' + encodeURIComponent(search);
		}
		
		location = url;
	});
	
	$('#header input[name=\'search\']').bind('keydown', function(e) {
		if (e.keyCode == 13) {
			url = $('base').attr('href') + 'index.php?route=product/search';
			 
		var search = $('input[name=\'search\']').val();
			
			if (search) {
				url += '&search=' + encodeURIComponent(search);
			}
			
			location = url;
		}
	});
	

	
	/* Ajax Cart Cosmio*/
$('#cart').on('click', '.heading a', function(){	
		
		getPopup();
		
})


// Warning reset for new warning

$('.warning').ready(function() {
	
	$('.warning').hide();
		
	var content = $('.warning').text();
	 if (content != '' ) {
		$.colorbox({
			onOpen: 	CbRemove(),
			transition: 	 'elastic',
			opacity: 		 0.5,
			close: 			 '<i class="fa fa-times"></i>',
			width:       	'500px',	
			//title:       	'',				
			html: content,
			onComplete: function () {
                        $.colorbox.resize();
                }
				


			});
	}
})

$('.notification').ready(function() {
	
	$('.notification').hide();
		
	var content = $('.notification').text();
	 if (content != '' ) {
		$.colorbox({
			onOpen: 	CbRemove(),
			transition: 	 'elastic',
			opacity: 		 0.5,
			close: 			 '<i class="fa fa-times"></i>',
			width:       	'500px',	
			//title:       	'',				
			html: content,
			onComplete: function () {
                        $.colorbox.resize();
                }
				


			});
	}
})
	
	
	// IE6 & IE7 Fixes
	if ($.browser.msie) {
		if ($.browser.version <= 6) {
			$('#column-left + #column-right + #content, #column-left + #content').css('margin-left', '195px');
			
			$('#column-right + #content').css('margin-right', '195px');
		
			$('.box-category ul li a.active + ul').css('display', 'block');	
		}
		
		if ($.browser.version <= 7) {
			$('#menu > ul > li').bind('mouseover', function() {
				$(this).addClass('active');
			});
				
			$('#menu > ul > li').bind('mouseout', function() {
				$(this).removeClass('active');
			});	
		}
	}
	
});


function CbRemove() {
	$('#cbcontainer').remove();
}



function productRemove(key) {

	if  (getURLVar('route') == 'checkout/cart') {
		location = 'index.php?route=checkout/cart&remove=' + key;
	} else {
		
		$('#cart').load('index.php?route=module/cart&remove=' + key, function()	{
			getPopup();
		});
	
	}
	
};

	
function getPopup(title) {
	
	if (!title){
		title =  $('#header #cart #cart-total').html();
		}
	
    var cartcontent =  $('#header #cart .content').html();

	
   	$.colorbox({
				transition: 	 'elastic',
				opacity: 		 0.5,
				close: 			 '<i class="fa fa-times"></i>',
				htmlfalse: true,
				href:'index.php?route=module/cart div.content',
				title:           title,
				scrolling:       false,
				width:       	'600px',	
				initialHeight: '200px',
				initialWidth: '200px',
				onComplete: function () {$.colorbox.resize();},
				onOpen: 	CbRemove(),
							
			});
			
};

$(document).ready(function() {

	$('a.relcaption').hover(function() {
		$( this ).parent().parent().parent().parent().find('div img').attr('src', $( this ).attr('rel'));
    });
});



function getURLVar(key) {
	var value = [];
	
	var query = String(document.location).split('?');
	
	if (query[1]) {
		var part = query[1].split('&');

		for (i = 0; i < part.length; i++) {
			var data = part[i].split('=');
			
			if (data[0] && data[1]) {
				value[data[0]] = data[1];
			}
		}
		
		if (value[key]) {
			return value[key];
		} else {
			return '';
		}
	}
}

function addToCart(product_id, quantity) {
	quantity = typeof(quantity) != 'undefined' ? quantity : 1;

	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: 'product_id=' + product_id + '&quantity=' + quantity,
		dataType: 'json',
		success: function(json) {
			$('.success, .warning, .attention, .information, .error').remove();
			
			if (json['redirect']) {
				location = json['redirect'];
			}
			
			if (json['success']) {
				
			    $('#cart-total').html(json['total']);
				
				getPopup(json['success']);
			}	
		}
		
	});
}
	
function addToWishList(product_id) {
	$.ajax({
		url: 'index.php?route=account/wishlist/add',
		type: 'post',
		data: 'product_id=' + product_id,
		dataType: 'json',
		success: function(json) {
			$('.success, .warning, .attention, .information').remove();
						
			if (json['success']) {
				
				$('#wishlist-total').html(json['total']);
				
				$.colorbox({
					onOpen: 	CbRemove(),
					transition: 	 'elastic',
					opacity: 		 0.5,
					close: 			 '<i class="fa fa-times"></i>',
					width:       	'500px',		
					html: json['success'],
					onComplete: function () {
								$.colorbox.resize();
						}
				});
				
			}	
		}
	});
}

function addToCompare(product_id) { 
	$.ajax({
		url: 'index.php?route=product/compare/add',
		type: 'post',
		data: 'product_id=' + product_id,
		dataType: 'json',
		success: function(json) {
			$('.success, .warning, .attention, .information').remove();
						
			if (json['success']) {
			
				$.colorbox({
						onOpen: 	CbRemove(),
						transition: 	 'elastic',
						opacity: 		 0.5,
						close: 			 '<i class="fa fa-times"></i>',
						width:       	'500px',	
						//title:       	'',				
						html: json['success'],
						onComplete: function () {
									$.colorbox.resize();
							}
							


				});
				
				$('#compare-total').html(json['total']);
				
			}	
		}
	});
}

/*
// make some FAT!
// % for product grid
$( document ).ready(function() {
		iwantpercent();
	 
		 $( '.cart input.button' ).each(function( index ) {
			$( this ).replaceWith('<button type="button" onclick="'+ $( this ).attr("onclick") +'"><i class="fa fa-shopping-cart"></i>'+ $( this ).attr("value") +'</button>');	 
		 });
		 
		 $( '.wishlist a' ).each(function( index ) {
			$( this ).replaceWith('<button type="button" onclick="'+ $( this ).attr("onclick") +'"><i class="fa fa-heart"></i><span class="baloon">'+ $( this ).text() +'</span></button>');	 
		 });

		 $( '.compare a' ).each(function( index ) {
			$( this ).replaceWith('<button type="button" onclick="'+ $( this ).attr("onclick") +'"><i class="fa fa-exchange"></i><span class="baloon">'+ $( this ).text() +'</span></button>');	 
		 });

		 $( '.cart' ).each(function( index ) {
			var wishlist = $( this ).parent().find('.wishlist');
			var compare = $( this ).parent().find('.compare');
			
			$( this ).after(compare);
			$( this ).after(wishlist);
			
		 });
	
	});
	
function iwantpercent(product_id) { 
	
		  $( ".price-old" ).each(function() {
			  var pricenew = parseInt($( this ).next('.price-new').text().replace(/[^0-9]+/g,''));
			  var priceold = parseInt($( this ).text().replace(/[^0-9]+/g,''));;
			  pricenew; +priceold; 
			  percent = Math.round((priceold - pricenew)/priceold*100);  
			  $( this ).parent().parent().find('.image').before('<div class="percent">- '+ percent +'%</div>');
			
			});
	}
*/

cart.tpl

<div id="cart">
  <div class="heading">
    <a title="<?php echo $heading_title; ?>"><span id="cart-total"><?php echo $text_items; ?></span></a></div>
  <div class="content">
    <?php if ($products || $vouchers) { ?>
    <div class="mini-cart-info">
      <table>
        <?php foreach ($products as $product) { ?>
        <tr>
          <td class="image"><?php if ($product['thumb']) { ?>
            <a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" /></a>
            <?php } ?></td>
          <td class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a>
            <div>
              <?php foreach ($product['option'] as $option) { ?>
              - <small><?php echo $option['name']; ?> <?php echo $option['value']; ?></small><br />
              <?php } ?>
            </div></td>
          <td class="quantity">x <?php echo $product['quantity']; ?></td>
          <td class="total"><?php echo $product['total']; ?></td>
          <td class="remove"><img src="catalog/view/theme/default/image/remove-small.png" alt="<?php echo $button_remove; ?>" title="<?php echo $button_remove; ?>" onclick="(getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') ? location = 'index.php?route=checkout/cart&remove=<?php echo $product['key']; ?>' : $('#cart').load('index.php?route=module/cart&remove=<?php echo $product['key']; ?>', function() { getPopup(); });" /></td>
        </tr>
        <?php } ?>
        <?php foreach ($vouchers as $voucher) { ?>
        <tr>
          <td class="image"></td>
          <td class="name"><?php echo $voucher['description']; ?></td>
          <td class="quantity">x 1</td>
          <td class="total"><?php echo $voucher['amount']; ?></td>
          <td class="remove"><img src="catalog/view/theme/default/image/remove-small.png" alt="<?php echo $button_remove; ?>" title="<?php echo $button_remove; ?>" onclick="(getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') ? location = 'index.php?route=checkout/cart&remove=<?php echo $voucher['key']; ?>' : $('#cart').load('index.php?route=module/cart&remove=<?php echo $voucher['key']; ?>', function() { getPopup(); });" /></td>
        </tr>
        <?php } ?>
      </table>
    </div>
    <div class="mini-cart-total">
      <table>
        <?php foreach ($totals as $total) { ?>
        <tr>
          <td class="right"><b><?php echo $total['title']; ?>:</b></td>
          <td class="right"><?php echo $total['text']; ?></td>
        </tr>
        <?php } ?>
      </table>
    </div>
    <div class="checkout"><a href="<?php echo $cart; ?>"><?php echo $text_cart; ?></a> | <a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></div>
    <?php } else { ?>
    <div class="empty"><?php echo $text_empty; ?></div>
    <?php } ?>
  </div>
</div>

Вхід

cart через colorbox

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Схожі публікації

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information