Foxy Forum Status

We're no longer responding to questions via our forum, but we will keep it up for historical reasons. If you can't find the answer you're looking for, please visit our knowledge base or contact us. If there's enough interest in the future, we may bring the forum back.

CSS background image error if CSS requires {% raw %} wrapper in Twig template (FC 2.0)

pixelchutespixelchutes Member
in Bugs & Feature Requests edited January 2015
I kept receiving the following Twig parsing error when attempting to cache my custom Twig templates:
There was a problem parsing your template: Your template was not saved because there was an error in your Twig template syntax: Unknown tag name "endblock" in "TEMP_checkout_template.twig" at line 123
I ended up tracing it down to the site's CSS and JavaScript on the page, which was solved by wrapping both in {% raw %} and {% endraw %}.

However, there seems to be an unwanted side-effect: CSS background images do not load.

The image url / source in the cached CSS looks like this:

https://myfoxydomain.foxycart.com/cache.php?{{%20session_name%20}}={{%20session_id%20}}&url=http://www.mydomain.com/assets/images/image.png
My guess is that {{%20session_name%20}}={{%20session_id%20}} is not being properly replaced, I presume because it may be expecting: {{ session_name }}={{ session_id }}

Is this a known bug, or is there any particular workaround required for cached CSS background images wrapped in {% raw %}?

If not, is there anyway to change this to {{session_name}}={{session_id}} to prevent %20 from potentially impacting the necessary interpolation?
Tagged:
Comments
  • fc_adamfc_adam FoxyCart Team
    @pixelchutes,

    It's the expected behaviour with {% raw %} tags - they'll prevent Twig trying to interpret the code within them. The error you were initially getting would have been related to just your javascript I'd guess - and probably just to an include of Modernizer. If you just wrap your javascript and not your CSS includes, that should get everything working.
  • pixelchutespixelchutes Member
    edited January 2015
    Good point regarding the expected behavior, that does make sense. Unfortunately, it is both JavaScript (modernizr) and the CSS. If I don't wrap the CSS, the Checkout template fails to cache.

    It does not seem to matter whether I use FC Admin or cache via the API, the result is the same. Any ideas?

    I thought perhaps it was related to this CSS:
    content: "• ";
    ...but removing did not solve the issue.

    Nevertheless, it seems FoxyCart's automagicache does not properly support CSS background images if contained within a {% raw %} block. Unless that is also the expected behavior, which doesn't seem likely.
  • UPDATE: Solved it!

    The AutoMagiCache Important Notes helped clear up what might have been happening.

    Sure enough, a CSS @media query immediately followed by a #id-selector{}, ran through a minify process, could result in the following pattern: {#

    e.g.
    @media (max-width:767px){#css_id_selector_example{display:block}}
    By avoiding CSS ID selectors, or ensuring any contained within a @media query are preceded by a class-based selector rule, I was able to avoid the {% raw %} wrapper approach, and restore my CSS background images.

    Hopefully this thread helps someone else who may run into this in the future. I still think this is a valid issue worth looking into (see suggested workaround re: potential interpolation change above)
  • fc_adamfc_adam FoxyCart Team
    @pixelchutes,

    Ah - great catch! I'm glad you were able to find the solution there, and thanks for posting your findings.
Sign In or Register to comment.