The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

"Add to Cart X" and "Add to Cart Y" text coming up in cart in Safari

intandemintandem Member
in Bugs & Feature Requests edited April 2011
Users can purchase a giftvoucher on my client's site where they can select the voucher amount from a drop-down list. However, in the checkout, under the Item name "Giftvoucher" it also lists two lines as follows:

Add to Cart X: 25
Add to Cart Y: 29

The numbers seem to be random and differ by amount but also if add two gift vouchers with the same amount to the cart.

The shop is currently on a test site at www.carolincollins.com/source - select 'Gifts' from the left-hand navigation.

Does anyone have any idea what might be causing this? Doesn't happen in Firefox. Haven't tested IE.
Comments
  • lancelance Member, Community Support Member
    @intandem -

    This usually happens when you are using an image as the add to cart button, as you are in this case. You can prevent this by adding x: before the image name, so:
    <input type="image" class="submit" name="x:Add to Cart" src="http://www.sourcesligo.ie/assets/images/other/SOURCE-add-to-cart.jpg">;
    [code]
    Also, I noted in looking at your site that the cart is not appearing in the modal window. This is due to the fact that you are loading jQuery twice on your page. You should load jQuery only once. I recommend keeping the FoxyCart load, which looks like this:
    [code]
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"; type="text/javascript" charset="utf-8"></script>
    
    and removing the other load, which looks like this:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>;
    
    The former is a newer version and is more compatible with ColorBox and IE9.

    Lance
  • Thanks for your quick reply, Lance (as always ...). Have added the x and taken the second JQuery call out of the header. Happy days! Can you just explain to em why in Safari I have a ">>Continue Shopping" link appear in the bottom left corner of the cart and in Firefox I get an 'X' and '->' image?
  • lancelance Member, Community Support Member
    @intandem -

    I've taken a look on Firefox on both Mac and PC, and I'm not seeing what you described. It does appear that you have some CSS which is causing the back button to display strangely:
    div#cboxClose {width: 35px !important;}
    
    This is definitely causing a display issue, as it forced the "Continue Shopping" text down below the arrows. Could this also be causing the issue you are seeing?

    Lance
  • I added this CSS call because with the default 25px, I see the 'X' and half of the '->', so by widening the div I at least have both icons in full view. Will do a couple of screen prints to show you the difference and post.
  • lancelance Member, Community Support Member
    @intandem -

    Yes, screenshots would be great. I'm seeing
    << continue shopping
    
    in all browsers, except that the text has been forced below the ticks.

    Lance
  • intandemintandem Member
    edited April 2011
    Ok, here we go. Screenshot 1 is Firefox with 35px, screenshot 2 is Firefox with 25px default, screenshot 3 is Safari (same with either width).

    screenshot-3.png

    screenshot-2.png

    screenshot-1.png
  • lancelance Member, Community Support Member
    @intandem -

    Wow. I'm not able to recreated the "X" and arrow display in my browser at all. I can see the "<< continue shopping" display in all browsers, though.

    What do you want to show up?

    Lance
  • lancelance Member, Community Support Member
    I will note that the particular images you are seeing there are coming from:

    http://static.foxycart.com/scripts/colorbox/1.3.16/style1/images/controls.png

    The strange thing is that the CSS is setting this div to not have a background image, so you shouldn't be seeing that image at all.

    Lance
  • I would much prefer the simple Continue Shopping bit - although not cut off like it's right now ..... the current image is coming from
    #cboxClose {
    background: url("images/controls.png") no-repeat scroll -25px 0 transparent;
    bottom: 0;
    height: 25px;
    position: absolute;
    right: 0;
    text-indent: -9999px;
    width: 25px;
  • sparkwebsparkweb Member, Integration Developer, FoxyShop, Order Desk
    I'm not sure this really applies here, but something worth noting (that had me confused for a long time):

    The CSS for the cart itself gets edited within the FoxyCart template because it's in an iframe.
    The CSS for the Continue button is part of colorbox and gets changed/modified on your site with your stylesheet.
  • Where is the image with the Continue Shopping bit coming from then that I see on the Safari page? Perhaps I can override it then with my style-sheet? Have tried to set background-image: none but then the whole thing disappears.

    Thanks!
  • Ok, I have now added the following to my stylesheet which seems to fix this problem and comes out good in both Firefox and Safari:

    #cboxClose {
    height: 30px !important;
    width: auto !important;
    text-indent: 0 !important;
    background-image: none !important;
    }


    Still mystified as the CSS in my earlier post in on line 42 of colorbox.css and the one on line 50 that should override it (i.e. with no background-image and auto-width) is being ignored ... Anyway, this workaround gives me an acceptable display. Now I just need to fix my last major problem with the MODx QuickEditor (in a different post) ....

    Thank you for both of your help!
  • lancelance Member, Community Support Member
    @intandem -

    The Continue Shopping link is generated by FoxyCart, and is supposed to be there. In fact, it is the only thing I see in every browser. The colorbox.css file defines the controls.png image on line 43, but then overrides that on line 50 by setting the background:none; property. I don't understand, then, why you can see that image at all.

    The issue that @sparkweb mentions is worth noting for the future, but does not seem to be relevant to this particular issue, at least not directly. You have set the CSS correctly for the most part. You should remove the
    div#cboxClose {width: 35px !important;}
    
    declaration, as that is not required and causes the continue shopping link to display incorrectly. The real puzzle here is why you are seeing the control.png image at all. The CSS is set to hide it, and you I'm not seeing it, but obviously, you are. You could try adding this to your cart-extra.css:
    div#cboxClose {background-image: none;}
    
    This should be completely unnecessary, but if it fixes the issue for you, that's a start.

    Lance
  • lancelance Member, Community Support Member
    OK - glad to see that you got a fix at the same time.

    Lance
  • Appreciated!
Sign In or Register to comment.