Foxy Forum Status

We're no longer responding to questions via our forum, but we will keep it up for historical reasons. If you can't find the answer you're looking for, please visit our knowledge base or contact us. If there's enough interest in the future, we may bring the forum back.

I would like to use cart instead of the responsive one

I would like to use the old style cart instead of the responsive one they have now, anyone have any success switching to it?
  • fc_adamfc_adam FoxyCart Team

    Good question. It is possible to use a modal style cart instead of the default Sidecart approach with 2.0, but it requires some custom javascript to achieve. How handy are you with javascript?
  • I'm real familiar with javascript.
  • fc_adamfc_adam FoxyCart Team


    To switch out the cart, you'll follow these basic steps. Firstly - within your store's configuration you'll need to set the cart type option to "Custom". This will remove all of the Sidecart functionality, and by default the add to carts will happen silently in the background.

    On your website, you need to define a div for the cart to be output into. If you add the following markup - the cart will be output into it automatically:
    <div id="cart-modal"><div data-fc-sidecart><div data-fc-container="cart" id="fc"></div></div></div>
    The contents inside the outer div is the required portion. The outer #cart-modal div is what you'll probably pass to your modal as the contents of the modal.

    You then need to overwrite the normal add to cart functionality to load your custom modal instead. That can look basically like this:
    FC.onLoad = function () {
    FC.client.event('cart-submit').override(function (params, next) {
    if (!FC.client.isActionNeeded(params)) {

    FC.client.request(params.url).done(function () {
    // Open your modal via JS here
    By default - the cart will still be styled like it would for the Sidecart - so you'll need to then overwrite the styles to get it to display how you'd like it to be within the layout of your modal. To start from a more raw point of styling, you can also remove the data-fc-sidecart attribute from the second div, which is used as the basis for most of the styling for the Sidecart.
  • Sweet thanks, I'm about to get started on it now
  • I was modifying the loader.js file would that be the correct way in customizing the cart or is it a better approach.
  • fc_romanfc_roman Member, FoxyCart Team
    edited September 2016
    Hi @tshelto,

    After further discussion here, it's been established that hosting your own version of loader.js is officially a Bad Idea™, because you (and more importantly your paying customers) may not get the latest version of your specific store with this approach. This page goes into the details.

    You can certainly use a self-hosted (but you really, really shouldn't because see above), modified variant of loader.js, but in doing so you would sign up for the responsibility of monitoring the Foxy-hosted loader.js for all updates and fixes in the future and copying them to your instance.

    Placing your custom code into a separate file included after loader.js may be the answer.

    Also, this thread may be of interest.

    Let us know if you have any other questions.
Sign In or Register to comment.