Password Protected Page - Hide Data
Gday guys,
I have a dedicated wholesale section running on my website, that I have password protected so it is only visible to stockists.
At the moment; the page has a title/description/button that have been set up in our theme editor. Below that, is a space to enter your password. (Pic 1)
Once they enter the correct password; we have the title/description/button still, but then a more in-depth description section - this is the part found in the actual pages section of shopify. (Pic 2)
I would like to hide the title/description/button once they have logged in - as there is no need for them to continue to see the "sign up" request.
I've attached in the code used down below for our page - this is 'sections/wholesale.liquid'.
How do I go about hiding this 'Rich Text' section and only displaying the actual page data?
Thanks in advance
Bel
{% capture contentForQueryString %}{{ content_for_header }}{% endcapture %}
{% assign pageParams = contentForQueryString
| split: '"pageurl":"'
| last
| split: '"'
| first
| split: '.myshopify.com'
| last
| split: '?'
| last
| replace: '\/', '/'
| replace: '%20', ' '
| replace: '\u0026', '&'
| split: '&'
%}
{% for param in pageParams %}
{% if param contains 'password=' %}
{% capture pagePassword %}{{ param | split: '=' | last }}{% endcapture %}
{% endif %}
{% endfor %}
{{ 'section-wholesale.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<div class="page-width page-width--narrow section-{{ section.id }}-padding">
<h1{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
</h1>
<div class="rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{% if page.metafields.custom.password == empty or page.metafields.custom.password == pagePassword %}
{{ page.content }}
{% else %}
<p>
{% if pagePassword %}
{{ section.settings.wrong_password_prompt_text }}
{% else %}
{{ section.settings.password_prompt_text }}
{% endif %}
</p>
<div class="field">
<input type="password" id="password-input" class="field__input" placeholder="Password" autofocus autocomplete="off" onkeypress="if(event.keyCode == 13){ window.location.href = '{{ request.path }}?password=' + this.value; }"/>
<br>
<button type="button" class="button" onclick="window.location.href = '{{ request.path }}?password=' + document.querySelector('#password-input').value;">{{ section.settings.submit_password_text }}</button>
</div>
{% endif %}
</div>
</div>
{% schema %}
{
"name": "t:sections.wholesale.name",
"tag": "section",
"class": "section",
"settings": [
{
"id": "password_prompt_text",
"type": "text",
"label": "Text to tell visitor to input password",
"default": "Please input password to view this page"
},
{
"id": "wrong_password_prompt_text",
"type": "text",
"label": "Text to tell visitor to input a correct password",
"default": "Wrong password, please try again"
},
{
"id": "submit_password_text",
"type": "text",
"label": "Text for the submit password button",
"default": "Submit"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
]
}
{% endschema %}
