Zdjęcie główne Drupal Commerce

Sprzedawaj Co Chcesz Przy Pomocy Drupal Commerce – Konfiguracja Atrybutów Produktów

Atrybuty to cechy charakterystyczne dla danych typów produktów.  Przykładowo, gdy sprzedajesz swoje autorskie koszulki to dzięki atrybutom nie musisz dodawać oddzielnych produktów, gdy chcesz dodać kolejny rozmiar czy kolor koszulki. Tworzysz jeden produkt, dodajesz atrybut rozmiar oraz kolor i tworzysz kolejne wariacje tego samego produktu. Chętnie powiemy, jak w prosty sposób dodać atrybuty do produktów dla kilku wybranych branż. Jesteśmy agencją Drupalową i zajmujemy się tym na co dzień.

Tematy poruszone we wpisie

  • dodawanie produktów i tworzenie ich wariacji
  • dodawanie atrybutów do produktów
  • typowe atrybuty dla sklepu z koszulkami
  • jak dodać atrybut koloru z podlinkowanymi kolorowym elementem
  • dodawanie atrybutu rozmiaru odzieży
  • atrybuty dla sklepu z elektroniką

Dzięki temu klient może łatwo dodać do koszyka interesujący go wariant produktu, bez konieczności przechodzenia na kolejną podstronę z innym produktem.

Drupal commerce

Atrybuty produktów w Drupal Commerce

Wpis jest kontynuacją serii dotyczącej modułu Commerce służącego do rozszerzenia Drupala o platformę e-commerce. Poprzednia część z podstawowej konfiguracji Commerce.

Nowe atrybuty dodajemy do wariacji produktu (product variation). Wariacja produktu jest powiązana referencją z produktem. Dzięki temu tworzymy jeden produkt np. Koszulka z logiem Droptica i od niego dodajemy wariacje, które różnią się atrybutami. Atrybutem może być kolor lub rozmiar koszulki. Każda wariacja może też różnić się ceną.

Zacznij od stworzenia nowego typu produktu - Tshirt
Z menu admina Commerce → Configuration → Products → Product types
 

commerce product types

Dodaj nowy produkt.

→ wpisz label
→ zaznacz, aby produkt mógł mieć wielokrotne wariacje
→ Product variation type – zaznaczając Create new automatycznie stworzy się nowy typ wariacji o takiej samej nazwie jak typ produkty, w tym przypadku tshirt. Możesz też wybrać istniejący już typ wariacji.

commerce product type

Jeżeli ustawiłeś Create new w polu wariacji to po zapisaniu nowego typu produktu, przechodząc na 
Commerce → Configuration → Products → Product variation types zobaczysz nowy typ wariacji

 

commerce variation type

Atrybuty produktu dla sklepu z koszulkami / odzieżą

Dwa typowe atrybuty dla sklepu tego typu to kolor oraz rozmiar.


Kolor.
Standardem w przypadku wyboru koloru jest stworzenie podlinkowanego koloru, gdzie po jego kliknięciu ładuje się odpowiednia wariacja produktu.

commerce color attribute

Drupal Commerce w bardzo prostu sposób pozwala uzyskać taki efekt.

Lista atrybutów i możliwość ich tworzenia znajdują się w Commerce → Product Attributes
 

commerce attributes

 

Dodaj nowy atrybut klikając w przycisk Add product attribute

dodaj jego nazwę - Color,
typ elementu – na teraz ustaw Select list,
oraz wariację produktu, do której ma zostać podpięty – Tshirt,

 

commerce add attribute

Po zapisaniu dodaj wartości kolorów wedle uznania.
 

commerce add colors to attribute

Teraz stwórz nowy produkt typu Tshirt i dodaj do niego kilka wariacji, tak aby zobaczyć jak działają atrybuty.
Dla różnych wariacji ustaw różne ceny, wtedy zobaczysz, że po zmianie atrybutu cena zmieni się automatycznie.

Atrybut koloru znajduje się w formularzu tworzenia wariacji produktu.

commerce add variation

Po przejściu na stronę główną produktu będzie widoczna lista wyboru z kolorem.

commerce color attribute

 

Zmiana listy wyboru na linki z kolorami.

Żeby uzyskać taki efekt, potrzebne jest dodanie nowego modułu - Color Field

Po włączeniu modułu dodaj nowe pole do atrybutu koloru.
Robisz to w taki sam sposób jak do każdej innej encji w Drupalu.

Przejdź do Commerce → Product attributes 
I wybierz link Manage fields

commerce product manage fields

Dodaj nowe pole typu Color

commerce color field

Zapisz ustawienia

commerce color settings

Kolejny krok w konfiguracji to zmiana wyświetlania pola koloru w zakładce do zarządzania wyglądem formularza jak i wyglądem pola w momencie gdy przeglądamy produkt.

Zarządzanie wyglądem formularza.
Ustaw aby oba pola były widoczne. To sprawi, że w momencie edycji atrybutu masz możliwość ustawienia nazwy koloru jak i jego wartości w HEX.

commerce manage fields

Zarządzanie wyświetlaniem.
W tym przypadku zostawimy jedynie wyświetlanie koloru a ukryjemy jego nazwę. W formacie ustaw – Color swatch

Dzięki temu pojawią się kolorowe kwadraty z możliwością wyboru koloru. Klikając w zębatkę ustawień możesz zmienić wielkość tych kwadratów lub zamienić je na owale.

commerce color swatch

Ostatni krok to zmiana ustawień w samym atrybucie.

Przejdź do jego edycji.
Zmień Element type na Rendered attribute oraz w poszczególnych kolorach dodaj wartości hex.

commerce rendered color attribute

Po zapisaniu ustawień na stronie produkty zamiast listy wybory atrybuty będą podlinkowanymi kolorowymi kwadratami.

Atrybuty do sklepu z elektroniką

Jednym z produktów spotykanym w sklepie z elektroniką są laptopy.

Typowe atrybuty dla tego typu produktu to:

  • preinstalowany system operacyjny
  • ilość pamięci RAM
  • wielkość dysku SSD

oraz kilka innych, ale na potrzeby tego wpisu pokażę jak dodać te trzy.

Atrybuty dodaje się analogicznie jak we wcześniejszym przykładzie odnośnie sklepu z koszulkami.

Wynikiem konfiguracji będzie

  • lista wyboru z systemem operacyjnym
  • klikalne ilości pamięci RAM do wyboru
  • przyciski radio z wyborem wielkości dysku SSD
     

commerce sell laptop

Zakładam, że w sklepie jest już dodany typ produktu oraz wariacja produktu – Laptop

Konfiguracja dla atrybutu systemu operacyjnego.
 

commerce os settings

 

Konfiguracja atrybutu pamięci RAM

commerce ram settings

Konfiguracja atrybuty wielkości dysku SSD

commerce ssd settings

Podsumowanie

Jak widzisz atrybuty do produktów w sklepie opartym o Drupal Commerce dodaje się w bardzo łatwy i szybki sposób.
Wprowadzając je, ułatwisz potencjalnym klientom szybsze znalezienie właściwego produktu, a sobie dasz szansę na zwiększenie obrotów.
 

Pobierz nasz darmowy e-book