Color Swatches este o functionalitate care permite afisarea optiunilor selectabile de produs, sub forma de color "buttons". Functionalitatea mai permite si schimbarea imaginii de baza a produsului in functie culoarea selectata.

Functia Color Swatches se gestioneaza din panoul de administrare al magazinului, sectiunea Sistem > Configuratie > Catalog > Configurable Swatches.
In tabul Setari Generale avem urmatoarele campuri:

  1. Activat - activarea (Da)  sau dezactivarea (Nu) optiunii.
  2. Product Attributes to Show as Swatches in Product Detail - selectati atributul/atributele pe care le doriti a fi incluse in functionalitatea Swatches, din interiorul paginii de produs.
  3. Product Attribute to Use for Swatches in Product Listing - selectati atributul ce va fi vizibil in pagina de listare produse (pagina de categorie).
  4. Dynamic Price Change for Swatches in Product Listing - selectati Da in cazul in care doriti ca pretul sa se actualizeze in functie de o optiunea aleasa (culoarea) sau Nu in caz contrar, in pagina de listare produse (pagina de categorie).

In tabul Swatch Dimensions on Product Detail Page avem urmatoarele campuri:

  1. Lățime - setati valoarea latimii iconitei in pagina de detalii produs. 
  2. Înălțime - setati valoarea inaltimii iconitei in pagina de detalii produs.

In tabul Swatch Dimensions in Product Listing avem urmatoarele campuri:

  1. Lățime - setati valoarea latimii in pagina de listare a produsului.
  2. Înălțime - setati valoarea inaltimii in pagina de  listare a produsului.

In tabul Swatch Dimensions in Layered Navigation avem urmatoarele campuri:

  1. Lățime - setati valoarea latimii in zona de filtrare a produselor (pagina de categorie).
  2. Înălțime - setati valoarea inaltimii in zona de filtrare a produselor (pagina de categorie).

Dupa efectuarea pasilor de mai sus apasati butonul Salvare Configuratie din partea dreapta sus.

Optiunea poate fi folosita in pagina produsului, in pagina de listare produse si in zona de filtrare a produselor (partea stanga a paginii de listare produse).

Pe pagina de listare produse (pagina de categorie) poate fi afisata precum in exemplul urmator:

Pe pagina produsului configurabil se pot afisa unul sau mai multe atribute cu valorile selectabile (ex. de mai jos)

Label-urile text  (verde, rosu, etc.) din printscreen pot fi inlocuite de culorile efective, daca sunt adaugate in folderul "swatches", conform instructiunilor de mai jos:

  1. Aveti nevoie de imagini tip .png cu denumirea optiunilor (rosu.png, verde.png, etc.), obligatoriu sa contina doar caractere mici (exemplu: rosu, Nu: "Rosu" sau "ROSU"). 
  2. In cazul denumirii culorilor formate din cuvinte multiple, aceste se despart pin caracterul cratima (-) (ex: albastru-deschis.png). Va recomandam ca rezolutia imaginilor sa fie de 70 x 70 pixeli, iar background-ul (fundalul) acestora de culoare alba.
  3. Imaginile trebuie introduse in folderul swatches din galeria Media. Acest folder se acceseaza din sectiunea CMS > Pagini. In aceasta sectiune selectati o pagina (mai putin cea de Home). In interiorul acesteia, din subsectiunea Continut (partea stanga), apasati butonul Show / Hide Editor, iar dupa ceea butonul Insert Image... 
  4. Se va deschide o fereastra noua, iar in partea stanga gasiti fisierul swatches . Daca acest fisier nu exista, va trebui sa il creati prin selectarea folderului Radacina Depozitare, urmat de butonul Creare Director... Va aparea un pop-up in interiorul caruia trebuie sa introduceti denumirea fisierului dorit si anume swatches (obligatoriu sa fie scris cu litere mici).
  5. Dupa crearea fisierului swatches, il accesati si la apasarea butonului Rasfoire Fisiere... se va deschide un director local. Selectati imaginile create la punctul 1 si dupa selectarea acestora apasati butonul Incarcare Fisiere. Dupa incarcarea imaginilor, inchideti fereastra prin apasarea butonului X din partea de sus a ferestrei (dreapta-sus).

Ultimul pas este de a asocia denumirea label-urilor (etichete) culorilor in interiorul produsului configurabil, accesand sectiunea Catalog > Gestionare Produse > Produsul configurabil.
Dupa accesarea produsului configurabil, subsectiunea Imagini, inserati in dreptul fiecarei imagini in campul Eticheta, denumirea culorii exact ca cea din fisierul swatches (ex: gri, galben, rosu,etc).
Dupa inserarea label-urilor corespunzatoare fiecarei imagini, apasati butonul Salvare.

Dupa efectuarile indicatiilor de mai sus, verificati interfata vizuala (magazinul), atat in paginile de listare produse (pagina de categorie) cat si in paginile produselor.


Ai găsit răspunsul căutat?