Liquid, JavaScript, themes, sales channels
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?
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.
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?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024