The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Making sidecart a pop-up

in Help edited November 2014
I'm trying to style the sidecart as a pop-up which overlays the main site content rather than animating in from the side. So far, the best approach I can think of is just by overriding the CSS from the responsive_styles.css stylesheet. This would involve forcing the translateX values of the div[data-fc-with-sidecart] to 0, and overriding all the styles of the div[data-fc-sidecart] and positioning it fixed and center.

This approach feels a bit hacky but I can't think of a better way. So one question is: am I missing something here?

The second question, which applies assuming the above approach is the way to go, is that I'm having a frustrating issue figuring out why all the fixed elements from the main site are no longer staying fixed (whilst the inspector shows that they are) but instead scrolling up with the page. I think the problem has arisen because the scrollbar is scrolling something other than the main content, and so while the content is fixed, it's moving up with its container. Any thoughts on what's going on here, and how it might be resolved (what needs overriding etc.)?
Tagged:
Comments
  • After more investigations, I think a lot of these problems could be avoided if all the site's content weren't wrapped in the div[data-fc-store-page]. I don't see any reason why this is needed if the cart would just appear as a pop up. So another question (!), is there any way of disabling this behaviour?

    Thanks!
  • fc_adamfc_adam FoxyCart Team
    @pumkincreative,

    Is your site online somewhere that we could take a look? Sidecart is new functionality with 2.0, and we've spent countless hours continuing to improve it and make it more robust since adding it. If you wouldn't mind, we'd certainly like to take a look and see what might be going on in your instance.

    In terms of loading the cart in a modal window instead of the Sidecart, that is possible to do - although it's not something we've documented just yet. Did you have a particular library you were wanting to use?

    After more investigations, I think a lot of these problems could be avoided if all the site's content weren't wrapped in the div[data-fc-store-page]. I don't see any reason why this is needed if the cart would just appear as a pop up.

    You are correct that it wouldn't be needed for a modal popup - the wrapper div is needed for our Sidecart functionality, so that the page and the cart can be scrolled and positioned independently of each other.

  • Hi Adam,

    Thanks for your response. I'll whisper the staging URL of the site to you now...

    To reply to your questions...

    I don't think any library would be needed for the cart to appear in a modal window. As you'll see from the staging site, I've manipulated the CSS so that the pop-up appears pretty much as desired but there are still a few issues that need dealing with. For example:

    1) I don't want the page to scroll to the top when the cart appears
    2) The foxy cart JS is doing some unwanted things to the site (like setting a top position on the nav#toolbar element)
    3) There's still some frustrating CSS being applied to the div[data-fc-store-page] which is causing glitches on the site
    4) I'm having to apply a lot of my own CSS to override the styles coming from the responsive_styles.css stylesheet and in future, if this stylesheet gets modified, my hacks may stop working.

    A solution to all of this would be to pick and choose and modify the JS which creates the cart and avoid loading the FoxyCart CSS completely. Is there any way to do this?

    And if not, what other solutions do you suggest?

    Thanks.
  • brettbrett FoxyCart Team
    @pumkincreative, wow, that's gorgeous.

    So… yeah. I'm actually kind of amazed you've done what you've done with the approach you've taken. The sidecart js and css is _really_ specific to the approach Sidecart needs, and definitely wouldn't be ideal for what you're doing.

    (OT: Are you planning on making your site and cart responsive? A big part of us moving to sidecart from a modal window was that modals are awkward with a responsive layout. I'd love to see how you solve that problem, if you do.)

    As far as customizing things goes, the best thing to do would be to not use the Sidecart stuff at all. Can you give us a little bit of time (perhaps until tomorrow) to make sure the docs are solid for you to do what you're after here? In the meantime, the relevant docs are:
    https://wiki.foxycart.com/v/2.0/json
    https://wiki.foxycart.com/v/2.0/javascript
    But we need to get you docs on how to get the FoxyCart javascript without the sidecart js loaded already.
  • Hi Brett,

    Thanks for your help (and I'm glad you like it!)

    I think you're right about not using the Sidecart stuff; it's quite an uphill battle! So yes, for sure I'd be happy to wait while you sort out the docs

    I've had a look at the links you sent and I think I understand what they're getting at. However, it would be ideal if I didn't have to build the whole JS side of things from scratch. Instead is there any way I could still use your ready-made code for triggering the cart and handling the adding and removing of items (etc) but just without the Sidecart JS? But was that what you meant by
    how to get the FoxyCart javascript without the sidecart js loaded already
    ?

    Thanks!

  • brettbrett FoxyCart Team
    @pumkincreative, I think the thing I'm most interested in is how you'd like to handle the actual cart portion. Adding a product is pretty easy, and displaying things isn't that tough, but the cart's got a lot more functionality (changing quantity, removing products, adding coupons, displaying subtotals, accepting postal code and choosing city+state, selecting shipping, etc.). That's the cart template, which you might actually want to use even if you aren't displaying it in the sidecart, but that's different than anything we've done in the past, so it's something we'll have to think through.

    Luckily, we've now got a really good looking use case :)
  • edited November 2014
    Hi Brett,

    I think we would want to use the Cart template and all its JS but on a separate page which the user would get to by clicking on the "CHECKOUT" button on the in-site modal (which is how it works now I believe).

    What we would like to avoid is just the JS and CSS that is used to create the Sidecart style bit whilst still using all the JS that handles the other functionality that you mentioned (changing quantity, etc.).

    How are you guys getting on with preparing the docs you mentioned previously on how to get the FoxyCart javascript without the sidecart JS?
  • brettbrett FoxyCart Team
    @pumkincreative, sorry for my delay. I haven't forgotten this one, but haven't had the chance to do what I wanted on it either.

    For now, I'll whisper something.
  • Hi Brett,

    Thanks for your pointers.

    We've tried adding just those files that you mentioned but it hasn't really helped. The foxycart.jsonp file does hijack the default behavior on the add to cart links - i.e., the page doesn't redirect - but then nothing else happens and no errors or logs or made. I'm not sure where to go from here.

    What we'd like to do is still have the cart appended to the DOM, like the sidecart JS does and we want to keep the button behaviours such as 'add to cart', but we then don't want anything to happen which manipulates our own layout: no scrolling to the top of the page, and no setting top values on fixed elements (and anything else the sidecart JS does to help with its appearance).

    We're not completely averse to creating our own behaviour functions but we had hoped to avoid this as behaviour-wise, we just want the standard stuff - what we don't want is the visual manipulation that Sidecart applies to our own site templates. If writing our own functions is the only way we can use the jsonp file, can you point us to some documentation which gives us an idea of how involved this is?

    Based on an example we saw, we think that using FC version 1 might give us the flexibility we need, and in fact we've begin talking to one of your support team about rolling back to this one. At this point we're trying to decide which way forward is the simplest - what would your suggestion be?

    Hope this is all making sense and thanks for your help so far.
  • brettbrett FoxyCart Team
    Sorry @pumkincreative. @fc_adam whispered to me instead of you. I'll whisper some code your way.

    I haven't seen the other discussion about downgrading, but to clarify: v1.1 does less (way less) than v2.0 does, so there's no reason to downgrade. (I mean that sincerely. 2.0 is different, but prior versions don't behave even remotely similar wrt rendering the cart within your own page. So it's either build it yourself (which is easier in 2.0), or use an iframe (which is just as easy in 2.0).)
  • fc_adamfc_adam FoxyCart Team
    We've been talking through this amongst the team, and we have an interim solution for this now, but we're also planning to roll out something native to handle this a bit better in the near future. Our default option will remain our Sidecart style, but we'll make it a bit easier to roll out a custom cart view.

    For now, you can follow these steps:

    1) Add the following code into your template - anywhere is fine, but it might make sense to put it at the end of your template before the </body> tag.
    <div data-fc-cart-container style="display:none;"><div data-fc-container="cart" id="fc" /></div>
    

    The 'data-fc-container="cart"' div will be where the cart template is rendered. It will be hidden by the "data-fc-cart-container" div.


    2) Update the FoxyCart include on your page, to instead of including the "loader.js" file, manually include two files. This is to remove the Sidecart functionality from the page.

    Replace the loader.js with this (updating "your-store" to your actual store domain):
    <script src="//cdn.foxycart.com/your-store/foxycart.jsonp.min.js"></script>
    

    Include this with your stylesheets in the <head> section of your page template:
    <link rel="stylesheet" type="text/css" href="//cdn.foxycart.com/your-store/responsive_styles.css">
    


    3) Paste the following style block in your header, or include the style within your existing CSS stylesheets:
    <style>
    #fc #fc-cart {
    	width:100%;
    }
    #fc .fc-fixed-button-left, 
    #fc .fc-fixed-button-right {
    	float:left;
    	width:50%;
    }
    #fc .fc-sidebar {
    	margin-bottom:0;
    	padding-bottom:0;
    }
    </style>
    


    4) Paste the following script at the bottom of your page, right before the closing </head> tag.
    <script type="text/javascript">
    var FC = FC || {};
    FC.onLoad = function () {
    	FC.client.on('ready.done', function() {
    		FC.cart.updateConfig();
    	});
    	FC.client.on('cart-submit', function (params) {
    		// Show the cart here
    	});
    }
    $(document).ready(function() {
    	$('body').on('click', '[data-fc-sidecart-dismiss]', function() {
    		// Hide the cart here
    	});
    })
    </script>
    


    So at this point, you'll have the cart updating on your page, in the hidden div - but then nothing else will be happening visually. Within the javascript you pasted in step 4 above, you will need to add in your logic to show the cart and also within the click function to hide it. This could be as simple showing and hiding the "data-fc-cart-container" div, and you'll need to apply styles to that div based on that.

    Using a modal

    If you wanted to display the cart in a traditional modal rather than our Sidecart, you could use something like Magnific which is responsive out of the box too. As a quick example of how that would look - assuming you've included the CSS and JS files as noted on their site, you just need to update two parts from above.

    Firstly, update the CSS in step 3 to include this:
    <style>
    #fc {
    	position: relative;
    	background: #FFF;
    	padding: 20px;
    	width: auto;
    	max-width: 600px;
    	margin: 20px auto;
    }
    </style>
    

    and finally update the javascript to look like this from step 4:
    <script type="text/javascript">
    var FC = FC || {};
    FC.onLoad = function () {
    	FC.client.on('ready.done', function() {
    		FC.cart.updateConfig();
    	});
    	FC.client.on('cart-submit', function (params) {
    		var $cart = $("[data-fc-container='cart']").html("Loading...");
    		$.magnificPopup.open({
    		  items: {
    		    src: $cart,
    		    type: 'inline'
    		  }
    		});
    	});
    }
    $(document).ready(function() {
    	$('body').on('click', '[data-fc-sidecart-dismiss]', function() {
    		$.magnificPopup.close();
    	});
    })
    </script>
    


    After doing that, clicking an add to cart link on your page will load up the the cart within the Magnific modal, and clicking the continue shopping link will close it.


    Obviously, whichever way you go, you'll need to apply some custom styling to get it to look how you want - but this should at least get you started with using something other than Sidecart. We'll update later when we have additional news on the native approach.
  • Hi Adam,

    This is really great, thank you so much for all your work on this.

    I've implemented what you've suggested - minus the modal plugin; I'm just using CSS to do the pop-up behaviour for now - and it's really looking positive. However there are still a few issues, some more serious than others. These are them...

    - The original markup of the site is still being wrapped in a
    <div data-fc-store-page></div>
    
    . This isn't too bad as I now don't have to override all the Sidecart CSS on it, but it would be nice to avoid this if possible.

    - Fixed elements from the site are still being given top position values

    - is there any way stop the hash being written to the url. When the page gets reloaded and there's a hash, jQuery throws the error: Uncaught Error: Syntax error,
    unrecognized expression: ##fc-sidecart
    

    - I can't seem to get the cart to disappear when click on the dismiss button. I'm using the following function:
    $('body').on('click', '[data-fc-sidecart-dismiss]', function() {
    	console.log('hide cart');
            console.log($('#fc').parent().length );
    	// Hide the cart here
    	$('#fc').parent().hide();			
    });
    

    The console log is triggered and the element has a length of 1, so it is finding it. However, it's not getting hidden and no other jQuery methods work on it either (you can't set the CSS or add a class etc.).

    I understand you're still working on this but if you could take a look at these features that would be really great.

    I'll whisper a URL now where you can see it all in action
  • fc_adamfc_adam FoxyCart Team
    @pumkincreative,

    Looking at your URL there - you're still including the sidecart javascript file. Take a look at step 2 above and then try again. That should fix all the issues you're experiencing there.
  • That was it, thanks! Sorry about that. Seems to work great now.
Sign In or Register to comment.