W dzisiejszej erze cyfrowej zakupy online stają się coraz bardziej popularne, a klienci oczekują łatwego porównywania produktów przed dokonaniem zakupu. Stworzenie narzędzia do porównywania produktów może znacznie poprawić doświadczenia użytkownika na Twojej stronie internetowej opartej na Sylius, otwierając nowe możliwości porównywania i wybierania produktów. W tym przewodniku przedstawimy kroki tworzenia własnego narzędzia do porównywania produktów w Sylius.
Krok 1: Dodaj i skonfiguruj atrybuty produktu
- Korzystając z panelu administracyjnego Syliusa, dodaj wymagane atrybuty dla swoich produktów w zakładce Atrybuty.
- Przejdź do strony edycji produktu i znajdź zakładkę „Atrybuty”. Tutaj możesz wybrać utworzone atrybuty i ustawić ich wartości zgodnie z produktem.
Więcej informacji o atrybutach Syliusa znajdziesz tutaj i tutaj.
Przedstawię dwa podejścia do tworzenia porównywarki produktów. Pierwsze z nich będzie polegało na budowaniu tej funkcjonalności od podstaw, podczas gdy w drugim podejściu wykorzystamy popularne rozwiązanie Wishlist, aby rozszerzyć i dodać porównywarkę.
Pierwsze podejście (od podstaw)
Krok 1: Utwórz jednostkę porównującą (Comparer Entity)
Jednostka Comparer reprezentuje rzeczywisty zestaw porównań utworzony przez użytkownika. Ta jednostka będzie przechowywać informacje o porównaniu, takie jak użytkownik, który je utworzył, oraz listę porównywanych produktów.
Comparer.php
<?php
declare(strict_types=1);
namespace App\Entity;
use Sylius\Component\Resource\Model\ResourceInterface;
use Sylius\Component\Resource\Model\ResourceTrait;
use Sylius\Component\Customer\Model\CustomerInterface;
use Doctrine\ORM\Mapping as ORM;
use Doctrine\Common\Collections\ArrayCollection;
use Doctrine\Common\Collections\Collection;
/**
* @ORM\Entity
* @ORM\Table(name="app_comparer")
*/
class Comparer implements ResourceInterface
{
/**
* @ORM\ManyToOne(targetEntity="Sylius\Component\Customer\Model\CustomerInterface")
* @ORM\JoinColumn(name="customer_id", referencedColumnName="id", nullable=true)
*/
protected $customer;
/**
* @ORM\OneToMany(targetEntity="ComparerProduct", mappedBy="comparer", cascade={"persist", "remove"})
*/
protected $comparerProducts;
public function __construct()
{
$this->comparerProducts = new ArrayCollection();
}
public function getComparerAttributes(string $locale, string $defaultLocale, Collection $products): Collection
{
$attributes = new ArrayCollection();
/** @var ProductInterface $product */
foreach ($products as $product) {
foreach ($product->getAttributesByLocale(
$locale,
$defaultLocale
) as $attribute) {
if ($attributes->contains($attribute->getName())) {
continue;
}
$attributes->add($attribute->getName());
}
}
return $attributes;
}
// ... other getters and setters
}
Krok 2: Utwórz jednostkę ComparerProduct
Jednostka ComparerProduct reprezentuje produkt w określonym zestawie porównawczym. Będzie przechowywać informacje o produkcie, takie jak jego atrybuty i wszelkie dodatkowe dane potrzebne do porównania.
ComparerProduct.php
<?php
declare(strict_types=1);
namespace App\Entity;
use Sylius\Component\Core\Model\ProductInterface;
use Sylius\Component\Resource\Model\ResourceInterface;
use Sylius\Component\Resource\Model\ResourceTrait;
use Doctrine\ORM\Mapping as ORM;
/**
* @ORM\Entity
* @ORM\Table(name="app_comparer_product")
*/
class ComparerProduct implements ResourceInterface
{
/**
* @ORM\ManyToOne(targetEntity="Comparer", inversedBy="comparerProducts")
* @ORM\JoinColumn(name="comparer_id", referencedColumnName="id", nullable=false)
*/
protected $comparer;
/**
* @ORM\ManyToOne(targetEntity="Sylius\Component\Core\Model\ProductInterface")
* @ORM\JoinColumn(name="product_id", referencedColumnName="id", nullable=true)
*/
protected $product;
// ... getters/setters
}
Krok 3: Aktualizacja schematu bazy danych
Po utworzeniu encji z adnotacjami Doctrine musisz zaktualizować schemat bazy danych, aby odzwierciedlić zmiany. Uruchom następujące polecenia:
bin/console doctrine:migrations:diff
bin/console doctrine:migrations:migrate
Polecenia te wygenerują i wykonają niezbędne migracje bazy danych.
Krok 4: Logika kodu dodawania produktów do porównywarki i wyświetlania wyników
W tym kroku nie przedstawiamy konkretnego podejścia, ponieważ jest to indywidualna sprawa każdego systemu eCommerce. Dodawanie do porównywarki może być implementowane na liście produktów lub na każdej stronie produktu. Sama porównywarka może istnieć jako osobna strona lub na przykład jako pływający widget.
Drugie podejście – rozszerzamy wtyczkę Sylius Wishlist autorstwa BitBaga
1. SyliusWishlistPlugin
Jeśli używasz naszego SyliusWishlistPlugin, możesz użyć jego klas jako fundamentu i dodać porównywarkę produktów jako dodatkową funkcję. Na przykład możesz wprowadzić nową akcję zbiorczą, aby porównać wybrane produkty.
2. Pobierz atrybuty produktu z jednostki Lista życzeń
public function getProductsAttributes(string $locale, string $defaultLocale, Collection $products): Collection
{
$attributes = new ArrayCollection();
/** @var ProductInterface $product */
foreach ($products as $product) {
foreach ($product->getAttributesByLocale(
$locale,
$defaultLocale
) as $attribute) {
if ($attributes->contains($attribute->getName())) {
continue;
}
$attributes->add($attribute->getName());
}
}
return $attributes;
}
3. Dodaj przykładową logikę do wyświetlania pobranych danych
$products = $wishlist->getProductsByIds($productsIds);
$attributes = $wishlist->getProductsAttributes($request->getLocale(), $request->getDefaultLocale(), $products);
return new Response(
$this->twigEnvironment->render('App/Compare/compare.html.twig', [
'products' => $products,
'attributes' => $attributes,
])
);
4. Przykład porównania produktów
Tworzymy i dostosowujemy wtyczki dla Syliusa
Podsumowanie
Tworzenie narzędzia do porównywania produktów w Syliusie może znacznie poprawić doświadczenia użytkownika na platformie eCommerce. Niezależnie od tego, czy zdecydujesz się na drobiazgowe podejście polegające na tworzeniu go od podstaw, czy wykorzystasz SyliusWishlistPlugin w celu uzyskania dodatkowej funkcjonalności, kluczem jest zrozumienie Twoich konkretnych wymagań.