Jump to content

Recommended Posts

Hi All!

I am using a Greybox (found at: orangoo.com/labs/GreyBox/) to display my product pages, like the quick product display on Target.com.

I have a minibasket in a div on the parent page where after a product is added to the cart the div updates and displays the cart info onhover.

 

Problem is that the only way I know of to update the parent page is modifying the gb_scripts.js with

'this.reload_on_close=true'
'window.location.reload(true);'

 

I want to avoid reloading the entire parent page so that the customer doesn't have to restart their product search - as it gets reset when the page reloads.

 

Is there a way to only refresh the minibasket div?

Sounds like what you want to do is set a callback function.  You can send a js function as once of greybox's parameters when you call it.  This should then get executed when greybox is closed.

 

GB_show(caption, url, /*optional*/ height, width, callback_fn)

Thanks for responding!

I should mention that I am quite a newbie to .js

I have been searching the web for callback functions but I don't know that I am moving in the right direction.

 

Could you share some sites that could help me out?

 

I take that I need to edit the .js file and put a script in my html?

 

A call back function is just a function that you tell another function to run when it has completed.  (Man I used function a lot.)

So basically you just write a small function to do the update you want to be performed then supply the name of that as the callback function to greybox.

Ok, got it to update my <div id="mini"> with

  function callback_fn () {
	var strURL="/TKMINI.html"; 
var req = getXMLHTTP(); 
 if (req) {

  req.onreadystatechange = function() {
	if (req.readyState == 4) { 
	if (req.status == 200) { 
	document.getElementById('mini').innerHTML=req.responseText;
       } 
	    }            
         }        
req.open("GET", strURL, true);
req.send(null);
       } 
}
</script>

 

Next step, hide <div  id="bookcart">

function callback_fn () {
	var strURL="/TKMINI.html"; 
var req = getXMLHTTP(); 
 if (req) {

  req.onreadystatechange = function() {
	if (req.readyState == 4) { 
	if (req.status == 200) { 
	document.getElementById('mini').innerHTML=req.responseText;
       } 
	    }            
         }        
req.open("GET", strURL, true);
req.send(null);
       }   
setTimeout( "jQuery('#bookcart').fadeOut();",1000 );
    }

 

Problem is that it hides the 'mini' div, not just bookcart, and I can't figure out why.

 

html

<div id="mini">
---CONTENT---
  <div class="hidden">
     <div id="bookcart">
        <div id="minibask">---CONTENT---</div>
             <div id="minibask_total">---MORE CONTENT---</div>
     </div>
  </div>
</div>

 

 

 

- OR -

html/Miva script (if you're familiar with Miva Merchant)

<div id="mini">
				<mvt:item name="toolkit" param="basket|itemcount" />
				<mvt:if expr="g.itemcount GT 0">
				<a href="&mvt:global:secure_sessionurl;Screen=BASK" title="checkout" border="0"><img src="graphics/00000001/images/ShoppingCart.png" class="textmiddle" alt="Shopping Cart" /></a> <h8><strong>(&mvte:toolkit:basketcount;)</h8></strong>			
				<div class="hidden"><mvt:item name="toolkit" param="render|TKMINI" /></div>
				<mvt:else>
				<a href="&mvt:global:secure_sessionurl;Screen=BASK" title="checkout" border="0"><img src="graphics/00000001/images/ShoppingCart.png" class="textmiddle" alt="Shopping Cart" /></a> (0)
				</mvt:if>
		      </div>

 

css

#mini {
padding: 2px;
width:150px;
float:right;
}

#mini .hidden {
	display:none;
}

#mini:hover .hidden {
	display:inline;
}

#minibask {
background-color: #eeeeee;
border:#cccccc 2px solid;
position:relative;
width:350px;
line-height:1.1em;
z-index:100;	
}

#minibask_total {
background-color: #cccccc;
border:#cccccc 2px solid;
width:350px;
text-align:right;
position:relative;
z-index:100;
line-height:1.1em;
}

 

 

 

Any Ideas?

 

Thanks for the advice. I put in the code and I am getting alerts, I'm not exactly sure where or what I need to fix....

 

function callback_fn () {
	var strURL="/TKMINI.html"; 
var req = getXMLHTTP();
 if (req) {

  req.onreadystatechange = function() {
	if (req.readyState == 4) { 
	if (req.status == 200) { 
	alert($('#mini').html()); 
	document.getElementById('mini').innerHTML=req.responseText;
	 } else {
  	   	alert("There was a problem while using XMLHTTP:\n" + req.statusText);
       } 
	    }            
         }        
req.open("GET", strURL, true);
req.send(null);
       }   
    }

 

I get the first alert (screenshot_1.png) after I add my first product.

I get the second alert (screenshot_2.png) thereafter (for each product I add after the first, I get this same alert).

 

So it appears that the div is not refreshing, or loading in the new products, after the first product is added.

 

I can even go to my shopping cart (a different page on the website) clear the entire cart, go back to the product page, add a new (different) product, and the minibasket loads with the information of the very first product -which is no longer even in the basket.

 

Any ideas???

 

[attachment deleted by admin]

So I figured out my problem with IE. Caching. To resolve the issue I added

+ escape(new Date());

to my var strURL.

As for the minibasket replacing the parent div, it still does it. I think the issue is because the mini .hidden  div is stacked inside the mini div...

 

<div id="mini"> <div class="hidden"></div>  </div>

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.