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.

SVG product images don't cache/display

mwahahamwahaha Member
in Bugs & Feature Requests edited April 2015
I could use double-resolution PNGs of course, but I prefer SVG for its resolution-independence.

Svg-as-img poses no XSS attack vector, because the img tag works as a kind of sandbox. If this is as simple on your end as adding support for the SVG MIME type I would really appreciate it.
Comments
  • mwahahamwahaha Member
    edited April 2015
    Ok I think I whispered it correctly,
  • fc_adamfc_adam FoxyCart Team
    @mwahaha,

    You're correct that we don't currently support caching svg's directly. One approach you could take would be to actually embed the SVG directly into the page rather than trying to cache the SVG file itself. Depending on how you're including them in your page, that could work well.

    I'm not sure what you're trying to whisper, but it looks like it didn't come through. To whisper, type the content you'd like to whisper into the comment text area, and then check the whisper checkbox and enter the forum username(s) of the people you'd like to whisper to in a comma separated format.
  • fc_adamfc_adam FoxyCart Team
    @mwahaha (in response to whisper),

    Thanks for the links. I've created a ticket on our side to look into adding SVG caching to our system. It's definitely something that we'll want to do, but it will be a question of when we're able to allocate time to it.

    In the mean time, embedding it within the template is your best bet, but as that isn't an option for you - the next option would be to add an SSL certificate to your domain, which would allow you to directly link to those SVG files from within the secure FoxyCart template without needing us to cache them.
  • EpotratzEpotratz Member
    edited October 2016
    I added this SVG logo into the logo URL field, and its not showing up during our checkout:
    https://daks2k3a4ib2z.cloudfront.net/57fa771f45bf29a4636b6816/5802947feb8f7e4e5aab101f_botanical-craft-logo.svg

    Our cart:
    https://botanical.foxycart.com/checkout

    What is the problem?
  • fc_adamfc_adam FoxyCart Team
    @Epotratz,

    Unfortunately our caching system doesn't currently support SVG's - and while you are providing it over an HTTPS domain, our logo output in the template doesn't check for that currently and so will default to passing the logo URL through our caching.

    You could switch to using a JPG or PNG there instead of the SVG which would work, or alternatively you could customise the templates to set the logo URL directly in the template. The JPG/PNG would be the quicker approach, but we can provide some steps for that if you want to take that route.
  • @fc_adam Hi, I would love the custom code for the SVG as logo in checkout. :)
  • fc_adamfc_adam FoxyCart Team
    @KjellRuben,

    Sorry for the delay. The workaround for now is essentially manually customising the template to replace the existing code with the SVG markup, basically removing the store logo configuration from the admin being in the template.

    From your store's FoxyCart administration, go to the "cart include" template page, and set it to a custom template. Then within the template, look for the line that look likes this:
    <img id="fc-logo" class="fc-logo__image" src="{{ config.cache_path }}{{ config.store_logo_url }}" alt="{{ config.store_name }}">
    Replace that markup with your SVG set up.

    Within the "checkout" template page, set the template to a custom template and within the {% embed 'checkout.inc.twig' %} and {% endembed %} tags, paste the following:
    {% block logo %}
    {% if config.store_logo_url %}
    <img id="fc-logo" src="{{ config.cache_path }}{{ config.store_logo_url }}" class="fc-logo__image" alt="{{ store_name }}">
    {% else %}
    <h1 class="fc-logotype">{{ config.store_name }}</h1>
    {% endif %}
    {% endblock logo %}
    And again, replace the existing logo markup within that block with your own SVG set up.

    Finally, repeat that step for the "receipt" template page - setting it to custom, and pasting the code above within the {% embed 'receipt.inc.twig' %} and {% endembed %} tags
Sign In or Register to comment.