Przejdź do głównej zawartości
Zaloguj

Szukaj

Support

Zaawansowana dokumentacja CMS

Dawid Fyda
  • Zaktualizowano

W tym instruktażu omówimy, jak korzystać z dynamicznych zmiennych pochodzących z Data Layer w Vue.js Pokażemy również, jak te zmienne można wykorzystać w kodzie, np. do wyświetlania różnych elementów na stronie w zależności od tego, czy użytkownik jest zalogowany, oraz jak korzystać z danych produktów na stronie karty produktu.

Zmienne dostępne na froncie:

Ogólne zmienne z Data Layer (front):

  • $one.account: Zawiera informacje o koncie użytkownika.

    • isAuthenticated: Sprawdza, czy użytkownik jest zalogowany.
    • user.name, user.email: Zawierają dane użytkownika, jeśli jest zalogowany.
    • manager: Informacje o menedżerze, jeśli użytkownik jest powiązany z kontem menedżera.
    • logout(): Metoda do wylogowania użytkownika.

  • $one.cart: Zawiera dane o koszyku.

    • currentCart: Obecny koszyk użytkownika.
    • totalCartPrice: Całkowita cena koszyka.
    • addToCart(productId, amount, where, cartId): Metoda do dodania produktu do koszyka.

  • $one.wishlist: Zawiera dane o liście życzeń.

    • currentWishlist: Obecna lista życzeń użytkownika.
    • addToWishlist(productId, amount, wishlistId): Dodaje produkt do listy życzeń.

  • $one.config: Zawiera informacje o konfiguracji platformy.

    • isRegistrationEnabled: Czy rejestracja jest włączona.
    • isPlatformOpened: Czy platforma jest otwarta.

  • $one.catalog: Zawiera dane o katalogu produktów.

    • categories: Lista kategorii produktów.

Zmienne na karcie produktu:

Na karcie produktu dostępne są następujące zmienne:

  • id: Identyfikator produktu.
  • name: Nazwa produktu.
  • price: Cena produktu.
  • attributes: Lista atrybutów produktu.
  • manufacturer: Producent produktu.
  • photos: Zdjęcia produktu.
  • seo: Dane SEO produktu.
  • relatedProducts: Powiązane produkty.
  • shippingTime: Czas dostawy.
  • shortDescription: Krótki opis produktu.
  • additionalTechnicalDescription: Dodatkowy opis techniczny.

Przykład dynamicznego HTML na podstawie autoryzacji użytkownika

Poniżej znajduje się przykład kodu, który wyświetla różne elementy na stronie w zależności od tego, czy użytkownik jest zalogowany, czy nie. Wykorzystuje on zmienną $one.account.isAuthenticated do sprawdzenia, czy użytkownik jest zalogowany, a następnie wyświetla odpowiedni baner promocyjny.

Kod:

html
<template v-if='$one.account.isAuthenticated'> <!-- Zalogowany użytkownik --> <div class="right-col"> <figure> <img src="https://static.klient-preprod.one.unity.pl/cms/49294a8ffa464353a1320ce347a9f50d-01b64c7f1de64fc0b4abca7a49354ce0-promobar.jpg" alt="promobar" /> </figure> </div> </template> <template v-else> <!-- Niezalogowany użytkownik --> <div class="right-col"> <a href="/registration"> <figure> <img src="https://static.onecommerce.shop/cms/10b358fb45b449bbaaee1958a302e9bf-baner7.png" alt="promobar" /> </figure> </a> </div> </template>

Wyjaśnienie:

  1. <template v-if='$one.account.isAuthenticated'>: Sprawdzamy, czy użytkownik jest zalogowany przy użyciu zmiennej $one.account.isAuthenticated. Jeśli tak, wyświetlamy baner dla zalogowanych użytkowników.
  2. <template v-else>: Jeśli użytkownik nie jest zalogowany, wyświetlamy alternatywny baner promocyjny oraz link do rejestracji.
  3. v-if i v-else: To standardowe dyrektywy Vue, które pozwalają na warunkowe renderowanie elementów w zależności od stanu danych.

Przykład użycia zmiennych produktu na karcie produktu

Możemy również wykorzystać zmienne dotyczące produktu, takie jak name, price, photos, aby dynamicznie wyświetlać dane na karcie produktu.

Kod:

html
<div class="product-card">
<h1>{{ product.name }}</h1> <p>Cena: {{ product.price }} {{ $one.utils.currency.symbol }}</p> </div>

Wyjaśnienie:

  1. {{ product.name }}: Wyświetla nazwę produktu.
  2. {{ product.price }} {{ $one.utils.currency.symbol }}: Wyświetla cenę produktu wraz z symbolem waluty, który pochodzi z $one.utils.currency.symbol.
  3.  

Zastosowanie zmiennych w praktyce

Dzięki dynamicznemu wyświetlaniu elementów na podstawie zmiennych z Data Layer możesz tworzyć bardziej spersonalizowane doświadczenia dla użytkowników np:

  • Dostosowywanie widoku na podstawie segmentu użytkownika za pomocą $one.account.user.hasSegment().

Podsumowanie

Dynamiczny HTML z Vue.js pozwala na elastyczne i interaktywne tworzenie treści w CMS z wykorzystaniem zmiennych pochodzących z Data Layer. W tym instruktażu pokazaliśmy:

  • Jak sprawdzać, czy użytkownik jest zalogowany, i warunkowo wyświetlać treści.
  • Jak dynamicznie wyświetlać informacje o produkcie na karcie produktu.
  • Jak korzystać z pętli i wyświetlać dane z Data Layer na froncie.

To pozwala na budowanie dynamicznych i spersonalizowanych stron w prosty i czytelny sposób.

Komentarze

Komentarze: 0

Zaloguj się, aby dodać komentarz.