Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

joanlafulla_Almas
Member
Registered: 2011-02-25
Posts: 13

Use ID collected in a localstorage in an article_custom ID

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

Offline

#2 2024-06-14 08:39:45

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,628
Website

Re: Use ID collected in a localstorage in an article_custom ID

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


TXP Builders – finely-crafted code, design and txp

Offline

#3 2024-06-14 09:21:20

etc
Developer
Registered: 2010-11-11
Posts: 5,090
Website GitHub

Re: Use ID collected in a localstorage in an article_custom ID

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.

Offline

#4 2024-06-14 14:03:51

joanlafulla_Almas
Member
Registered: 2011-02-25
Posts: 13

Re: Use ID collected in a localstorage in an article_custom ID

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)

Offline

#5 2024-06-14 14:23:22

etc
Developer
Registered: 2010-11-11
Posts: 5,090
Website GitHub

Re: Use ID collected in a localstorage in an article_custom ID

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

Offline

#6 2024-06-14 15:11:07

joanlafulla_Almas
Member
Registered: 2011-02-25
Posts: 13

Re: Use ID collected in a localstorage in an article_custom ID

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.

Offline

#7 2024-06-14 15:44:12

etc
Developer
Registered: 2010-11-11
Posts: 5,090
Website GitHub

Re: Use ID collected in a localstorage in an article_custom ID

Possibly fetch() can make you start.

Offline

#8 2024-06-15 07:56:38

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,628
Website

Re: Use ID collected in a localstorage in an article_custom ID

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.


TXP Builders – finely-crafted code, design and txp

Offline

#9 2024-06-15 10:52:04

joanlafulla_Almas
Member
Registered: 2011-02-25
Posts: 13

Re: Use ID collected in a localstorage in an article_custom ID

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>

<script>
var myVar = “hola mundo”
fetch(document.location.href, { method: “POST”, body: myVar,
}).then(resp => { if(!resp.ok){ const err = new Error(“Error response”); err.resp = resp; throw err; } console.log(“OK”); return resp.text();
}).catch(err =>{ console.error(err);
}).then(body => { document.getElementById(‘result’).innerText = body;
});
</script>

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

Offline

#10 2024-06-15 11:02:59

etc
Developer
Registered: 2010-11-11
Posts: 5,090
Website GitHub

Re: Use ID collected in a localstorage in an article_custom ID

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>

Offline

#11 2024-06-15 11:10:47

etc
Developer
Registered: 2010-11-11
Posts: 5,090
Website GitHub

Re: Use ID collected in a localstorage in an article_custom ID

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" />' />

Offline

Board footer

Powered by FluxBB