Attach a Sitecore item url to a JavaScript variable

Question

I'm still learning Sitecore at the moment, and what I want to do is get the urls for several pages in a Sitecore site and use them to set some URLs in JavaScript.

This the JavaScript I have set up:

 <script>
      var page_data = {
          residentialUrl: '[Sitecore page link]',
          airportsUrl: '[Sitecore page link]',
          universitiesUrl: '[Sitecore page link]',
          officesUrl: '[Sitecore page link]',
          tunnelsUrl: '[Sitecore page link]',
          hospitalsUrl: '[Sitecore page link]',
          sportsUrl: '[Sitecore page link]',
          publicSafteyUrl: '[Sitecore page link]',
          governmentUrl: '[Sitecore page link]'
      }
  </script>

It does work if you put a url inside single quotes for each url variable. But What I want is to put in the url of a Sitecore item for each url variable. I know how to get Sitecore item urls but I'm not sure how I would use them in this instance to set the url variables above? I don't want to have to hard-code the links in. I want them to be pulled from fields in Sitecore. Is there a way to do this?

What version of Sitecore are you using? You might be able to use Sitecore's ItemService — Jonathan Robbins, Mar 09 '15 at 16:44

geedubb · Answer 1 · 2015-03-09T19:14:44.803

0

One approach you could take (assuming your javascript is in a Sitecore layout or sublayout) is the following (untested but will hopefully help).

You can get the Sitecore IDs from Content Editor when selecting your items that you want to link to (replace {your-guid-here} below).

Also I wouldn't recommend hardcoding IDs in a production app:)

C#

protected void Page_Load(object sender, EventArgs e)
{
    Page.DataBind();
}

protected string ResidentialUrl {
    get {
      return GetUrl("**{your-guid-here}**");
    }
}
protected string AirportsUrl {
    get {
      return GetUrl("**{your-guid-here}**");
    }
}

private string GetUrl(string guid)
{
    // get item from the current database (usually web or master)
    var item = Sitecore.Context.Database.GetItem(new Sitecore.Data.ID(guid));
    // use LinkManager to get the public URL
    return Sitecore.Links.LinkManager.GetItemUrl(item);
}

JS:

 <script>
  var page_data = {
      residentialUrl: '<%#Eval("ResidentialUrl")%>',
      airportsUrl: '<%#Eval("AirportsUrl")%>',
     // ... etc
  }
</script>

edited Mar 09 '15 at 19:14

answered Mar 09 '15 at 18:56

geedubb

4,048
4
27
38

Seems like a pretty simple and straightforward solution to me. Although I would simplify it even further... you don't need an Eval here. Just use the <%= %> syntax and drop the Page.DataBind() call. – Bryan Mar 09 '15 at 21:53
if you're going to make the mistake of string building javascript, do be sure that you properly escape your data. – zzzzBov Mar 10 '15 at 01:09
@Bryan I am using Page.Databind() so that page editor is supported. You can't use <%=%> code blocks or you will get an exception – geedubb Mar 10 '15 at 09:02
1

@zzzzBov fair point, but in this instance probably no need to escape for javascript as we are outputting well formed URIs which will not include apostrophe, backslash etc. My answer was designed to be as succinct as possible, addressing the code dictated by the question (ie using a string building type approach)_ – geedubb Mar 10 '15 at 09:16

score 0 · Answer 2 · answered Mar 10 '15 at 08:53

1) In which item store the field? If you need this link on multiple pages. - It could be a component with a datasource to the item. - or a item below the siteroot item named "Settings" from template "Site Config" or somethings you like.

2) The asp or ascx

<script>
var page_data = {
  residentialUrl: '<%= residentialUrl %>',
  airportsUrl: '<%= airportsUrl %>'
}
</script>

3) Code behind Example for a site Site settings node

public string residentialUrll { get; set; }

private void Page_Load(object sender, System.EventArgs e)
{
  var siteConfigNode = GetConfigNode();
if (siteConfigNode  == null) { return; }
  InternalLinkField internalink = siteConfigNode.Fields[residentialUrll];
  if (internalink != null && internalink.TargetItem != null)
  {
    residentialUrl = Sitecore.Links.LinkManager.GetItemUrl(internalink.TargetItem);               
  }

}


// get the config node it is the item below the siteroot with Template "Site Config"
public static Item GetConfigNode()
{
    Sitecore.Sites.SiteContext site = Sitecore.Context.Site;
    if (site == null) return null;

    Sitecore.Data.Database db = Sitecore.Context.Database;
    if (db == null) return null;
    Item start = db.GetItem(site.StartPath);
    if (start == null) return null;

    var siteConfigNode = start.Parent.Children.FirstOrDefault(item => item.TemplateName == "Site Config");
    return siteConfigNode;
}

score -1 · Answer 3 · answered Mar 09 '15 at 21:58

-1

You can use server controls inside script blocks. And you want the data to come from Sitecore fields. So just use a <sc:Link> and a link field on the item. That would be the basic Sitecore way to handle it.

answered Mar 09 '15 at 21:58

Bryan

8,748
7
41
62

`` produces an anchor, it doesn't produce the URL value. – zzzzBov Mar 10 '15 at 01:10

Attach a Sitecore item url to a JavaScript variable

3 Answers3