Kako zaštititi pojedinačnu stranicu lozinkom u Shopifyju — jednostavan vodič bez aplikacija

Shopify po defaultu dopušta postavljanje lozinke samo za cijelu trgovinu, ali ponekad želite sakriti samo jednu stranicu – primjerice stranicu s materijalima za partnere, ili ekskluzivnim sadržajem.

Možete to napraviti koristeći aplikacije treće strane, kao npr Locksmith, ali naravno i putem koda.

Evo kako to možete napraviti pomoću Liquida i Javascripta.

Napomena o sigurnosti

Ova metoda skriva sadržaj od posjetitelja, ali nije prava zaštita podataka – budući da se provjera odvija u pregledniku.

Ako želite stvarnu zaštitu osjetljivih podataka ili B2B sekcije, preporučuje se korištenje aplikacija poput Locksmith ili EasyLockdown, koje kontroliraju pristup na serverskoj strani, ili kompleksnijeg custom rješenja.

Ali ako želite sakriti veleprodajne kataloge i slično, ovo je brzo rješenje koje će korektno odraditi posao.

Kreirajte novu stranicu u Shopifyju

• U Shopify Adminu idite na Online Store → Pages → Add page
• Nazovite ju, primjerice, Promo sadržaj za partnere
• Unesite sadržaj koji želite zaštititi (tekst, slike, linkove…)
• Spremite stranicu

Kreirajte novi predložak (template)

Otvorite Online Store → Themes → Edit code

U mapi /templates dodajte novu datoteku i nazovite ju:

page.partner-protected.json

Dodajte kod:

{
"sections": {
"main": {
"type": "partner-protected"
}
},
"order": ["main"]
}

Nemojte još spremiti. Prvo moramo dodati i novu sekciju.

U mapi /sections napravite novu datoteku:

partner-protected.liquid

Dodajte kod:

{% assign password = "MojPass123" %}

<section id="protected-content" class="page-width">
  <div id="password-form">
    <h2>Ova je stranica zaštićena lozinkom</h2>
    <input type="password" id="page-password" placeholder="Upiši lozinku">
    <button id="submit-password">Potvrdi</button>
    <p id="error-message" style="color:red; display:none;">Netočna lozinka</p>
  </div>

  <div id="page-content" style="display:none;">
    <h1>{{ page.title }}</h1>
    <div class="rte">
      {{ page.content }}
    </div>
  </div>
</section>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const PASSWORD = {{ password | json }};
    const form = document.getElementById('password-form');
    const content = document.getElementById('page-content');
    const input = document.getElementById('page-password');
    const button = document.getElementById('submit-password');
    const error = document.getElementById('error-message');

    function unlock() {
      form.style.display = 'none';
      content.style.display = 'block';
      localStorage.setItem('partnerAccess', 'granted');
    }

    // Provjeri je li već otključano
    if (localStorage.getItem('partnerAccess') === 'granted') {
      unlock();
    }

    button.addEventListener('click', function() {
      if (input.value === PASSWORD) {
        unlock();
      } else {
        error.style.display = 'block';
      }
    });
  });
</script>

Spremite ovo i prijašnji file. Kad korisnik unese točnu lozinku (možete ju promijeniti u prvom redu koda, trenutno je MojPass123), prikazuje se sadržaj iz Shopify admina ({{ page.content }}), a pristup ostaje zapamćen u pregledniku pomoću LocalStorage.

Povežite predložak sa stranicom

• Vratite se u Online Store → Pages
• Otvorite stranicu Partner Resources
• U desnom izborniku pod Theme template odaberite partner-protected
• Kliknite Save