[Pro] A simple cookie

Hi,

I have my site in 2 languages and would like to set a very simple cookie for people using a back/home button. Is there an Action that can help me with this? (I have absolutely no idea how to go about setting this up otherwise.)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The easiest* way to do this is with CookieJar and Protaculous 2. On the master page for your site, you would apply the Protaculous 2 Action to the page.

Prototype.js will be added by default, so the only thing you need to add is CookieJar.js. Click on the Additional JavaScript Libraries disclosure, and in the Name field enter cookiejar, and in the CDN URI field, paste in this:

http://cdnjs.cloudflare.com/ajax/libs/cookiejar/0.5/cookiejar.min.js

Now click on the DOM Loaded Observer button, and paste in the following (changing the URLs in the code to match your site):

https://gist.github.com/walterdavis/6048699

Finally, you just have to wire up your language changer buttons. The way you manage this is by locating the link from an english page to a french page (for example) and opening the Hyperlink dialog. Click on Extended, and then in the Name field, enter ‘class’ (without the quotes) and in the Value field, enter ‘language fr’ (again, without the quotes). On a french page where you are moving to english, you would add the opposite: ‘language en’. Repeat for all buttons where you allow the user to switch languages, always using the two-letter country code of the language you are switching TO. If these buttons are on your Master page(s) then this can be a very short part of the task. (Also, if you have more than one Master page, you will want to add the Protaculous 2 Action to both pages, and make the same settings as noted above.

This code is designed to save any user-entered choice of language for one year. If they click on a different language button, then that will stick as well after they have made the choice. Finally, no matter how they get to a page, if it’s not in the language they have previously chosen, the browser will redirect to the preferred language. This means that you must have a completely parallel structure on both sides of the language gulf, differentiated only by a segment of the URL – either http://example.com/en/your_page.html or a subdomain scheme, like http://en.example.com/your_page.html.

Walter

*For certain definitions of easy.

On Jul 21, 2013, at 6:07 AM, grantsymon wrote:

Hi,

I have my site in 2 languages and would like to set a very simple cookie for people using a back/home button. Is there an Action that can help me with this? (I have absolutely no idea how to go about setting this up otherwise.)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Fantastic Walter!

I’ve followed your very clear and simple instructions and now need to setup a function to invoke it in my Juicebox gallery pages. (Shame that Exhibeo has rather limited customisation. Would be very nice to keep the whole package inside FW/Softpress).


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve set up a function, but I’m not sure that I am giving it the correct name for my cookie. What is my cookie called? :confused: This is what I have :

<script>
function backButton() {
    var value = readCookie('cookiejar');
    if (value == 'fr') {
        document.location.href = "http://mobile.grantsymon.com/startf.html"
    } else {
        document.location.href = "http://mobile.grantsymon.com/start.html"
    }
}

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Don’t try to mix cookiejar.js with normal “plain” JavaScript cookie reading methods.

The first two groups of code in my original example actually do what your code is trying to do, but they go about it another way. The first block of code sets up the variables: jar (a reference to the cookie, but abstracted away from any of the bare-metal implementation details), en (the uniquely “english” part of the path to your english site), fr (the path to your french site), and matcher (the regular expression that the script uses to substitute those two variables for the preferred version.

The second block does the redirect. It looks to see if the jar (cookie) already holds a language preference. If it does, then it tests to see if the current page URL already includes that language path. If it doesn’t, then the current URL is converted to a string, and a find-and-replace is done using the matcher and substituting the desired path.

The third block is only used to store the preference if the user clicks on a language changer button or text link.

Here’s the upshot of all this: you don’t ever have to set the language URL explicitly, or introspect the way you are trying to do on a particular link object. All you have to do is link to a language – any language will do. If the page loads and the language is not what the user had previously selected, the location will be replaced with the desired language. My code is using the location.replace method, which means that the back button in the browser will do the correct thing, too.

Walter

On Jul 22, 2013, at 8:18 AM, grantsymon wrote:

I’ve set up a function, but I’m not sure that I am giving it the correct name for my cookie. What is my cookie called? :confused: This is what I have :


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Aha!

It’s not working for me though. I’ve removed the js code from the Juicebox index file and I have set my Juicebox back-button (the only navigation button available to me inside the juice box gallery) to go to the start.html page (english).

If I then go to that page and click on the French flag, it should invoke your code and set the cookie, correct? Then if I navigate once again to the Juicebox gallery and use the back-button to go my start page, it will go to the start page … but this time the cookie will tell the browser to load the French page, right? This isn’t happening. It’s always the English page that loads.

(I’ve tried using the Develop menu to see what the cookie is doing, but I can’t find it).

Here’s my start page: http://mobile.grantsymon.com/start.html

The only page that has had the js code removed so far is the Bayview one (middle button)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I will look at this late tonight. I’m at EPCOT all day.

Walter

On Jul 22, 2013, at 10:00 AM, “grantsymon” email@hidden wrote:

Aha!

It’s not working for me though. I’ve removed the js code from the Juicebox index file and I have set my Juicebox back-button (the only navigation button available to me inside the juice box gallery) to go to the start.html page (english).

If I then go to that page and click on the French flag, it should invoke your code and set the cookie, correct? Then if I navigate once again to the Juicebox gallery and use the back-button to go my start page, it will go to the start page … but this time the cookie will tell the browser to load the French page, right? This isn’t happening. It’s always the English page that loads.

(I’ve tried using the Develop menu to see what the cookie is doing, but I can’t find it).

Here’s my start page: http://mobile.grantsymon.com/start.html

The only page that has had the js code removed so far is the Bayview one (middle button)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Check to see if your page is set to More Readable, and that the line-endings setting are also in Unix. The JavaScript is being output as a long string of single letters, one per line. This seems to be a line ending issue, although I can’t be sure.

Walter

On Jul 22, 2013, at 1:17 PM, Walter Lee Davis wrote:

I will look at this late tonight. I’m at EPCOT all day.

Walter

On Jul 22, 2013, at 10:00 AM, “grantsymon” email@hidden wrote:

Aha!

It’s not working for me though. I’ve removed the js code from the Juicebox index file and I have set my Juicebox back-button (the only navigation button available to me inside the juice box gallery) to go to the start.html page (english).

If I then go to that page and click on the French flag, it should invoke your code and set the cookie, correct? Then if I navigate once again to the Juicebox gallery and use the back-button to go my start page, it will go to the start page … but this time the cookie will tell the browser to load the French page, right? This isn’t happening. It’s always the English page that loads.

(I’ve tried using the Develop menu to see what the cookie is doing, but I can’t find it).

Here’s my start page: http://mobile.grantsymon.com/start.html

The only page that has had the js code removed so far is the Bayview one (middle button)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The solution I proposed is only going to work if you restructure your site a little more in line with how I would set up a multi-lingual site. Instead of using a pair of pages home.html and homef.html in the same folder, set up a completely parallel structure like this:

/en
	home.html
	photos.html
/fr
	home.html
	photos.html

There should be exactly the same pages named exactly the same in both folders. Then in the JavaScript. you need to set only the minimal difference between the two sides of the site – something like grantsymon.com/en and grantsymon.com/fr as the en and fr variable values. You don’t need the http:// part at all.

Walter

On Jul 23, 2013, at 12:17 AM, Walter Lee Davis wrote:

Check to see if your page is set to More Readable, and that the line-endings setting are also in Unix. The JavaScript is being output as a long string of single letters, one per line. This seems to be a line ending issue, although I can’t be sure.

Walter

On Jul 22, 2013, at 1:17 PM, Walter Lee Davis wrote:

I will look at this late tonight. I’m at EPCOT all day.

Walter

On Jul 22, 2013, at 10:00 AM, “grantsymon” email@hidden wrote:

Aha!

It’s not working for me though. I’ve removed the js code from the Juicebox index file and I have set my Juicebox back-button (the only navigation button available to me inside the juice box gallery) to go to the start.html page (english).

If I then go to that page and click on the French flag, it should invoke your code and set the cookie, correct? Then if I navigate once again to the Juicebox gallery and use the back-button to go my start page, it will go to the start page … but this time the cookie will tell the browser to load the French page, right? This isn’t happening. It’s always the English page that loads.

(I’ve tried using the Develop menu to see what the cookie is doing, but I can’t find it).

Here’s my start page: http://mobile.grantsymon.com/start.html

The only page that has had the js code removed so far is the Bayview one (middle button)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter. :slight_smile:

I changed to code to ‘more readable’ but it makes no difference. I’m reluctant to change the site structure for obvious reasons, as any existing links will break (I mean links that clients have in emails). Admittedly on this somewhat unusual site, this only means the start page, but nevertheless it’s messy.

Is there a way to set a simple cookie, without handling it’s resolution? I could then just the use the plain old javascript that Juicebox support suggested.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve also removed the ‘http://’ but it hasn’t helped either.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter’s suggestion doesn’t seem to work with the constraints of my sites, anyone else suggest how I can set a simple cookie via a button on my pages?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

How many pages are we talking about here? If you don’t mind making an absolute concordance of one page to another in a variable, you could adapt my solution to suit your site. My plan was for there to be a single branch of difference between English and French versions of every page. Since you aren’t set up that way, you need to set up a data structure to do the translation. Something like this:

var rosetta = {"some_english_page.html": "some_french_page.html", 
"another.html": "anotherfr.html"}

Can you do that? If so, I will type up a modified version of the original script when I’m next at a computer.

Walter

On Jul 30, 2013, at 11:17 AM, “grantsymon” email@hidden wrote:

Walter’s suggestion doesn’t seem to work with the constraints of my sites, anyone else suggest how I can set a simple cookie via a button on my pages?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter,

so kind of you to keep trying with this.

There are 10 pages in both English and French, so 20 total. I add pages from time to time, but it’s not going to be more than a couple per year at the absolute most. The pages are paralleled Eng/Fr.

In my head, I imagine the only kind of coding I have any idea about, which is Filemaker Pro. In there I would build a simple script with a variable and an If/Then and attach it to a button. It would be very very simple. Sadly I have absolutely no idea how to achieve the same thing in FW … but I hoped there would be an Action to make it easy. Ho hum.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Forget Actions or anything from Filemaker for this, it’s a very simple thing to solve this way. Just imagine a structure, written in text, where you have a key and a value. The key would be the English filename and the value would be the French one. You can type it out like this, to make the association easy to see:

var rosetta = {
	"english.html": "french.html",
	"cheddar.html": "brie.html",
	... etc ...
};

The rhythm is this: English filename in double-quotes, followed by a colon, followed by the matching French filename in double-quotes, followed by a comma. All but the last pair will end in a comma. (Modern browsers won’t care if the last one ends in a comma as well, but poor dear IE will have to lie down in a darkened room if it encounters that sort of thing.)

Do this in a plain-text editor, preferably one that will highlight the syntax (TextWrangler will – for free), so you can see if you forget a quote mark, or start and end with a different type of quote. If you only have 20 pages, this shouldn’t take you more than a few minutes to type out and proofread.

When you add a new set of pages, just append the new pairs to the end of the structure, always maintaining a single comma between each (colon-separated) pair. You can maintain all of this in an external JavaScript file, so you only ever have to type it once. The script will be appended to every page in your site using an Action.

If there is more than just the filename that is different between two pages – if there is a folder name or other part of the path that is different – then be sure to add that into the mix. The goal here is to capture the smallest point of difference between two URLs, not the entire http://server.com/folder/ prefix if that never changes between the two languages.

Once you have this typed out, please post it at Gist or Pastie and paste the link here. That will keep everything simple for us; we won’t need to worry if the Web interface is messing things up by trying to convert URLs into clickable links.

Walter

On Jul 30, 2013, at 12:18 PM, grantsymon wrote:

Walter,

so kind of you to keep trying with this.

There are 10 pages in both English and French, so 20 total. I add pages from time to time, but it’s not going to be more than a couple per year at the absolute most. The pages are paralleled Eng/Fr.

In my head, I imagine the only kind of coding I have any idea about, which is Filemaker Pro. In there I would build a simple script with a variable and an If/Then and attach it to a button. It would be very very simple. Sadly I have absolutely no idea how to achieve the same thing in FW … but I hoped there would be an Action to make it easy. Ho hum.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter,

I’m being really dumb on this. I was looking at my desktop site which doesn’t need the cookie thing.

My mobile site which I want this for only has 2 pages (1 Eng and 1 Fr) with links to 10 Juicebox galleries. Each gallery is used for both languages.

Here’s the text as requested. Just one line.

If I can set a cookie, then Juicebox can read it so the Home/Back button will go to the appropriate links/Start page.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I am trying to set up a window for a visitor to confirm that thy are over 18 for a client who sells liquids for e-cigarettes I thought this cookie jar would do the same thing. I have followed Walter’s instructions but when I try to preview it I get the following error “Please link “cookiejar” to a JavaScript file” I don’t know how to do this, what have I done wrong and how can I fix it?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I have followed Walter’s instructions but when I try to preview it I get the following error “Please link “cookiejar” to a JavaScript file”

Post a link to your online example and we can see where you have gone wrong but first check that you have included the correct CDN link to the cookiejar script.

Click on the Additional JavaScript Libraries disclosure, and in the Name field enter cookiejar, and in the CDN URI field, paste in this: http://cdnjs.cloudflare.com/ajax/libs/cookiejar/0.5/cookiejar.min.js

If viewing on the web that URL should not have a leading ‘<’ or trailing ‘>’

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options