Εισαγωγή Settings Editor

Με τα Settings μπορούμε να δώσουμε έξτρα λειτουργίες είτε σε ολόκληρη την ιστοσελίδα ή σε μεμονωμένα της σημεία.

Το πεδίο στο οποίο γράφουμε τα Settings ονομάζεται JSON και είναι το τελευταίο πεδίο στην ενότητα Exclusive στη διαχείριση.

Τα Settings έχουν την μορφή json, δηλαδή είναι μία ακολουθία από αντιστοιχίες κλειδιών και τιμών μέσα σε αγκύλες. Τα κλειδιά και οι τιμές τους θα πρέπει να είναι μέσα σε διπλά αυτάκια.

Το σύστημα για κάθε Setting χρειάζεται να έχει μία τιμή ("value") και να ξέρει σε ποιες σελίδες ("pages") θα πρέπει το εφαρμόσει. Η τιμή που παίρνει το value εξαρτάται από το Setting. Στο pages μπορούμε να βάλουμε την κατάληξη των σελίδων που θέλουμε να έχουν αυτό το setting χωρισμένες με κόμμα ή "global" για να πιάνει σε όλη την ιστοσελίδα.

Η γενική μορφή ενός setting είναι η εξής:

Γράφουμε το όνομα του Setting και μετά μέσα σε αγκύλες του δίνουμε την τιμή ("value") που θέλουμε να έχει και τις σελίδες ("pages") στις οποίες θα πρέπει να τεθεί σε εφαρμογή.

Τέλος, μπορούμε να έχουμε όσα settings θέλουμε. Όλα τα Settings θα πρέπει να είναι μέσα σε αγκύλες και να χωρίζονται με κόμμα.

Παράδειγμα: Σε μία ιστοσελίδα θέλουμε να χρησιμοποιήσουμε το πράσινο χρώμα και να κρύψουμε τα μενού "Φωτογραφίες" και το "Μενού περισσότερα 3". Θα γράψουμε αυτά τα Settings:

Το κάθε Template έχει τα δικά του χρώματα τα οποία μπορούμε να δούμε από το demo του. Για να πούμε στην ιστοσελίδα να χρησιμοποιεί ένα από αυτά τα χρώματα βάζουμε το setting "color". Στο value του βάζουμε το όνομα του χρώματος που θέλουμε να πάρει και στο pages βάζουμε global.

Για να κρύψουμε ένα μενού ή υπομενού χρησιμοποιούμε το Setting "hide". Στο value του βάζουμε "true"  και στο pages βάζουμε την κατάληξη των σελίδων που θέλουμε να κρύψουμε χωρισμένες με κόμμα.

Για να διαγράψουμε ένα μενού ή υπομενού χρησιμοποιούμε το Setting "removeMenu". Στο value του βάζουμε "true"  και στο pages βάζουμε την κατάληξη των σελίδων που θέλουμε να κρύψουμε χωρισμένες με κόμμα.

Υπάρχουν φορές που θέλουμε να κρύψουμε ένα ολόκληρο υπομενού. Αυτό μπορούμε να το κάνουμε με το Setting "hideSubmenus". Στο value του βάζουμε "true" και στο pages βάζουμε την κατάληξη των γονικών σελίδων των οποίων τα υπομενού θέλουμε να κρύψουμε (χωρισμένες με κόμμα). Τα γονικά μενού θα μετατραπούν σα κανονικά μενού.

Αν θέλουμε να αλλάξουμε τη διεύθυνση ενός μενού, τότε χρησιμοποιούμε το Setting "url" ή "urlNewTab" σε περίπτωση που θέλουμε ο σύνδεσμος να ανοιξει σε νέα καρτέλα. Στο value βάσουμε τη νέα διεύθυνση που θέλουμε να έχει το μενού.

Αν θέλουμε να δσουμε έμφαση σε οποιοδήποτε μενού.

Αν θέλουμε να αλλάξουμε το header σε κάποια σελίδα.

Αν θέλουμε να ορίσουμε διαφορετικό header σε διάφορες σελίδες τότε βάζουμε παύλα και έναν αριθμό μετά το όνομα του setting.

Αν θέλουμε να ορίσουμε το ίδιο header σε πολλές σελίδες, τότε βάζουμε όλλες τις σελίδες που θέλουμε στο pages με ",".

Μπορούμε να αντικαταστήσουμε το μενού της σελίδας με ένα δικό μας μενού που το φτιάχνουμε με setting. Το setting ονομάζεται "mainMenu", στο pages βάζουμε "global" και στο "value" το περιεχόμενο του μενού που θέλουμε να έχουμε. To "mainMenu" έχει την εξής μορφή:

Κάθε μενού πρέπει να έχει τίτλο "title" και διεύθυνση "url".

Το "menu-1", "menu-2" κτλ δεν έχει σημασία τι γράφουν αρκεί να είναι λατινικοί χαρακτήρες χωρίς κενά και περίεργα σύμβολα.

Υπομενού:

Το μενού που θέλουμε να έχει υπομενού θα πρέπει να έχει την παράμετρο "dropdown": "true" και να περιέχει το υπομενού του μέσα στην παράμετρο "subMenu". Το ίδιο ισχύει και για τα υπο-υπομενού:

Γλώσσες:

Άν θέλουμε ένα μενού να εμφανίζεται μόνο σε μία ή κάποιες συγκεκριμένες γλώσσες, τότε βάζουμε την παράμετρο "lang" και μέσα τις γλώσσες που θέλουμε να εμαφανίζεται (χωρισμένες με ","):

Άνοιγμα σε νέα καρτέλα:

Settings:

Μπορούμε αν θέλουμε να ορίσουμε settings σε κάθε μενού κατευθείαν μέσα στο "mainMenu" setting. Αυτό το κάνουμε γράφοντας μία νέα παράμετρο "settings":

Τα settings που δέχεται είναι εκείνα που επηρεάζουν το ίδιο το μενού και όχι εκείνα που επηρεάζουν τη σελίδα που οδηγεί. Δηλαδή settings όπως "hide", "removeMenu", "highlight", "iconLeft" είναι αποδεκτά γιατί αυτά τα settings επηρεάζουν άμεσα ένα μενού. Settings όπως "headerBg" δεν είναι αποδεκτά γιατί επηρεάζουν τη σελίδα στην αποία βρίσκονται και όχι το μενού.

Τέλος θα παρατηρήσατε ότι τα settings έχουν πιο απλή μορφή. Δεν χρειάζονται τις παραμέτρους "value" και "pages". Γράφουμε μόνο "όνομα_του_setting": "value_του_setting".

Μπορούμε να βάλουμε εικονίδιο σε κάποιο μενού και να ορίσουμε την θέση του:

Μπορούμε να βάλουμε τιμές σε pixels (px) η ποσοστά (%):

Μπορούμε να βάλουμε ότι στοιχεία επικοινωνίας θέλουμε να εμφανίζεται στη σελίδα:

Μπορούμε να αντικαταστήσουμε τους χάρτες με χάρτες της Google:

Μπορούμε να ορίσουμε την αρχική γλώσσα της σελίδας με το εξής setting:

Τι ακριβώς κάνει και τι να προσέξετε:

Αυτό το setting μπορούμε να το χρησιμοποιήσουμε σε σελίδες που δεν έχουν καμία γλώσσα αλλά και σε σελίδες που έχουν πολλές γλώσσες ενεργοποιημένες. Δεν υπάρχει καμία διαφορά ως προς τη σύνταξη του σε κάθε μία από τις δύο περιπτώσεις. Το ίδιο το setting θα ανιχνεύσει από μόνο του πόσες γλώσσες υπάρχουν και θα κάνει τις ανάλογες κινήσεις. 

Σε περίπτωση που η σελίδα έχει πολλές ενεργοποιημένες γλώσσες τότε το defaultLanguage θα φορτώσει τη σελίδα στη γλώσσα που έχετε δηλώσει στο value του setting όταν το URL της σελίδας δεν έχει την παράμετρο (?l=).

Δηλαδή αν το URL της σελίδας είναι http://www.exclusive-carddeck.4ty.gr τότε θα φορτώσει στη γλώσσα που έχετε ορίσει. Αν το URL της σελίδας είναι http://www.exclusive-carddeck.4ty.gr?l=el τότε η σελίδα θα φορτώσει στη γλώσσα που ορίζει η παράμετρος (?l=) δηλαδή στη συγκεκριμένη περίπτωση, στα ελληνικά.

Αυτό λειτουργεί έτσι γιατί αν η σελίδα φόρτωνε πάντα στη γλώσσα που έχουμε ορίσει ακόμα κι αν το URL έχει την παράμετρο (?l=) δεν θα μπορούσαμε να αλλάξουμε γλώσσες.

Στην περίπτωση που η σελίδα δεν έχει κάποια γλώσσα ενεργοποιημένη τότε το defaultLanguage λειτουργεί διαφορετικά και υπάρχουν κάποια πράγματα που θα πρέπει να προσέξετε:

1. Τα URLs της σελίδας δεν έχουν πλέον την παράμετρο (?l=) οπότε η διεύθυνση από http://www.exclusive-docs.4ty.gr/more3.php?l=el γίνεται http://www.exclusive-docs.4ty.gr/more3.php.
2. Αυτό σημαίνει ότι τα υπόλοιπα settings που θα βάλετε θα πρέπει να έχουν και το ανάλογο URI στο pages. Δηλαδή το "pages": "/more3.php?l=el" πρέπει να γίνει "pages": "/more3.php".
3. Το παραπάνω όμως δεν ισχύει για τα settings που αφορούν άμεσα το ίδιο το menu όπως: url, urlNewTab, hide, highlight, hideSubmenus, removeMenu και τα settings για εικονίδια στο μενού.
4. Τα υπομενού και υπό-υπομενού χρειάζονται την παράμετρο (?id=) η οποία όμως θα βγεί από το setting. Μπορείτε να το βάλετε εσείς στο μενού μέσο του url setting ή να φτιάξετε εσείς το μενού από την αρχή.

Μην σας τρομάζουν τα παραπάνω. Αυτά ισχύουν μόνο στη περίπτωση που θέλετε να έχετε μία σελίδα με μία μόνο γλώσσα που δεν είναι Ελληνικά. Συνήθως αυτό που θα χρειάζεστε είναι ένα πολύγλωσσο site. Εκεί απλά βάζετε τη γλώσσα που θέλετε στο defaultLanguage και δεν χρειάζεται να κάνετε κάτι άλλο.

Για να αντικαταστήσουμε μία γλώσσα με μία άλλη που δεν υπάρχει στο σύστημα χρησιμοποιούμε το setting "replaceLanguage" και στο value βάζουμε την γλώσσα που θέλουμε να αντικαταστήσουμε, κόμμα και την νέα γλώσσα που θέλουμε:

Μπορούμε να προσθέσουμε στατικό banner στη σελίδα με κείμενο, φωτογραφία και link.

Παράμετροι:

"title": Τίτλος banner

"text": Κείμενο

"goTo": Βάζουμε URL αν θέλουμε να μετρέψουμε το banner σε link

"backgroundColor": Χρώμα background

"backgroundImage": Εικόνα background

"color": Χρώμα γραμμάτων

"position": Θέση banner

"innerImage": Εικόνα περιεχομένου

"fullImage": Εικόνα περιεχομένου με απεριόριστο μέγεθος και σχήμα 

"link": {
    "url": "https://google.com",
    "text": "Go to Google",
    "newTab": "true",
    "classes": "btn button"
}: Link περιεχομένου

Setting για την αλλαγή του background color του κεντρικού καμβά στο template tech.

Το πεδίο pages το αφήνουμε ως έχει με την τιμή global

"camvasBg":{
    "value":"color",
    "pages":"global"
  }

Setting για την εισαγωγή κωδικού επαλήθευσης του facebook,όπου value βάζουμε τον κωδικό.

Το πεδίο pages το αφήνουμε ως έχει με την τιμή global

"fb-verification":{
    "value":"fb code",
    "pages":"global"
  }

Setting για την εισαγωγή TikTok social media,όπου value βάζουμε το url.

Το πεδίο pages το αφήνουμε ως έχει με την τιμή global

"tikTok":{
    "value":"url",
    "pages":"global"
  }

Setting για την εισαγωγή Trip Advisor social media,όπου value βάζουμε το url.

Το πεδίο pages το αφήνουμε ως έχει με την τιμή global

"tripAdvisor":{
    "value":"url",
    "pages":"global"
  }

Setting για την εισαγωγή background image σε κάποιο απο τα headers.

Το πεδίο pages το αφήνουμε ως έχει με την τιμή global

"top-header-bg":{
    "value":image url,
    "pages":"global"
  }

"middle-header-bg":{
    "value":image url,
    "pages":"global"
  }

"bottom-header-bg":{
    "value":image url,
    "pages":"global"
  }