Search code examples
javascriptdynamictagscommentsyahoo-merchant-store

Yahoo Merchant Store Catalog Tags Insert Dynamically with Javascript, Jquery, or Ajax


I opened up a yahoo store through their Merchant Service. They have a pretty good store catalog that I have used on a business site that I own. I like it so I decided to use the service again on another business I own. I got the site built but have ran into a few issues with calling the Yahoo Catalog Tags. The tags are basically comments. EX: (<!--#ystore_order id=item_id -->). When the site is loaded it is parsed and the page loads the product details in place of this tag/comment.

I can get everything to work except for the action attribute of my form.

I have tried a bunch of things but I cannot seem to get the action set for my form. If I hard code the tag then it works fine but obviously if I did that then I would have to create a page for every single product.

My form:

<div id="list">

     <form method="post">

        <input id="btnSubmit" type="submit" value="Add To Cart">

     </form>

</div>

Trying to add the comment/tag to form action attribute. I've done it this way(below) and also by getting rid of the variable and just paring the url in the jquery attr function.

<script language="javascript">
    $.ajaxSetup({cache: false});
    $(document).ready(function(){

      //Get URL from URL Query String.
       var obj = getUrlVars()["Object"];

      //Set form action attribute
       $('form').attr('action', '<!--#ystore_order id='+ obj +' -->');


    });

</script>

I've also tried creating the form dynamically.

<script language="javascript">
        $.ajaxSetup({cache: false});
        $(document).ready(function(){

          //Get URL from URL Query String.
           var obj = getUrlVars()["Object"];

         var new_form = '<form method="post" action="<!--#ystore_order id='+obj + ' -->">' +
        '<input type="submit" value="Add To Cart" id="btnSubmit">' +
        '</form>';

        $('#list').append(new_form);


        });

    </script>

I have tried to escape some characters but have had no success there either.

"\<\!--#ystore_order id='+obj + ' --\>"

I know the issue has something to do with the comment syntax but if I can add it manually then I should be able to do it dynamically. I know this is a hard one to test but if anyone thinks they may have a solution I would be happy to set up an ftp account on my site so you can test and I will provide the product ID's for testing. I've fought with this for about 30+ hours.


Solution

  • Yahoo store tags are populated server-side. Adding a store tag on the client side using Javascript won't do anything, because the code that recognizes the store tag and appends the appropriate html will never see the tag you drop in on the client side. There's no client-side solution possible

    The best solution here would be to write a server side program to populate a template with the appropriate tag in response to http requests. I'm not super-familiar with the Yahoo store, so I don't know what the best language for this would be, but it would be a very simple program given how straightforward it sounds like your template is. Since this is already embedded in a site you own, I'd just use whatever backend language you are already working in.

    Once you have a server side script that executes and returns the html you need, you could use AJAX to populated it with the appropriate product details as needed.