Hiding a div or class when my site is accessed via specific URL

Question

I am not using a hosting service, my website is entirely hosted on the shopify platform.

I want to hide class="site-header" for my website when it is accessed via a domain forward/masking link http://fetchy.ca but have it displayed/shown when the website is accessed via http://wetpaintrecords.com.

http://fectchy.ca contains an frameset/frame inside which the element is to be hidden.

You can use `window.location` and toggle visibility of necessary elements. You can refer following link [Location - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location) — Rajesh, Jan 11 '16 at 09:37
That is what I was trying but haven't been able to make it work — Tanner, Jan 11 '16 at 09:40
Okay, I guess then my question is, is there no way to hide the div class="site-header" if the site was access via the fetchy.ca host name? — Tanner, Jan 11 '16 at 09:43

score 0 · Answer 1 · answered Jan 11 '16 at 09:47

0

try this code it works but i don't know whether it's the best way to approach this kind of problem.

<script>
    var url = window.location;
    if(url.toString().indexOf('fetchy.ca') != -1) {
        $('.site-class').hide();
    } else {
        $('.site-class').show();
    }
</script>

try that, you first test for the location and then you check whether the url contains the 'domain name' and then hide the 'div' as wanted, but NOTE: when javascript is disabled in the browser for some reason, it won't work...

if you had a backend like php if would've been quite easier i think.

answered Jan 11 '16 at 09:47

Jonathan Zerox

130
7

This didn't work out, I added it to my theme.liquid in shopify but didn't have any luck. – Tanner Jan 11 '16 at 09:50
does that file contain html( can it execute javascript ), because 'window.location' is a global variable representing the global execution context which is the browser, and the 'location' method return the url to the current executing file, so we convert the object to a 'string' and check whether it contains a specific 'string' it should work, i tested it and it worked fine on my localhost. – Jonathan Zerox Jan 11 '16 at 09:56
– Tanner Jan 11 '16 at 09:58
Which file are you referring to? – Tanner Jan 11 '16 at 10:00
theme.liquid is an html file yes – Tanner Jan 11 '16 at 10:01
you know what mate, try to alert(window.location) and see the values returned, we may be targeting the wrong value/string, and by the way how does the above script work in your website. – Jonathan Zerox Jan 11 '16 at 10:05

Rajesh · Answer 2 · 2016-01-11T10:31:11.243

0

You can use window.location.hostname:

In the below example, I'm hiding a div and showing another if it is access in JSFiddle.

JSFiddle.

(function init() {
  if (window.location.hostname === "fiddle.jshell.net") {
    $(".header").hide();
    $(".header_2").show();
  } else {
    $(".header").show();
    $(".header_2").hide();
  }
})()

.header {
  width: auto;
  height: 50px;
  background: #ddd;
}
.header_2 {
  width: auto;
  height: 50px;
  background: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="header">Header 1. This is a generic header, shown for all cases.</div>
<div class="header_2">Header 2. Only shown if accessed from JSFiddle</div>

You are getting proper value in window.location.hostname.

edited Jan 11 '16 at 10:31

answered Jan 11 '16 at 09:49

Rajesh

21,405
5
35
66

Can you check what `window.location` is returning? – Rajesh Jan 11 '16 at 10:02
Not an expert with javascript. Not sure how to check what its returning – Tanner Jan 11 '16 at 10:04
In your function, write `console.log("location Object: ", window.location);` and on your page, check the developer console. – Rajesh Jan 11 '16 at 10:06
I added the code then hit developer tools in my broswer but still can't find what its returning. – Tanner Jan 11 '16 at 10:12
In developer tools, there is a tab called `Console`. Access that and see the logged value. If not logged, you can even execute it on console. – Rajesh Jan 11 '16 at 10:14
So you are getting proper value in `hostname`. right? – Rajesh Jan 11 '16 at 10:23
No not really, I'm getting the original site hostname but not what I have set up as a mask URL. – Tanner Jan 11 '16 at 10:24
any other suggestions? – Tanner Jan 12 '16 at 04:53
Try calling this function after document is loaded. **[Reference](http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery)**. Interesting thing is when you log, DOM is not rendered completely and so masking is not happened. But if you check in console manually, you get proper result. – Rajesh Jan 12 '16 at 06:26

HymnZzy · Answer 3 · 2016-01-19T11:38:53.857

0

Try this in shopify theme.liquid or index.liquid or any other liquid wherever the class="site-header"

{% if shop.url == 'http://wetpaintrecords.com' or shop.url == 'wetpaintrecords.com' %}
<div ... class="site-header">
.....
</div>
{% endif %}

Alternatively add this anywhere in your theme.liquid file

{% if shop.url == 'http://fetchy.ca' or shop.url == 'fetchy.ca' %}
<style>
  .site-header{display:none !important;}
</style>
{% endif %}

EDIT: OP is using an iframe/frameset/frame, hence the following solution.

You have two options here.

Option 1 (simplest) - Add the following in your theme file liquid:

{% unless collection %}
<style>
   .site-header{display:none !important;}
</style>
{% endunless %}

Option 2 (not simplest but safest) - Find the liquid file containing 'header class="site-header" role="banner"' and change that section to the following:

{% unless collection %}
<header class="site-header" role="banner">
..........
</header>
{% endunless %}

By this, whenever the page is a collection (artist page as intended), the section will not be displayed.

edited Jan 19 '16 at 11:38

answered Jan 14 '16 at 13:24

HymnZzy

2,357
1
12
23

Here is a site that has it working in their shopify store. Both links go to the same store, one method/url/link shows the top header whereas the other method/url/link does not. http://store.warnermusic.ca/collections/Brett-Kissel#store http://www.warnermusic.ca/store/brettkissel/ – Tanner Jan 17 '16 at 16:55
I checked your links - fetchy and wetpaintrecords. the former seems to be an iframe of a collections page in the latter. Server side code will not work that way. Also at the moment there seems to be no 'site-header' in fetchy.ca – HymnZzy Jan 18 '16 at 07:14
Yea so what do you suggest is the right way to do it? I'm just trying to give each artist the optical illusion of having their very own site and store. The home page is always a collection page. But there are iframe YouTube videos embedded on each home/collection page. – Tanner Jan 18 '16 at 14:59
Ultimately, I'm hoping to give each recording artist we sign to the label, their very own website, by simply purchasing a domain and hiding the record label's main navigation menu seen at the top of the page when they access the site via the artists' domain name versus the record label domain. So far we have these. Domains for the artists: fetchy.ca freshcitymusic.com troyjunker.com – Tanner Jan 18 '16 at 15:01
What you are trying to do is "wrong" in Shopify sense. You'll have a ton of CORS errors if you do it that way. What's wrong with using collection links? Other possible issues include SEO headaches. Do you want to go through all that? If yes read the edits in my answer. – HymnZzy Jan 19 '16 at 11:25
The issue with it hiding for all "collections" is that there are collections on our store such as "accessories", "music", and "apparel". These "collections" require the site navigation, which we are subsequently hiding. And not all of the pages for artists are "collections" either, some are "pages". "Collections" are used for artist "home" and artist "store" other then that they will be "pages". That's why I originally was looking for a method that could hide it based on the URL. I'm not sure if method 2 with your edits is the best route. – Tanner Jan 19 '16 at 17:55
In that case, for artist collection, create a duplicate template "collection.artists" and set is as collection type as "collection.artists" for artist collections. Then use {% unless collection.template_suffix == 'artists' %} instead of {% unless collection %} in the above code. It'll work. – HymnZzy Jan 19 '16 at 18:30

Hiding a div or class when my site is accessed via specific URL

3 Answers3