Sitecore JSS jest naprawdę potężnym frameworkiem, który przynosi wiele korzyści twoim stronom internetowym. Po kilku dniach zagłębiania się w tę technologię, zakochałem się w podejściu headless, które jest świetne i widzę przed nim świetlaną przyszłość. Kiedy zacząłem się tym bawić, zauważyłem, że tylko dane JSON pochodzą z serwera, a cały HTML budujemy po stronie klienta.
Na tej podstawie postanowiłem postawić przed sobą kilka wyzwań, aby znaleźć sposób, w jaki możemy go wykorzystać do personalizacji w czasie rzeczywistym - oznacza to, że treść zostanie automatycznie zmieniona po spełnieniu podanej reguły, a wszystko to odbędzie się bez przeładowywania strony. Krótko mówiąc - wystarczy pobrać najnowsze dane z API i podmienić je w sklepie. Rzućmy okiem na to, czego się dowiedziałem.
Zacznijmy
W tym artykule użyję JSS z Vue JS w trybie połączonym i oprę swój mechanizm na RouteHandler.vue z JSS offitial github. Ponieważ jestem głównie programistą back-end, proszę wybacz mi wszelkie potencjalne braki w kodzie JS, a jeśli znajdziesz coś do poprawy, daj mi znać.
Monitorowanie zmian
Aby uzyskać informacje o zmianie spersonalizowanej treści, musimy przechowywać zaktualizowane informacje i odświeżać je od czasu do czasu. W tym celu musimy utworzyć worker, który będzie wykonywał wywołania w celu uzyskania aktualnych danych trasy za pomocą sitecore API. Ponadto, aby uniknąć niepotrzebnego odświeżania komponentów, które zawierają jakiekolwiek zmiany, dobrze byłoby sprawdzić, czy stare i nowe wartości obiektów są głęboko równe (Dla wyjaśnienia, == oraz === nie będą tutaj działać, ponieważ porównują instancje obiektów). Do tego celu użyję lodash.isequal.
...
import isEqual from 'lodash.isequal';
import EventBus from '../../Foundation/Events/EventBus';
export default {
name: 'Route-Handler',
data() {
return {
...,
interval: null,
};
},
created(param) {
...
this.enableWorker();
},
beforeDestroy() {
...
this.disableWorker();
},
methods: {
...,
updateComponents() {
getRouteData(this.sitecoreRoutePath, this.language).then((routeData) => {
if (routeData !== null && routeData.sitecore.route) {
// here we're checking if route data returned from api is different than current one
if (!isEqual(this.appState.routeData, routeData.sitecore.route)) {
//in case if it is, we have to change data in actual jss store
this.$jss.store.setSitecoreData(routeData);
}
}
});
},
enableWorker() {
if (!this.context.pageEditing && !this.interval) {
this.interval = setInterval(() => this.updateComponents(), 5000);
}
},
disableWorker() {
if (!this.context.pageEditing && this.interval) {
clearInterval(this.interval);
this.interval = null;
}
},
},
};
Odświeżanie komponentów
Po zaktualizowaniu obiektu danych trasy w magazynie JSS, możemy użyć obserwatorów Vue, aby obsłużyć moment, w którym powinniśmy ponownie wyrenderować nasz komponent. Wyobraźmy sobie, że chciałbym ponownie wyrenderować mój komponent sekcji ze wszystkimi dziećmi w przypadku, gdy jakiekolwiek dane w sekcji lub dzieciach ulegną zmianie. W tym celu musimy obserwować rendering i dokonamy dogłębnego porównania starego i nowego pliku. W przypadku wykrycia zmian, uruchomimy kod odpowiedzialny za ponowne renderowanie Section składnik.
<template>
<section :class="backgroundClass" :id="sectionId" v-if="renderComponent">
<div class="container">
<placeholder name="jss-section" :rendering="rendering" />
</div>
</section>
</template>
import { Placeholder } from "@sitecore-jss/sitecore-jss-vue";
import isEqual from "lodash.isequal";
export default {
data() {
return {
renderComponent: true
};
},
props: {
rendering: {
type: Object
}
},
components: {
Placeholder
},
watch: {
rendering(val, oldVal) {
// here we're checking if route data returned from api is different than current one
if (!isEqual(val, oldVal)) {
this.refresh();
}
}
},
methods: {
// renderers component
refresh() {
this.renderComponent = false;
this.$nextTick(() => {
this.renderComponent = true;
});
}
}
};
Fajną rzeczą w tym rozwiązaniu jest to, że nie renderujemy ponownie całego układu, ale tylko te miejsca, które są obsługiwane przez naszych obserwatorów i tylko te, które zostały zmienione. Oprócz personalizacji w czasie rzeczywistym, wykorzystanie tego rozwiązania może być pomocne w wielu innych sytuacjach, takich jak:
- Dynamicznie zmieniana zawartość/źródło danych bez przeładowywania strony
- Obsługa treści dla zalogowanych/wylogowanych użytkowników
- synchronizacja zawartości strony otwartej w kilku kartach/oknach
Tak to działa w praktyce
Na naszej stronie demonstracyjnej utworzyłem Section gdzie umieściłem pomniejsze komponenty. Dla jednego z nich ustawiłem regułę personalizacji, aby użyć innego źródła danych po osiągnięciu określonego znacznika czasu. Zauważysz, że komponent zostanie zmieniony automatycznie bez przeładowywania strony. Dobrze jest wiedzieć, że tylko komponenty z jednego Section zostały ponownie wyrenderowane, ponieważ tylko tam dane zostały zmienione.
Kilka słów na koniec
To rozwiązanie może być naprawdę pomocne, ale powinniśmy być świadomi, że ruch na serwerze wzrośnie, ponieważ każda aktywna instancja wykona kilka żądań w tle, aby uzyskać aktualne dane. Gdy chcemy użyć tego rozwiązania na stronie produkcyjnej, musimy obserwować statystyki i wybrać odpowiedni czas interwału dla naszego pracownika lub pozbyć się pracownika i utworzyć haki dla niektórych zdarzeń, ale zależy to od sytuacji.
Dziękuję za przeczytanie i mam nadzieję, że się podobało.
Chcesz porozmawiać z naszymi ekspertami o niestandardowych rozwiązaniach programowych?
P: Czym jest Sitecore JSS?
Sitecore JSS to framework, który pozwala programistom budować bezgłowe strony internetowe za pomocą JavaScript. Umożliwia programistom dostęp do danych JSON z serwera i wykorzystanie ich do tworzenia kodu HTML po stronie klienta.
P: Jaka jest główna zaleta korzystania z Sitecore JSS?
Główną zaletą korzystania z Sitecore JSS jest to, że pozwala on na personalizację treści w czasie rzeczywistym, co oznacza, że treść może być zmieniana automatycznie po spełnieniu określonej reguły, a wszystko to bez konieczności przeładowywania strony.
P: Jak Sitecore JSS współpracuje z Vue JS?
Sitecore JSS może być używany z Vue JS w trybie połączonym i wykorzystuje komponent RouteHandler.vue do monitorowania zmian w spersonalizowanej zawartości. Worker jest tworzony w celu okresowego wywoływania Sitecore API, aby uzyskać zaktualizowane dane trasy, a dane komponentu są aktualizowane w magazynie JSS, jeśli dane zwrócone z API różnią się od bieżących danych.
