Help with cart types and cart parameter behaviors.

I'm trying to setup a small "added to cart" modal confirmation and keep the visitor on the same page. Similar to the functionality of the sidecart, but with some product recommendations and information added in.

I'm mostly there, but I'd like some feedback on some behavior I'm seeing.

With the cart type set to custom, an add to cart button correctly fires the request and does not redirect me to the cart page.
Clicking a http://storeurl/cart?cart=checkout link correctly forwards to store checkout.
Clicking a http://storeurl/cart?cart=view results in a twig render log and I assume a callback trigger firing, but it does not redirect to the cart.

That behavior seems correct, calling cart=view with a custom build would assume I wanted to parse the cart data in the page and not visit the cart itself.

Alternatively,

Setting cart type to full page results in slightly different, but expected behavior.
cart=view & cart=checkout links work correctly and redirect. But cart=add links forward me to the cart page (as expected). If i catch them in the 'cart-submit' event and call next(false) it prevents the redirect, but the product is not added.

That also seems correct, but not exactly what I need.

My two solutions are to either
Set carttype = custom, catch the cart-submit event for cart=view and manually set window.location.href= storeurl/cart?cart=view+sessiondata to trigger the redirect.

or,

Set carttype = fullpage, catch the cart-submit event for cart=add, call next(false) and then submit a FC.client.request with the full product url params.

Both seem to work, I'm curious if either is a bad idea or if there is an easier way to force the redirect on the cart=view links with the custom cart setting.

Thanks!
Comments
  • fc_adamfc_adam FoxyCart Team
    edited November 2017
    @joefranks,

    Good question. Your first approach is probably what I'd recommend - and you could use some javascript like this on your page after setting the cart type to "custom":
    <script>
    var FC = FC || {};
    FC.onLoad = function() {
    FC.client.event('cart-submit').override(function (params, next) {
    if (
    !FC.client.isActionNeeded(params)
    || params.data.cart == "view"
    ) {
    next();
    return;
    }

    // Consider showing feedback that add to cart is happening

    FC.client.request(params.url).done(function () {
    // Product added, show custom modal
    // FC.cart.render();
    next();
    });
    });
    };
    </script>
    Alternatively - you could also use the normal Sidecart display - let it handle normal "cart=view" requests, but if it's an add to cart, handle it in your custom way. To achieve that, the code is somewhat similar - but like this (with the cart type configuration option unselected to leave it on the default sidecart):
    <script>
    var FC = FC || {};
    FC.onLoad = function() {
    FC.client.on('cart-submit', function (params, next) {
    if (
    !FC.client.isActionNeeded(params)
    || params.data.cart == "view"
    ) {
    next();
    }

    // Consider showing feedback that add to cart is happening

    FC.client.request(params.url).done(function () {
    // Product added, show custom modal
    // FC.cart.render();
    next(false);
    });
    });
    };
    </script>
    Either of those approaches should work for you - let us know if you have any questions!
  • Looks like the first option will work fine for me.

    Couple of follow up questions just so I understand.

    What is isActionNeeded checking for?

    Is there an easy way to modify params before sending the request? I have tried setting params directly but it looks like everything is set in the params.url before the event gets it. Is there an easy way to rebuild that url after changing a param value?

    Appreciate the help, thanks Adam!




  • fc_adamfc_adam FoxyCart Team
    @joefranks,
    What is isActionNeeded checking for?
    The isActionNeeded function checks to see if it's a cart request that should skip the normal Sidecart display - like a direct to checkout, updateinfo link or a receipt link.
    Is there an easy way to modify params before sending the request? I have tried setting params directly but it looks like everything is set in the params.url before the event gets it. Is there an easy way to rebuild that url after changing a param value?
    You're correct there - the add to cart is using the params.url variable. You can certainly rebuild the URL using the params.data if you wanted to by joining them together to form a new URL, or perform a replace on the specific variable you want to change in the URL variable directly using javascript.
  • Great, thanks for the help. Always appreciated.
Sign In or Register to comment.