Linking to product in jquery using wordpress e-commerce

Question

Hi I have come up with a small design but im having one issue with it, it uses jquery onclick if the user clicks the product it shows the product info in a right pain butmy problem is its showing the same information for each product, im coding it on local host so can't link anyone (sorry). Here is my code:

    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/header/loader.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".buynow").click(function() {
            if($(".buynow").val() != 0) {
                alert("The product has now been added to the Shopping cart, click checkout to pay for your items, or close this window to continue shopping.");
            } 
        });

        // Put an animated GIF image insight of content
        $("#col2").empty().html('<img src="<?php bloginfo('stylesheet_directory'); ?>/header/loading.gif" /> Loading...');

        // load index page when the page loads
        $("#col2").load("<?php echo home_url('?page_id=2'); ?>  .entry-content");
        $("#col1 li span").click(function(){
        // load home page on click
            $("#col2").load("<?php echo home_url('?page_id=4&category=1&product_id='),wpsc_the_product_id(); ?>  .entry-content");
        });
        //$("#about").click(function(){
        // load about page on click
            //$("#response").load("about.html");
        //});
        //$("#contact").click(function(){
        // load contact form onclick
            //$("#response").load("contact.html");
        //});

        $(".product").hover(
          function() { $(this).children(".price").show(); },
          function() { $(this).children(".price").hide(); }
        ); 
    });
    </script>

    <ul id="col1">

    <?php while (wpsc_have_products()) :  wpsc_the_product(); ?>

Answer 1

echo home_url('?page_id=4&category=1&product_id='),wpsc_the_product_id();

maybe this comma id='),wpsc should be dot?

Also you should do something like this: in html:

<ul id="col1"><li><span id="product-<?php echo wpsc_the_product_id() ?>">Product <?php echo wpsc_the_product_id() ?></span></li></ul>

in js:

$("#col1 li span").click(function(){
        var productId = $(this).attr("id");// gets the id of span which contains product id
        productId = productId.split("-");
        productId = productId[1];// contains product id
        // load home page on click
            $("#col2").load("<?php echo home_url('?page_id=4&category=1&product_id=')?>"+ productId +" .entry-content");
        });

Because you should declare id in loop for every product and not in js. If you declare it in js it will always be same, hardcoded. You can see that if you inspect you js when page loads. It will always call first product id.