How can I set a cookie for multiple domains using javascript + already on the system existing ColdFusion code, via Bjron Holines Store Locator plugin

Question

To present a store locator I am using Bjorn Holines Store Locator Plugin. This plugin has an html template which creates a list besides the map of all the stores with detailed information. I added a button in this template. Goal is to store a cookie with the id of the specific branch when this button is clicked. This cookie should be set on multiple domains (no subdomains). I created a function to call a cfc. This cfc calls an already existing custom tag in which the cookies are set by the use of img scr="...". Note that I have no experience or knowledge of ajax/json whatsoever. I see lots of obstacles; returnformat, returntypes, cfoutputs, img, cfsavecontent, return value calling the custom tag etc. Using this code I get a succes TRUE as a result + the javascript alert but obviously no cookies are stored. How can I use this already existing custom tag to set the cookies? Is it even possible?

The button + function in the hmtl template:

<button type="button" class="btn btn-sm" id="voorkeur" onClick="setCookie('{{branch}}','{{name}}')">Als voorkeur instellen</button>
<script>
    function setCookie(branch, name) {
        $.ajax({
            url: "siteparts/branch/setCookieMultipleDomains.cfc"
            , type: "POST"
            , dataType: "json"
            , data: {"method" : "setCookie", "returnFormat": "json", "branch": branch}
        }).done(function(response) {
            console.log("response", response);
            alert('Uw voorkeur voor ' + name + ' is opgeslagen.');
        }).fail(function(jqXHR, textStatus, errorMessage) {
            console.log("errorMessage",errorMessage);
        });
    }
</script>

The cfc setCookieMultipleDomains.cfc:

<cfcomponent>   
    <cffunction name="setCookie" returntype="struct" access="remote">
       <cfargument name="branch" type="string" required="true">

       <cfset lresponse = {success=true}>

       <cftry>
          <CF_CU_cookieding action="setCookies" branch="#branch#" ret="qGetCookies"> --->
            <cfcatch>    
                <cfset lresponse = {success=false}>
            </cfcatch>
        </cftry>

       <cfreturn lresponse>
    </cffunction>
</cfcomponent>

The custom tag CF_CU_cookieding.cfm:

<cfsetting enablecfoutputonly="yes">
<cfparam name="attributes.action" default="">
<cfparam name="attributes.branch" default="">
<cfparam name="attributes.ret" default="">

<cfif attributes.action eq "setCookies">    
    <cfsavecontent variable="thecontent">
        <cfoutput><img src="https://www.domain1.com/scripts/ajax/save/setCookie.cfm<cfif attributes.branch neq "">?branch=#attributes.branch#</cfif>" width="1" height="1"></cfoutput>
        <cfoutput><img src="https://www.domain2.com/scripts/ajax/save/setCookie.cfm<cfif attributes.branch neq "">?branch=#attributes.branch#</cfif>" width="1" height="1"></cfoutput>
        <cfoutput><img src="https://www.domain3.com/scripts/ajax/save/setCookie.cfm<cfif attributes.branch neq "">?branch=#attributes.branch#</cfif>" width="1" height="1"></cfoutput>
        <cfoutput><img src="https://www.domain4.com/scripts/ajax/save/setCookie.cfm<cfif attributes.branch neq "">?branch=#attributes.branch#</cfif>" width="1" height="1"></cfoutput>
    </cfsavecontent>
    <cfif attributes.ret neq "">
        <cfset setvariable("caller.#attributes.ret#", thecontent)>
    <cfelse>
        <cfoutput>#thecontent#</cfoutput>
    </cfif> 

<cfelseif attributes.action eq "createCookie">
    <cfcookie name="d_cookie_ok" value="1" expires="never"> 
    <cfif attributes.branch neq "">
        <cfcookie name="d_cookie_branch" value="#attributes.branch#" expires="never">   
    </cfif>

</cfif>

And the img scr setCookie.cfm:

<cfparam name="request.branch" default="">

<cfif request.branch neq "">
    <CF_CU_cookieding action="createCookie" branch="#request.branch#">
<cfelse>
    <CF_CU_cookieding action="createCookie">
</cfif>

Answer 1

Fixed by using the returnvalue qGetCookies of the custom tag cu_cookieding. In my cfc I changed the returntype to "any". I stripped qGetCookies from unneccessary text to only have the path to the img, comma separated. Send the response back. In the javascript in the html template i added a div for the future img's. I created an array from the cfc response. Looped through the array to create an image. Now the cookies are set for multiple domains

the cfc:

<cfcomponent>   
    <cffunction name="setCookie" returntype="any" access="remote">
        <cfargument name="branch" type="string" required="true">

        <cftry>
            <CF_CU_cookieding action="setCookies" branch="#branch#" ret="qGetCookies"> 
            <cfcatch>    
                <cfset lresponse = {success=false}>
            </cfcatch>
        </cftry>
        <cfset lresponse = replace(qGetCookies,'><','>,<','all')>
        <cfset lresponse = replace(lresponse, '<img src="','','all')>
        <cfset lresponse = replace(lresponse,'" width="1" height="1">','','all')>
        <cfreturn lresponse>
    </cffunction>
</cfcomponent> 

The html template:

{{#location}}
<li data-markerid="{{markerid}}">
    <div class="list-label"><img src="{{marker}}" /></div>
    <div class="list-details">
        <div class="list-content">
            <div class="loc-name">{{name}}</div>
            <div class="loc-addr">{{address}}</div>
            {{#if address2}}
                <div class="loc-addr2">{{address2}}</div>
            {{/if}}
            <div class="loc-addr3">{{postal}} {{city}}</div>
            {{#if web}}
                <div class="loc-web"><a href="http://{{web}}" target="_blank">{{niceURL web}}</a></div>
            {{/if}}
            {{#if distance}}
                <div class="loc-dist loc-default-dist">{{distance}} {{length}}</div>
                {{#if altdistance}}<div class="loc-dist loc-alt-dist">{{altdistance}} {{altlength}}</div>
                {{/if}}
            {{/if}}
            <div class="loc-directions"><a href="https://maps.google.com/maps?saddr={{origin}}&amp;daddr={{address}} {{address2}} {{city}}, {{state}} {{postal}}" target="_blank">Route</a></div>
            <div id="cImgHolder"></div>
            <button type="button" class="btn btn-sm" id="voorkeur" onClick="setCookie('{{branch}}','{{name}}')">Als voorkeur instellen</button>
            <script>
                function setCookie(branch, name) {
                        $.ajax({
                            url: "decokay2015/siteparts/branch/setCookieMultipleDomains.cfc"
                            , type: "POST"
                            , dataType: "json"
                            , data: {"method" : "setCookie", "returnFormat": "json", "branch": branch}
                        }).done(function(response) {
                            console.log("response", response);
                            var cArr = response.split(',');
                            console.log("cArr", cArr);
                            for (var i = 0; i < cArr.length; i++) {
                                var elem = document.createElement("img");
                                elem.setAttribute("src", cArr[i]);
                                elem.setAttribute("height", "1");
                                elem.setAttribute("width", "1");
                                document.getElementById("cImgHolder").appendChild(elem);
                            }  
                            alert('Uw voorkeur voor ' + name + ' is opgeslagen.');
                        }).fail(function(jqXHR, textStatus, errorMessage) {
                           console.log("errorMessage",errorMessage);
                        });                 
                }
            </script>

        </div>
    </div>
</li>
{{/location}}

Answer 2

you can't set cookies in different domains, you might be able to get around this by using a subdomain setup if you have that DNS access.

example.com this.example.com