[tutorial] Color Picker cu butoane multicolore (pt produse multicolore)

[The Ge]

Am fost întrebat prin PM cum se poate face ca butoanele de la Color Picker să aibă şi alte culori decât cele implicite din Prestashop. Există şi alte metode, aceasta este cea pe care am folosit-o eu.

ATENŢIE! Nu daţi vina pe mine dacă aveţi vreo problemă din cauza a ceea ce aţi facut după ce aţi citit acest articol. Sunteţi oameni mari, ştiţi să faceţi backup şi să lucraţi pe o copie de test şi în general vă încadraţi cu succes în societate.

Să continuăm. În Prestashop sunt definite numai culorile Black, Blue, Green, Metal, Orange, Pink, Purple, Red, Yellow.
Culorile se găsesc în tabelul prefix_attribute din baza de date, în a 3a coloană din tabel este codul hexa al culorii.
Se pot adăuga alte culori din Back Office, dar, cel puţin la versiunea 1.2.1.0 butoanele rezultate sunt toate negre (n-am apucat să mă uit la versiunea 1.2.2.0 care a apărut aseară).
Să recapitulăm întâi cum se definesc combinaţiile de culoare - există câţiva paşi în plus faţă de celelalte combinaţii.

I. Trebuie întâi definită culoarea dorită în
1. Back Office >
2. Catalog >
3. Attributes and groups >
4. Add attribute

Culoarea poate avea orice nume şi trebuie definită în grupul Color.

II. Se încarcă imaginile ce vor fi afişate pentru o anumită variantă (de culoare) a produsului

1. Back Office >
2. Catalog >
3. butonul de editare a produsului la care vrei să afişeze Color Picker >
4. tab-ul Images

III. Se definesc combinaţiile dorite, prin cuplarea unei culori cu o imagine a produsului (Pink din grupul de atribute Color cu imaginea unuui iPod roz). Şi anume,
1. se merge la tab-ul Combinations >
2. se alege grupul Color şi culoarea dorită din lista drop-down >
3. se dă clic pe butonul Add >
4. se merge la sfârşitul paginii, se bifează imaginea corespunzătoare culorii alese mai sus >
5. se bifează Default dacă combinaţia curentă va fi şi combinaţia implicită (care se încarcă prima oară)>
6. se dă clic pe butonul Add this combination.

IV. Se activează afişarea Color Picker: în tab-ul Combinations se merge la sfârşitul paginii, se alege Color din lista drop-down şi se dă clic pe butonul OK. Lista drop-down apare numai dupa ce ai definit combinaţii care folosesc atributul Color.

Bun! Acum avem combinaţiile dorite de culoare. Problema este că butoanele Color Picker-ului, dacă nu ai ales o culoare din cele predefinite, sunt negre.

Va urma. :coolsmile:

[The Ge]

Ai două variante aici şi amândouă presupun să îţi notezi ID-urile linkurilor butoanelor, ID-uri aflate cu o sculă precum Firebug (de ex., <a id="color_19" class="color_pick"[...]). Sufixul ID-ului (19 în exemplul nostru) corespunde valorii id_attribute din prima coloană a tabelului prefix_attribute din baza de date.

1. Dacă produselele tale sunt monocolore, pentru ca şi butoanele Color Picker-ului să aibă culoarea dorită, trebuie luat codul hexa al culorii dorite şi introdus în tabelul prefix_attribute din baza de date, coloana a 3a, color.

2. Dacă produsele tale sunt multicolore, au modele colorate ş.a.m.d., trebuie ca în locul pătratelor colorate Prestashop să afişeze thumbnail-uri ale produselor. Pentru aceasta trebuie făcute imagini de 20px x 20px în format jpg, denumite id_attribute.jpg (în exemplul nostru, 19.jpg), şi copiate în directorul co din folderul img din rădăcina magazinului tău.

Puteţi vedea un demo aici.

Sănătate şi virtute.

[Cipo]

Foarte bun tutorialul, foarte clar si explicit... GGEDAMED multumesc mult... este exact ceea ce-mi trebuie