Palaikomos platformos#

Jei jūsų internetinė parduotuvė yra sukurta ant tam tikros e-shop platformos, tuomet lengviausias būdas pridėti mūsų įskiepį būtų parsisiunčiant naudojamai platformai skirtą zip failą ir jį įrašyti.

Šiuo metu palaikomos platformos: Prestashop, Woocommerce.

Jeigu nepavyksta įsirašyti įskiepio į internetinę parduotuvę, susisiekite su mumis el. paštu pagalba@unlokk.lt ir mes nemokamai padėsime integruoti Unlokk į jūsų puslapį.

Prestashop 1.7#

Įskiepis bus rodomas pasirinktinai po 'Pridėti į krepšelį' mygtuku arba atsiskaitymo puslapyje po 'Apmokėti' mygtuku. Detalesnę informaciją apie naudojimą rasite įrašyto įskiepio konfiguracijoje.
Parsisiųsti Prestashop įskiepį

Woocommerce#

Įskiepis bus rodomas pasirinktinai po 'Pridėti į krepšelį' mygtuku arba atsiskaitymo puslapyje po 'Apmokėti' mygtuku. Įskiepio nustatymus galite valdyti per Nustatymai → Unlokk įskiepio nustatymai.
Parsisiųsti Woocommerce įskiepį

Bendra informacija#

Šis įskiepis skirtas lengvai ir greitai pridėti pasiskolinimo iš Unlokk galimybę jūsų internetinėje parduotuvėje.

Išorinis JS#

Išorinis JS failas yra būtinas tam, kad įskiepis veiktų tinkamai. Jo viduje yra funkcijos, kurios leidžia įskiepiui atvaizduoti informaciją, prisitaikyti prie ekrano ir apgaubusio komponento (wrapper) pločio.

Failo turinys

debounceUnlokkIframe() - skirta 'resize' event listeneriui, kad leistų firinti callback funkciją tik kas 200ms.

removeSymbolsFromString() - skirta regex pagalba nuimti nenorimus simbolius nuo gautos sumos.

reinitIframe() - pagrindinė funkcija, kuri nustato wrapper komponento aukštį pagal dabartinį ekrano ilgį ir patį wrapper komponentą.

UI#

Įskiepis nuolatos stebi tiek ekrano, tiek wrapper komponento pločius ir pagal tai keičia savo tipą (type) bei būseną (mode).

Tipai yra du: 'horizontal' ir 'vertical'. Jei wrapper komponento ilgis yra mažiau nei 450px, įskiepio tipas pasikeičia į 'vertical', ir atvirkščiai.

Būsenos taip pat yra dvi: 'mobile' ir 'desktop'. Jei prietaiso (device) ekrano ilgis yra mažiau nei 768px, įskiepis pasidaro mobile: dingsta QR kodas ir jo vietą užima mygtukas su nuoroda į aplikaciją (arba, jei nėra instaliuota, į Unlokk puslapį)

Tam, kad įskiepis atrodytų taip, kaip buvo norima, wrapper komponento minimalus ilgis mobile būsenos turi būti 290px, o desktop - 230px.

Jums nieko nereikia daryti tam, kad įskiepis keistųsi tarp vertical ir horizontal ar mobile ir desktop. Tam yra skirtas 'resize' event listeneris ant 'window' elemento, kuris stebi pasikeitimus kas 200ms.

Lūžio taškai (breakpoints)#

Mobile

• Jei ekrano ilgis yra < 768px, komponentas tampa mobile
• Jei wrapper komponento ilgis yra <= 400px, aukštis tampa 170px
• Jei wrapper komponento ilgis yra <= 550px, aukštis tampa 150px
• Kitais atvejais aukštis yra 135px

Desktop

• Jei ekrano ilgis yra >= 768px, komponentas tampa desktop
• Jei wrapper komponento ilgis yra <= 249px, aukštis tampa 300px (vertical)
• Jei wrapper komponento ilgis yra <= 352px, aukštis tampa 280px (vertical)
• Jei wrapper komponento ilgis yra <= 400px, aukštis tampa 270px (vertical)
• Jei wrapper komponento ilgis yra <= 449px, aukštis tampa 250px (vertical)
• Kitais atvejais aukštis yra 115px (horizontal)

Naudojimas#

Įskiepis buvo kuriamas taip, kad jums reikėtų kuo mažiau konfiguruoti. Svarbiausia: pridėti išorini js failą bei po juo pridėti minimalius nustatymus.

Javascript#

Pridėkite išorinį js failą į savo norimą puslapį. Rekomenduojama pačioje failo apačioje, prieš pat </body> tagą bet prieš įskiepio konfiguracinį js failą.

<script src="https://www.unlokk.lt/qr-code/js/qr-code-shipping-v2.js"></script>

Tuomet pridėkite arba išorinį failą, arba inline įskiepio konfiguraciją:

<script>
  const iframeWrapper = document.getElementById("unlokk-iframe-wrapper");
        
  let settings = {
    amount: "1227.21", // Item's price
    currency: "Eur", // Item's currency
    theme: "dark", // Module's theme (light | dark). Default: dark
    borderRadius: 7, // Module's border radius. Default: 7
    months: "24", // Months showed in module. Default: 24
  };
        
  // DO NOT EDIT THIS
  reinitIframe(iframeWrapper, settings);
  window.addEventListener(
    "resize",
    debounceUnlokkIframe(() => {
      reinitIframe(iframeWrapper, settings);
    })
  );
</script>

HTML#

Į norimą HTML puslapį įdėkite mūsų įskiepio iframe su wrapperiu.

<div id="unlokk-iframe-wrapper">
  <iframe
    scrolling="no"
    frameborder="0"
    width="100%"
    height="100%"
    id="unlokk-iframe"
  ></iframe>
</div>

Konfiguracija#

Tam, kad įskiepis atvaizduotų teisingą informaciją, jūs privalote į settings objektą persiųsti 'amount' (sumos) bei 'currency' (valiutos) parametrus. Likę du parametrai ('theme' ir 'borderRadius') yra nebūtini ir jokios įtakos įskiepio veikimui neturės - tai vien stilistika. Viskuo kitu (būsena bei tipu) pasirūpins event listeneris, apie kurį buvo kalbama čia

Jei norite dinamiškai keisti įskiepio rodomą sumą, sukurkite atitinkamą event listenerį ir jo callback funkcijoje atnaujinkite settings objektą bei kvieskite reinitIframe() funkciją su nurodytu iframe wrapperiu bei atnaujintu 'settings' objektu.

Jeigu nežadate dinamiškai keisti įskiepio sumos, tuomet į settings konfiguraciją nurodykite norimą sumą bei valiutą, ir įskiepis veiks tvarkingai. Turėkite omenyje, kad tol, kol nebus iškviesta reinitIframe() funkcija su atnaujintu 'settings' objektu, įskiepis nebus atnaujintas.

Kodo keitimas#

Apart settings objekto keitimo konfiguracijoje, rekomenduojame nieko daugiau nekeisti. Vis dėlto kai ką minimaliai redaguoti galima.

Galima#

Pilnai redaguoti galima settings objekto reikšmes (values). Turėkite omeny, kad 'theme' parametras gali priimti tik 'dark' arba 'light' reikšmes. Visa kita gali būti keičiama taip, kaip norite.

Nerekomenduojama#

Nerekomenduojama keisti įskiepio iframe wrapperio id. Jei pakeisite, turėkite omenyje, kad pagal naują id turėsite jį pasiimti konfiguraciniame JS faile. Taip pat nerekomenduojama keisti settings objekto ir iframeWrapper kintamojo pavadinimų.

Negalima#

Negalima keisti pačio iframe id bei jo parametrų. Taip pat negalima keisti reinitIframe funkcijos pavadinimo, išimti 'resize' event listenerį ar reinitIframe() kvietimą iš konfiguracinio JS failo.
Savaime aišku, jog negalima nepridėti mūsų išorinio JS failo.

Įskiepio pavyzdys#

Čia galite konfiguruoti įskiepį ir pamatyti, kaip jis atrodys jūsų parduotuvėje. Pavyzdyje įskiepis nereaguoja nei į ekrano, nei wrapperio ilgį - viską galite kontroliuoti patys. Wrapper komponento ilgis yra fiksuotas 500px.