SPA issue with Foxycart 2.0 Sidecart

NetNutNetNut Member
in Help edited November 2014
Working on a MEANJS application and having an issue with adding items to the cart and the side cart opening but closing itself instantly after the items are loaded into the cart. The site is http://photo2.ink . At the end of the process you add your chosen print to the cart with a button that submits a form built with the information supplied in previous steps. This works fine, its just that the sidecart once populated closes itself.

We have looked at it from all other angles and can't seem to nail this bug down. At first we thought it may have been related to third party plugins, but we have completely eliminated those possibilities through removing all unnecessary pieces. Can we get some inside help on this?

~Brandon Shallenberger
WebDev @ USNetting

Comments
  • It is worth noting that logging is on and we see Sidecart .hide() runs three times after moving to the second "page" and then once on every "page" change after that. It seems to be throwing .hide() around for many actions and multiple times.
  • We've put a nasty bandaid on the problem by sending a client request with two sidecart.show methods in the done method directly in the controller. We've noticed that on route change .hide is running multiple times for no apparent reason, so this temporary fix gets us past that. Any thoughts on why sidecart.hide() would run so much?
  • fc_adamfc_adam FoxyCart Team
    @NetNut,

    We'll take a look at what might be going on here and get back to you as soon as we can.
  • brettbrett FoxyCart Team
    @NetNut, I'll be taking a look at this, but it might take a few days. Sorry for the delay, but I'm glad you've got a bandaid for now.
  • Thanks , guys. On desktop we have the product added to the cart automagically via FC.client.request after the crop is confirmed. This used to take you to the confirmation stage and open the cart on ready but that kept failing. Now it automatically adds the product to the cart without opening the cart.
    It seems to be similar to this issuehttps://forum.foxycart.com/discussion/comment/50823#Comment_50823, but we have ensured that we have the loader.js included.

    As of last night we had to use the class on the cart links to bypass the sidecart in order to get ready to deploy. It is worth noting that when applied to the body tag of the main container each state is loaded into that the sidecart .hide() logs no longer show.

    In order to preserve the bug for testing we left a cart link without the class in the Inquire page footer copyright symbol. If you add items to your cart by cropping an image then go to the inquire page through the nav bar and click on the the © you should get the sidecart to slam shut on itself immediately after opening.
  • Update on this again: We now have an issue when our custom flat rate shipping code is included in any way ( in the cart include, full cart template, or the footer script injection in admin panel) the cart page formatting is getting broken. Screenshots follow:

    Correct formatting, without custom flat rate shipping code from documentation.
    wBQ6z11

    Broken formatting with flat rate shipping scripts.
    wBQ6z11,mHNvL5p#1

    If you remove an item from the cart it reverts to the correct template formatting. Again, bandaid for deployment applied and we go straight to checkout now. No sidecart. No cart. Effectively no reason to have moved to foxycart 2.0 for this project at this point unfortunately, but we are leaving it in for the sake of time rather than move back to 1.

    Hope you guys are able to shed some light on at least one part of the issue.
  • fc_adamfc_adam FoxyCart Team
    @NetNut,

    Thanks for including a way for us to replicate the issue - we'll take a look and get back to you as soon as possible.

    In terms of your second post regarding the full page cart, we have a fix pending for that that should be pushed live sometime this week. For the meantime though, if you switch out the flat rates script for this version: http://pastie.org/private/r3lju3oxvi5q7cmju1c1q - that should get it working for you now. You'd just need to move your custom logic from your existing script to this one and include that within your templates.

    For what it's worth, 2.0 has improvements across the whole checkout flow - not just on the cart section, so there are definitely benefits for sticking with 2.0 even if you're not making use of the cart - but hopefully we can work out why that's not working for you with your custom set up soon.
  • brettbrett FoxyCart Team
    @NetNut, I'm not seeing the previous behavior on sidecart now (clicking on the copyright symbol on the inquire page). Looks good to me in both Safari and Chrome. Are you still seeing it?

    I am seeing that the scroll position isn't maintained (and it jumps to the top) when sidecart comes in. I'm looking into why that's the case, but let me know if you're still seeing the sidecart disappearing, and if so, in which browsers.

    Great work on the site, btw. Very easy to use.
  • @fc_adam until sidecart can stay open we will be sticking with straight to checkout, but we will put that script in when we go back. Definitely sticking with 2.0 at this point.

    @brett we moved the copyright symbol link into the page after you crop the image. This seemed to bring back the sidecart issue . I'm using chrome 39.0.2171.71 (64-bit), but the issue is also present in Safari Version 8.0 .

    Thanks for looking into this. Glad you found the site easy to use. It is becoming one of the biggest pains in the arse (non foxycart related issues) but we want to polish this as much as possible.

  • brettbrett FoxyCart Team
    @NetNut: Sorry for the delay. Haven't forgotten about this thread.
  • @brett No worries, we just solved the issue. It was problem on our side with angularjs . This may be worth putting a note in the docs on sidecart documentation.

    The issue is caused by angular-ui-router when using the typical href="#!/path/to/page" to move between states. Once we figured out that using ui-sref="stateName" on our links and in our javascript controllers was the more effective way of navigating between states we thought to test the sidecart again. This time the sidecart .hide() logs aren't fired between pages and the sidecart remains open.

    tl;dr : When using Foxycart 2.0 with angularjs be sure to switch states using ui-sref rather than href.

    Thanks for looking into it in the mean time. As always it's great working with the FC team. Happy holidays to all.
  • fc_adamfc_adam FoxyCart Team
    @NetNut,

    Oh great catch. We'll look at adding that in as a note in our documentation.
  • Spoke too soon. Unfortunately this still occurs in our production heroku environment.
  • lukeluke FoxyCart Team
    Is there an environment publicly available where we can take a look? It might not be until next week before we can really dive in though.
  • @luke Yes, it is live if thats what you mean. Unfortunately with this project testing == production. Photo2.ink is the site.
  • brettbrett FoxyCart Team
    Hey @netnut. What I'm seeing currently is:
    * Clicking "cart" up top works fine.
    * On step 4 you've got a "view cart" link that goes to /checkout. That should probably be changed to /cart?cart=view, yeah?
    * On step 4, you've got a checkout link that goes to /checkout. Though it technically works, the way it should be is /cart?cart=checkout.
    * The Inquire page doesn't have the © symbol.

    But I'm not seeing the problem currently. Did you manage to fix it on production too?
  • Yeah, we took out the © symbol link since we went back to the side cart on the live site. We aren't advertising so its sort of a playground at the moment. As for the step 4 cart link pointing to checkout that was to just bypass the cart altogether at that point in development.

    I'm still getting the sidecart closing after going through the process of uploading, cropping, and landing on the confirm page. It works fine on the home page but closes on every other step for me.

Sign In or Register to comment.