Use ID collected in a localstorage in an article_custom ID

joanlafulla_Almas · 2024-06-14 07:17:13

Hi,
I have a list of movies on my website. I want the user to be able to save any of those movies by saving them in a list. I will save the item IDs in a localstorage.
And on the “My Favorites” page I want to make an article_custom with the IDs extracted from localstorage. But I don’t get it.
This is the code I’m using mixing the textpattern variable with Javascript:

<script>
var mylist = localStorage.getItem("movies"); // With this line I get a list of id in localstorage - ex: (12, 25, 13)
</script>
<txp:variable name="mylist" value="<script>document.write(mylist);</script>" output="1"/> // I can see the IDs in the screen
<txp:article_custom id="<txp:variable name='mylist' value='<script>document.write(mylist);</script>' output='1'/>"> // THIS DOESN'T WORK but not show an error.
 <p>
 <txp:permlink>
 <txp:title />
 </txp:permlink>
 </p>
</txp:article_custom>

EDIT (admin): added bc..{space}{newline}html{newline}… for code formatting

jakob · 2024-06-14 08:39:45

You’re nearly there: you just need to use single quotes for txp tag attributes that should be processed, e.g.:

<script>
var mylist = localStorage.getItem("movies"); // Get a list of id#s in localstorage - ex: (12, 25, 13)
</script>
<txp:variable name="mylist" value="<script>document.write(mylist);</script>" />
<txp:article_custom id='<txp:variable name="mylist" />'>
    <p>
        <txp:permlink><txp:title /></txp:permlink>
    </p>
</txp:article_custom>

Something like that should work

etc · 2024-06-14 09:21:20

Nope, I’m afraid, because the tags are processed server-side, before the script runs on the client side. You literally call

<txp:article_custom id='<script>document.write(mylist);</script>' />

but this id means nothing to the server. To make it work, you’d need a second ajax call, once the ids are retrieved.

joanlafulla_Almas · 2024-06-14 14:03:51

etc wrote #337292:

Nope, I’m afraid, because the tags are processed server-side, before the script runs on the client side. You literally call

<txp:article_custom id='<script>document.write(mylist);</script>' />...

but this id means nothing to the server. To make it work, you’d need a second ajax call, once the ids are retrieved.

Thank you very much. I’m going to investigate the part of a second ajax call.

There is a tag in textpattern: <txp:if_request>
Do you think this could be a way to implement something similar I need?

Last edited by joanlafulla_Almas (2024-06-14 14:12:37)

etc · 2024-06-14 14:23:22

AFAIK, there is no txp tag that makes ajax requests (probably we need one). Meanwhile, the easiest way might be jQuery .load() method.

joanlafulla_Almas · 2024-06-14 15:11:07

Ok. I continues investigating with Ajax call (It’s hard because I never use Ajax before) because I don’t have JQuery in my site.
Thanks a lot.

etc · 2024-06-14 15:44:12

Possibly fetch() can make you start.

jakob · 2024-06-15 07:56:38

etc wrote #337292:

Nope, I’m afraid, because the tags are processed server-side, before the script runs on the client side. You literally call

<txp:article_custom id='<script>document.write(mylist);</script>' />...

but this id means nothing to the server. To make it work, you’d need a second ajax call, once the ids are retrieved.

Apologies, my bad.

So, I guess using cookies (which are retrievable via php) rather than localstorage would work here without js/ajax. It’d wouldn’t be in-the-moment (i.e. show the current page in the visited pages), but it would work from the next page load onwards.

joanlafulla_Almas · 2024-06-15 10:52:04

Hi,
I have tried it with fetch().
I have managed to pass a variable through POST and collect it in a PHP block. But the only thing I have managed to do is paint that variable in a div#result.

What I would like is to take that variable (myVar) that I have collected in PHP ($request_raw = file_get_contents(‘php://input’);) and be able to use it in a textpattern variable.

And then use that variable in the article_custom call. Something similar to:
<txp:article_custom id=”<txp:variable name=“myVar” /> // this “myVar” is the value collected in the POST via PHP.

This is my code:

<txp:php>
if ($_SERVER[‘REQUEST_METHOD’] === ‘POST’) {
$myVar = file_get_contents(‘php://input’);
echo $myVar;
exit;
}
</txp:php>

<div id=“result”></div> // Here I paint the echo “$myVar” from PHP

etc · 2024-06-15 11:02:59

As @jakob says, cookie way might be more straightforward. But if you prefer localStorage, a hidden iframe provides an easy solution. You would need to

create a custom HTML-type form, say favourite:

<txp:if_request type="get" name="favids" value>
	<txp:article_custom id='<txp:page_url type="favids" />' wraptag="p" break>
		<txp:title />
	</txp:article_custom>
</txp:if_request>

and paste this block where you want the favourite articles to appear:

<iframe hidden id="my-frame" name="my-frame" onload="htmz(this)"></iframe>

<script>
  function htmz(frame) {
    frame.replaceWith(...frame.contentDocument.body.childNodes).remove();
  }

  var mylist = localStorage.getItem("movies"), frame=document.getElementById("my-frame");
  if (mylist) frame.setAttribute("src", "index.php?f=favourite&favids="+mylist);
  else frame.remove();
</script>

etc · 2024-06-15 11:10:47

joanlafulla_Almas wrote #337306:

What I would like is to take that variable (myVar) that I have collected in PHP ($request_raw = file_get_contents(‘php://input’);) and be able to use it in a textpattern variable.

And then use that variable in the article_custom call. Something similar to:
<txp:article_custom id=”<txp:variable name=“myVar” /> // this “myVar” is the value collected in the POST via PHP.

If you manage to pass myVar as $_POST['myVar'], you can grab it with

<txp:variable name="myVar" value='<txp:page_url type="myVar" />' />

Textpattern CMS

Textpattern CMS support forum

#1 2024-06-14 07:17:13