makfruit/ecwid_clean_urls_setup_examples.md

## ecwid_clean_urls_setup_examples.md

      
    Raw
  

              ecwid_clean_urls_setup_examples.md
            
          
    Setting up SEO friendly clean URLs in Ecwid (Examples)

This is a followup on the Ecwid blog post about the new SEO friendly clean URLs available for Ecwid stores. If you have your Ecwid store installed on a platform or sitebuilder including Wordpress, Wix, Adobe Muse or Ecwid Starter Site, you should have the clean URLs enabled automatically (see the blog post for the details). On the other hand, if you run a custom made web site, you will need to adjust your site setup a bit to enable the clean URLs as explained in the Ecwid API docs.
Below are examples of clean URLs setup on custom made websites.

1 — How to enable clean URLs on the “shop.html” page in the web root directory
2 — How to enable clean URLs on the site home page
3 — How to enable clean URLs if you don't have access to .htaccess file

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 — How to enable clean URLs on the site home page

Let’s say you added your Ecwid store to the “index.html” file on your server and it’s available on your site home page, e.g. “example.com” URL.
You now want to enable clean URLs on that page so that your store pages URLs will look like this:

example.com/My-Product-p123
example.com/My-Category-c123

At the same time, you want to keep the other pages of your site to open at their current URLs, e.g.

example.com/some_other_page.html

Assuming your site structure looks like this:
- [www]
  - .htaccess
  - index.html
  - some_other_page.html

You’ll do that in two steps:

Map store pages to index.html in the .htaccess file (notice how we specify only Ecwid pages here to avoid the other site pages to be redirected):

    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^.*-p[\d]+$ index.html
    RewriteRule ^.*-c[\d]+$ index.html
    RewriteRule ^cart$ index.html
    RewriteRule ^search.*$ index.html
    RewriteRule ^checkout/.+$ index.html
    RewriteRule ^account/.+$ index.html
    RewriteRule ^pages/.+$ index.html
    RewriteRule ^signIn.*$ index.html
    RewriteRule ^resetPassword.*$ index.html
    RewriteRule ^checkoutAB.*$ index.html
    RewriteRule ^downloadError.*$ index.html
    RewriteRule ^checkoutResult.*$ index.html
    RewriteRule ^checkoutWait.*$ index.html
    RewriteRule ^orderFailure.*$ index.html
    RewriteRule ^checkoutCC.*$ index.html
    RewriteRule ^checkoutEC.*$ index.html
    RewriteRule ^checkoutAC.*$ index.html
    RewriteRule ^FBAutofillCheckout.*$ index.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;
    </script>
    
    <... Here goes the store integration code ...>
3 — How to enable clean URLs if you don't have access to .htaccess file

If the sitebuiler you use doesn't allow you to rewrite your site URLs on the server or you cannot access .htaccess file on your hosting, than it won't be possible to enable the clean URLs schema described above. There is a workaround though — query-based clean URLs which look like the true clean URLs except for they start with '?store-page='. They are less effective than the true clean URLs but they are still better for SEO than the regular hash URLs with '#!' in them.
The query-based clean URLs will look like this:

example.com/shop?store-page=My-Product-p123
example.com/shop?store-page=My-Category-c123

It's easy to enable query-based clean URLs on your site. The only thing you will need to do that is to adjust your store integration code in your store page code:
    <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 ...>
If you can add URL rewrites on your server by manually changing .htaccess file or with the help of your hosting/sitebuilder support, we'd recommed using the true clean URLs instead of the query-based schema as in the examples 1 and 2 above.