Javascript

dekiv
Shopify Partner
158 2 12

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?

Replies 2 (2)

OpenThinking
Shopify Partner
321 81 120

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


2. Here's the code

<div id="clickMe">click me</div>
<div id="showMe">Hey show me</div>

<style>
#showMe { display: none; }
.toggleClass { display: block!important; }
</style>

<script>
const elementClicked = document.querySelector("#clickMe");
const elementYouWantToShow = document.querySelector("#showMe");
elementClicked.addEventListener("click", () => { elementYouWantToShow.classList.toggle("toggleClass") });
</script>



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

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
dekiv
Shopify Partner
158 2 12

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?