How to manually invoke the clicking action of the "Buy Print" button

I created a simple buy button (or fancy link rather) on an external site (Tumblr) that when clicked send the user to the photo page on my site. I added a query parameter to the url, "?buy=true", and then I added some JavaScript code to the photo page that checks for that query parameter. If that parameter is present then I would like to automatically open the Fotomoto window. Basically the same action as if the user clicked the "Buy Print" button.

I found documentation on using the Fotomoto API to open the Fotomoto window - FOTOMOTO.API.showWindow(page, image, anchor); - and the correct callback function to do so once Fotomoto is fully loaded and the buttons are present (relieving me of have to set a timeout in hopes the button are present once I try to open the Fotomoto window). But once I enable the API, nothing works anymore. My buttons no longer appear and Fotomoto seems to not function at all.

I assume if enable the API then I must do everything manually and I definitely do not want to do that. I would like to use the Fotomoto API library and still have everything working like it currently does. Since that does not seem to be an option, I've attempted to invoke the click event on the buy button (I even tried the "mousedown" and "mouseup" events on both the buy button anchor tag and surrounding li tag), but to no avail.

Does anyone know how to manually open the Fotomoto widget (as if a user clicked the buy button) using JavaScript? I would be happy to use the API if there is some way I can enable it without breaking Fotomoto all together OR if there is some special event I can call to invoke the click event of the buy button.
1 person has
this problem
+1
Reply
  • After trying many different things, I finally found some code that worked (at least in Firefox and Chrome). Firing the button's click event with jQuery does not work - $('#FotomotoToolbar li.FotomotoPrintButton a.FotomotoBarLink').click(); However, I found a function on stackoverlow.com that will cause the button's click event to fire as I would expect it:

    function fireEvent(element,event) {
    if (document.createEvent) {
    // dispatch for firefox + others
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent(event, true, true ); // event type,bubbling,cancelable
    return !element.dispatchEvent(evt);
    } else {
    // dispatch for IE
    var evt = document.createEventObject();
    return element.fireEvent('on'+event,evt)
    }
    }

    After the button appears on the page you can then call that function like so (using jQuery):

    var btn = $('#FotomotoToolbar li.FotomotoPrintButton a.FotomotoBarLink')[0];
    fireEvent(btn, "click");

    Of course you don't have to use jQuery and can use JS functions like document.getElementById() or document.getElementsByClassName(), etc. to get the element to pass to the fireEvent function

    I still don't have a way to invoke this code upon full load of Fotomoto, as it appears that callback is only available in API mode. So I have to basically set an arbitrary time out and hope it is loaded by then and hopefully not too long as to break the user experience. I can live with this for now since it is such an edge case. Nonetheless, I would REALLY REALLY love to have the Fotomoto API functions available and still have automatic rendering of buttons, actions, etc.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Derek (Official Rep) April 12, 2014 19:15
    Hi Derek,

    Typically we recommend using Fotomoto in "automatic" mode (not API mode), but if you really need to run the API for some reason we do offer it, though we don't provide individual site support for it than the posted articles in our Support Center.

    There are several articles listed at API & Developer resources, including a working example that you can gleen information from, including an API sample page.

    I hope that helps and kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited