How can I add personalized features using Javascript?

Technical Q&A
1

Hi guys,

I’m looking at adding some javascript for my website but don’t really know how to code it - any help would be appreciated!’

What I want to do is 2 things:

  1. Have a login type page that recognises the user and then displays their name in the corner (e.g. “Hello, Frank”).

  2. An expand button that would hide the description or something but expand down when user clicks on it.

I’m using debut and link is www.beachbeb.com

What is the best way to code the javascript into this?

2

Hi there,
Jack from OpenThinking here!

  1. The first thing can’t be done with JavaScript you need to use Liquid, and this is the code to achieve that:
{%- if customer -%}Hello, {{ customer.first_name }}{%- endif -%}

Since you’re not using Debut theme I can’t point you the exact file where you need to add this code, but I’ll guess it’s inside sections/header.liquid

  1. Here’s the code
click me

Hey show me

let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

3

Hi Jack,

Thanks for the answer!

I’m trying to do a form as well - just a very simple form for submitting queries by customers. I have the HTML & CSS sorted but need the javascript code to work, I’ve tried doing it but it is not working for me currently. Without using 3rd party apps, whats the best way to create a simple Javascript code?