Kryptronic Software Support Forum

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.

#26 03-05-2014 14:05:46

timberguy
Member
Registered: 01-14-2008
Posts: 142

Re: Fancybox use

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

 

#27 03-05-2014 16:03:05

timberguy
Member
Registered: 01-14-2008
Posts: 142

Re: Fancybox use

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 wink

http://www.colemanveteransmemorial.org/Item/test-black

Thanks again Nick!

Offline

 

#28 03-06-2014 09:03:16

timberguy
Member
Registered: 01-14-2008
Posts: 142

Re: Fancybox use

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

 

#29 03-06-2014 10:19:01

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: Fancybox use

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.


Nick Hendler

Offline

 

#30 03-06-2014 16:30:10

timberguy
Member
Registered: 01-14-2008
Posts: 142

Re: Fancybox use

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

 

#31 03-07-2014 09:16:57

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: Fancybox use

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);


Nick Hendler

Offline

 

#32 03-07-2014 10:46:01

timberguy
Member
Registered: 01-14-2008
Posts: 142

Re: Fancybox use

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

 

#33 03-09-2014 16:06:04

timberguy
Member
Registered: 01-14-2008
Posts: 142

Re: Fancybox use

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

 

#34 03-10-2014 10:54:36

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: Fancybox use

What do you mean by appearing on the order?  Do you mean as the product image in the cart, or like a file upload item option?


Nick Hendler

Offline

 

#35 03-10-2014 12:08:39

timberguy
Member
Registered: 01-14-2008
Posts: 142

Re: Fancybox use

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

 

#36 03-11-2014 08:47:21

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: Fancybox use

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.


Nick Hendler

Offline

 

Board footer