views:

54

answers:

0

I am working on integrating a javascript shopping cart, simplecart-js, into a Jquery LightBox, Yoxview. Yoxview has an option to add button links in the popup title pane for various options, downloading, shopping cart, etc. The relevant code for my shopping cart button is:

var yoxviewCartButton = $("<a>", {
    title: "Add to cart",
});

$('.simpleCart_shelfItem').each(function () {
    var name = $(this).children('span')[0].firstChild.data;
    var price = $(this).find('span>span').text().replace('$', '');
    var thumbs = $(this).find('span>span>span').text().replace('$', '');
    var button = $('<button/>', {
        type: 'button',
        'class': 'shopping_button'
    });

    button.append($('<img/>', {
        src: 'yoxview/images/yoxview_cart_icon.png',
        title: 'Add to   cart',
        width: 18,
        height: 18
    }));
    button.click(function () {
        simpleCart.add('name=' + name, 'price=' + price, 'quantity=1', 'thumb=' + thumbs);
    });
    yoxviewCartButton.append(button);
});

$(".yoxview").yoxview({
    infoButtons: {
        download: yoxviewDownloadButton,
        cart: yoxviewCartButton
    },
    onSelect: function (i, image) {
        $.yoxview.infoButtons.download.attr("href", image.media.src);
        $.yoxview.infoButtons.cart.data("yoxview_cart", image.media.src);
        $.yoxview.infoButtons.cart.click(function () {
            $("#cart").show();
            $.yoxview.close();
        });
    }
});

The html is:

<a class="item yoxview simpleCart_shelfItem" href="pics/pic0.png" title="Title 1">
    <img class="content" src="pics/pic0.png" title="Title 1"/>
    <span class="caption item_name">
        Title 1
        <span class="item_price">$14.99</span>
        <span class="item_thumb">pic5.png</span>
    </span>
</a> 

I realize I need to clean up the html and get rid of all the nested spans and clean up the code to use text() , as bobince suggested in my last question. My next task!

I have it working well, I can show() the invisible cart div and close the lightbox window when I click on the Cart button and the shopping cart works.

The 2 problems I can't get are

  1. I can't get the thumbs to be read with my code, but all other data works well

  2. and more importantly, The same number of shopping cart buttons as "simpleCart_shelfItem" images show up in the lightbox. One is great but 6 looks a bit overdone (or desperate for a sale? lol) . If anyone has some direction for me to go in to have the code show only the one button for the corresponding "simpleCart_shelfItem", not all, I would greatly appreciate it!

I updated my code and I am getting the code closer to working. I have fixed the multiple cart buttons and when clicked, the cart data inputs as it is supposed to into the cart, except that all items with the class "simpleCart_shelfItem" load into the cart instead of just the one I click the cart button for. Here is my updated code:

var yoxviewCartButton = $("<a>", {
        title: "Add to cart"       
    });
    yoxviewCartButton.append($("<img>", {
        src: "yoxview/images/yoxview_cart_icon.png",
        alt: "Add to cart",
        css: { width: 18, height: 18 }
    }));
    $(".yoxview").yoxview({ 
        infoButtons: {
            download: yoxviewDownloadButton,
            cart: yoxviewCartButton
        },
        onSelect: function(i, image)
        {
            $.yoxview.infoButtons.download.attr("href", image.media.src);
            $.yoxview.infoButtons.cart.data("yoxview_cart", image.media.src);
              $.yoxview.infoButtons.cart.click(function () {
              $('.simpleCart_shelfItem').each(function () {
var name = $(this).children('span')[0].firstChild.data;
var price = $(this).find('span>span').text().replace('$', '');
var thumbs = $(this).find('span>span>span').text().replace('$', '');
simpleCart.add('name=' + name, 'price=' + price, 'quantity=1', 'thumb=' + thumbs);
});               
    $("#cart").show();
     $.yoxview.close();
    });
        }
    });

here is a link to the test page:

http://macosxsupport.com/yoxview_cart/