Site has shopping cart widget from another site-want to link to each image in store

dinneenp

Hi all,

My new abstract photo website has code to insert a shopping cart widget from Fine Art America website (FAA) on my store page- http://abstractabstract.com/store/
This is the code (I've just removed my member id):

<script type='text/javascript' src='https://fineartamerica.com/widgetshoppingcart/widgetscripts.php'></script&gt;
<iframe id='pixelsshoppingcartiframe' src='https://fineartamerica.com/widgetshoppingcart/artwork.html?memberidtype=artistid&memberid=XXXXX&domainid=0&showheader=0&height=600&autoheight=true' style='display: inline-block; width: 100%; height: 820px; border: none; overflow: hidden;'></iframe>

In my photos page when viewing an individual image I'd like to be able to link to that image within my store page. I can't seem to do this as the url doesn't change once I'm in the store page, so I can only link to the store page.

If I check the url for an image (beer bubbles) it's the url for the image within FAA- https://fineartamerica.com/featured/beer-bubbles-abstract-patrick-dinneen.html?memberidtype=artistid&memberid=XXXXX&domainid=0&showheader=0&sessionid=3e42e02e5daeff4283c15c39174674ce&flagwidget=true&widgettype=standard

Is what I want possible or not? If so could anyone kindly provide the code?

Thanks,
Patrick.

pillphil

Not a web developer, so by all means ignore.

Your page is using a iframe which displays the fine art webpage as an element on your webpage. So you would need code to change the second src value in the code you posted to the specific page the picture is on on their website, if you want to use the shop page you have. (would probably require javascript)


What might work is changing the href for each picture to be the corresponding link from the fine art website?( e.g. http://fineartamerica.com/featured/beer-bubbles-abstract-xxx-xxx.html). However, this would navigate them away from your website.

Actually, I don't think that'll work. I think that link is being used to display the image in a large window. So it probably won't just bring them to the other site without modifying the other divs.

Edit 2: you could use the purchase item link on the picture and have that take you to the correct page on the other website. Same issue with people being navigated away from your website.

Talisman

If I understand correctly, you want the purchase item link to take a visitor directly to the page in the store which is loaded in the iFrame. In order to do this you need to be able to change the 'src' parameter for the iFrame.

Because you're using WordPress, the cleanest way to implement the functionality would be to pass a parameter in the URL for the store page. In the fragment below the 'faa' parameter has been appended to the URL.

http://abstractabstract.com/store/?faa=featured/beer-bubbles-abstract-xxxx-xxxx

Some JavaScript in the store page can read the parameter to create the URL for the iFrame. If there is no parameter passed then the default URL would be used.

<script type='text/javascript'>
  function getQueryStringValue (key) {  
    return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));  
  }

  var faaUrlFragment = getQueryStringValue('faa') || 'widgetshoppingcart/artwork';

  document.getElementById('pixelsshoppingcartiframe').src = 'https://fineartamerica.com/' + faaUrlFragment + '.html?memberidtype=artistid&memberid=XXXXX&domainid=0&showheader=0&height=600&autoheight=true';
</script>

pillphil

Knew there must be a simpler way to edit the iframes src. I didn't know you could pass parameters like that.
You don't even want to know what I had tried...

Talisman

pillphil wrote: »

Knew there must be a simpler way to edit the iframes src. I didn't know you could pass parameters like that.
You don't even want to know what I had tried...

The key thing to remember with JavaScript is almost everything is an object. Once you have a reference to the object you can append/update its attributes easily.

Talisman

@dinneenp: Your private messages require a bit of housekeeping!

dinneenp has exceeded their stored private messages quota and cannot accept further messages until they clear some space.

The issue with the store page is that there are <p> and </p> tags in the JavaScript code you added to the page. I think you added the code fragment using a visual editor and the line breaks caused the tags to automatically be added.

If you view the source of the page you'll see what I'm talking about on lines 219-221.

You need to remove the offending tags using the 'Text' tab of the WordPress editor.

dinneenp

Hi
Thanks a million for the update. Inbox cleared & offending code removed.

It works but not exactly how I want it and don't know if it can-
this is what I want (this is the view when I click beer bubbles from with the Store page:


But this is what I get, the image but also a section from FAA site (with menu options and links):


Any idea if it's possible how I want it.
Thanks,
Pa.

Talisman

You need to make a slight amendment to the URL passed to the iFrame.

In the JavaScript block, you need to change this line

document.getElementById('pixelsshoppingcartiframe').src = 'https://fineartamerica.com/' + faaUrlFragment + '.html?memberidtype=artistid&memberid=90663&domainid=0&showheader=0&height=600&autoheight=true';

to this:

document.getElementById('pixelsshoppingcartiframe').src = 'https://fineartamerica.com/' + faaUrlFragment + '.html?memberidtype=artistid&memberid=90663&domainid=0&showheader=0&height=600&autoheight=true&flagwidget=true&widgettype=standard';

You're just adding two parameters to the URL which aren't present on the original link but are used on the websites's internal links.

&flagwidget=true&widgettype=standard

Remember to make the change using the 'Text' tab of the editor.

dinneenp

Hi Tailsman,

That worked- thanks a million.

But I have a knock on problem now....
On the individual image within the Store page if a user clicks on 'View All Images' (which is from the widget) it results in nothing showing, just '----'

The link for view all images is https://fineartamerica.com/widgetshoppingcart/artwork.html?memberidtype=artistid.html?memberidtype=artistid&memberid=90663&domainid=0&showheader=0&sessionid=97adf623ff1601689f94c6440a1e90ec&flagwidget=true&widgettype=standard

The link for view all image for other images is the same expect for the difference in session id-
https://fineartamerica.com/widgetshoppingcart/artwork.html?memberidtype=artistid&memberid=90663&domainid=0&showheader=0&sessionid=4f895f441757487a2fff96c097b262a9&flagwidget=true&widgettype=standard"]https://fineartamerica.com/widgetshoppingcart/artwork.html?memberidtype=artistid&memberid=90663&domainid=0&showheader=0&sessionid=4f895f441757487a2fff96c097b262a9&flagwidget=true&widgettype=standard

If I'm pushing it by asking another question now I totally understand and apologies.
Cheers,
Pa.

Talisman

How are you getting that link? The link itself is invalid so the server is unable to interpret it. There can only be a single "?" in the link.

Your link has two "?"s and it also contains the ".html" extension in the 'faa' parameter so it will result in a "404 Page Not Found" error:

abstractabstract.com/store/?faa=featured/beer-bubbles-abstract-patrick-dinneen.html?memberidtype=artistid&memberid=90663&domainid=0&showheader=0&flagwidget=true&widgettype=standard

If you go to the link I previously gave you:

abstractabstract.com/store/?faa=featured/beer-bubbles-abstract-patrick-dinneen

Then the "View All Images" link in the widget works.

If you are creating that link with all the parameters yourself then you need to append the additional 'faa' parameter to the string.

Instead of using a "?", you need to use "&" and append to the end of the query string.

So this:

abstractabstract.com/store/?faa=featured/beer-bubbles-abstract-patrick-dinneen.html?memberidtype=artistid&memberid=90663&domainid=0&showheader=0&flagwidget=true&widgettype=standard

Should become:

abstractabstract.com/store/?memberidtype=artistid&memberid=90663&domainid=0&showheader=0&flagwidget=true&widgettype=standard&faa=featured/beer-bubbles-abstract-patrick-dinneen

dinneenp

BINGO! Works a treat.

Thanks so much.
Pa.

dinneenp

I don't know if this is changeable but just in case-
when someone clicks to view the image in the store the link is the following & remains so while the user is within the widget
the url is http://abstractabstract.com/store/?memberidtype=artistid&memberid=90663&domainid=0&showheader=0&flagwidget=true&widgettype=standard&faa=featured%2Fbeer-bubbles-abstract-patrick-dinneen

Can I mask/change this url to make it 'nicer/not as long' e.g. http://abstractabstract.com/store1 or similar.

Thanks YET again,
Pa.

Talisman

You can make the change but it's purely cosmetic. If somebody copies the url or saves it as a bookmark, they'll have a broken link.

The History API is used to manipulate the browser history and change the address bar without reloading the page.

The line of code you want is:

history.replaceState({}, "", "http://abstractabstract.com/store");

Place the line after one which changes the link for the iFrame source.