[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Javascript issue on checkout page

Posted on 2011-05-03
Medium Priority
Last Modified: 2012-06-27
We are trying to list 2 checkout buttons on our checkout page utilizing Amazon checkout  The script seems to have an issue with this and we need some guidance.

We want to list product #1 with a checkout button below it. This works great.
We then have a 2nd product, but when we add the script for the 2nd product, it puts the 2 buttons right next to each other, regardless of where we place the code on the page.

To see exactly what we are talking about, please look at this page:

We have the 2 checkout script codes completely separated on the page and located under each product image. In fact, we have placed the 2nd checkout code button at the bottom of the page and it still puts them side by side.

The code is generated by the Amazon page and other than placing the code, we are not able to modify it.

How do we create separation of the 2 scripts?  We have tried
and other variations - no luck.
Question by:kwick

Accepted Solution

cfEngineers earned 2000 total points
ID: 35515897
you can make the second one unique like this by adding a 1
RenderCBAButton1 = function(ordervalue) {
document.getElementById('cbaxmlButton1').innerHTML = '';
var standard1 = new CBA.Widgets.StandardCheckoutWidget({
merchantId: "A2MDXM015J6IMC",
buttonSettings: {size:'medium',color:'orange',background:'white'},
orderInput: {
format: "XML",
value: ordervalue}
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35515903
You're putting them in the same <div> "<div id="cbaxmlButton">".   Even though you have a second copy, javascript will only find the first one.  "id"s are supposed to be unique.  "class"s can be used in multiple elements but "id"s shouldn't be.

Author Closing Comment

ID: 35516976
Perfect and fast.  Hours of frustration - GONE!!!


Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

868 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question