Drilldown Multi-Level Side Mobile Menu PrestaShop Module

• Ανεβάστε το μέσω της διαδρομής Modules > Προσθήκη νέου module > Επιλογή αρχείου (v.X.X.X-zomlmm.zip) > Ανεβάστε αυτό το module μέσω του PrestaShop Module Manager ή αποσυμπιέστε το αρχείο και ανεβάστε τον φάκελο zomlmm στον ριζικό φάκελο /modules μέσω FTP
• Αναζητήστε το module στην ενότητα Modules πληκτρολογώντας «zomlmm» ή «Drilldown Multi-Level Side Mobile Menu» για να το βρείτε γρήγορα.
• Κάντε κλικ στην επιλογή «Εγκατάσταση» και, στη συνέχεια, διαμορφώστε το

Να το έχετε υπόψη σας! Οι αποδεκτές τιμές χρωμάτων είναι κωδικοί hex. Μπορείτε να αναζητήσετε κωδικούς hex στο διαδίκτυο για να σας βοηθήσουν ή να κάνετε κλικ στο εικονίδιο χρώματος για να επιλέξετε ένα χρώμα

Εδώ θα βρείτε 8 ενότητες, κάθε μία από τις οποίες ρυθμίζει ένα διαφορετικό τμήμα της ενότητας.

Για να ρυθμίσετε την ενότητα, θα πρέπει να μεταβείτε από το μενού διαχείρισης (back office) στην επιλογή «Ενότητες» -> «Διαχείριση ενοτήτων» και να αναζητήσετε την ενότητά μας πληκτρολογώντας «Drilldown» ή «zomlmm» χωρίς τα εισαγωγικά και πατώντας το πλήκτρο Enter, και στη συνέχεια να κάνετε κλικ στο κουμπί «Ρύθμιση».

Σε αυτή την ενότητα μπορείτε να επιλέξετε σε ποιες συσκευές θα εμφανίζεται ή όχι το αναδιπλούμενο μενού του κουμπιού.
Στην εικόνα θα δείτε τα σημεία διακοπής των media queries CSS· αν γνωρίζετε τι είναι αυτά, αν όχι, δεν πειράζει, δεν τα χρειάζεστε ούτως ή άλλως, είναι απλώς πληροφορίες.

Αυτές οι ρυθμίσεις αφορούν αποκλειστικά το κουμπί εναλλαγής ανοίγματος/κλεισίματος του μενού.

1. Απλά κρύψτε ή εμφανίστε την ετικέτα «Μενού» κάτω από το εικονίδιο του μενού «χάμπουργκερ».
2. Αλλάξτε το χρώμα του εικονιδίου του μενού «χάμπουργκερ».
3. Αλλάξτε το μέγεθος του εικονιδίου του μενού «χάμπουργκερ» – συνιστάται το 33. Ανάλογα με το μέγεθος που θα επιλέξετε, θα αλλάξει και το μέγεθος της ετικέτας του μενού!
4. Χρώμα φόντου σε δεκαεξαδικό κώδικα για το σημείο που υποδεικνύει η μπλε γραμμή στην παραπάνω εικόνα.
5. Χρώμα φόντου κατά την κατάσταση «hover», δηλαδή όταν ο δείκτης του χρήστη βρίσκεται πάνω από το εικονίδιο του μενού «hamburger».

Όπως φαίνεται στις εικόνες, κάθε μία από τις επιλογές εμφανίζει τη συγκεκριμένη επιλογή στο πλευρικό μενού όταν αυτό είναι ανοιχτό.

1. Επιλέξτε «Ναι» για να εμφανιστεί το καλάθι (εικονίδιο με το έντομο) ή «Όχι» για να μην εμφανιστεί.
2. Όπως στο 1, «Ναι»/«Όχι» για να εμφανιστεί ή όχι η επιλογή «Σύνδεση/Ο λογαριασμός μου» (εικονίδιο χρήστη). Εάν ο πελάτης είναι συνδεδεμένος και κάνει κλικ σε αυτήν, θα μεταφερθεί στον λογαριασμό του. Εάν ο πελάτης δεν είναι συνδεδεμένος, θα μεταφερθεί στη σελίδα σύνδεσης.
3. Όπως στο 1, «Ναι»/«Όχι» για να εμφανιστεί ή όχι το πεδίο αναζήτησης στο πλευρικό μενού.
4. όπως στο 1, Ναι/Όχι για να εμφανιστεί ή όχι ο επιλογέας νομίσματος, ώστε ο πελάτης να μπορεί να αλλάξει νόμισμα
5. Όπως στο 1, Ναι/Όχι για να εμφανιστεί ή όχι ο επιλογέας γλώσσας, ώστε ο πελάτης να μπορεί να αλλάξει γλώσσα 

Οι θέσεις αυτών των στοιχείων είναι σταθερές όπως φαίνεται και, αν επιλέξετε «Ναι», θα εμφανίζονται όπως φαίνεται στην εικόνα. Ωστόσο, στην εικόνα όλες οι επιλογές είναι ενεργοποιημένες. Αν επιλέξουμε να μην εμφανίζεται ο επιλογέας νομίσματος, το καλάθι δεν θα βρίσκεται τόσο κοντά στο τέλος του πλευρικού μενού, αλλά θα είναι πιο κοντά στο κουμπί κλεισίματος του μενού.

Αυτή η ενότητα αφορά τα χρώματα των εικονιδίων στην κορυφή του μενού, τα οποία επισημαίνονται στην παραπάνω εικόνα. Υπάρχουν 4 επιλογές.
Η πρώτη επιλογή αφορά το χρώμα του εικονιδίου.
Η δεύτερη αφορά το χρώμα του εικονιδίου όταν ο δείκτης του ποντικιού βρίσκεται πάνω του, δηλαδή το χρώμα στο οποίο θα αλλάξει το εικονίδιο.
Η τρίτη επιλογή αφορά το χρώμα φόντου του εικονιδίου.
Η τέταρτη επιλογή είναι παρόμοια με τη δεύτερη, αλλά αφορά το χρώμα φόντου του εικονιδίου όταν ο δείκτης βρίσκεται πάνω του.
Μια καλή επιλογή είναι το χρώμα που χρησιμοποιεί το κατάστημά σας στα κείμενά σας και, για το χρώμα κατά την τοποθέτηση του δείκτη, το κύριο χρώμα του λογότυπού σας. Όσον αφορά το φόντο, μπορείτε να το κρατήσετε απλό με το κύριο χρώμα φόντου που χρησιμοποιεί το κατάστημά σας — συνήθως είναι λευκό ή μαύρο για σκούρα θέματα. Τέλος, να γνωρίζετε ότι αν επιλέξετε το ίδιο χρώμα για το χρώμα του εικονιδίου και το φόντο, θα καταλήξετε με ένα χρωματιστό ορθογώνιο στο οποίο δεν θα εμφανίζεται το εικονίδιο.

Αυτή η ενότητα αφορά τα χρώματα και τη γραμματοσειρά των στοιχείων του μενού, όπως αυτό που επισημάναμε για εσάς στην παραπάνω εικόνα!

Τα στοιχεία 1 και 2 αφορούν τη γραμματοσειρά του στοιχείου μενού. Στο πρώτο μπορείτε να εισαγάγετε τη γραμματοσειρά του μενού σας ή την οικογένεια γραμματοσειρών που προτιμάτε, ή να το αφήσετε στην προεπιλεγμένη τιμή που έχουμε ορίσει για εσάς, η οποία χρησιμοποιεί τις γραμματοσειρές του συστήματος.
Το νούμερο 3 αφορά το μέγεθος της γραμματοσειράς και η μονάδα μέτρησης είναι σε Pixel (px). Μπορείτε να το αλλάξετε όπως θέλετε, η προτεινόμενη τιμή μας είναι 14
Μπορείτε να αφήσετε κενό το νούμερο ένα και στο νούμερο δύο να εισάγετε την τιμή 0, και το μενού θα πάρει τα στυλ του θέματος σας!
Το νούμερο 3 αλλάζει το χρώμα του κειμένου στο στοιχείο του μενού και το νούμερο τέσσερα το χρώμα φόντου του στοιχείου του μενού.
Τώρα, τα 5 και 6 αλλάζουν τα χρώματα όπως τα 3 και 4, αλλά κατά την κατάσταση «hover», με άλλα λόγια όταν ο δρομέας του χρήστη βρίσκεται πάνω από το στοιχείο του μενού.
Μια καλή επιλογή είναι να χρησιμοποιήσετε τα χρώματα του λογότυπού σας εδώ, αλλά προσπαθήστε να διατηρήσετε την απλότητα ώστε να είναι ευανάγνωστο.

Αυτή η ενότητα είναι αρκετά απλή, αλλά πρέπει να αναφερθούν μερικά πράγματα.

Πρώτον, όσον αφορά την επιλογή «Εμφάνιση συνδέσμων κοινωνικών δικτύων», αν επιλέξετε «Όχι», δεν θα εμφανίζονται σύνδεσμοι κοινωνικών δικτύων στο μενού, ενώ αν επιλέξετε «Ναι», οι σύνδεσμοι θα εμφανίζονται, αλλά μόνο εκείνοι που έχουν τιμές.

Για παράδειγμα, αν εισάγετε τον σύνδεσμο της σελίδας σας στο Facebook και όλα τα άλλα πεδία είναι κενά, μόνο το εικονίδιο του Facebook θα εμφανίζεται στο μενού.

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

Σε αυτή την ενότητα μπορείτε να αποκρύψετε το εικονίδιο «burger» ενός υπάρχοντος μενού που διαθέτετε, χωρίς όμως να θέλετε να το απενεργοποιήσετε ή να το απεγκαταστήσετε. Θα πρέπει να προσθέσετε την κλάση (class) ή το αναγνωριστικό (ID) του στοιχείου του μενού, ώστε η ενότητά μας να το αποκρύψει μέσω CSS. Κάντε δεξί κλικ στο μενού που θέλετε να αποκρύψετε και επιλέξτε «Επιθεώρηση», στη συνέχεια αντιγράψτε το ID ή την κλάση CSS και εισάγετέ το στο πεδίο. Προτιμάται το ID, καθώς είναι συνήθως μοναδικό και έτσι δεν μπορεί να προκαλέσει παρεμβολές με άλλα στοιχεία HTML. Μια κλάση CSS που ενδέχεται να εισαγάγετε μπορεί να χρησιμοποιείται από πολλά στοιχεία, οπότε να είστε προσεκτικοί, καθώς με αυτή τη ρύθμιση ενδέχεται να αποκρύψετε και άλλα στοιχεία!

Τώρα φτάνουμε στο ζουμί αυτής της τεκμηρίωσης!

Πώς δημιουργείτε, επεξεργάζεστε και διαγράφετε στοιχεία μενού και τις επιλογές τους. Πρώτα, μεταβείτε από το μενού πλοήγησης του back office στο «Σχεδιασμός» -> «Μενού για κινητά». Εμφανίζονται ένα κουμπί και δύο στήλες.

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

Πάρτε τον χρόνο σας και εξετάστε την παρακάτω εικόνα, η οποία παρουσιάζει διάφορες λειτουργίες

Η αριστερή στήλη δημιουργεί τη δομή των τρεχόντων στοιχείων του μενού σας, όπως υποδεικνύει η παραπάνω εικόνα.

Μπορείτε να σύρετε και να τοποθετήσετε κάθε στοιχείο στην σειρά που επιθυμείτε.

Μπορείτε μάλιστα να το τοποθετήσετε ως υποστοιχείο, αν το βάλετε κάτω από ένα στοιχείο μενού και λίγο πιο δεξιά.

Μπορείτε να επεξεργαστείτε, να διαγράψετε και να απενεργοποιήσετε/ενεργοποιήσετε κάθε στοιχείο χρησιμοποιώντας τα εικονίδια που διαθέτει το κάθε στοιχείο.

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

Το εικονίδιο με το τικ υποδεικνύει ότι το στοιχείο του μενού είναι ενεργό· αν το πατήσετε, θα εμφανιστεί ένα εικονίδιο με το «X» στη θέση του τικ, υποδεικνύοντας ότι το συγκεκριμένο στοιχείο του μενού δεν είναι ενεργό.

Το εικονίδιο του κάδου διαγράφει το στοιχείο του μενού και ανανεώνει τη σελίδα.

Τώρα σχετικά με τη φόρμα

1. Είναι το όνομα του στοιχείου μενού και αυτό το όνομα εμφανίζεται μπροστά. Πρέπει να εισαγάγετε ένα όνομα για κάθε γλώσσα που χρησιμοποιείτε!
2. Εμφανίζει ή όχι το στοιχείο μενού· είναι χρήσιμο αν θέλετε να το διατηρήσετε ανενεργό για μια άλλη μέρα προκειμένου να το ενεργοποιήσετε ή απλά να απενεργοποιήσετε γρήγορα ένα στοιχείο μενού.
3. Μπορείτε να επιλέξετε το γονικό στοιχείο μενού. Εάν δεν επιλέξετε κανένα, το στοιχείο μενού θα εμφανιστεί στο πρώτο επίπεδο του μενού ή μπορείτε να επιλέξετε από τη λίστα που περιέχει όλα τα τρέχοντα στοιχεία μενού που έχετε αποθηκεύσει, για να το τοποθετήσετε ως υποεπιλογή
4. Αυτή είναι η πιο κρίσιμη επιλογή: ποιος τύπος συνδέσμου θα έχει το στοιχείο μενού.
   1. Η διεύθυνση URL της αρχικής σελίδας οδηγεί τον χρήστη στην αρχική σας σελίδα
   2. Η επιλογή «Κατηγορία» εμφανίζει δύο επιπλέον επιλογές όταν την επιλέξετε: η πρώτη είναι να επιλέξετε σε ποια κατηγορία θέλετε να μεταβεί ο χρήστης όταν κάνει κλικ σε αυτό το στοιχείο μενού και η δεύτερη είναι να προσθέσετε όλες τις υποκατηγορίες της ως υποστοιχεία μενού, για να εξοικονομήσετε χρόνο!
5. Μπορείτε να εισαγάγετε ένα όνομα κλάσης για αυτό το στοιχείο μενού αν θέλετε να εφαρμόσετε κάποια εφέ στυλ· αφήστε το κενό αν δεν γνωρίζετε τη λειτουργία μιας κλάσης CSS
6. Το «Εικονίδιο κλάσης» χρησιμεύει για την εισαγωγή ενός εικονιδίου γραμματοσειράς κλάσης, το οποίο θα εμφανίζεται δίπλα στο όνομα του στοιχείου μενού, όπως το Font Awesome (π.χ. fa fa-tag)
7. Μπορείτε να ανεβάσετε μια εικόνα για να εμφανίζεται δίπλα στο στοιχείο μενού. Το μέγιστο επιτρεπόμενο μέγεθος των εικόνων είναι 50px πλάτος και 50px ύψος, ενώ οι αποδεκτοί τύποι αρχείων είναι png, jpg, jpeg και gif
8. Αν επιλέξετε «Ναι», όταν ο χρήστης κάνει κλικ στο στοιχείο του μενού, θα ανοίξει μια νέα καρτέλα αντί να ανακατευθυνθεί
9. Αντικαθιστά το στυλ του χρώματος κειμένου που έχετε εισάγει στη σελίδα διαμόρφωσης της ενότητας, μόνο για αυτό το στοιχείο μενού.
10. Αντικαθιστά το στυλ του χρώματος κειμένου κατά την κατάσταση «hover» που έχετε εισάγει στη σελίδα διαμόρφωσης του module, μόνο για αυτό το στοιχείο μενού.
11. Αντικαθιστά το στυλ του χρώματος φόντου που έχετε εισάγει στη σελίδα διαμόρφωσης του module, μόνο για αυτό το στοιχείο μενού.
12. Αντικαθιστά το στυλ του χρώματος φόντου κατά την κατάσταση hover που έχετε εισάγει στη σελίδα διαμόρφωσης της ενότητας, μόνο για αυτό το στοιχείο μενού.
13. Αντικαθιστά την οικογένεια γραμματοσειρών που έχετε ορίσει στη σελίδα διαμόρφωσης της ενότητας, μόνο για αυτό το στοιχείο μενού.
14. Αντικαθιστά το μέγεθος κειμένου που έχετε ορίσει στη σελίδα διαμόρφωσης της ενότητας, μόνο για αυτό το στοιχείο μενού.

Για να διαγράψετε μια εικόνα από ένα στοιχείο μενού, κάντε κλικ στο κουμπί επεξεργασίας του στοιχείου μενού. Στη φόρμα θα εμφανιστεί η εικόνα και κάτω από αυτήν θα βρείτε ένα εικονίδιο κάδου απορριμμάτων. Κάντε κλικ στο εικονίδιο αυτό για να διαγράψετε την εικόνα!

Αυτό είναι σημαντικό, καθώς θα σας βοηθήσει να τοποθετήσετε το κουμπί εναλλαγής μενού όπου θέλετε.

Ας δούμε πρώτα τα hooks εμφάνισης που χρησιμοποιεί η ενότητά μας και μερικές λέξεις για αυτά!

• displayAfterBodyOpeningTag (κρίσιμο hook, μην το αφαιρέσετε! καθώς είναι υπεύθυνο για τη δημιουργία του πλευρικού μενού)
• actionFrontControllerSetMedia (ζωτικής σημασίας hook, μην το αφαιρέσετε! Φορτώνει τα αρχεία JS και CSS που χρειάζεται το module για να λειτουργήσει και να διαμορφωθεί)
• displayTop (αυτό το hook το επιλέξαμε εμείς, καθώς είναι ένα καλό hook για την εμφάνιση του κουμπιού εναλλαγής του μενού «hamburger» για το προεπιλεγμένο θέμα του PrestaShop!)
• displayMultiLevelMenuNavBar (το δικό μας προσαρμοσμένο hook· αν έχετε τις γνώσεις, μπορείτε να το τοποθετήσετε όπου θέλετε· περισσότερες πληροφορίες για αυτό παρακάτω)

Το module μας χρησιμοποιεί τη διεπαφή widget του PrestaShop, οπότε μπορείτε να επιλέξετε οποιοδήποτε hook εμφάνισης θέλετε και η γραμμή μενού «hamburger» θα εμφανίζεται εκεί.

Το μόνο hook εμφάνισης που δεν θα εμφανίσει το κουμπί εναλλαγής είναι το displayAfterBodyOpeningTag, και αυτό επειδή είναι υπεύθυνο για το πλευρικό μενού.

Πλοηγηθείτε από το back office στο Design -> Positions και κάντε κλικ στην επάνω δεξιά γωνία στο κουμπί «Μεταφορά ενότητας»

Στη φόρμα, επιλέξτε πρώτα το module μας και, στη συνέχεια, στη δεύτερη επιλογή, επιλέξτε το hook στο οποίο θέλετε να εμφανιστεί.

Αποφύγετε τα hooks displayAdmin* και displayBackOffice*, καθώς αυτά προορίζονται για το back office!

Μπορείτε να επιλέξετε οποιαδήποτε επιλογή εμφάνισης επιθυμείτε· θα παραθέσουμε μερικές από αυτές που συνήθως είναι αυτές που θέλετε.

• displayTop
• displayNav
• displayNav1
• displayNav2
• displayNavFullWidth
• displayTopColumn

Τέλος, το module μας δημιουργεί ένα προσαρμοσμένο module για να το χρησιμοποιήσετε αν έχετε τις απαραίτητες γνώσεις.
Μπορείτε να χρησιμοποιήσετε τον παρακάτω κώδικα σε ένα αρχείο tpl και να το τοποθετήσετε όπου θέλετε!

{hook h=’displayMultiLevelMenuNavBar’}

Σημαντικά αρχεία προτύπων που ίσως χρειαστεί να προσαρμόσετε για το θέμα σας, αν διαθέτετε τις απαραίτητες γνώσεις σε HTML, Smarty και Bootstrap.

Προσέξτε ότι οι αλλαγές σε αυτά τα αρχεία μπορεί να οδηγήσουν σε δυσλειτουργία της ενότητας. (Αν συμβεί αυτό, σας συνιστούμε να απεγκαταστήσετε και να διαγράψετε την ενότητα και να την εγκαταστήσετε ξανά από την αρχή).

1. root folder/modules/zomlmm/views/templates/hook/widget.tpl
2. root folder/modules/zomlmm/views/templates/hook/styles.tpl
3. root folder/modules/zomlmm/views/templates/front/menu.tpl

1. Το widget.tpl είναι το αρχείο που είναι υπεύθυνο για το κουμπί εναλλαγής του μενού. Μπορείτε να κάνετε αλλαγές εκεί, αλλά μην αλλάξετε τον κώδικα μεταξύ των ετικετών του κουμπιού
2. Το styles.tpl είναι το αρχείο προτύπου που είναι υπεύθυνο για τη δημιουργία του αρχείου CSS του module μας. Όταν αποθηκεύετε ρυθμίσεις ή επεξεργάζεστε/δημιουργείτε ένα στοιχείο μενού, το αρχείο CSS δημιουργείται με βάση αυτό το αρχείο
3. Το menu.tpl είναι το σημείο όπου συμβαίνει η «μαγεία», καθώς είναι υπεύθυνο για ολόκληρο το πλευρικό μενού.

Σας συνιστούμε ανεπιφύλακτα να μην τροποποιείτε αυτά τα αρχεία, εκτός αν γνωρίζετε ακριβώς τι κάνετε.

Λάβετε υπόψη ότι, εφόσον διαθέτετε ενεργή υποστήριξη, μπορούμε να σας βοηθήσουμε· γι’ αυτό, είναι σκόπιμο να μας συμβουλευτείτε πρώτα, ανοίγοντας ένα ticket!

Η μετάφραση της ενότητάς μας είναι εύκολη. Μεταβείτε από το μενού του back office (περιοχή διαχείρισης) στην επιλογή «Διεθνές» ->

«Μεταφράσεις» και, στην ενότητα «Τροποποίηση μεταφράσεων», επιλέξτε:

Τύπος μετάφρασης -> Μεταφράσεις εγκατεστημένων ενοτήτων

Επιλέξτε την ενότητά σας -> Drilldown Multi-Level Mobile Menu

Επιλέξτε τη γλώσσα σας -> Τη γλώσσα στην οποία θέλετε να το μεταφράσετε.

Και κάντε κλικ στο «Τροποποίηση».

Τώρα μεταφράστε κάθε πεδίο και κάντε κλικ στο κουμπί «Αποθήκευση» ή «Αποθήκευση και παραμονή».

Μη διστάσετε να συνεισφέρετε στο module μας και να βοηθήσετε τα PrestaShop σε όλο τον κόσμο.

Μπορείτε να συνεισφέρετε στο module μας μεταφράζοντάς το και στέλνοντάς μας το μεταφρασμένο αρχείο στη μητρική σας γλώσσα μέσω ενός ticket υποστήριξης!

Τα μεταφρασμένα αρχεία αποθηκεύονται στον ριζικό φάκελο /modules/zomlmm/translations/. Και αν είστε τόσο ευγενικοί, μπορείτε επίσης να συνεισφέρετε μεταφράζοντας αυτή την τεκμηρίωση στη γλώσσα σας!

Τέλος, συνεισφέρετε ενημερώνοντάς μας για τα ελαττώματα του module μας ή τις προτάσεις που έχετε, ώστε να το βελτιώσουμε!

Μη διστάσετε να δημιουργήσετε ένα ticket για οποιοδήποτε πρόβλημα αντιμετωπίζετε ή για να συνεισφέρετε στο addons.prestashop.com (μην ξεχάσετε να συνδεθείτε πρώτα με τον λογαριασμό που χρησιμοποιήσατε για την αγορά του module)

Καλές πωλήσεις! <3