Wondering the best way to prevent a GTM tag from firing. I found https://rbardini.com/automating-gtm-data-layer-tests/ which tags about fetching the dataLayer variable and comparing it in an assertion, but this looks like a clumsy approach when you want to write to the dataLayer on every page.
For example, it suggests:
const getDataLayer = ClientFunction(() => window.dataLayer)
We use Google Tag Manager to automatically load tags on our website. Unfortunately one of them is CloudIQ (from PayPal) which pops up an iframe overlay offering a newsletter signup or ability to save your shopping basket. The Trigger in our GTM setup for that tag is simply 'All Pages'. When it pops up it generally blocks our test because Selectors cannot be clicked.
Our page flow is over several pages of an online shop, e.g.:
visit home page, click a product - navigates to a product page
click some options on the product page, then add to cart
go through checkout flow
So there might be many pages visited due to click actions.
There is an ability in GTM to define Variables and then use them in Exceptions for a tag, so I could prevent the CloudIQ tag firing either via a/ a global variable or b/ a dataLayer variable. However, I can't see how to elegantly get these set for each page visited during my test, such that they would exist when the GTM examines variables in order to block a Tag from being loaded. Fixture.beforeEach isn't right because it would only run once per fixture, and any data it set on the page's scope would be lost as soon as a page navigation occurs.
Anyone got experience of this sort of thing?
(The alternative of course is to detect the overlay, use switchToIframe to switch into the CloudIQ iframe and close it manually, but it pops up quite erratically and I'd prefer to simply disable the Tag altogether during tests as it's not core functionality of our website that we need to test.)
One way would be to set a custom user agent string to your test suite, create a custom javascript variable that returns the value for navigator.useragent, and make an exception trigger that blocks the tag.
Or any variation on that theme - set a cookie, use a url parameter, or if you test suite allow inject a global js variable, and check for the value in an exception trigger.
There is no need to avoid firing of events on the client side. Just mock the service routes for Google Tag Manager and CloudIQ and imitate correct responses for them.
Related
We are developing an app which will display a button on product details page to perform some actions. We are using product.metaifields for displaying the same based on a condition. So basically the button display toggles depending upon the metafield value.
The issue we are facing is, activate the feature from admin section and then the button will not show up on the user side unless we do a hard refresh on the browser. What happens here is Shopify caches the metafield value so the condition checking will not work.
Is there any way to remove the page caching while we perform some action on the app?
When you render a page in Shopify, it renders everything including the metafield resource values you may access while rendering. There is no special caching of a metafield value. If you render a metafield "AAA" on a client-facing page, change the metafield using an App or the Admin to be "BBB" there is no signal to the already rendered page to redraw anything.
If you want dynamic behaviour, like rendering a button with a value based on a metafield resource, you will have to either do a callback to an App, get the new contents, and update the DOM, or use a push strategy like WSS:// to keep a channel open to a backend that monitors these things.
So to sum up, your problem is not one of cached data, but instead the fact that you're rendering a non-dynamic value, and expecting your UX to be dynamic.
Inside my app, I'm using the WKWebView to display a website. My goal is, when user is pressing a button on this website, I want to stop an action linked to this event and replace it with my own, natively made (custom action outside the WKWebView). I've been trying to search for any solution to fetch mentioned event but unsuccessful. What more came to my mind, if there is a way to fetch a JavaScript in WKWebView, I have a possibility to add some JS script code to this site (not to delete the action I want to block). Thank you for any help.
First, do you have a permission to mess with this web site's behaviour? I assume you do, otherwise it is likely illegal.
Second, try using Safari Web Inspector with a device/simulator, and use the DOM tree and console tools to find out what is the HTML/javascript that is involved with this action on this site.
If you can't find what happens in HTML/JS yourself, feel free to post a new separate question on SO with your target URL, some HTML/JS code, and which link/action you want to replace. Tag the question with "javascript" and ask if it is possible to write some javascript to replace that particular action to some custom JS code.
Usually there are 2 types of actions: either it is something that provokes AJAX calls to a server API triggered by an event handler, or it is a plain HTML link that results in a web navigation. For both cases it is possible to write a JS script that overrides the action.
Finally, use WKUserScript to inject javascript into the page, and override the action. Use window.webkit.messageHandlers to send an event from your custom action to the app side. Use WKScriptMessageHandler to process the event in the Objective-C or Swift code.
See an example here: http://nshipster.com/wkwebkit/
Is there a way by which I can duplicate or clone dijit widgets?
Basically, idea is to improve page rendering performance by minimizing widget creation time.
We have a single page web application and we do not reload the entire page whenever the user performs any action.
The flow of events is as follows,
The main page is loaded by the browser. It contains a dijit ContentPane which acts as a master container and displays the entire page using various other dijit widgets like textboxes, tabs, datefield, Enhanced grid etc.
The user performs an action (e.g. click on a dijit button)
The application sends an ajax call to server which processes the button click event and generates UI of the next page.
Browser receives successful response from ajax call and calls refresh method of dijit ContentPane. Which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position. (instead of refreshing the entire page)
The user again performs some action and again the refresh method is called which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position.
Because of such architecture the browser has to destroy existing widgets and recreate them again and again. Which results in slow performance.
The idea is to have a set of widgets always readily available on the browser clone them and place at appropriate position and update them instead of recreating each time.
Yes this is possible with something called _AttachMixin.
Basically there is no getting around the fact that your widgets would need to attach event listeners to the HTML Document. What can be cut out though is the time in the Dijit Widget's lifecycle to generate the DOM. As we well know, simple Dijit widgets like a dijit/form/Button has a div inside a div inside a div etc.
This is explained in detail here http://dojotoolkit.org/reference-guide/1.9/dijit/_AttachMixin.html
Here is an example using Node.JS as a backend. http://jamesthom.as/blog/2013/01/15/server-side-dijit
This is a tough problem and this concept isn't explained very thoroughly. If you have a backend that is not Node.JS you have to manually make the widget string and pass it as a response to your AJAX and an follow the example from the 1st link (Ref Doc)
We have had lots of widgets of our app render nicely within the client side. A far less complicated approach would be to simply show / hide (instead of render and destroy) widgets as and when they are needed. I assume that you app's access policy would focus on data and not which person has access to which widget.
I'm creating a SPA app using Durandal and I would like to include a credit card payment facility. The guys that I'm looking at requires you to give return URLs to success, cancel and a view other pages, is that possible?
To me it would be breaking the 'single page' part of SPA, but is it possible? Could I do it all in a window?
Disclaimer: I don't know Durandal, but you would solve this in an SPA using either "hashbang URIs" or actually re-serving the SPA in your webserver for the requested return URI and adjusting the content using the same technique as hangbash URIs but using history.pushstate/history.popstate instead, see here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
A more general article from Google is available here that covers the same principle: https://developers.google.com/webmasters/ajax-crawling/
This "works" because SPAs are SPAs only in that the browser requests a new HTML document from the server once (or in your case, twice), the SPA should still be updating the history and address-bar state of the UA as the user navigates the application, just as though it were a regular multi-page application.
A great example of this is GitHub's source navigator: Try here ( https://github.com/angular/angular.js ) and navigate the repository, observe that the contents of the file-listing change as does the address bar, but your browser doesn't reload the whole page... yet if you copy+paste the (modified) address bar address into a new browser window, you get the same page back.
I looked into doing credit card processing from a SPA and the best option I had found was Stripe. They supply a javascript file that looks like it would work, I never implemented it on my project due to time constraints so I can't confirm that it works but it looked very promising.
IFRAMEs are quite good for this sort of thing. You can use jQuery to hook an event handler to the page load event and this will tell you when the other end has responded. Load the 3rd party page into the IFRAME and serve response pages on the URLs you provide to the service provider. As mentioned by others you can use routes to identify the response pages. The IFRAME will stop the round-tripping from mucking up your application state and in fact it is possible to put script in your response pages that dot-notates its merry way up the DOM and into your app.
Situation: I needed to add form with POST method to CMS page. I created custom hook and a module displaying the form successfully. Then I need to react to user input errors eg. when user doesn't enter email address I need to detect it, display the whole page again together with the form and with "errors" in user input clearly stated.
Problem: The problem is to display the WHOLE page again with connected information (eg. about errors etc.). In the module PHP file when I add this kind of code,
return $this->display(__FILE__, 'modulename.tpl');
it (naturally) displays ONLY the form, not the whole CMS page with the form.
In case of this code,
Tools::redirectLink('cms.php?id_cms=7');
I can't get to transfer any information by GET neither POST method.
$_POST['test'] = 1;
Tools::redirectLink('cms.php?id_cms=7&test');
I tried to assign to smarty variables too
$smarty->assign('test', '1');
(I need to use it in .tpl file where the form itself is created) but no way to get it work.
{if isset($test)}...,
{if isset($smarty.post.test)}...,
{if isset($_POST['test'])}... {* neither of these conditionals end up as true *}
Even assigning a GET parameter to url has no impact, because there is link rewriting to some kind of friendly url I guess, no matter I included other argument or not. ([SHOPNAME]/cms.php?id_cms=7&test -> [SHOPNAME]/content/7-cmspage-name)
My question is: is there a way to "redirect" or "reload" current page (or possibly any page generally) in prestashop together with my own data included?
I kind of explained the whole case so I'm open to hear a better overall solution than my (maybe I'm thinking about the case in a wrong way at all). This would be other possible answer.
The simplest method would be to use javascript to validate the form - you can use jQuery to highlight the fields that are in error; providing visual feedback on how the submission failed. In effect you don't allow the user to submit the form (and thus leave the page) until you're happy that the action will succeed. I assume that you will then redirect to another page once a successful submission has been received.
There's lots of articles and how-tos available for using javascript, and indeed jQuery for form validation. If you want to keep the site lean and mean, then you can provide an override for the CMS controller and only enqueue the script for the specific page(s) you want to use form validation on.
If the validation is complex, then you might be best using AJAX and just reloading the form section of your page via a call to your module. Hooks aren't great for this kind of thing, so you might want to consider using an alternative mnethod to inject your code onto the cms page. I've written a few articles on this alternative approach which can be found on my prestashop blog