Popup show for upsell but hide foxycart on the left

madebymtmadebymt Member
Hi Foxycart
I know you guys have upsell documentation and I read it, because the website structure, so we decide not to go that route, so we use bootstrap popup as a upsell window, so when customer hit "add to cart", the popup will show.
But I want to hide the left foxycart drawer to show until they click "yes" or "no" for the upsell popup.
I try a lot of methods, use CSS to hide, Jquery to delay that, but doesn't seem to work.
What's the best way to make this happen for using bootstrap popup?
Recap:
1. select item add to cart
2. Popup show for upsell : yes or no
3. Then left foxycart drawer show after they select

Thank you.
Comments
  • fc_adamfc_adam FoxyCart Team
    @madebymt,

    Good question. For what you're describing, probably the best way to achieve it would be to overwrite the normal add to cart process, instead adding the product the customer just selected in the background, and triggering your upsell modal to show. Then, add some additional logic into the upsell modal to trigger the sidecart to show based on the customers selection.

    You can include javascript like this on your website to intercept all of your add to carts and prevent the sidecart from showing by default:
    <script>var FC = FC || {};
    FC.onLoad = function() {
    FC.client.on("cart-submit", function(params) {
    if (
    !FC.client.isActionNeeded(params)
    || FC.sidecart.shouldUseFullpageCart()
    || FC.sidecart.bypassSidecart(params)
    || params.data.cart === 'remove_coupon'
    ) {
    return true;
    }


    FC.client.request(params.url).done(function () {
    // Trigger your modal to be displayed here
    });

    return false;
    });
    };</script>
    You'll see a commented out line there for where you could trigger your upsell modal to show, right after the product has successfully been added to the cart in the background.

    Within your modal functionality - you'll need to then manually trigger the sidecart to be shown. If they click yes, you'll also need to add that upsell product to the cart, or if no, just trigger the sidecart.

    For yes, you would use logic like this:
    FC.client.request(your_add_to_cart_url).done(function () {
    // Hide the modal here
    FC.sidecart.show();
    });
    Note you'll want to trigger the modal to hide before showing the sidecart, and of course update the your_add_to_cart_url variable to be your add to cart URL for the upsell product.

    If the customer clicks no in the modal, you'll do the same, but just not wrapped in a request:
    // Hide the modal here
    FC.sidecart.show();
    Hopefully that helps get you on the right path! If you have any questions around implementing that, or if we can help with anything else, don't hesitate to ask.
Sign In or Register to comment.