You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.
Hey! I think I got it via guess and by golly and your help Nick. I had to put it on TWO locations. I noticed the repeating serializing line of code, and figured that this must have to be repeated as well. Seems to be working
$(document).ready(function(){
//PURE PATH TO IMAGE GENERATING PHP FILE
var base = $(".http,.preview img").attr("src");
//GATHER IMAGE FOR FIRST TIME
$(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());
parent.jQuery('#ecom--prodaddtocart--test-black--brick-code').val($('.preview img').attr('src'));
//KEYUP EVENT AND NEW IMAGE GATHER
$("#realtime-form input,textarea").stop().keyup(function(){
$(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());
parent.jQuery('#ecom--prodaddtocart--test-black--brick-code').val($('.preview img').attr('src'));
});
//GIVE URL TO USER
$("#getResults").click(function(){
$("#resultsUrl").val($(".preview img").attr("src"));
$("#link").toggle("slow");
parent.$('#text1').val($('.preview img').attr('src'));
});
});
Offline
Nick, thank you for your patience getting me through this. My test is now working and I actually think it looks pretty decent. It's not how a pro would do it I'm sure, but it seems to work just fine. Also, the code above did NOT need to be entered twice, only once. I was simply having another brain fart when I thought it wasn't working.
The final test page is here if you would like to grade me
http://www.colemanveteransmemorial.org/Item/test-black
Thanks again Nick!
Offline
Because of fiddling with the jquery to get this right, I was also able to take care of another issue this morning. The engravings on the Bricks must be all caps. So, with one line of code I was able to force all caps on the brick making tool. Again, thanks to Nick for making me think.
$(this).val($(this).val().toUpperCase());
Offline
Awesome. Now all you need to do is add a button to close the fancybox window after the image has been generated. jQuery is great once you understand it. Takes a while to wrap your head around how easy it is compared to using JS without a scripting library.
Offline
You must have missed my close button. Honest, its there. I thought it was pretty noticeable.;o)
Okay, my next quest is to be able to actually show the completed brick image on the order. Is it possible to grab the value of ecom--prodaddtocart--test-black--brick-code after it has been placed on the order page? I need to figure out how to pass value as text to the page, within some image tags, along with passing it to the text field. So far all attempts have been futile.
Offline
Look at the div id of the image on the product page and target that. Assuming you have an image in the variable 'imghtml' and want to assign that HTML to a div in the parent window with id 'xxx':
parent.jQuery('#xxx').html(imghtml);
Offline
Ive tried several things. It appears that div id for the images is "mousetrap"? That is the last thing I tried, with my script now looking like this. No luck yet
$(document).ready(function(){
//PURE PATH TO IMAGE GENERATING PHP FILE
var base = $(".http,.preview img").attr("src");
//GATHER IMAGE FOR FIRST TIME
$(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());
//KEYUP EVENT AND NEW IMAGE GATHER
$("#realtime-form input,textarea").stop().keyup(function(){
$(this).val($(this).val().toUpperCase());
$(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());
parent.jQuery('#ecom--prodaddtocart--test-black--brick-code').val($('.preview img').attr('src'));
parent.jQuery('#mousetrap').html(imghtml);
});
});
Last edited by timberguy (03-07-2014 10:46:22)
Offline
Okay!
With this line:
parent.jQuery('#newimage').html('<img src="'+$('.preview img').attr('src')+'" height="260" width="250"/>');
I have the brick showing within the parent page. In a div with the newimage I.D.
Now, the next task, which I know I have no idea where to start, how to include the image on the actual order. Is this even possible?
Offline
A product picture in the cart would be great, but also, a link to see the photo from the internal order email, versus the url string that is produced. If a hidden product option field was propagated, could that appear in the order as a link?
The reason I would want this, is we could then add the brick engraving company as a drop shipper, and they would get the order and image as well.
I think this is all starting to look like your first advise of using jquery. The only thing that is in the iframe now, is the form to create the text. That, causes one small glitch I'm not fond of. when the form and the real time image were on the same page, within the iframe, the change was immediate. Now, if you were to look at it, there is a pause between the key function and the image change as jquery does its work. What it probably needs, is one of those spinning loading icons. Thing is, it is only a fraction of a second. I don't know if it would be a end user issue or not.
Last edited by timberguy (03-10-2014 12:09:43)
Offline
You should be able to use jQuery to add a hidden field to your add to cart form, then store the source of the image in it. If you handle it this way, the form data will be available in the ECOM_Cart class when the add to cart form is processed. You can use that data to store the image on the server at that point, and link to / show it in the cart, order and order confirms. A good bit of PHP knowledge is going to be key here when editing ECOM_Cart.
Offline