thumbnail product image

RubenRuben Member
in Bugs & Feature Requests edited April 2009
Hello,

Is there a way to display a thumbnail image of each item in the cart? What value would I use in the cart link code?

Thanks!

-Ruben
Comments
  • lukeluke FoxyCart Team
    Hey Ruben.
    Not currently. We've talked about doing that for quite some time, but it's never made it to the top of the list. You might be able to do it with some JQuery in the cart template by looking through the cart JSON, but that would take some tweaking for sure. Please go ahead and request that feature here: http://requests.foxycart.com/
  • brettbrett FoxyCart Team
    Like Luke said, you probably could do this if it was super important to you. You could either create some javascript that runs on the cart, checks the JSON, and inserts <img /> tags in your cart table. Depending on how your images are arranged in your own system it might be really easy, otherwise you'd probably need to pass in a product option for the path.

    The alternative would be to go entirely JSONP and build your own cart. This would allow you to build the cart however you'd like, though you'd still need to get the thumbnail image URL associated with the products.

    So, if your product code was, say, ABC123, and your image was ABC123.jpg, then it'd be super easy to get the code from the JSON and create an img tag wherever you wanted with something like src="https://example.foxycart.tld/cache?url=http://example.com/path/to/ABC123.jpg";

    Probably more info than you want, and not as easy a solution as you're after. Just throwing it out there on the off chance it might be helpful.
  • eded Member
    I'd like to have the thumbnails shown in the cart as well. I voted all my points for it, but looks like it's not even in the plans yet.(May be?)
    No being a jscripts expert, can you possibly put an example of how to retrieve from JSON a hidden option passed to the cart with the path to the thumbnail? Also inserting mere img tags may screw up the cart. In the Firebug I had to insert <td> in the table header and body and also change the colspan for the table footer. Is there a more elegant way to insert a column right after products column in the cart table? I want to do it only in the cart, not the checkout so I don't have to serve the images from the secured server.
  • lukeluke FoxyCart Team
    Ok, so this is something we've been talking about for a while, but never quite got around to it. I haven't actually tested this completely, but hopefully it will work out for you. Assumptions made: all of your cart products will have a unique product code and that all of your thumbnail images will be named based on that product code. Let me know what you think:
    jQuery(document).ready(function() {
    /****** MODIFY THIS STUFF **********/
    var fcCacheUrl = "https://yoursubdomain.foxycart.com/dev/cache.php?url=";
    var imageRootPath = "http://yourdomain.com/media/images/";
    var imageType = ".jpg";
    /***********************************/
    // stretch our the header and footer
    jQuery("#fc_cart_head_item").attr({"colspan":2}); 
    jQuery(".fc_col1").attr({"colspan":3}); 
    // get our cart item rows
    var cartRows = jQuery(".fc_cart_item");
    // add tds to each row, assuming each cart has a unique product code and that each image is named after the product code
    for (var i = 0; i < fc_json.products.length; i++) {
    	jQuery(jQuery(cartRows[ i ]).children("td")[ 0 ]).before('<td><img src="'+fcCacheUrl+imageRootPath+fc_json.products[ i ].code+imageType+'" /></td>');
    }
    });
    
  • eded Member
    Luke, Thanks for the pointer!
    I had to modify the code a bit: it didn't work with cashe URL so I pointed directly to the thumbnails on our server. We only show the thumbnails in the cart - not in checkout or receipt, so it's probably OK.?
    IE6 didn't work with "colspan' so the trick was to use "colSpan" (hacking is part of life with IE6).
    For now I'm just passing the image file name via code placeholder and hide it with CSS.
    var imageRootPath = "http://mydomain.com/path_to_thumbnails/";
    // stretch our the header and footer. For IE6 need to be colSpan. Not affecting other browsers.
    $("#fc_cart_head_item").attr("colSpan","2");
    $(".fc_col1").attr("colSpan","3");
    // get our cart item rows
    var cartRows = $(".fc_cart_item");
    // add tds to each row, assuming each cart has a unique product code and that each image is named after the product code
    for (var i = 0; i < fc_json.products.length; i++) {
    $($(cartRows[ i ]).children("td")[ 0 ]).before('<td><img class="cartThumb" src="'+imageRootPath+fc_json.products[ i ].code+'"  /></td>');
    
  • lukeluke FoxyCart Team
    Excellent! So glad you got it working.

    If the images are HTTP and the cart is HTTPS it probably will still throw an SSL warning so though it may be "ok" because it's not the checkout step with sensitive information, if the user sees a warning that's not a good thing

    Still, glad you got it working and thanks for posting back your fixes.
  • brettbrett FoxyCart Team
    I'd like to see if we can get the image caching issues fixed. Do you know what problems you were having with it?
  • jeramiahjeramiah Member
    edited July 2010
    I'd love to see this feature make it into a release. I'm actually surprised it's not included and would make the cart look so much better. Thank you both for posting a work-around in the mean time. I'll give it a shot on my end.


    ***EDIT***

    Hmm, this didn't seem to work for me. Maybe I'm missing something. I'm placing this in my cart as well, not in the checkout templates. It's in my right sidebar:

    Here's the code:
    <div class="glancecart">
    <img src="/images/theme_images/glancecart_title.jpg" />
    {exp:foxee:cart}
    Total Items In Your Cart: {foxee_product_count}
    {/exp:foxee:cart} 
    <br />
    
    {exp:foxee:cart remove_link_label="Remove This Item"}
    {foxee_products}
    
    
    <table width="269" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td colspan="2"><div class="glancecart_title">{foxee_product_name}</div></td>
      </tr>
      <tr>
        <td width="145"> <div class="glancecart_price">Your Price for Each: {foxee_product_price_each} </div></td>
        <td width="124">Quantity: {foxee_product_quantity}<br />{foxee_remove_link}</td>
      </tr>
    </table>
    
    <script type="text/javascript">
    jQuery(document).ready(function() {
    var imageRootPath = "http://premiereavwarehouse.com/images/uploads/";
    var imageType = ".jpg";
    // stretch our the header and footer. For IE6 need to be colSpan. Not affecting other browsers.
    $("#fc_cart_head_item").attr("colSpan","2");
    $(".fc_col1").attr("colSpan","3");
    // get our cart item rows
    var cartRows = $(".fc_cart_item");
    // add tds to each row, assuming each cart has a unique product code and that each image is named after the product code
    for (var i = 0; i < fc_json.products.length; i++) {
    $($(cartRows[ i ]).children("td")[ 0 ]).before('<td><img class="cartThumb" src="'+imageRootPath+fc_json.products[ i ].code+'" /></td>');
    </script>
    
    <div class="prodline"></div>
    {/foxee_products}
    {/exp:foxee:cart} 
    
    
    {exp:foxee:cart}
    <div class="glancecart_special">Sub Total: {foxee_total_price}</div>
    
    {exp:foxee:checkout image="/images/theme_images/btn_edit_cart.gif"} 
    {exp:foxee:checkout image="/images/theme_images/btn_checkout.gif"} 
    {/exp:foxee:cart} 
    
    <div class="glancecart_notice">Items in your Shopping Cart always reflect the most recent price displayed on their product pages.</div>
    </div>
    

    Am I ok in assuming that you put the javascript where you'd want the image?
  • lukeluke FoxyCart Team
    If you're using the FoxEE module, they seem to build their own custom cart so the DOM might be different in how things are structured. You probably would not want the JavaScript repeated for each product (which is what it looks like this would do). You'll have to follow up with FoxEE on how they build their cart since their doing it themselves instead of the normal ^^cart^^.
  • Well, I appreciate your help on this... and I really hope you guys could incorporate this into a future release... It seems like it's always the things I want to do are never supported LOL. Story of my life. Anyway, I'm already impressed by your software. Keep up the good work.
  • I'm interested in this feature as well and would like to try to implement from Luke's original example above. But I could I get a bit more detail/info? Like can someone outline where that piece of code would go? Maybe a bit more embellished sudo example of a template?

    I'm new to jQuery and javascript, but learning quickly... if I could get a few more tid bits to get me going... thanks.
  • Ya I'm like eddieshowcase... I'm pretty much at his level with jQuery and javascript and a simple example would help to clear all this up. Is that possible guys?
  • brettbrett FoxyCart Team
    Yeah, we've actually discussed this particular feature often, and think we could pull it off, so we definitely hear you and will look into this again.

    In the meantime, @fc_adam may be able to help clarify this a little (because he's awesome).
  • That'd be really awesome. It's something I had my heart set on before I even purchased foxycart... (I actually though foxEE had this built in) I found out neither supported it but even a quick simple hack fix would be great.
  • fc_adamfc_adam FoxyCart Team
    Ok so I've expanded on Luke's code a little (and the issue with the caching was Luke's caching URL had "/dev" in it which wasn't needed), but I'll try to explain it so people can run with it. The main change I made to Luke's is to add an additional column to the head so you can set the width of the image column and the width of image, to make it look neater.

    So this setup relies on you having the images for the products on your server, all of the same filetype, and named identically to the code you give the products. For example, if I had a product with the code "beans", and I set the filetype of "jpg" in the script, I would need to have an image called "beans.jpg" on my server at the path I designated in the script.

    So the script needs to be pasted into you cart template, and is pasted right above the
    </head>
    
    tag in the template.

    For prettyness, I've pasted the code into a pastie, so you can grab it here: http://pastie.org/1055074
  • jeramiahjeramiah Member
    edited July 2010
    OMG fc_adam you freaking rock man. I will give this a shot. Thank you so much, I know there are others out there who REALLY appreciate your hard work on this. It's nice to have a company who listens to their customers!!!



    ***EDIT***
    IT WORKS! Bowing down... I am not worthy! haha Thank you so much!!!!!


    ---one really quick question. If it's not possible then don't worry I'm already pleased and you've done enough. Is it possible to somehow put this into foxEE's cart display just by adding some quick code? I will talk to FoxEE today as well as this would be something on their end. Again thank you.
  • fc_adamfc_adam FoxyCart Team
    @jeramiah, I don't really have any experience with Foxee, and its not a product that we (FoxyCart) maintain, so your best bet would be asking the guys over at Foxee.
  • Sorry about that. I just realized you're two different companies. I will contact them. Thanks again!
  • Excellent!! fc_adam, thank you. I will give this a shot with my project and report back. This will be a huge thing for us considering what we sell are prints/images :-)
  • This is great. Thanks fc guys for tackling this problem.

    I'll make this work as is if i must, but my question is this. how can i step through my optional info i've submitted in the JSON object?

    i'd like to not have to rename all of my thumbnail images after my product codes, but will if i have to, but i'm certain this can be solved programatically...

    can i make a call to.....
    jQuery(jQuery(cartRows[ i ]).children("td")[ 0 ]).before('<td width="'+imageWidth+'"><img src="'+fcCacheUrl+imageRootPath+fc_json.products[ i ].[b]options.collection[/b]+fc_json.products[ i ].[b]options.title[/b]+imageType+'" width="'+imageWidth+'px" /></td>');
    }
    });
    

    instead of using fc_json.products[ i ].code, can i use fc_json.products[ i ].options.title if i want to use the title of my piece as the filename of the image (provided that options.title is the correct sytax)

    my directory structure is images/thumbails/collection of photographs/title of photo.jpg
  • fc_adamfc_adam FoxyCart Team
    Is the title you're referencing the name of the product, or a product attribute you've added? How are you with javascript, if you view the source of the cart page, you will see the json object at the top of the page. You can see the structure there and what you'll be needed to reference to get the information you need.
  • title and collection are attributes i've added. in the JSON object they're
    options: {collection: "CityName", title: "titleOfPicture", description: "shortDescriptionOfPicture"}
    

    where i'm not clear on how to implement is in the syntax, what is the correct syntax to reffering to one of the items in the options array.

    is it
    fc_json.products[ i ].options.title
    
    or can i just refer to the title like any other item in the JSON object, as in
    fc_json.products[ i ].title
    

    thanks. incidentally, i think like most folks here in the forum, we're pretty adept at reverse engineering so long as we understand the syntax rules that we're not acutely aware of. I can read and follow javascript, but not necessarily write it from scratch, because i don't know the proper syntaxing because i've never dedicated myself to learning it.
  • brettbrett FoxyCart Team
    I'll let Adam followup, but I wanted to comment on this:
    thanks. incidentally, i think like most folks here in the forum, we're pretty adept at reverse engineering so long as we understand the syntax rules that we're not acutely aware of. I can read and follow javascript, but not necessarily write it from scratch, because i don't know the proper syntaxing because i've never dedicated myself to learning it.
    That's how I learned basically everything I know, and it's a great way to learn. We're contemplating (read: probably going to) start asking more about users skillsets and such so we can better communicate. There's a big difference between somebody like you and a merchant who only knows how to create content in their CMS, or a developer who's doing a full-on integration with multiple other systems.

    So anyway, thanks for that note. It's helpful for us to get a feel for whom we're talking to and how we should communicate.
  • lukeluke FoxyCart Team
    As to the right syntax, it's all about FireBug. With that and a few example add to carts, you can usually find where you're going pretty quickly.
  • fc_adamfc_adam FoxyCart Team
    edited July 2010
    @metroscapeGuy,

    Like Luke said, the best way to find how to grab something from the JSON is open up your cart in a tab in firefox, load up the firebug addon and play with the console. That said, you're first syntax is right, and there's another way too, so both the following are correct:
    fc_json.products[ i ].options["collection"]
    fc_json.products[ i ].options.collection
    
  • sweet. figured it out, thanks for pointing me in the right direction.
  • eddieshowcaseeddieshowcase Member
    edited August 2010
    Hmmm... so I've been trying to get this working. I took the block of code fc_adam provided, modified it slightly (doing something very similar to metroscapeguy), I paste that into my cart template just above </head>, save the template, reload the browser, bring up the cart, and the code block doesn't seem to be getting executed.

    I'm new to jQuery so I know this is probably operator error. I see the code in firebug, but the lines are grayed out and not executed. I also understand you can have multiple calls to jQuery(document).ready() so I'm not sure why it doesn't work.

    Any thoughts, suggestions of things to try or look at? Thanks... back to reading up on jQuery to see if I can understand it better...
  • Update: Nevermind, I got it working! Although I had to remove the fcCacheUrl from the img src=,

    Guess I don't understand how fcCache works, or how I should be using it.... but at least I have my concept working. Seems similar to the fella at the beginning of this thread. Any pointers to understanding how to use the fcCache in a situation like this? Or what his solution was? thanks.
  • fc_adamfc_adam FoxyCart Team
    eddieshowcase, the fcCacheUrl is just a variable that holds the path to the cache URL for images. If you don't use that, then the images won't be secured on the cart/checkout page and this will cause browsers to alert customers that the pages aren't completely secured (unless you're serving your images from a secured URL yourself).

    Did you change the fcCacheUrl value at the top of the code I provided? Can you provide a link to your setup? (whisper it if its private using the whisper your comments to box)
Sign In or Register to comment.