skip to Main Content

I’m trying to make a collection page password protected in Shopify (liquid).

I’m trying to check if localstorage item "Password" is set with the right value.
If that’s the case include ‘snippet’.

Whats the best approach to do something like this?

This will break the js earlier cuz of the %}:

if (!localStorage.getItem("password")) {
  {% include 'protected-collection-form' %}
} else {
  {% include 'protected-collection' %}
}

2

Answers


  1. You can’t access frontend JS in server-side liquid. Do this instead.

    On the password submission store the password in cart’s attribute using a fetch.

    await fetch('/cart/update.js',{
        method:'post',
        headers: {'Content-Type': 'application/json'},
        body:JSON.stringify({'attributes':{'password':"some password"}})
    }).then(d => location.reload());
    

    and now you can use liquid like this:

    {% if cart.attributes.password == "some password" %}
      {% include 'protected-collection-form' %}
    {% else %}
      {% include 'protected-collection' %}
    {% endif %}
    
    Login or Signup to reply.
  2. Use the customer variable. If customer != nil (nil means the value is null), then user is not authenticated.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search