How to create a dynamic SRC URL using Javascript? - javascript

Backstory:
We are an affiliate merchant and received a tracking code to implement on the heading page of our sales page. However the tracking code requires the amount and the order ID to be filled dynamically.
Our current platform doesn't provide liquid fields to assign in the tracking code, so I had to figure out what fields exists and how to get them to propagate the SRC url which is the tracking code.
Using Zapier I was able to pull the key fields that provide the information we need:
subscription_id: sub_AIhebhUVf1aV4z - The Tracking ID
contact__contact_profile__known_ltv: 7.95 - The amount
I'm not sure what code Zapier is using to pull this information, I'm assuming it's a GET. You can set these fields as InputData and recall the information into Javascript but I am not having any luck putting the script together.
Input Data
amount = contact__contact_profile__known_ltv
tracking = subscription_id
var pixel ='<img ' + 'src="https://shareasale.com/sale.' +
'cfm?amount='+ inputData.amount + '&tracking=' +
inputData.tracking + '&transtype=SALE&' +
'merchantID=XXXX"'+
' width="1" height="1">';
document.write(pixel);
Anyone have an idea why this code doesn't work and how to make it run? much appreciated.
the tracking code provided by the affiliate is:
<img src="https://shareasale.com/sale.cfm?amount=AMOUNT&tracking=SUBSCRIPTION_ID&transtype=SALE&merchantID=XXXX" width="1" height="1">

I don't see anything wrong in combining vars but I think it is not working because you are only creating a string, not an image. instead try below
var pixel ='https://shareasale.com/sale.' +
'cfm?amount='+ inputData.amount + '&tracking=' +
inputData.tracking + '&transtype=SALE&' +
'merchantID=XXXX"';
var img = new Image;
img.src = pixel;
img.height = 1;
img.width = 1;
document.body.appendChild(img);

Related

How to embed medium post on website

so I am trying to embed the latest entrepreneur profiles from Medium#femalefounderssg into a site made on Wix, I tried to use the JSON and jQuery code here: https://codepen.io/jasonm4130/pen/vZYbQx
var tagIndex = item.description.indexOf('<img'); // Find where the img tag starts
var srcIndex = item.description.substring(tagIndex).indexOf('src=') + tagIndex; // Find where the src attribute starts
var srcStart = srcIndex + 5; // Find where the actual image URL starts; 5 for the length of 'src="'
var srcEnd = item.description.substring(srcStart).indexOf('"') + srcStart; // Find where the URL ends
var src = item.description.substring(srcStart, srcEnd); // Extract just the URL
output += '<div class="blog-element"><img class="img-responsive" src="' + src + '" width="360px" height="240px"></div></header>';
The issue I am facing is that since the code renders the first content that it sees, it always renders the logo (as in the image below), the entrepreneur profile photos that I want displayed with the posts are usually contained in the second
output of above code in my implementation
Could anyone please advise as to how the existing code can be modified or what other possible implementations are there? Thanks so much!

How to get the serveur address where google interior view images are stocked?

I am using the Google maps API v3 to create a portfolio.
Question :
Is there a way to generate the default image link, that would work on every google server, or a way to know what server is used so I can generate the link accordingly ?
Here is an example of what I'm currently doing. It may or may not help you finding an answer
User path :
The user enters the address of his business.
An iframe is displayed with the interior view of this business
The user can navigate on this iframe to select his default picture
From the view selected with the iframe, I can create an image URL directly from the Google servers that I set as default image.
At the moment, this URL can be (JS):
var image = "https://geo3.ggpht.com/cbk?panoid=" + panoId + "&output=thumbnail&cb_client=search.LOCAL_UNIVERSAL.gps&thumb=2&w=689&h=487&yaw=" + povHeading + "&pitch=" + povPitch + "&thumbfov=" + fov;
or
var image = "https://lh5.googleusercontent.com/" + panoId + "/w689-h487-k-no-pi"+povPitch+"-ya"+povHeading+"-ro0-fo"+fov+"/";
This worked for a vast majority of the cases, but as more people are using the service, some special cases appeared (example link) :
https://lh3.ggpht.com/-1dwRgcXpyYk/WS7bUYtLEdI/AAAAAAAAObA/zd-aK-rfWxYvA302eg6WT7qQoEKRrUxGgCLIB/x2-y2-z3/p
I am saving the link for the both first cases but I have not found a general rule that can be applied.
The user that entered his business having this 3rd example link is getting a 404 img not found atm.
Here is the code I'm currently using, if it can help understanding the question (JS):
function generateImg() {
/* here I get all the vars used to create the image */
//generate img link
var image = "https://geo3.ggpht.com/cbk?panoid=" + panoId + "&output=thumbnail&cb_client=search.LOCAL_UNIVERSAL.gps&thumb=2&w=689&h=487&yaw=" + povHeading + "&pitch=" + povPitch + "&thumbfov=" + fov;
//if img does not exist
UrlExists(image, function(status){
if(status === 404){
// 404 not found
var image = "https://lh5.googleusercontent.com/" + panoId + "/w689-h487-k-no-pi"+povPitch+"-ya"+povHeading+"-ro0-fo"+fov+"/";
}
});
}
You can get the consistent result within the official API:
var image = "https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=" + panoId + "&fov=90&heading=235&pitch=10&key=" + API_KEY;

Grabbing A Large Image With Ebay API GetSellerList

I'm trying to grab the highest quality image for each item that a GetSellerList request returns. The HQ images can be viewed manually by clicking the image on a product page (so I know they exist).
Unfortunately, it only returns medium sized images. I've googled and googled, only to find a lot of mentions of SelectorOutput, which can only be used in the Finding API and that is completely irrelevant to what I'm trying to do.
Here's my xml input (note that my auth is taken care of with a js library I'm using):
var xml = '<?xml version="1.0" encoding="UTF-8"?>' +
'<GetSellerListRequest xmlns="urn:ebay:apis:eBLBaseComponents">' +
'<RequesterCredentials>' +
'<eBayAuthToken> <!-- my ebayAuthToken -->' +
'</RequesterCredentials>' +
'<UserID>samurai-gardens</UserID>' +
'<StartTimeFrom>2016-01-01T23:35:27.000Z</StartTimeFrom>' +
'<StartTimeTo>2016-02-01T23:35:27.000Z</StartTimeTo>' +
'<DetailLevel>ItemReturnDescription</DetailLevel>' +
'<Pagination ComplexType="PaginationType">' +
'<EntriesPerPage>10</EntriesPerPage>' +
'<PageNumber>1</PageNumber>' +
'</Pagination>' +
'</GetSellerListRequest>"';
I am getting the correct output, I just don't see how I can pull the large images with this. Thanks ebay for a super frustrating api!
Just to clarify the comments posted on this question:
To obtain a high resolution image associated with a product listing perform the following..
Utilize a GetSellerRequest as formatted below to obtain the picture URL from the Item Details:
var xml = '<?xml version="1.0" encoding="UTF-8"?>' +
'<GetSellerListRequest xmlns="urn:ebay:apis:eBLBaseComponents">' +
'<RequesterCredentials>' +
'<eBayAuthToken> <!-- my ebayAuthToken -->' +
'</RequesterCredentials>' +
'<UserID>samurai-gardens</UserID>' +
'<StartTimeFrom>2016-01-01T23:35:27.000Z</StartTimeFrom>' +
'<StartTimeTo>2016-02-01T23:35:27.000Z</StartTimeTo>' +
'<DetailLevel>ItemReturnDescription</DetailLevel>' +
'<Pagination ComplexType="PaginationType">' +
'<EntriesPerPage>10</EntriesPerPage>' +
'<PageNumber>1</PageNumber>' +
'</Pagination>' +
'</GetSellerListRequest>"';
This should product a URL such as the following:
i.ebayimg.com/00/s/ODAwWDYyOQ==/z/3eEAAOSwSdZWdJRL/$_1.JPG?set_id=880000500F
Once this URL is obtained, it needs to be modified to point to the high resolution image option. Through trial and error this appears to be either .JPG images 3 or 57 (and possibly others). Each image has different alignments which is the cause of the multiple 'high resolution' options. Modify the returned URL using standard string manipulation techniques to obtain the following:
i.ebayimg.com/00/s/ODAwWDYyOQ==/z/3eEAAOSwSdZWdJRL/$_3.JPG
This could be obtained as follows (in c#). The snippet below was not tested. Make sure there isn't an off by one bug in the substring. There are a myriad way of doing this, this just happens to be what I thought of..
string url = "i.ebayimg.com/00/s/ODAwWDYyOQ==/z/3eEAAOSwSdZWdJRL/$_1.JPG?set_id=880000500F";
int index = url.LastIndexOf(Convert.ToChar(#"/");
url = url.Substring(0,index+1);
url = url + #"/$_3.JPG";
If you are using c# (which I realize the original post was for javascript) you can use information in the following thread to obtain an image stream from the URL: URL to Stream
Here is a post for displaying an image from URL using Javascript: URL To Display Javascript

How to add an variable value in between the hyperlink in javascript

I am sending an email via javascript. In mail.parameter.text property I need to send the hyperlink. In the code below I am hardcoding the url whick looks very lengthy and also I need to add the /dashboard at the end of the url. Any idea on how to shorten the url?
var parent = space.getParent();
var siteGroup = "GROUP_EMAIL_CONTRIBUTORS";
var mail = actions.create("mail");
mail.parameters.to_many = siteGroup;
mail.parameters.subject="New Site Created in Community"
mail.parameters.text=" A new site called " + document.properties.name +"is created.Click http://pc1:8080/share/page/site/"+document.properties.name+"/dashboard"+" to join the site";
//execute action against a document
mail.execute(document);
Sorry if this is a basic question I dont know javascript. This is my entire script and I am not using any html tags in between.
You can change it to something like this, for example:
mail.parameters.text="Click <a href='http://pc1:8080/share/page/site/" + document.properties.name + "/dashboard'>here</a>";
Your link will appear as "here" and nevertheless lead to the URL you specified. Is that what you mean by "shorten the url"?
Please try now.
var url = "Click http://pc1:8080/share/page/site/" + document.properties.name + "/dashboard" + " to join the site";
ail.parameters.text = url;

Write Html Img id with javascript

I want to write
<img src="image/#######.jpg" id="#######" style="visibility: hidden;"/>
On my html page either from a file php or javascript json file.
The ####### could be any name that gets changed frequently.
There would be 100's of similar pages that's why I need to do it on the fly from an external file, instead of rewriting all those pages.
The id then gets accessed by javascript that matches it to a json file that uses it later in canvas.
Hope I haven't confused anyone.
You can do something similar to this
var newImage = #########;
var Ids = "####";
document.getElementById(Ids).src="../template/" + newImage + ".jpg";
Since you mentioned that there may be 100's, so you have to iterate the json and frame the code to act dynamically.
Hope you got an idea.
Update:
var idAndImageSrc = "#######";
document.getElementById("previousStaticImgId").setAttribute("id", idAndImageSrc)
.src="../template/" + idAndImageSrc + ".jpg";

Categories

Resources