Streaming live at 10am (PST)

Personal unique url generated on top of CMS items possible?


#1

Hey

We are building a film festival site, and our client would like to keep it in Webflow (yay!) - But they also require a function, where user can “star” movies they browse, and then go to see a personal list while in the session. Idea is to generate some sort of unique url, that the user could then copy paste and bring along to their mobile devices or simply share. So no logins or personal data kept. Simple a custom filter for a CMS collection of movie data.

Any ideas, as how to do this with webflow and some custom code?

TIA.
/Jesper


#2

This is going to be tought to o with WF even with some custom code. Building a list of items without user profile is possible, technically, using a cookie, but many problems arise.

Each time a star is clicked, the page looks for a cookie. No cookie = create a page and add the link, cookie = add the link to existing page.

Custom code won’t be able to create a page in the Webflow site, that’s for sure.

Now you shouldn’t abandon the idea because I can see that working using an external little site that will take care of the page lists creation and hosting. The star system would be plugged in the webflow site.

Any good coder should be able to design such a system but it’s not just a bit of custom code in WF. Totally possible but requires a little budget.

If the goal is for the user to “get a list” that he can use or share, I wonder if there are other ideas not using a dedicated page. After all, everything happens during 1 session of the user, as there is no profile…

@bart how would you approach this challenge?


#3

Hi Vincent
Thank you for your reply!
Some of the same thought we have had here.

We do have budget (not huge, but there) for this, so any developer fresh for the task, lets talk :smiley:

We could look at it, as a shopping cart maybe. So an external site somehow collects the URL’s of the pages that the user “adds to basket” and then we could have some kind of slide in from an external site. That you could then “check out” which equals sending yourself an email with the list.

But I cant get my head around what data lies where…and happens when the user needs to reopen the list or edit. The client already has a lot of data in a system called Eventival, but for the site we will probably import the data once, and then maintain it in the system.

Deal is to keep everything simple, but they would love ability to create a personal program.


#4

Hi @Fagerlund,

probably not the best option performance-wise, depending on the number of films in the database. But why not just create a single page containing a full list of all CMS collection items that are initially hidden – and then display the ones that have been starred?

Instead of the cookie, you could append IDs for each starred film to a URL parameter that gets passed along the site (“sticky parameters”) and gets read on the page displaying “your personal film list”. That URL can then be used again and again to get the same “individual” list.


#5

Here’s a little node module I’ve rewritten from a PHP/JS Typo3-plugin for a Webflow Project:
https://pastebin.com/60Ei568K

You would initialise this using

var StickyParameters = require("./StickyParameters");

module.exports = new StickyParameters(
    /**
     * List of allowed parameters. Can be a comma-separated string or a plain array.
     * @type String | Array
     */
    ["parameter1", "parameter2", ..., "starred"],
    /**
     * List of allowed domains. Domains not listed here will not have parameters passed.
     * @type String | Array
     */
    [
        "myfilmfestival.com",
        "myexternalsite.com/that-tracks-the-users-film-selection",
        ...
        "tickets.myfilmfestival.com"
    ],
    /**
     * Pass parameters internally (within the current domain if whitelisted)
     * @type boolean
     * @default false
     */
    true,
    /**
     * Pass parameters externally (to other domains if whitelisted)
     * @type boolean
     * @default false
     */
    true,
    /**
     * Don't make internal links local by removing the base URL from the processed href
     * (which is the default behaviour, pass "true" to deactivate)
     * @type boolean
     * @default false
     */
    true
);

Transpiling the above using e.g. Browserify (oder Webkit, or another transpiler of your choice) and integrating the resulting script in your Webflow project will automatically append the keys and values of the whitelisted parameters to all whitelisted URLs on the current page, thus effectively passing these parameters on throughout your page.

Now you merely have to trigger appending ids when the star icon is clicked and reading the URL parameters (via window.location.search for instance) on the list page.


#6

Just a note for you all to try a different perspective :wink:

Know the number of movies

Is it always the same total number of movies? Let’s say it will be 8 movies (for the sake of simplicity :P)

00000000

Think of that value as a binary representation

So adding a star to movie 1, 3 and 8, would look like this:

10100001

which is a binary representation of a number 161, or A1 in HEX.

You can do that with a simple function

// decimal to binary
parseInt("10100001", 2) // → 161
// decimal to hex (preferrable)
parseInt("10100001", 2).toString(16).toUpperCase() // → A1

Store either the value in localStorage

Use a simple JavaScript function to store a value that represents a list of favorite movies in a local storage of a browser.

localStorage.setItem('favmovies', 'A1')

Retrieve a value from localStorage if needed

If a user clicks to show all starred movies retrieve the value from localStorage

let favMovies = localStorage.getItem('favmovies') // → "A1" or "161"

convert decimal to binary

favMovies.toString(2) // → "10100001"

Loop through the list and show fav movies

Add a for loop that goes through the list and shows fav items

for(let i = 0; i < favMovies.length; i++) {
  if(favMovies[i] === 1) {
    $('#favMoviesList:nth-child(' + i + ')').css('display', 'block')
  }
}

Have a dedicated panel with a list of all movies in a specific order

… that are invisible by default, unless the localStorage is set, then go through the loop.

<div id="favMoviesList">
  <div>Movie #1</div>
  <div>Movie #2</div>
  <!-- ... -->
  <div>Movie #8</div>
</div>

That way every time the show fav movies button is clicked, you can go through the loop to show necessary movies, then slide the Panel from side or something.

Sharing is caring

The reason why I insisted on using the HEX value at the top, is that you can then use it as a share link. Give user the ability to copy a link and share it with someone. A person going to that link that would look like

domain.com/page?fav=A1

will allow you to have a code that takes the parameter from URL and runs a for loop function to show the list the same way as in panel

const url_string = window.location.href // domain.com/page?fav=A1
var url = new URL(url_string);
var getParam = url.searchParams.get("fav");
console.log(getParam) // → A1

This is to guide you through, not to give a solution.

This was fun :stuck_out_tongue: Good old times :smiley: #javascriptninja

Cheers,
Bart


#7

I love the Hex representation, although for a large list of films with a small number of “bookmarks” the binary-represented integers will look messy, and for a changing or more dynamic list of films it will fail.

The downside of using local storage is that it will fail when the “get sharing link” button is not used, for instance when the URL is copied manually, or for bookmarks that are accessed cross-browser / synchronized, or for private bookmarks set in a private/incognito window/tab – which is why I suggested sticky parameters. This is where a combination of the two methods might come in handy: keeping the HEX value as a parameter and passing it around seems a prettier option than a raw list of ids.

The downside of not using IDs or aliases but a sort of “table” in binary respresentation is that the list must then be static (as you point out in saying “Know the number of movies”). It has to have a static number of entries that have to remain in the exact same order throughout. A late confirmation to the festvial that you may want to prominently showcase on top of the full list will cause you problems.


#8

Larger items would have larger HEX respectively:

const a = "100001111100111101010110100100101110010100010101001010101001010"
// a.length is 63 here
parseInt(a, 2).toString(16).toUpperCase() // → "43E7AB49728A9400"

But true on the dynamic approach. There could be a hack of adding a unique value to the Collection Item, and an Embed (custom code) in dynamic list with just a div and dynamically-given ID there. Tracking each item (even dynamically) would be easier that way.

Exactly why the last section exists in my reply. Sharing is caring :slight_smile: On window.load() you could check the url param. If it exists you could go through the loop and make a list load with only necessary items. Even bookmarked value would result in the code showing only the values from the list respectively based on the HEX value representing the binary value representing the state of a movie (fav - 1, or not - 0).

Yes, but as I stated in this reply, working through the dynamic list with a hacky-field that would represent a uniqueID would solve the problem.

Anyway, I’m happy this is an ongoing discussion. With the ideas presented here, maybe someone will come up with a nice solution for your problem.

Good luck!
Bart


#9

Bart and DukeDiamond: thank you so much for your replies. I believe I get it, but I have a stereotypical designers brain, and would not be able to solve it, even with this amazing advice. We will look for a JS wizard here or anywhere to help us implement it.

Again: thank you so much for giving this time and thought!