GreetUser

obsolete: not updated to new architecture

This minimal example asks the customer for their name and greets them.

This example uses component scss & component templates. (For an example that doesn't use component templates, see MyCounter.)

Usage

In any liquid file:

html
<div>
    {% assign name = customer.name | default: 'World' %}
    {! component 'GreetUser', name: name !}
</div>

html
<div>
    {% assign name = customer.name | default: 'World' %}
    {! component 'GreetUser', name: name !}
</div>

Implementation

typescript
// src/components/GreetUser.ts
import {BaseComponent, Component, Prop, Ref} from 'salvo-ts';
@Component()
export class GreetUser extends BaseComponent {
    @Prop({
        default: 'anonymous',
    })
    name!: string;
    @Ref()
    nameInput!: HTMLInputElement;
    @Ref()
    nameSpan: HTMLElement;
    ready() {
        this.render();
        this.nameInput.addEventListener('change', this.handleInputChanged);
    }
    beforeDestroy() {
        this.nameInput.removeEventListener('change', this.handleInputChanged);
    }
    render() {
        this.nameSpan.textContent = this.name;
    }
    handleInputChanged() {
        this.name = this.nameInput.value;
        this.render();
    }
    changeName(name: string) {
        this.name = name;
        this.nameInput.value = name;
        this.render();
    }
}

typescript
// src/components/GreetUser.ts
import {BaseComponent, Component, Prop, Ref} from 'salvo-ts';
@Component()
export class GreetUser extends BaseComponent {
    @Prop({
        default: 'anonymous',
    })
    name!: string;
    @Ref()
    nameInput!: HTMLInputElement;
    @Ref()
    nameSpan: HTMLElement;
    ready() {
        this.render();
        this.nameInput.addEventListener('change', this.handleInputChanged);
    }
    beforeDestroy() {
        this.nameInput.removeEventListener('change', this.handleInputChanged);
    }
    render() {
        this.nameSpan.textContent = this.name;
    }
    handleInputChanged() {
        this.name = this.nameInput.value;
        this.render();
    }
    changeName(name: string) {
        this.name = name;
        this.nameInput.value = name;
        this.render();
    }
}

html
// src/components/GreetUser.liquid
<greet-user 
    name="{{ name|escape }}">
    <div>
        What is your name?
        <br>
        <input 
            data-ref="name-input"
            value="{{ name|escape }}"/>
    </div>
    <div>
        Hello there, 
        <span data-ref="name-span">
            {{ name }}
        </span>
    </div>
</greet-user>

html
// src/components/GreetUser.liquid
<greet-user 
    name="{{ name|escape }}">
    <div>
        What is your name?
        <br>
        <input 
            data-ref="name-input"
            value="{{ name|escape }}"/>
    </div>
    <div>
        Hello there, 
        <span data-ref="name-span">
            {{ name }}
        </span>
    </div>
</greet-user>