Populating script tags with content on page load

[chr.s]

Hi there,

I'm currently working on a site using Big Cartel - an e-commerce online CMS. This means I'm limited to using their own proprietary language for grabbing data content (no PHP support etc...).

I'm also using the Supersized jQuery plugin to try and present present data to the user. The plugin works by reading an array from a script tag, and outputting to specified divs. The array it uses looks like the following:

<script type="text/javascript">
    jQuery(function($){
        $.supersized({

            // Functionality
            property_1   :   value,     
            property_2   :   value,     

            slides       :   [
            {image :'http://image1.jpg', title :'Name1', url :'1.html'},
            {image :'http://image2.jpg', title :'Name2', url :'2.html'},
            {image :'http://image3.jpg', title :'Name3', url :'3.html'},
            ],

            // Options             
            option_1     :   value,
            option_1     :   value
        });
    });
</script>

What I need to able to do is generate the "slides" portion when the page is loaded, using the Big Cartel API, which can apparently output products to XML and JSON. I only need the values listed above (image, title & url), and would also need to be able to filter results further if needed, e.g: to only include products of a certain type.

The problem is, apart from HTML and CSS, I'm a bit of a novice. Could anyone get me started in the right direction, or point me to a resource that deals with this kind of thing?

Thanks for making this far into the question,
Chris

[blocblue]

I've not used Big Cartel before, but looking at the API link you posted, it looks as though the following function would allow you to access the data you require.

<script type="text/javascript" charset="utf-8">
  $(function() {
    Product.findAll({}, function(products) {
      $.each(products, function(i, product) {
        $('#products').append('<li><img src="' + Product.findImage(product.images[0].url, 'large') + '" /><br/><a href="' + product.url + '">' + product.name + '</a> - $' + Format.money(product.price) + '</li>');
      });
    });
  });
</script>

If you make the call to Product.findAll() before initializing the SuperSize plugin, you should be able to dynamically create the slides array. E.g. (untested)

<script type="text/javascript" charset="utf-8">
  $(function() {
    var product_slides = new Array();

    Product.findAll({}, function(products) {
        $.each(products, function(i, product) {
            var product_slide = new Object();
            product_slide.title = product.name;
            product_slide.image = Product.findImage(product.images[0].url, 'large');
            product_slide.url = product.url;

            product_slides[i] = product_slide;
        });
    });

    $.supersized({
        property_1: value,     
        property_2: value,
        // ...      
        slides: product_slides,
        // ...             
        option_1: value,
        option_1: value
    });
  });
</script>

[chr.s]

Thank you very much for the reply - sadly I'll have to wait and test this tomorrow.
TBC...

Chris

[chr.s]

Well, it's taken me a few hours to get to grips with the above post, but thanks to firebug's console (and of course blocblue's code), I'm almost there.

The (hopefully final) issue I have now is that whilst I need my code to be formatted as...

[
  {image : 'value', url : 'value'}
]

...what I'm actually getting is...

[
  {image = 'value', url = 'value'}
]

...which sadly isn't quite close enough.

Surely there's an easy way to substitue those equals signs for colons?

[blocblue]

Can you post your revised code?

If you're building the slides array with JavaScript, why have you got equal signs, rather than colons?

[chr.s]

The code is exactly as you posted - it just took me a while to get it working (developing in Big Cartel is far from straightforward).

When I console.log(product_slides);, in firebug I get the array of objects as intended, except they're formatted with "=" signs, as above (which I now understand may just be how firebug displays them, rather than how they're actually coded).

However, the problem remains that adding slides : product_slides, doesn't seem to work.

[blocblue]

However, the problem remains that adding slides : product_slides, doesn't seem to work.

When you say doesn't work, can you be more specific. Are you getting a JS error? Is there no error, but the slides aren't displaying either?

Can you post the console output for the product_slides variable? I'm wondering whether the image URL is being generated correctly.

[chr.s]

I'm not getting any javascript errors, just no slides displayed.

The image URL works when pasted into the address bar (although it's not the correct size, but that issue can wait for now). I'm not able to copy from firebug's console, so please see the attached screenshot.

[chr.s]

Can't find a way to edit my previous post - after playing around, I've noticed I'm actually getting the following errors in firebug:

TypeError: element.dispatchEvent is not a function
[Break On This Error]   
return base.options.slides[vars.current_slide][field];

TypeError: base.options.slides[vars.current_slide] is undefined
[Break On This Error]   
return base.options.slides[vars.current_slide][field];

But I think this may just be supersized getting upset by the lack of data.

[blocblue]

I cannot see any reason why the slides would not be getting populated. Is this accessible on a public URL?

Otherwise, I can only suggest putting in debug points so you can step through the JS code and find out where the values are being lost.