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.

Custom header template configuration disabled side-cart functionality (Version 2.0)

chubbard216chubbard216 Member
in Help edited October 2014
I added a some custom styling in the custom header portion of the Template Configuration, and it appears to have disabled the side-cart. Now all calls to the cart are opening in the separate (?cart=view) page.

Here's the code I added:
<link rel="icon" href="http://campbellssweets.com/wp-content/uploads/2013/12/campbells-favicon.png"; type="image/png"/>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Bree Serif', 'Open Sans']
    }
  });
</script>
<style>
#fc h2, #fc h3, #fc h4, #fc legend {
font-family: 'Bree Serif';
}
#fc .fc-section-counter {
	background: #444;
	border-color: #444;
}
#fc legend, #fc #fc-receipt-container #fc-cart--responsive .fc-cart__title__header {
	color: #444;
}
#fc .fc-button--submit, #fc .fc-action--checkout--button {
	font-size: 1.25rem;
}
#fc #fc-checkout-container {
	margin-bottom: 2rem;
}
#fc .fc-checkout__main__contents {
	margin-bottom: 1rem;
}
</style>
Comments
  • fc_adamfc_adam FoxyCart Team
    @chubbard216,

    I'm assuming this is for Campbells Sweets - is that correct? If so, looking at your site, I don't see our javascript included on your site at all - so the Sidecart functionality wouldn't be added in. You'll need to add the loader.js script into your page to make use of that, and you can grab that from the "Sample Code" section of your stores administration.
  • chubbard216chubbard216 Member
    edited October 2014
    @fc_adam and @brett,

    This is for Campbell's, but I have a development FC account setup for a specific page - and that page is properly including the loader.js.

    It's currently password protected so I can whisper either one of you guys credentials to get in.

    Thanks,

  • Don't know if this will help or not, but I also wanted to point out that I removed the link to the favicon and the script pulling in Google Web Fonts (so only styles were left) and I still ran into the same issue - the sidecart (which was working fine before) suddenly was disabled and every call to the cart was opening in a new page.
  • brettbrett FoxyCart Team
    @chubbard216, that sounds super odd. My hunch would be a javascript error, but go ahead and whisper the info to @fc_adam and me and we'll take a look.
  • fc_adamfc_adam FoxyCart Team
    @chubbard216, {in response to whisper}

    Thanks so much for whispering those details. I just tested this out on Chrome, and Sidecart loaded in fine. Are you still experiencing this issue? If so - what browser and operating system are you on?

    Oh you mentioned you had to remove the custom CSS - and doing that got it working again, is that right?
  • fc_adamfc_adam FoxyCart Team
    Ah I see it now - it is indeed a javascript error, specifically "WebFont is not defined".

    So the way to fix this is to not include the javacript code in Sidecart, but just on the full page cart, checkout and receipt. To do that, you would remove the javascript blocks from the header, and place this in the footer:
    {% if cart_is_fullpage or context == "checkout" or context == "receipt" %}
    <script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
    <script>
    $(document).ready(function() {
      WebFont.load({
        google: {
          families: ['Bree Serif', 'Open Sans']
        }
      });
    });
    </script>
    {% endif %}
    

    Note that I also wrap the load call in a document.ready function to ensure the webfont.js file has loaded in time.

    You can leave the CSS styles within the head text area, but the javascript needs to be wrapped in that twig, so that needs to then go in the footer as we don't render twig in the head config option at this time.

    Finally, if you're including that javascript on your own site, then that will in turn apply to Sidecart - as we include that within your actual page rather than in a modal iFrame as we did in older versions.
  • @fc_adam,

    Thanks for the info in the whisper - it worked perfectly.
  • fc_adamfc_adam FoxyCart Team
    @chubbard216,

    Awesome! Thanks for letting us know!
Sign In or Register to comment.