Blog

Implementare template culegere date in TinyMCE

Ok, se ia in primire de la dezvoltator un magazin virtual proiectat, programat, încărcat cu câteva articole de probă pentru demonstrarea functionalițătii acestuia. De regulă dezvoltatorul oferă un numar oarecare de ore de asistență când operatorul magazinului este familiarizat cu interfața de backoffice, asimilează procedurile standard de culegere date produse, preluare și expediție comenzi, operare plăți, expediere produse, eventuale returnari și în general tot ce ține de o bună relație cu potențialii clienți.
Se pune problema popularii bazei de date cu produse, configurarea structurii acestora, atribute, caracteristici, actualizarea prețurilor, o etapă pe care mulți din cei care isi doresc un magazin online nu o conștientizează, sau măcar nu îndeajuns.
Dincolo de definiția structurii de produse, a atributelor și caracteristicilor (o etapa esențială și destul de complicată !) se pune problema culegerii datelor. Să avem in vedere că pentru fiecare produs avem nevoie de cel puțin urmatoarele informații:

• denumire
• cod referință unic
• descriere (scurtă, lungă)
• descriere SEO (foarte importantă pentru rankingul in Google al acelei pagini de produs)
• transportator
• cantitate existentă în stoc
• preț
• încadrare corectă în structura de produse
• atribute (daca există)
• caracteristici (daca există)
• accesorii (dacă e cazul)
• disponibilitate
• imagini
• furnizori
• potențiale atațamente (documentații, manuale tehnice, garanții etc)

Să luăm in considerare un magazin mic spre mediu, cu 1000 de produse. In esență in funcție de sursa de informații pentru culegerea datelor se pot imagina 3 scenarii:

1. Datele provin dintr-o bază de date existentă.
   De ex. al unui depozit en-gros și se pot importa via unui fisier CSV sau XML furnizat de angrosist. Dar, pentru că structurile celor două baze de date sunt (de regula) diferite,un program specific de conversie trebuie dezvoltat; de asemenea structurile de directoare și fisiere ce conțin informatiile adiacente (imagini, atasamente) trebuiesc importate separat.
   Este probabil cea mai rapidă metoda de populare a bazei de date, dar presupune un cost care depinde de natura bazelor de date implicate în transfer, numărul de articole transferat, cost care poate varia de la câteva sute de euro, la mii de euro sau chiar mai mult.
   Și oricum după transfer intreaga bază de date trebuie trecută în revistă, articol cu articol pentru verificarea corectitudinii transferului și actualizarea prețurilor.
   Dar oricum este cea mai rapida metodă.

2. Datele sursă sunt în format electronic; fișiere word sau pdf.
   In acest caz pentru fiecare articol parte din informații se pot prelua cu copy-paste, eventualele imagini se pot extrage din fisierele respective, restul de date vor fi culese manual de operator.
   Acesta trebuie să dispună la momentul culegerii de informații
   viabile referitoare la preț, cantități, transportator, descriere SEO (important!), cod referinta unic. Timp mdiu de culegere articol intre 5 ți 15 minute in funcție de complexitatea produsului,
   atribute caracteristici, atasamente, etc)
   Adăugați aici și o posibilă prelucrare/optimizare grafică a imaginilor de produs dacă acestea nu se potrivesc.

3. Documentele provin dintr-o sursa tiparita (catalog, manual de prezentare, fisa tehnica, etc)
   Toate operatile de la pct. 2 plus culegerea manuală a descrierii de produs, plus scanarea și prelucrarea grafică individuală a fiecarei imagini asociate. Incă cel puțin 5-10 minute pentru fiecare produs.
   Este cea mai costisitoare varianta in termeni de timp.
   Acum imulțiți 1000 (sau nr. de produse dorit) cu timpul necesar pentru fiecare produs și găsiți câte ore/culegere date sunt necesare pentru a popula baza de date.
   La un cost de 0.5-1 euro per produs.

Dar sunt câteva modalități de a optimiza acest proces.
De exemplu dacă descrierea produsului este standard ăi deci repetitivă, atunci se poate proiecta un template care să funcționeze ca un holder pentru diverse informații, imagini, tabele, text, sau chiar un video. Cum funcționeaza ?
Descrierea produsului se face intr-un editor HTML integrat in backoffice-ul Prestashop/ThirtyBees, editor de la TinyMCE. Opțiunile acestuia sunt limitate probabil din motive de licențiere
dar pot fi extinse cu puține cunoștințe de programare, pentru a include un apel la acel template (sau template-uri) în meniul sau.

1. Accesați fișierul tinymce.ins.js din directorul /js/admin/ (calea de acces e valabilă pentru Prestashop 1.6.x / ThirtyBees 1.x, dar și pentru Prestashop 1.7 (cred 🙂 ) Pentru orice evantualitate faceti un backup la acest fișier.
2. Identificați obiectul „window.default_config” și modificați-l ca mai jos:

window.default_config = {
    selector: ".rte",
    plugins: "colorpicker link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor anchor directionality template",
    browser_spellcheck: true,
    toolbar1: "template code,|,bold,italic,underline,strikethrough,|,alignleft,aligncenter,alignright,alignfull,rtl,ltr,formatselect,|,blockquote,colorpicker,pasteword,|,bullist,numlist,|,outdent,indent,|,link,unlink,|,anchor,|,media,image",
    toolbar2: "",
    external_filemanager_path: ad + "/filemanager/",
    filemanager_title: "File manager",
    external_plugins: { "filemanager": ad + "/filemanager/plugin.min.js" },
    language: iso,
    skin: "prestashop",
    statusbar: false,
    relative_urls: false,
    convert_urls: false,
    entity_encoding: "raw",
    extended_valid_elements: "em[class|name|id]",
    valid_children: "+*[*]",
    valid_elements: "*[*]",
    menu: {
      edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall' },
      insert: { title: 'Insert', items: 'media image link | pagebreak' },
      view: { title: 'View', items: 'visualaid' },
      format: {
        title: 'Format',
        items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'
      },
      table: { title: 'Table', items: 'inserttable tableprops deletetable | cell row column' },
      tools: { title: 'Tools', items: 'code' }
    },
    templates: [
    {title: 'Item 1', description: 'Desc 1', content: '<h1>My content 11111111</h1>'},
    {title: 'Item 2', description: 'Desc 2', content: '<h1>My content 22222222</h1>'},
    {title: 'Item 3 (din fisier)', description: 'Din fisier', url: '/templates/test.html'}

    ],

  };

Practic proprietatea plugins are valoarea completată cu itemul ‘template’ și de asemenea, apare o nouă proprietate numitîă ‘templates’ cu valorile definite ad-hoc sau adresabile dintr-un fisier, în exemplul de mai sus într-un director /templates/ relativ la root-ul site-ului.
Asta inseamna că dezvoltatorii TinyMCE au prevazut din start această necesitate și au dezvoltat pluginul corespunzator.
In directorul administrator (definit la instalare), se caută în calea themes/default/css/schemes/admin-theme-xxxx.css și in fișierul de stil se adaugă clasa aferentă iconului corespunzator.

.mce-i-template:before{content:""}

3. In root-ul siteului (public_html) se defineste un director ‘templates’ unde vor fi depozitate template-urile dorite.

Pentru diverse situații, categorii, subcategorii sau produse de un anume tip, se pot defini template-uri specifice eligibile în funcție de context. Iconul asociat alegerii de template va fi afișat în meniul principal TinyMCE,
într-o poziție care depinde de ordinea stabilită la proprietetea ‘plugins’ a obiectului window.default_config.
Astfel ori de cate ori este necesară adțugarea unui nou produs și este necesară editarea descrierii, aceasta nu se relua de la zero, ci doar vor fi completate datele predefinite cu valorile necesare.
Cam atât deocamdată, într-un alt articol am să arăt cum versiunea aceasta limitată de TinyMCE poate fi extinsă la versiunea full, cu incă cel puțin atâtea optiuni de căt dispune în prezent.