Streaming live at 10am (PST)

Adding clean URL Ecwid code to .htaccess file within web flow


#1

Hello community,

I am currently using web flow as my website builder and for the time being embedding Ecwid code into my website. Though using Ecwid it does not provide clean urls. They have a work around that involves placing specific code into the .htaccess file. though I cannot access the .htaccess file within web flow.

Here is the code, and what could I possibly do to take care of this?

1 — How to enable clean URLs on the “shop.html” page in the web root directory
Let’s say you added your Ecwid store to the “shop.html” file on your server and it’s available on your site via “example.com/shop.html” URL.

You now want to enable clean URLs on that page so that the store pages URLs will look like this:

example.com/shop/My-Product-p123
example.com/shop/My-Category-c123
Assuming your site structure looks like this:

- [www]
  - .htaccess
  - shop.html

You’ll enable clean URLs in two steps:

Map all “shop/something” pages to shop.html in the .htaccess file:

 <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^shop/.*$ shop.html
    </IfModule>

Turn on clean URLs in your store integration code in the shop.html file:

<script>
    window.ec = window.ec || {};
    window.ec.config = window.ec.config || {};
    window.ec.config.storefrontUrls = window.ec.config.storefrontUrls || {};
     
    window.ec.config.storefrontUrls.cleanUrls = true;
    window.ec.config.baseUrl = '/shop';
    </script>

<... Here goes the store integration code ...>

That’s it. Now open your store, navigate to any product page and refresh the page in your browser. Both navigation and page opening after refresh should work fine and you should see the new clean URLs enabled.


#2

Hi @joel.muro, thanks for the post. Probably the first thing to note is that .htaccess directives are not possible in Webflow yet as we are not using .htaccess in hosting.

According to Ecwids instructions, there is a solution for sites who do not have access to the .htaccess: https://gist.github.com/makfruit/00e1c298f11bf12392f67c240e35e927#3--how-to-enable-clean-urls-if-you-dont-have-access-to-htaccess-file

Here is the code to add to the Head of your site, update your own integration code where it has that indicated:

<script>
    window.ec = window.ec || {};
    window.ec.config = window.ec.config || {};
    window.ec.config.storefrontUrls = window.ec.config.storefrontUrls || {};
    window.ec.config.storefrontUrls.cleanUrls = true;
    window.ec.config.storefrontUrls.queryBasedCleanUrls = true;
    </script>
    
    <... Here goes the store integration code ...>

After adding your integration code, publish the site as custom code is only published at page render.

I hope this helps, if that solution does not work, the alternative would be to host on a server that lets you update the .htaccess.

I hope this helps.


#3

I have that in place now, but if I host on a different server im going to constantly be having to update the website to the new host server every time I make a change.


#4

Hi @joel.muro, yes unfortunately that is the case at the moment, although there is hope for future functionality on this, I would recommend to vote and comment on this on the Wishlist here: https://wishlist.webflow.com/ideas/WEBFLOW-I-756

I know it can be frustrating when certain features you are expecting are not available. I hope this helps to at least provide the available options. I will be cheering with you when .htaccess-like capabilities are added to the hosting settings.

Thansk in advance.