Containers

Root containers

Το βασικό πλαίσιο του storefront αποτελείται από τέσσερα οριζόντια root containers:

• Top Panel
• Header
• Content
• Footer

Τα root containers δεν μπορούν να προστεθούν ή να αφαιρεθούν. Αυτό το βασικό πλαίσιο είναι το ίδιο για όλες τις διατάξεις.

Κάθε root container σχετίζεται με μια συγκεκριμένη περιοχή της σελίδας του storefront—κεφαλίδα, κύρια περιοχή περιεχομένου ή υποσέλιδο. Ωστόσο, τα root containers δεν δημιουργούν τα αντίστοιχα μέρη των σελίδων του storefront. Στην πραγματικότητα, μόνο χωρούν και σχηματίζουν όρια για πολλαπλά μικρότερα containers που ονομάζονται child containers.

Child Containers: Grids και Blocks

Τα child containers (γνωστά και ως grids) επιτρέπουν πιο λεπτομερείς και εκλεπτυσμένες διατάξεις των σελίδων του storefront. Πολλαπλά grids με συγκεκριμένα μεγέθη, θέσεις και στυλ μπορούν να ενσωματωθούν σε ένα root container ή σε άλλα grids. Κάθε grid μπορεί να περιλαμβάνει ένα ή περισσότερα blocks—κουτιά με πληροφορίες συγκεκριμένου τύπου.

Για να προσθέσετε ένα grid:

1. Κάντε κλικ στο εικονίδιο + στο container που θα είναι το γονέα του νέου container και επιλέξτε Add grid.
2. Θα δείτε μια φόρμα. Καθορίστε τις ιδιότητες του νέου container εκεί:
   • Width—ο αριθμός των στηλών που χρησιμοποιούνται στο container. Για child containers, αυτός ο αριθμός δεν μπορεί να υπερβαίνει το μήκος του root container (δείτε Bootstrap Grid System παρακάτω).
   • Content alignment (μόνο για child containers)—η θέση του container μέσα στο root (ή parent) container: Right, Left ή Full Length.
   • Offset—ο αριθμός των μη κατειλημμένων στηλών buffer.
   • User-defined CSS class—μια προσαρμοσμένη CSS κλάση που χρησιμοποιείται από το container.
3. Κάντε κλικ στο Create και ένα grid ή block θα δημιουργηθεί.

Bootstrap Grid System

Το CS-Cart χρησιμοποιεί τη διαισθητική και ισχυρή βιβλιοθήκη Bootstrap που επιτρέπει διατάξεις πλήρους πλάτους, προσαρμοσμένου πλάτους και responsive. Στο CS-Cart η βιβλιοθήκη Bootstrap χωρίζεται σε δύο μέρη—το πλαίσιο Bootstrap και το grid Bootstrap. Ένα storefront παρέχεται μόνο με το Bootstrap grid. Έτσι, είναι αδύνατο να εφαρμόσετε όλα τα μέσα του πλαισίου Bootstrap στο storefront.

Μια διάταξη στο CS-Cart μπορεί να έχει 12 ή 16 στήλες. Στη διάταξη πλήρους πλάτους, το μήκος των στηλών προσαρμόζεται στο πλάτος της σελίδας. Στη διάταξη προσαρμοσμένου πλάτους, το μήκος των στηλών είναι σταθερό και εξαρτάται από το καθορισμένο πλάτος της σελίδας. Μια responsive διάταξη είναι ευέλικτη και προσαρμόζεται εύκολα σε διαφορετικά μεγέθη οθόνης. Είναι πολύ χρήσιμη για την εμφάνιση του περιεχομένου του site σε φορητές συσκευές.

Στο CS-Cart, τα root containers καταλαμβάνουν πάντα το πλήρες μήκος της σελίδας, δηλαδή όλες τις στήλες της διάταξης. Ο αριθμός των στηλών καθορίζεται μέσω των ρυθμίσεων του container. Καθορίζει τις πιθανές διαστάσεις των child containers. Το μήκος τους δεν μπορεί να υπερβαίνει τον αριθμό των στηλών της διάταξης.