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.

Is FoxyCart made to be inserted into a site or used as a stand alone shopping cart?

This is a sincere question.

Why do I ask?

Because I have been trying to insert FoxyCart as a shopping cart into an existing site's theme (if you will) and it has been and continues to be an incredibly frustrating and very complicated thing to do. I am getting there but let me tell you...it is a time consuming thing and something that must be done one little bitty step at a time. One must constantly test to make sure the responsive nature of the FoxyCart cart is not messed up. One change at a time. The smallest changes will break things if one is not extremely careful.

Now part of my experience so far (using 2.0) may be that I am not an expert in CSS and integration. I say that not because I am entirely inexperienced in CSS and otherwise but rather as an acknowledgement that perhaps, just maybe, I am not seeing something that might make integrating FoxyCart much easier than I have experienced it to be.

The documentation does make it sound like it is perfectly doable and indeed perhaps even an easy thing to do though my experience has been entirely otherwise.

So by all means if anyone knows of a way to do this from a general point of view...please feel free to help me understand how to do this better.

In the absence of such input let me if I may make some observations that might point to why it is proving to be an incredibly complicated thing to integrate FoxyCart into an existing theme (so that I can get input on these observations as well).

To start with FoxyCart attaches an ID to the HTML tag. The problem with that is that each page into which the cart is added inherits the properties of this ID. It isn't just the CART that inherits these CSS properties...it is the ENTIRE PAGE.

So something as seemingly innocuous as "#fc div" could affect every single DIV inside the entire page! Depending on the CSS specificity of course.

If I have a DIV inside the page them FoxyCart's #fc div may affect that DIV. If FoxyCart's CSS has higher specificity than my own CSS for my own DIV...well...FoxyCart's CSS wins and my nicely rendered DIV is messed up.

It would have made more sense, from the standpoint of FoxyCart making it's cart more easily integrated into an existing site's theme, to use an ID on some DIV enclosing all of FoxyCart's code. An ID that would have appropriately applied to FoxyCart's own code leaving the rest of my page them alone. Where I could insert and/or take out FoxyCart's cart code entirely at will without the page rendering getting messed up in any way.

As it is it appears that I must do it all FoxyCart's way (on any page that I use the cart on) or else...well...there is no else I suppose short of looking for an easier to integrate cart - which I am not prepared to do for my client at this point in time.

Instead I have to backtrack to figure out how FoxyCart's CSS is affecting my page and why my page elements are being screwed up such that they don't appear correctly. In some cases the problem is that my ID's on some DIV's that come higher than FoxyCart's code affects the rendering of cart elements. So this problem works both ways.

But...it seems to me that it would have been MUCH EASIER to integrate FoxyCart IF it had not done things like attach an ID to the HTML tag of the page.

That's just one example which seems to indicate that FoxyCart was NOT made to be integrated easily into an existing site's look.

Trying to integrate it has been and continues to be (CSS wise) like trying to figure out which spaghetti noodle goes where. Not an easy thing to do any means - even with the help of Web Development tools found in browsers.

I override one FoxyCart CSS and something breaks on my own site CSS rendering. I change something in my own CSS and something breaks in FoxyCart. It is incredibly difficult at times to figure out which CSS code is breaking what.

Is there something I am missing in how to do such an integration?

Is there...like there was under 0.7.2 an unstyled version of the cart (CSS wise) that might be easier as a starting point for integration?

Anybody?

Carlos
Comments
  • I was re-reading some of the documentation and come to find out I missed something it said.

    Apparently one can move the id="fc" away from the HTML tag and place it as an ID in the DIV which encloses the FoxyCart cart template code.

    So I've moved it down to...

    {% set cart_is_fullpage = true %}

    {% embed 'cart.inc.twig' %}
    {% endembed %}

    This is definitely helping but of course...now...I must undo the laborious CSS tweaking I did before to overcome the affect of FoxyCart's CSS on my site theme.

    Oh well...at least this is a step in making integration's easier.

    Anybody have any other hints or ideas?

    Carlos
  • Hmm...the code did not come out correctly in my last post.

    Here it is again...


    {% set cart_is_fullpage = true %}
    <div id="fc" data-fc-container="cart">
    {% embed 'cart.inc.twig' %}
    {% endembed %}
    </div>


    Carlos
  • Hmm...the cart template code that shows up under the admin templates...has the #fc ID attached to the HTML tag. Likewise the BODY tag in those templates has the class="fc-context--cart-fullpage" and data-fc-context='{"cart_is_fullpage":true}' attached to it.

    Would it not make more sense...with respect to making integration EASIER and in line with the documentation at https://wiki.foxycart.com/v/2.0/templates/intermediate-automagicache to NOT do the above?

    Rather instead to attach the #fc ID and at least the class presently attached to the BODY tag (i.e. class="fc-context--cart-fullpage") to the DIV encasing the cart template code?

    Like so?


    {% set cart_is_fullpage = true %}
    <div id="fc" class="fc-context--cart-fullpage" data-fc-container="cart">
    {% embed 'cart.inc.twig' %}
    {% endembed %}
    </div>


    Why attach these things to full page HTML tags like HTML and BODY in the templates (and risk the problem of conflicting CSS between the existing page CSS and the FoxyCart CSS) IF the whole purpose of template customization is to insert the FoxyCart code INTO web pages and to use automagic to cache those pages at FoxyCart?

    The documentation talks of placing these things in the HTML tags immediately surrounding the respective FoxyCart template code (with the exception of data-fc-context='{"cart_is_fullpage":true}' which must be attached to the BODY tag) but the templates in the admin place these things such that the whole page is influenced by the FoxyCart CSS.

    That makes integration a bear to accomplish in some cases where one is fighting against the FoxyCart CSS without even realizing that one can just move the ID and at least one body class out of the HTML and BODY tags and place them much more directly where they should be (if we are talking about making integration easier).

    I don't know how much easier this is going to make integration but after changing this in the code it has had a good effect in bringing back some of the sites look so I am hopeful.

    Carlos



  • Yes...this has definitely made integration much easier. The FoxyCart CSS is no longer affecting my site's look like it was and my site CSS is no longer affecting the FoxyCart CSS like it was either. There is likely still some conflict somewhere that I will need to iron out but...so far...so good.

    For what it's worth.

    Carlos
Sign In or Register to comment.