Um die Bewerbung Ihres Shopangebots zu erleichtern, bieten wir ihnen die Möglichkeit, einen vorgefertigten, interaktiven Teaser (Produkt-Slider) Ihrer Artikel direkt in Ihre Website einzubauen. Sie können diesen für jede Sprache in der Ihr Shop verfügbar ist erstellen und optional auch auf bestimmte Artikel oder Kategorien einschränken.
Kostenloses Modul. Den interaktiven Teaser bieten wir Ihnen kostenlos zur Bewerbung des Shopangebots. Der Slider ist direkt nutzbar und bedarf keiner Freischaltung.
Integration
Die Integration erfolgt als iFrame, welcher mittels JavaScript in die Website eingefügt wird. In die Integrationsseite muss an gewünschter Stelle ein Container eingefügt werden, in welchem das incert Widget angezeigt wird. Der Inhalt wird durch Einfügen der Shop-Referenz ausgespielt. Der Platzhalter "Kunden-Kuerzel" lässt sich bei service@incert.at erfragen.
Einbindungscode
<link rel="preconnect" href="https://incert-resources.com">
<link rel="preconnect" href="https://KundenURL.myincert.com">
<script
type="module"
src="https://incert-resources.com/frontend/Kunden-Kuerzel/widget-app/main.js"
onload='inctMount("#widget","InctProductTeaserList",{})'>
</script>
<div id="widget" class="inct-widget"></div>
Technische Details
Incert-Frontend-Bootstrap wird als Skript asynchron eingebunden. Sobald die Ressource geladen ist, wird das Incert-Frontend mit der Methode "initIncertFrontend" initialisiert, die als Parameter die Incert-System-URL und die gewünschte App erhält. Anschließend können beliebige Komponenten des incert-Frontends mit der Methode mountIncertFrontendComponent" gerendert werden. Die Parameter hierfür sind die ID des Container-Elements, der Komponentenname und optional eine komponentenspezifische Konfiguration.
Konfiguration
Sprachen
Nicht jedes System ist mehrsprachig vorbereitet. Bei Unklarheit können Sie sich an service@incert.at wenden. Zum Aufrufen einer Sprache wird die Integration um das laden der notwendigen Ressourcen ergänzt - hierfür erweitern wir den Funktionsaufruf:
<link rel="preconnect" href="https://incert-resources.com">
<link rel="preconnect" href="https://KundenURL.myincert.com">
<script
type="module"
src="https://incert-resources.com/frontend/Kunden-Kuerzel/widget-app/main.js"
onload="init()">
</script>
<script>
function init() {
fetch("https://KundenURL.myincert.com/api/environment?language=en", {
credentials: 'include'
}).then(
() => inctMount(
"#widget",
"InctProductTeaserList",
{}
)
);
}
</script>
<div id="widget" class="inct-widget"></div>
Einschränkung auf ausgewählte Kategorien
{content: {ptlContentCategory: {ptlContentCategoryValues:[ID, ID]}}}
Der Inhalt des Widgets kann durch das Hinzufügen von Kategorie-IDs flexibel gestaltet werden. Die Kategorie-ID lässt sich in der Kategorie-/Gutscheinanlage auslesen.
Berücksichtigung der untergeordneten Sub-Kategorien (Rekursion):
{content: {inclSubCats: true}}
Der Inhalt des Widgets kann um jene Inhalte erweitert werden, die sich in den Sub-Kategorien der angegebenen Kategorie befinden.
Einschränkung auf ausgewählte Artikel
{content: {ptlContentProduct: {ptlContentProductValues:[ID, ID]}}}Der Inhalt des Widgets kann durch das Hinzufügen von Artikel-IDs flexibel gestaltet werden. Die Artikel-ID lässt sich in der Kategorie-/Gutscheinanlage auslesen.
Einschränkung auf ausgewählte Artikeltypen
{content: {ptlContentProductType: {ptlContentProductTypeValues:[1,2,6,10,23]}}}
Der Inhalt des Widgets kann durch das Hinzufügen von Kategorie-IDs flexibel gestaltet werden. Die IDs im Beispiel stehen für Gutscheine, Wertkarten und Produkte:
Paket-Gutschein (1), Wert-Gutschein (2), Wertkarte (6), Materielles Produkt (10), Ticket (18), Produkt-Bündel (23).
Beispiel für die Verwendung der genannten Artikeltypen innerhalb ausgewählter Kategorien:
<link rel="preconnect" href="https://incert-resources.com">
<link rel="preconnect" href="https://KundenURL.myincert.com">
<script
type="module"
src="https://incert-resources.com/frontend/Kunden-Kuerzel/widget-app/main.js"
onload="init()">
</script>
<script>
function init() {
fetch("https://KundenURL.myincert.com/api/environment?language=de", {
credentials: 'include'
}).then(
() => inctMount(
"#widget",
"InctProductTeaserList",
{
content:{
ptlContentCategory: {ptlContentCategoryValues:[1] },
ptlContentProductType: {ptlContentProductTypeValues:[1,2,6,10,23]}
}
}
)
);
}
</script>
<div id="widget" class="inct-widget"></div>
Einschränkung auf Sub-Shops
Manche Systeme haben sogenannte Sub-Shops (separat eingebundene Bereiche - bspw. für Tickets separat von den Gutscheinen). Sie können den Slider so konfigurieren, dass nur der Inhalt eines Sub-Shops ausgegeben wird.
{content: {subShopId: ID}}
Mehrfache Einbindung auf einer Seite
Auch das mehrfache Einfügen des Widgets in unterschiedlichen Konfigurationen ist auf einer Seite möglich. Hierfür ist es wichtig, die IDs korrekt zu referenzieren. Die Positionierung der Slider kann somit durch die gewünschte Platzierung der "Div"-Elemente flexibel auf der gesamte Seite vorgenommen werden.
Beispiel für eine mehrfache Integration des Teasers.
<link rel="preconnect" href="https://incert-resources.com">
<link rel="preconnect" href="https://KundenURL.myincert.com">
<script type="module" async onload='init()' src="https://incert-resources.com/frontend/Kunden-Kuerzel/widget-app/main.js"></script>
<script>
function init() {
inctMount(
"#widget-1",
"InctProductTeaserList",
{}
);
inctMount(
"#widget-2",
"InctProductTeaserList",
{content: {
ptlContentCategory: {ptlContentCategoryValues:[3, 9, 7]}
}});
}
</script>
<div id="widget-1" class="inct-widget"></div>
<div id="widget-2" class="inct-widget"></div>
Verwendete Bilder
Die einzelnen Artikel-Elemente werden in einem vordefinierten Standard-Format ausgespielt. Falls die vorhandenen Artikelbilder nicht dem Verhältnis entsprechen, wird ein Teilausschnitt des Artikelbildes verwendet. Sofern beim Gutschein/Ticket kein "Artikelbild 2" hinterlegt ist, wird auf das "Artikelbild 1" und dahingehend die Vorlage zurückgegriffen.
Falls die Bilder verpixelt sein sollten, bitte kurz mit der Bitte um "Aktivierung der Verwendungszwecke für Bilder" bei service@incert.at melden.