Cart page jumping to single column layout when changing quantity

Hey guys,

When the QTY of an item is changed, it causes our cart to jump to an awkward single column layout, seen on our cart page here: https://secure.botanicalcraft.com/cart?cart=view

We've removed all our 'custom header' code in foxycart, and tested this, and it still occurs. The problem only goes away when we reset our Cart template to default, so we know it's related somehow to the custom template feature. However, I've also tried clearing out our navigation header and footer in Webflow to try and isolate the problem, but the problem still occurs even with a "blank" custom template.

We are using the templating instructions provided by Josh for the Webflow integration, seen below:

Any clues?

image
image
Comments
  • fc_adamfc_adam FoxyCart Team
    @Epotratz,

    Thanks for the detailed overview as always.

    The issue you're running into here is that the cart is being reset to the sidecart style display when it's rerendered clientside. To prevent that from happening, you just need to add in an additional declaration to show that it's meant to be the full page cart.

    The custom code in your body needs to instead look like this:
    {% set cart_is_fullpage = true %}
    <div class="fc-context--cart-fullpage" data-fc-container="cart">
    {% embed 'cart.inc.twig' %}
    {% endembed %}
    </div>
  • @fc_adam,

    Ok, weird. I just went to input the code you posted, and it was already in the HTML embed code. I guess it just doesn't show the full code in display. (see below)

    Has anyone ever successfully embedded a full-page cart into a Webflow site? I checked Josh's Webflow example site and the full-page cart doesn't have the custom template applied.

    image
  • fc_adamfc_adam FoxyCart Team
    @Epotratz,

    Ah good catch. It's just not outputting the HTML tags there, makes sense.

    This looks to be a difference with how Webflow is outputting the custom attributes. The "data-fc-context" attribute on the body needs to be specifically output as data-fc-context='{"cart_is_fullpage":true}', but Webflow outputs it as data-fc-context="{'cart_is_fullpage':true}". It's a small swap of the quotations - but it's important for valid JSON.

    I've updated your current cart template in your development store to be formatted correctly, and if you test your full page cart now - it works. That doesn't solve specifically getting this to work natively with Webflow though - as next time you cache the template, it'll be wrong again. We'll look into other options there and let you know.
  • @fc_adam,

    looks like a needle in a haystack! Thanks for the fix!

    FYI, I submitted a fix request to Webflow.

Sign In or Register to comment.