Using Markets with Subdomains, now CORS kills tag filtering of Collections

[renard-roux]

Hi All,

My shop, located at rouxposter.com, has ~10 subdomains for different currencies, managed by Markets in Settings.  As an example, if customer is geolocated to Denmark, or switches do Danish Kroner (DKK) currency manually, they will be re-directed to subdomain dk.rouxposter.com. USD is the default currency for the shop.

I've just noticed that whenever I'm on one of the subdomains (i.e. switched to a currency that isn't USD), tag filtering of Collections ceases to function completely. After inspecting Console in Chrome, I can see that the filter action is getting blocked by CORS, presumably because the filter code is operating on rouxposter.com, while I'm on dk.rouxposter.com (as an example). See attached screenshot.

With my limited knowledge, I'm guessing I need to specify a CORS policy, somehow, that tells the browser that subdomains are allowed, or something like that. Can anyone help me in the right direction to solve this? I've been through the support forum, and while I can find a few discussions pertaining to CORS issues, none of them seem to help me fix mine.

To replicate the issue, make sure you're on one of the subdomains, e.g. eu.rouxposter.com, uk.rouxposter.com, etc. If you're not taken to one of them automatically, switch currency to something other than USD, either via the currency indicator top right (click the flag), from the dropdown in the main nav, or via the list in the footer. This should take you to one of the subdomains.

This collection has multiple languages and other tags, good for testing: https://dk.rouxposter.com/collections/all-alphabet-letter-posters

Thanks in advance!

Cheers,

Jonas

[tim · Accepted solution]

You shouldn't pull data from the main domain because it will be in wrong currency etc.

JS code gets site address from this element:

<div class="sidebar_tags" data-url="https://rouxposter.com/collections/all-alphabet-letter-posters">

Not 100% sure why it was done like this, I'd probably use relative URL or pull from the current window.location.href and this is one option for you.

Another option is to find this element in your liquid and replace whatever is there, probably something like:

<div class="sidebar_tags" data-url="{{ shop.url }}">

and change to something like:

<div class="sidebar_tags" data-url="{{ request.path }}">

[renard-roux]

Thank you so much for your help, Tim! You got me to a point where I could find a solution, and the filters are now working again 😊

I found the code you mentioned in collection-sidebar.liquid under Snippets, line #2 (this is probably highly specific to the theme I'm using):

<div class="sidebar_tags" data-url="{{shop.url}}{{collection.url | split: "?" | first}}">

I first tried replacing {{ shop.url }} with {{ request.path }} like you suggested, but this seems to just repeat the relative collection URL, so it it looked like this in the browser: 

https://dk.rouxposter.com/collections/all-posters/collections/all-posters/english?

I then tried just removing the {{ shop.url }} part instead, which fixed the problem. The working code ended up looking like this:

<div class="sidebar_tags" data-url="{{collection.url | split: "?" | first}}">

I'm going to do some more testing, but this seems to work as intended. Again, thank you so much for helping me figure out where to look for a solution!

I should mention that I'm using the Avone theme from Adornthemes. I'm going to make sure they know about this bug so it can be fixed in a future update.

Sorry about the slow response, had to find the time to go through the code and test it, and had a tight deadline on another project that got in the way.