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.