Kentico: have one webpart reload a second webpart using ajax - javascript

The scenario I'm trying to build in Kentico is having a user action in one web part cause the reload/update of a second web part without reloading the whole page.
An example would be adding an item to a shopping cart: if a user clicks on the 'add item to cart' button (first webpart), then the item total in the cart (second webpart) in the page header should update without reloading the whole page.
I know how to do this with an ASP.NET MVC application, but I haven't yet figured out how to do this with Kentico.

This is not possible out of the box. You have two options:
Create copy of a web part and adjust it according to your needs. This is a cleaner solution but can be avoided.
Turn on "Use update panel" for desired web parts and do the refreshing programmatically via JavaScript. I wouldn't fear it if it's just for small portions of the website (like updating text of item total).
I'd wrap the "item total" (I guess you use the Shopping Cart Preview) web part in a div (using a container or content before/after properties) and give it a class (e.g. .cartInfo). And then query it and refresh the underlying UpdatePanel (div) by calling ASP.NET's __doPostBack().
__doPostBack(document.querySelector(".cartInfo div").id,'');
You can then hook this piece of code to any event on the page using addEventListener / attachEvent. In your case it would be click event of the "Add to cart" button. My examples are vanilla JS but you can of course use jQuery to do all that.

Related

How to fill shopping cart on page B with data from page A

I have a list of products on page A and want to add them to a shopping cart on an external page B (by clicking a button on page A). I already have the correct Ids from page B and their single product page url. I'm looking for the correct (and secure) approach on this one.
My current approach would be using a browser extension which passively listens to the specific button click on page A and then takes action (e.g. by automatically opening a new tab and submit every product page individually). Extending this idea a bit further I could check the form submit url of page B and make use of it automatically.
However using an extension limits this feature to desktop only.
I already thought about using a bookmarklet but using that approach a user always has to actively activate the bookmarklet (from what I know) instead of it listening passively ...
Am I on the right track here or is there another different way I could go?
You can try to add your item id to a variable array each time you select one and then pass the array variable to the page B either by using arguments or using a POST method.

Google Tag Manager: Tracking Dynamic Button IDs on a Single Page Application (SPA)

My e-commerce page is set-up as an accordion-style, single page application checkout page, and each step has a "Next" button that can be clicked to advance to the next step:
My goal is to set-up tracking within GTM to allow me to analyze drop-offs at each step. As a consequence of the page being configured as a single page application (SPA), one way would be to track clicks on the "Next" button and call on the individual button ids as a trigger condition.
However, the button id (e.g. "uuid_1b8e49ce7175_button-triger-next...") is dynamic and changes upon refreshing the page.
What options are there available within GTM to track the completion of different stages of the checkout process and analyze the drop-offs at each stage?
There's no 'universal' answer to this since each 'SPA application' is supposed to have its own distinct layout so there might be several ways to track them with GTM.
One of the general approaches might be using 'ancestor' style CSS selector to point to specific 'Next' buttons.
Let's say your 'Next' buttons belong to some specific sections like:
<div class='quote'>
...
<button id='jh23r4'>Next</button>
</div>
<div class='secelt_plan'>
...
<button id='j23j98'>Next</button>
</div>
then you can referr the first button as .quote button and the second button as .secelt_plan button using condition of Click Element match CSS selector in your GTM click trigger.
Consider checking docs on CSS selectors for more details

Moving an HTML+javascript page to iFrame

I have an existing website composed of individual pages (each page is a different tool that requires some user input (ie forms), and each with it's own set of javascript functions to populate dropdown lists, etc on that page). Each of the tools is accessed from the main index.html.
Instead of each tool being its own "stand-alone" page that is invoked from index.html, I'd like each tool to be displayed in an iFrame instead on the main page. This way the main page remains static, while only updating the iframe with whatever tool the user selects. So say on the main index page, I have a 3 tools menu (collect logs, collect KPIs, collect status), along with an iFrame. If the user selects collect logs for example, the menu containing "collect logs" stays there, but the "collect logs" page is displayed in the iFrame.
My problem is that all the HTML content works fine, but none of the javascript code in the selected tool page works (ie none of the drop downs get populated since it's the javascript code in the page that does that by reading a file on the server).
Is there an easy way to port each tool page (html+javascript) to an iFrame without having to re-write tons of code (in my naivety I thought simply invoking the page inside an iFrame using target='' in the href would work)? Or is there a better method of accomplishing what I'm trying to do? Maybe iFrame isn't the solution.
Content in iframes remain autonomous from the wrapper app, so it makes sense that it's not working correctly. Other than building a listener for a click event associated with the div wrapped around the iframe, the iframe document isn't accessible if it points to a different origin. (See [same-origin policy]
(https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy))
To stay with simple html/css/js solution:
You can use a regular div to wrap each 'stand-alone' content and then just use whatever button/navigation target you have display that div and hide the previous by changing their css display style with the onClick event.
More invasive option:
You may want to consider using a more modular JS approach, like React JS, to build components vs pages and utilize React's structure to toggle components.
With react you can render each 'tool' when the user selects it . You would be able to utilize React component state as well to help in storing data and such for the life-cycle of the component.

What is the best way to edit already-loaded HTML text using JSP?

The only way I know of to change the text on an HTML doc is to use javascript (jQuery). Basically I'm trying to make a really simplified "cart" where I have a page with 5 links on it and whenever you click one of them it will add 1 to the "items in cart" counter on the page without having to reload the entire page.
I have a java class Cart that stores the current number of items in the cart and the names of the items in the cart. I can easily make it so clicking a link/button on the page would add an item to this object, but what I can't figure out how to do is change the items number that is displayed on the page without reloading the entire page.
What is the best way to do this?
invoke a AJAX request (i.e. background javascript) from the web page to the server every 1 min, to get latest information. You can use Jquery to invoke AJAX request.
There should be Jquery sample code available via google to execute AJAX request to get new data, and also samples code to change HTML using the new data.

HTML using jQuery to send a postback?

I am creating a website for a clothing brand but am still getting started with my web dev work. I have an index page with several clothing items on it. When a user hovers over the picture of the item then a hover over effect comes into play and a small "View Item" appears over the item. When the user clicks this "View Item" text it opens a new page with that particular page's info.
The part I am struggling with is how I send the parameter to this item page as I will need some way of knowing what item was clicked. Can I write a jQuery function that will fire when the text is clicked and perform a .post() method to the item.php page passing along the item ID ?
So it would be something like
$.(document).ready( function() {
$("#itemText").click( function() {
$.post("item.php", parameters);
});
})
POST isn't the proper protocol for that. Use GET instead.
GET is vary easy to use with HTML links; it is what happens every time you click a link on a website. Say the page is "products." If the user clicked on product 1, than the URL for that page could potentially be "products/?id=1" (or products/1 if you are using mod_rewrite). The "id" variable with a value of "1" will be available to the PHP via $_GET['id']. With that variable, you can retrieve the proper information based on the id.
POST is for forms where users are submitting fields of data or images. http://html.net/tutorials/php/lesson10.php
If you are attempting to build a pure Javascript solution, then that is an entirely different matter. In that situation you would use Hash tags or HTML5 History API to change the URL. When the URL changes, Javascript is notified, and then whatever actions can occur. However, based on the fact that you specifically said "POST" I am assuming you are using a server-side language like PHP.
If you are opening a new page, you should not POST. If you must POST, you should POST then Redirect, although since you are not actually performing an action I recommend just sticking with a GET request. This way the newly opened page can easily be refreshed and shared by the viewer.
The most elegant way is to use rewrite rules or a router on your server so you can communicate which item to display, for example: http://example.com/item/1/
However you can also just use a GET parameter: http://example.com/item/?id=1
If you need to communicate to Javascript that will be executed on a page you can also use a hash: http://example.com/item/#1
There are several options using GET depending on how you display the item information, and what server-side technology you use.

Categories

Resources