We Keep Coding

setting cross origin variable in iframe

i am embedding a form on a checkout page with an iframe and i am trying to take the price of the cart and have it automatically inputted into the amount field. the value of the cart variable seems to be $("span[data-test='cart-price-value']").innerText;
when i check it in the console, but i am confused on whether i should set the variable in the script that embeds the iframe or in my iframe html itself or whether or not i have to do both and add a jquery listener to the iframe html
and also i need to trim off the '$' from the variable, cause
$("span[data-test='cart-price-value']").innerText; returns a value with a dollar sign in front of it for example "$435.66" and i need it to be just "435.66" any help would be appreciated

There are a few things here -
Browsers have some pretty stringent restrictions about cross-origin iframes. You won't be able to communicate between the BigCommerce Checkout on one URL to an iframe hosted on a different URL - if their origins are different.
If you try to use JavaScript from the BC checkout page to set the value of a form input embedded in the iframe, you'll get a security warning in the console and the browser will dissallow it.
However, there is an API which allows for this communication - you can read more here:
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
You're going to be sending and listening for custom "message" events and running code accordingly.
I'm not 100% on this, but from what it sounds like, you'll want to use Window.postMessage() to the iframe/origin hosting the external form, and send along the price you need to input.
On the page which serves the iframe/form code, you'll need an event listener to wait for this message to come in, and that's when you can have an event handler which will take the value passed along in the cross-origin message and modify the form input value.
Now, in terms of actually implementing this - it will also become more complicated depending on what type of Checkout Page you're hosting. Are you on Optimized One Page Checkout (The new one?) If so, you'll probably need Mutation Listeners, as the OPC is an external React Application, and you can't really hook into the internal state, you need to use mutation listeners to wait until each section (Customer Details, Shipping Details, Billing Details, payment Step) loads - as these are refreshed using internal React State which you can't access from the BC/stencil/cornerstone/blueprint scripts.
More details on that here:
https://medium.com/bigcommerce-developer-blog/the-complete-guide-to-checkout-customization-on-bigcommerce-6b566bc36fa9
If you're using an older version of checkout where you can manually modify the JS and HTML structure of the checkout that BC serves, you might not need this.

GTM layer not pushing data

I am working on a hybrid application in which login page is written in php and rest application is written on react. I want to implement google analytics for the same SPAs. I am pushing data layer in componentWillMount and my gtm script is being added via php code in index.php file.
The problem that I am facing is on first time and whenever page is transitioning from non-react to react pages, my GTM layer is not pushing data into gtm. if move with in react pages, everything is working fine.
Any help is highly appreciated.
Thanks

The problem you are facing is very common when using SPAs.
Let me give you an example:
When you move from https://digitalmarketingbloq.com to
https://digitalmarketingbloq.com/2018/08/07/how-to-filter-internal-traffic-in-google-analytics-with-google-tag-manager/
The browser communicates with the server. The page is being rendered
and GTM gets initiated.
In your example on the first-page view of
your SPA, it works fine because the communication with the server is established
. But in an SPA moving from one page to the other
happens, client side. Do GTM does not have anything to act upon.
How can you solve this?
The first option is to enable the built-in variables in the "History" (Variables > Configure > History) section:
Second, create a trigger (Triggers > New > History Change) that fires on all History changes:
In preview mode, you can check if your SPA pick up on history changes. Read more information about the variables here: https://support.google.com/tagmanager/answer/7182738?hl=en&ref_topic=7182737#history and about the trigger here https://support.google.com/tagmanager/answer/7679322?hl=en.
If that doesn't work you need to develop "virtual page view" events in the SPA when transitions are completed. Let me give you some more perspective. When a transition from page A to page B is completed fire the following event:
dataLayer.push({
'virtualPageTitle': 'My Login Screen',
'virtualPageURL': 'https://www.my-example/login',
'event': 'VirtualPageview'
});
The above will push virtualPageTitle and virtualPageURL to the dataLayer as and event VirtualPageview. GTM will be able to pick this up but you need to create 2 user-defined variables virtualPageTitle and virtualPageURL. The trigger will be VirtualPageview.
Hopefully, this clarifies things for you.

Javascript: How can I check to see if url to fire exists before firing it?

I am getting urls from a feed that I assign to list of buttons, some of the urls produce 404s when clicked on said buttons. Is there a way to check if the landing page exists first before I fire it?
Some of these urls have tracking pixels in them to know when they are clicked so I wouldn't want to fire it in an iframe or a similar solution as it would possibly track twice to test if it exist first before it fires.
Is this even possible? The domains will not be the same and I can't use jQuery.

To test an url you must access it. So, without an external service, you can't test them beforehand.
W3C provides a link checker: https://validator.w3.org/checklink
"The program can be used either as a command line tool or as a CGI script."
Maybe you can use it to test an url and, after, create or not your button.
I don't know if there is a limit for this service, so check the documentation!
http://search.cpan.org/dist/W3C-LinkChecker/bin/checklink.pod

how to communicate data between parent and child window from different http domain?

I've been working on some sort of 'remote controller' window where the child window loads the selling configuration from the parent and after changing the selling configuration and pressing the 'apply' button, the selling configuration is sent back to the parent window.
After googling, I found out that data exchange between the parent and child is available only if both windows are opened under the same http:// domain.(I believe this is because of the unique SSL that every server has.)
then, here's my question: is there anyway that I can exchange data between parent and child window when two windows have different domain?
more details on the situation that I'm stuck on:
I'm trying to make a child window that will allow me to select which metal ores to sell in a petty web game called 'Mr.mine'(mrmine.com)
with the chrome javascript console, I've managed to have some control over the game where I can create such loops that will to the selling instead for me
Originally, if I were to select which ores were to sold, I would have had to manually change an array called 'sellorder' from the java console. This turned out to be quite confusing and frustrating so I wanted to create a child window where I could configure my selling decisions with a much simpler and easy to understand layout.
I succeeded in making such a child window in my github repository and I have confirmed successful data exchange between the parent and child window which are both located in the same github repository.
parent code:
var sellorder=[....] // has some value..
// some codes in between...
function sell(){
var url="https://rawgithub.com/kwagjj/mrmine-macro/master/initializing/sell_window_ver1.0.html"
var w=window.open(url,"sell_window","width=300,height=450");
}
child code:
var loadarray;
window.onload=function(){
loadarray=window.opener.sellorder;}
// ... after some operations..
window.opener.sellorder=loadarray;
Then I tried to implement this child window popup code into mr.mine.
It turned out to be a failure. And I think this is because in this case, the parent and child window doesn't share the same http:// domain.
So this is my situation. If there isn't a direct way of exchanging data between the two windows, I would like to hear any other way to even bypass this problem.

"with the chrome javascript console" (sic) you can also add some javascript to your page (or use an extension like greasemonkey for custom scripting).
On your game add a script with a setInterval function that will call with your server every x seconds. And get the json encoded data of the configuration
On the other side, when validating your configuration, it will use Ajax to store information on your server (i.e. in a file)
To sum up :
In your parent windows, when you modify your configuration, an Ajax call is made to save the new config json encoded in a file on your server
In your child windows with the console (if no reload) or with a userscript extension (like GreaseMonkey) you add a setInterval javascript to load the array from the file on your server.
PS: This is theorical and not an invitation to cheat on a game you like.

A brief question about JavaScript or AJAX

I have been finding ways around this for a long time but think it's time I addressed it.
If I have a page that has a dropdown menu, is there anyway I can select a value which will subsequently load other values further down.
Can this be done without a page reload?
I will give you an example.
Say I was making some tools for an admin panel, but first of all they needed to select a member to work with.
They would select the member and then below, the fields about that member would be populated based on what was selected in the first menu.
As I have already asked, can this be done without a page reload?
Thanks for reading.

Yes it can be done without AJAX. When the page is rendered pass all the collections that will be used by the dropdown lists as JSON objects into the HTML:
var collection = [{ id: 1, name: 'John' }, { id: 2, name: 'Smith' }];
...
Then register for the change event of the first drop down and based on the selected value go and fetch the data from the other collections. Of course if you have lots of data this might not be practical as your pages will become very large and in this case AJAX woulld be more appropriate.

Answer YES it can be done.
Firstly you'll need an event, in this case you need to take action on the onChange event for the selectBox. So when an item changes you run a function.
Now you have 2 choices. You can do this using AJAX or NOT, it really depends on the complexity / security of your application.
In the following I refer to
Users : those using the application
Hidden Client Side Data : Data sent to the client during page load, but not visible to all users, however using view source, or downloading JS files, the Data is not secured.
Method 1 - NO AJAX
Basics: You send all the possible display options down initially when the page is first loaded, but display only the sections relevant to the user during selectbox onchange events.
Recommended when: No security condiderations if hidden client side data is detected (or won't be detected, or you simply trust your audience to use the app in the intended manner). Lastly when your total view permutations are low.
Method 2 - AJAX
Basics: You send down initially only the page skeleton, when the user changes the value of the select box, you then do an AJAX request to the server - grab the new view info thats relevant to that user, send it back down to a script which will inject that user data into the DOM.
Recommended when: You have a public site, or a site where security is a consideration. Where you have lots of view permutations or want more customizations per user than in scenario 1.
As you see both methods do not require a repost - method 1 ships everything upfront, method 2 uses AJAX to fill in data when required. Both methods are valid depending on your requirement.

Yes. Ajax is mainly used for that i.e. (without a page reload)
You have to use following step to achieve
Create a link and call a JavaScript function on it's onchange function
In the JavaScript function you have to call Ajax request.
Update the div in your ajax response.