checkout and cart templates not taking css changes

charliemageecharliemagee Member
in Help edited February 2012
Hello Everyone,

I've included a line to a custom css file in my html head. Caching the URL and updating the template in Foxycart appears to be working fine. I've started with the most basic test: take out that png file that is in the background of the container. But when I refresh the page the png file is still there!

When I look at the CSS code in Firebug, my CSS is exactly as I've written it. But when I switch to HTML view in Firebug and click the container element, voila, the code is as Foxycart has written it. I've never seen anything like this. What's going on, and how to I get rid of the damn thing and have my CSS update correctly? This is driving me nuts.

Here's the page: https://vaccitest.foxycart.com/checkout.php

We're still in the sandbox, but please don't order anything. I don't want the client freaking out.

(The same thing is happening in the cart--not seeing CSS customizations--but one thing at a time.)
(Also, the designer built this thing in Freeway and that caused a whole different set of issues. I think I worked around those and this isn't related, but perhaps it is.)

Thanks,
Charlie Magee
Comments
  • lukeluke FoxyCart Team
    Hello Charlie. So sorry to hear you're having trouble. When I compare your .html checkout template on your server with your cached version, I see a couple differences:
    <!-- BEGIN FOXYCART FILES -->
    <script src="https://vaccitest.foxycart.com/files/foxycart_includes.js"; type="text/javascript" charset="utf-8"></script>
    <!-- END FOXYCART FILES -->
    </head>
    

    But in the cached version, I see this:
    <!-- BEGIN FOXYCART FILES -->
    <!-- END FOXYCART FILES -->
    <link rel="stylesheet" type="text/css" href="http://www.luminismundi.com/vaccitest/css/cart.css"; />
    </head>
    

    Have you tried recaching your template from the FoxyCart admin to ensure it is up to date? Also, the FoxyCart includes shouldn't be included in your cart or checkout templates as they can cause problems. We try to strip them out, but it's best just to leave them off your checkout and cart template pages.
  • Thanks Luke. I'll go back to the drawing board a bit. I put them in the templates because Freeway was moving them. Freeway uses Prototype and it controls how/where the user adds code to <head></head>. It makes it look like you're putting them last, but when it publishes files, it moves the Foxycart stuff back behind a bunch of the Freeway code. I was getting problems because of that. At least that was my guess at some of the problems I've been having.

    This is the last job I take that has anything to do with Freeway. I'm happy in TextMate and this has been a nightmare.
  • I'm at a loss Luke. I've tried putting the Foxycart code in by hand via TextMate into the published/uploaded Freeway files. I've tried adding it inside the Freeway app the way they want it done. The foxycart stuff shows up, but my customized CSS won't work.

    I've tried pasting it inline with the Freeway CSS. No good.
    I've tried pasting my href after the foxycart calls to css. No good.
    I've tried it before the foxycart calls. No good.
    I've tried pasting it in after the Freeway publish/upload. No good.
    I've tried pasting it in the Foxycart template window after a cache refresh. No good.
    I've tried pasting my raw CSS into the Foxycart area in the published/uploaded Freeway files. No good.

    I can see, and apparently use, the Foxycart stuff, I just can't edit the look and feel.

    Any suggestions?
  • lukeluke FoxyCart Team
    Hey @charliemagee. I'm really sorry to hear you're running into so many troubles. Let's start over and walk through exact specifics of what you're trying to accomplish. You first mentioned not being able to adjust the styles at all, but when I go to that link, it's clear something has been adjusted:

    2zrzwq0.jpg

    So, specifically, what are you trying to adjust via your CSS?

    Can you serve a static html file from your server? That might be the best way to take Freeway out of the loop if that's causing problems. Can you link to the checkout template you're trying to cache and then indicate exactly what style you're trying to implement?

    We'll get to the bottom of this. If Freeway is creating problems, we'll probably put together a wiki post for others once we get it figured.
  • This might all be moot, because the designer has been told by Freeway tech support to go with a cart called "Mal's". She's experimenting with it right now.

    But in the interest of future reference . . . What are you seeing that's been adjusted? The checkout looks the same to me as in your tutorial videos.

    Static pages? We're stuck with whatever it is that Freeway outputs. What am I trying to implement? Use the foxycart css in my custom css file and just edit the items I want different. I started with trying to ditch the png at the top.

    Just for reference, I'm attaching two screenshots. One clearly shows the css in Firebug showing the fc container with no image and just white background, along with the png still in place on the page. The other screenshot shows the same page without refresh but Firebug showing the css in Element view with the png still in the css.

    Well, looks like I can't attach images to this post.

    Charlie
  • lukeluke FoxyCart Team
    Unfortuately, you have to host them somewhere else. I use tinypic.com. Can you let us take a look? The image I linked to shows your custom header and such.
  • brettbrett FoxyCart Team
    @charliemagee, I use Skitch.com, fwiw (for images).

    As far as customizing things, what we recommend (as described on the wiki, which it sounds like you've read, but I want to make sure this part is clear) is to not _edit_ the FoxyCart-hosted css file, but to override it as needed. So the custom CSS would come _after_ the FoxyCart css. And if you're using the "standard" CSS you may need !important declarations on some of the css, as that "standard" file is built to not break when inserted into any type of situation. (The "text" theme, on the other hand, is easier to work with.)

    But if you're not even seeing what Luke posted above (and instead just the plain completely non-customized checkout) it sounds like perhaps your not hitting the right domain? (I don't mean that in any sort of insulting way, but you'd be surprised how often it happens that two stores were set up and you're working on the wrong store, or the add-to-cart links or forms are pointing to the wrong store domain.)

    Definitely let us know. We're here to help as much as we possibly can.
  • Luke, pictures for posting in these comments need to be hosted somewhere else? Is that why the tinypic.com?

    Brett, I wasn't editing the FoxyCart-hosted css file. I copied the FoxyCart css file to a new css file on my machine. Then began editing that file and trying to upload it in the template after everything else.

    Putting !important after my css changes !! Of course! Duh. I should have thought of that.

    Too late now. My client switched to Mal's about two hours ago. They've got everything working within minutes. Compared to all this monkeying around, it was a piece of cake . . . and they didn't need me at all. Looks like I've got to refund some money, and after spending at least 3 times the hours I expected. I've used Foxycart before and, while it isn't the piece of cake you go on about in your tutorials and sales pages, it went easier than this time.

    Not your fault. Freeway is a total outlier as far as building websites goes. It's amazing anything works with that. Thanks for trying guys.

    Charlie
  • fc_adamfc_adam FoxyCart Team
    Sorry for your troubles Charlie - definitely sounds like a sucky situation. Let us know if we can help in any way.
  • lukeluke FoxyCart Team
    Definitely a strange situation here, Charlie. Very sorry to hear things were so confusing. If you have any other insights as to what happened here and what we could improve in our documentation, we'd definitely appreciate the feedback.
Sign In or Register to comment.