Get product details from the previous page - javascript

I want take list of purchased products. Unfortunately there are no product details on my "order-received" page. Can I get product details from the previous page using GTM?
Order-received Page
I have product details on a previous(basket) page:
function printOrderItems() {
var hrefs = document.querySelectorAll("#form_cart > table > tbody > tr > td.product-info > a");
var result = [];
hrefs.forEach(function(t) {
result.push(t.text)
});
return result;
}
previous page

this is being created when a customer chooses to make an order correct? could you not, using a jquery click event, send that information via an ajax and then load your order received page dynamically from a handler?

In case you still need an answer: Use a custom HTML tag to extract the products on the basket page and store the result in sessionStorage. SessionStorage accepts only a string, but you can use JSON.stringify to convert the array of product names into a string.
On the 'order-received' page use a variable of type Custom JavaScript to retrieve the products from sessionStorage. Use JSON.parse to convert the string back to an array. Then you can use this variable in any GTM tags that you want to run on that page.
Note though that sessionStorage is only available within the same subdomain and within the same tab. If that is an issue you could try to use a session cookie to persist the data from one page to the next. However, cookies are limited in size and therefore are not really suitable for persisting a potentially long list of product names.

Related

Firebase range query

Im using AngularFire+Firebase and have data at firebase-database.
Im trying to paginate Data with Smart Table
My problem is that I dont know how to range query without specifying any child i,e fetch records from record # 25 to 35
Below query gives me first 5 records
var queryFIrst = visitRef.startAt().limitToFirst(5);
$scope.Visits = $firebaseArray(queryFIrst);
now Im trying to get records next 5,from 6 to 10 and I tried below
var queryFIrst = visitRef.startAt().limitToFirst(5).endAt().limitToFirst(5);
$scope.Visits = $firebaseArray(queryFIrst);
but it giving error that startAt and endAt can't be used like this with limit
In general pagination is not a good fit for Firebase's realtime data model/API. You're trying to model a SQL SKIP operator, which won't work with the Firebase Database.
But if you want to model pagination in Firebase, you should think of having an "anchor point".
When you've loaded the first page, the last item on that page becomes the anchor point. When you then want to load the next page, you create a query that starts at the anchor point and load n+1 item.
In pseudo-code (it's real JavaScript, I just didn't run it):
var page1 = visitRef.orderByKey().limitToFirst(5);
var anchorKey;
page1.on('child_added', function(snapshot) {
anchorKey = snapshot.key; // this will always be the last child_added we received
});
Now when you want to load the next page of items, you create a new query that starts at the anchor key:
var page2 = visitRef.orderByKey().startAt(anchorKey).limitToFirst(6);
A few things to note here:
You seem to be using an approach from the Firebase 1.x SDK, such as an empty startAt(). While that code may still work, my snippets use the syntax/idiom for the 3.x SDK.
For the second page you'll need to load one extra item, since the anchor item is loaded for both pages.
If you want to be able to paginate back, you'll also need the anchor key at the start of the page.
Is that what you needed that time?
visitRef.orderByKey().startAt("25").endAt("35")
I asked a similar question Get specific range of Firebase Database children

Fetch localStorage values to other page using id

I am storing the values in localStorage and the values are getting stored through input[type:hidden] and input[type:text].
JS:
$('.proceed_btn').on('click', function() {
// Blank to start with
var order = {};
// Loop through all inputs...
$('input[type="text"], input[type="hidden"]').each(function() {
// ...adding their values as properties
order[this.name] = this.value;
});
// Store that object in JSON format
localStorage.setItem("order", JSON.stringify(order));
});
I want to print these value in other page when the user redirects after submitting the form. I am working on ruby currently. There are many products in the website, so the information in the summary page gets rendered according to that. Is there any way to display specific form details in through there id's?
You can create a partial with .js.erb extension eg _order_partial.js.erb and retrieve the order object as thus:
order = JSON.parse(localStorage.getItem("order"));
// Loop through the object and print out
Then you can render the partial in any of the views file you want to use it.

How to pass a variable to a new page and insert it to a textbox?

I am trying to transfer a variable from one page using this code:
Edit
to the page login.html, and insert the variable(asdf in this example) to a textbox in the new page.
I have tried this code:
function NameFunction(name) {
document.getElementById("username").value = name;
}
It is not working. I think it doesn't work because thats another page.
If you want to pass parameters to another page you can put them using query string:
Edit
To get parameter on the login.html page you can use jQuery as it described here: Get escaped URL parameter
you can try using localStorage.
In you're onClick method, save the data you want to store in localStorage
localStorage.setItem(key,value);
When the new page loads, in the onLoad (ready function if using jquery) method get the data from localStorage and set it in the textbox
you can find more about localStorage in the following links
Storing Objects in HTML5 localStorage
http://www.w3schools.com/html/html5_webstorage.asp
and many more are available online

Adding extra variables to a URL

Using JavaScript I managed to add a variable to a page and used $_GET on the new page to use the variable to perform queries. This first implementation worked fine as I was only using one variable. However I need to use two variables now and I'm running into some problems while doing it. If I combine both variables in the first page like shown below, the values are mixed up where my db value goes to my table id.
window.location.assign("test.php?db=&tbl=" + yourDB);
I tried putting both IDs only in my new page and using reload as my DB value would already have been passed. Using
window.location.reload("test.php?db=&tbl=" + yourTbl);
But this doesnt work either.
How can I get the url to have both my DB and table in the correct format? Like
test.php?db=test&tbl=customer
EDIT
yourDB variable is passed from a select form option from a different page which in turn opens the new page where the yourTbl variable exists.I can't therefore call yourDb
window.location = 'test.php?db=' + yourDB + '&tbl=' + yourTbl ;
'OP is asking: yourDB since this variable stores the values of select options from a different page.Any ideas'
My answer is 'Get value from selection menu list in the another page, and save this value into local storage or session storage.'
Something like this,
// save your db
window.sessionStorage.setItem("db", yourDB)
// get your db
var obj = window.sessionStorage.getItem("db");

Saving several ID's to one jQuery cookie and retrieving all values later

I'm building an image gallery on WordPress and I want to add a save to lightbox or save to collection function so that I can collect images with a click of a button and then download all images as a zip later. It sorta like a shopping cart without actually buying the stuff that you want. I want it just to be a per session kind of thing so that you don't need to register to the site.
So on my images page, I put a Save to lightbox button and I want to save the ID of this image to a cookie and then I keep adding images to it until I'm done and will click a view lightbox button that will list all of my collected images.
I know how to set a cookie but I don't know how to append values to it.
function saveLightbox(ID){
$.cookie('the_cookie', ID, { expires: 7 });
document.getElementById("result").innerHTML = $.cookie('the_cookie');
}
Here's fiddle of roughly how I want it to work.
To append values to the jQuery cookie, first of all you have to enable the storage of objects. Then you initialize a variable holding the content of the cookie. If the cookie is empty then initialize an empty array. Next, you push the ID to the array. Finally, you store this array in the cookie.
The following code illustrates what it is said above:
function saveLightbox(ID){
$.cookie.json = true;
var idContainer = ($.cookie('the_cookie')) || [];
idContainer.indexOf(ID) === -1 && idContainer.push(ID);
$.cookie('the_cookie', idContainer, { expires: 7 });
document.getElementById("result").innerHTML = $.cookie('the_cookie');
}
Another thing to consider, is that once an ID is already stored in the cookie you might want to prevent adding it again, that is the reason for line 4. You can find the working example here: jsfiddle.
save an array and push id's to that array:
var ids = $.cookie('the_cookie') || [ ];
function saveLightbox(ID){
$.cookie('the_cookie', ids.push(ID), { expires: 7 });
console.debug(ids);
console.debug($.cookie('the_cookie'));
document.getElementById("result").innerHTML = JSON.stringify($.cookie('the_cookie'));
}
(can't test or demonstrate atm, jsfiddle is not available (for me).)

Categories