nucleus vs nopCommerce 3.0

[nucleus]

Ξεκινώ το παρακάτω "project" (ή spam series) μιας και αυτές τις μέρες ασχολούμε με το "customization","extending" ή απλώς "clopyright" ενός δημοφιλούς .ΝΕΤ based (και για την ακρίβεια MVC Model View Controller) Open Source solution για ηλεκτρονικά καταστήματα,του nopCommerce.

Περισσότερες πληροφορίες εδώ.

nopCommerce - free open source shopping cart software ή στο codeplex nopCommerce. Open source shopping cart (ASP.NET MVC) - Home

Εναλλακτικά μπορεί να γίνει εγκατάσταση και μέσω του Microsoft Web Platform Installer.

Αισίως έχει φτάσει στην έκδοση 3.0 και το source code project είναι συμβατό με Visual studio 2012.Προσωπικά χρησιμοποιώ Visual Studio Express 2012 for Web που διατίθεται δωρεάν.

Σημείωση - Disclaimer - Όροι χρήσης:

Τα παρακάτω Posts και ο κώδικας που περιέχεται εντός ανήκουν σε εμένα και μόνο σε εμένα και στην εταιρεία μου Δεκαπέντε Κιλά Κώδικας ΑΒΕΕ.

Σε ελαφρώς πιο σοβαρό τόνο το license για το nopCommerce μπορεί να βρεθεί εδώ http://www.nopcommerce.com/licensev3.aspx

[nucleus]

To παρακάτω post είναι προπαρασκευαστικό και θα προσπαθήσει να εξηγήσει την δομή του nopCommerce solution όπως την κατάλαβα προσωπικά και τα υπο-projects που αυτό περιλαμβάνει.

Το nopCommerce είναι ένα MVC(Model View Controller) web project και σαν βάση δεδομένων μπορεί να χρησιμοποιήσει τόσο SQL Server Compact Edition όσο και την "πλήρης" έκδοση (Express ή μη).Για την διασύνδεση με την βάση του χρησιμοποιεί το Entity Framework με το code first approach.

Περισσότερες πληροφορίες σχετικά με το code first στο google.Απλοικά περιλαμβάνει τον σχεδιασμό πρώτα των οντοτήτων (class) με τα κατάλληλα πεδία τους και τις συσχετίσεις ανάμεσα τους και μετά μέσα από το Entity framework αυτόματα γίνεται αντιστοίχιση αυτών με tables και πεδία στην βάση χρησιμοποιώντας Mappings και DataAnnotations.

Τα βασικά project που μας ενδιαφέρουν είναι τα Nop.Core,Nop.Data από το Libraries και Nop.Admin,Nop.Web από το Presentation.

To Nop.Core αποτελείται κυρίως από interfaces και αbstract οντότητες.Περιέχει επίσης όλες τις Base οντότητες που χρησιμοποιεί το nopCommerce και από τις οποίες κληρονομούν οι περισσότερες οντότητες που χρησιμοποιούνται στα υπόλοιπα projects.

Σημείωση: Ο Φάκελος Nop.Core.Domain περιέχει όλες τις οντότητες μέσα στους κατάλληλους φακέλους για καλύτερη οργάνωση που χρησιμοποιεί το nopCommerce.Όλες κληρονομούν την βασική οντότητα BaseEntity που ορίζεται επίσης μέσα στο Nop.Core

To Nop.Data περιέχει τις αντιστοιχίσεις των οντοτήτων που περιέχονται μέσα στο Nop.Core στο κατάλληλο table στην βάση και απαραίτητες οντότητες για το Entity frameworκ.

Το Nop.Admin περιέχει τα Models,Views και τους Controllers για το Administration τμήμα του site.

To Nop.Web περιέχει τα Models,Views και τους Controllers για το front end τμήμα του site.

Το πρώτο πράγμα που θα υλοποιήσουμε είναι η απλή προσθήκη 2 πεδιών στην σελίδα εγγραφής ενός νέου πελάτη στο shop και οι κατάλληλες επιλογές για αυτα τα 2 πεδία στo Administration τμήμα.

Μείνετε συντονισμένοι έρχετε σύντομα

[nucleus]

Όπως είχαμε αναφέρει και πιο πάνω το πρώτο πράγμα που θα κάνουμε είναι να προστέσουμε 2 πεδία στην εγγραφή νέου χρήστη (Customer) στο nopCommerce.

Βγήκε λίγο μεγάλο αλλά δεν μπορώ να κάνω κάτι (είναι πολλά τα αρχεία ακόμα και για κάτι τόσο "απλό").

Θα ακολουθήσουμε την δομή του source code του nopCommerce όπως φαίνεται στο προηγούμενο post.

1.Libraries

• 1.1.Αλλαγές στο Nop.Core αν απαιτούνται

• 1.2.Αλλαγές στο Nop.Data αν απαιτούνται

• 1.3.Αλλαγές στο Nop.Services αν απαιτούνται

2.Presentation

• 2.1.Αλλαγές στο Nop.Admin αν απαιτούνται

• 2.2.Αλλαγές στο Nop.Web αν απαιτούνται

Tα 2 πεδία υπάρχει δυνατότητα να γίνουν Enabled από τον administrator του store και επίσης μπορεί να γίνει επιλογή αν είναι Required ή όχι.

Στην βάση δεν αποθηκεύονται στον πίνακα Customer αλλά στον πίνακα GenericAttribute.Ας δούμε λίγο πιο λεπτομερώς το παραπάνω

Πίνακας Customers

Πίνακας GenericAttribute

O πίνακας Customers κρατάει τα βασικά στοιχεία ενός Customer.Ο Administrator μπορεί από την διαχείριση να "ενεργοποιήσει" κάποια προκαθορισμένα πεδία σαν επιπλέον πεδία που πρέπει να συμπληρωθούν στην εγγραφή.

Το ποιά από αυτά τα επιπλέον πεδία είναι ενεργοποημένα και αν είναι υποχρεωτικά ή όχι αποθηκεύεται στον παρακάτω πίνακα που αποθηκεύει τα γενικότερα settings του NopCommerce

Πίνακας Settings

Παράδειγμα εγγραφών για τα 2 επιπλεόν πεδία μας

Οι τιμές αυτών των επιπλέον πεδίων (attributes) αποθηκεύονται στον δεύτερο πίνακα ως εξής

EntityId = CustomerId KeyGroup = Customer Key = [όνομα Attribute] Value = [τιμή του Attribute]

[nucleus]

Στο source code του nopCommerce όπως το βλέπουμε στο VS2012,κάνουμε expand τα παρακάτω projects με την σειρά

NopCommerce -> Libraries -> Nop.Core.

Επιλέγουμε το φάκελο Domain expand και μετά επιλέγουμε τον υποφάκελο Customers και το αρχείο CustomerSettings.

Προσθέτουμε δύο Boolean properties για κάθε πεδίο που θέλουμε να προσθέσουμε.

To πρώτο καθορίζει αν το custom πεδίο μας είναι ενεργοποιημένο από τον διαχειριστή να εμφανίζεται στην φόρμα εγγραφής.

Το δεύτερο καθορίζει αν το custom πεδίο μας είναι υποχρεωτικό ή όχι να συμπληρωθεί κάτι που επίσης καθορίζεται από τον διαχειριστή.

Μετά μέσα στο ίδιο φάκελο που επιλέξαμε πιο πάνω στο solution Explorer επιλέγουμε το αρχείο SystemCustomerAttributeNames.

Εδώ ορίζεται μια βοηθητική public static partial class με readonly properties μια για κάθε πεδίο που θα εμφανίζεται στην φόρμα εγγραφής του Customer. To μόνο που κάνει είναι να επιστρέφει ένα όνομα που περιγράφει το κάθε form field ή custom attribute του Customer.

Οι αλλαγές μας είναι οι παρακάτω

Οι αλλαγές στα 2 παραπάνω αρχεία είναι ότι χρειάζεται στο Nop.Core υπο-project

Σημείωση:

Δεν χρειάζεται κάποιο Mapping των παραπάνω τιμών στο μοντέλο της βάσης μιας και αποθηκεύονται στον πίνακα GenericAttribute έτσι δεν χρειάζεται κάποια αλλαγή κάπου μέσα στο υπο-project Nop.Data.

Ομοίως με πιο πάνω δεν χρειάζεται και κάποια αλλαγή σε κάποιο Service που περιέχεται μέσα στο υπο-project Nop.Services.

Αν σε αυτό το σημείο τρέξουμε το project θα δούμε στην βάση στον πίνακα Setting κάτι ανάλογο

[nucleus]

Προχωράμε πια στο front end του nopCommerce.Θα χρειαστούνε αλλαγές τόσο στο Αdministration κομμάτι όσο και στο Customer κομμάτι.

Ξεκινάμε από το Administration.

Στο source code του nopCommerce όπως το βλέπουμε στο VS2012,κάνουμε expand τα παρακάτω projects με την σειρά

NopCommerce -> Presentation -> Nop.Admin.

-Επιλέγουμε το φάκελο Models expand και μετά επιλέγουμε τον υποφάκελο Customers και το αρχείο CustomerModel.

Εδώ έχουμε τον ορισμό του M μέρους του αρκτικόλεξου MVC,του Model που περιγράφει έναν Customer στο Αdministration κομμάτι.

Oι αλλαγές μας είναι

Mια bool μεταβλητή για το αν είναι Enabled το custom πεδίο μας και μια μεταβλητή που θα περιέχει την τιμή του στο Model.

To DataAnnotation [NopResourceDisplayName("Admin.Customers.Customers.Fields.OmegaCustomFormFieldOne")] χρησιμεύει για το Localization του ονόματος του πεδίου όπως θα εμφανίζεται στα Views στο Administration site.

-Το επόμενο βήμα είναι να προσθέσουμε τα κατάλληλα πεδία που σχετίζονται με τα 2 custom πεδία μας στο model

CustomerUserSettings.Στο solution explorer επιλέγουμε το φάκελο Models και μετά τον υποφάκελο Settings και εκεί το αρχείο CustomerUserSettingsModel

Βρίσκουμε στο region “Nested classes” την partial class CustomerSettingsModel.Σε αυτήν προσθέτουμε τα κατάλληλα bool πεδία που μας δείχνουν αν τα form fields που θα προστέσουμε είναι Enabled και/ή Required.

Χρησιμοποιούμε πάλι DataAnnotations για το Localization αν επιθυμούμε τον ονομάτων που θα φαίνονται για τα πεδία που προσθέτουμε.

-Τα 2 πεδία μας είναι υποχρεωτικά οπότε χρειάζεται να προστεθούν και τα κατάλληλα validation rules για αυτά.Αυτό γίνεται με την παρακάτω αλλαγή

Στο αρχείο CustomerValidator μέσα στο φάκελο Validators -> Customers.Αν τα 2 custom πεδία μας είναι υποχρεωτικά και enabled τότε δεν πρέπει να είναι Empty και το μήνυμα λάθους περιέχεται Localized στην εγγραφή

Admin.Customers.Customers.Fields.OmegaCustomFormFieldOne.Required στα string Resources για τις γλώσσες που υποστηρίζει το nopCommerce.

-Επόμενο βήμα που πρέπει να κάνουμε είναι να αλλάξουμε τα κατάλληλα Views.Τα Views είναι 2,ένα που βλέπει ο διαχειριστής όταν πάει να προσθέσει ή να αλλάξει τις πληροφορίες ενός Customer και ένα όταν ρυθμίζει ποια επιπλέον πεδία θα εμφανίζονται στην φόρμα εγγραφής και αν είναι υποχρεωτικά ή όχι.

Εxpand στο solution explorer του VS2012 τον φάκελο Views και επιλέγουμε τον υποφάκελο Customer.

Τα αρχεία που βλέπουμε εδώ είναι με κατάληξη cshtml και Razor σαν View engine περισσότερες πληροφορίες στο google .

Βρίσκουμε το partial view _CreateOrUpdate.cshtml.To παραπάνω partial view χρησιμοποιείται και στο Create και στο Edit ενός Customer στο Administration site,οι αλλαγές μας είναι οι παρακάτω

Αν είναι Enabled "δείξε" τον παρακάτω html κώδικα αν όχι παραμένει "κρυφός".Για το τι ακριβώς είναι το @Html διαβάζουμε για τους Html helpers .Συνοπτικά μια γραμμή με 2 κελιά ένα για το Label και ένα για τον editor (ένα textbox) και το κατάλληλο validation message για το πεδίο.

Το δεύτερο View είναι το CustomerUser.cshtml που περιέχεται μεσα στον φάκελο Views -> Settings.

Αυτό το View βλέπει ο διαχειριστής όταν πάει στα Settings του nopCommerce και επιλέγει CustomerSettings.

Βρίσκουμε το κατάλληλο Τab (στην περίπτωση μας το TabCustomerFormFields) και εκεί αρχικά προσθέτουμε το κατάλληλο javascript στην $(document).ready(function ()

Επίσης στην συνάρτηση function toggleCustomerRequiredFormField() προσθέτουμε τα παρακάτω

Οι 2 παραπάνω προσθήκες είναι απλώς «αισθητικές».Προσθέτουμε αρχικά ένα «event» στο click του field που υπάρχει στο view για το πεδία που προσθέσαμε και καθορίζουν αν είναι ενεργοποιημένα ή όχι ώστε να εκτελείται η toggleCustomerRequiredFormField και εκεί απλώς ανάλογα με το αν είναι checked το παραπάνω πεδίο ή όχι δείχνουμε ή κρύβουμε το section για να επιλέξουμε το αν είναι Required ή όχι.

Ακριβώς από κάτω από το javascript μέσα στο ίδιο TabCustomerFormFields στο table που ακολουθεί προσθέτουμε το παρακάτω στο σημείο που θέλουμε να εμφανίζονται οι επιλογές για τα νέα μας πεδία.

Ωραία όλα τα παραπάνω αλλάξαμε τα Models μας αλλάξαμε και τα Views αλλά που "αρχικοποιούμε" τα Models μας.Εδω αναλαμβάνουν οι controllers, το C στο αρκτικόλεξο MVC.

O controller για τους Customer είναι μεσα στον φάκελο Nop.Admin -> Controllers και το αρχείο CustomerController.cs.

Aλλάζουμε τις παρακάτω "συναρτήσεις" (δεν είναι ακριβώς αυτό βέβαια)

-public ActionResult Create()

-public ActionResult Create(CustomerModel model, bool continueEditing)

-public ActionResult Edit(int id)

-public ActionResult Edit(CustomerModel model, bool continueEditing)

[nucleus]

Για το τελευταίο round μας έχει μείνει το front end Nop.Web.

Οι αλλαγές που απαιτούνται είναι σε γενικές γραμμές παρόμοιες με τις αλλαγές που έγιναν στο Nop.Admin και αναφέρθηκαν πιο πάνω.Model - View - Controller.

Tα Models που μας ενδιαφέρουν είναι δύο,RegisterModel και CustomerInfoModel. Kαι τα δύο βρίσκονται στον φάκελο

Models μέσα στον υποφάκελο Customer.To πρώτο χρησιμοποιείται κατά την εγγραφή ενός νέου χρήστη και το δεύτερο όταν ένας χρήστης βλέπει τα προσωπικά του στοιχεία μεσα από το profile του.

RegisterModel

CustomerInfo

2 boolean properties για το αν είναι Enabled και υποχρεωτικό και ένα property για την τιμή.

Mιας και τα 2 custom πεδία μας είναι υποχρεωτικά πρέπει να προσθέσουμε και τους κατάλληλους ελέγχους οπότε πρέπει να συμπληρωθούν οι 2 validators για τα παραπάνω Models,RegisterValidator και CustomerInfoValidator αντίστοιχα.

Αν κανένα από τα νέα πεδία δεν είναι υποχρεωτικά ή δεν χρειάζονται κάποιο άλλο validation rule δεν χρειάζονται αλλαγές στους 2 παραπάνω validators.

Τα 2 παραπάνω Models χρησιμοποιούνται στις ακόλουθες "σελίδες"

• Info.cshtml

• Info.Mobile.cshtml

• Register.cshtml

• Register.Mobile.cshtml

Από τα παραπάνω views τα Info είναι οι σελίδες του profile του Customer.Tα Register είναι οι σελίδες για την εγγραφή στο σύστημα.Σημείωση:Το front end περιλαμβάνει 2 "εκδόσεις" desktop και mobile.Όλα περιέχονται στον ίδιο φάκελο Views -> Customer.

Οι αλλαγές είναι κοινές

Το τελευταίο πράγμα που πρέπει να προστεθεί είναι στον Controller των Customers για το front end.

Expand τον φάκελο Controllers και επιλέγουμε τον CustomerController.Αλλάζουμε τα παρακάτω

[NonAction]

protected void PrepareCustomerInfoModel(CustomerInfoModel model, Customer customer, bool excludeProperties)

[NopHttpsRequirement(SslRequirement.Yes)]

public ActionResult Register()

[HttpPost]

[CaptchaValidator]

[ValidateAntiForgeryToken]

public ActionResult Register(RegisterModel model, string returnUrl, bool captchaValid)

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult Info(CustomerInfoModel model)

Και αυτά.Τέλος.Τα παραπάνω Posts δεν έχουν σκοπό να σας μάθουν MVC για αυτό και δεν επεκτάθηκα αρκετά στα πάντα που περιέχει ο κώδικας στις εικόνες.

Stay tuned για τον επόμενο γύρο όπου θα "πειραματιστούμε" με τις δυνατότητες Export/Import σε XML,Excel και PDF που δίνει το nopCommerce και πως αυτές συγκρίνονται με του NopAdmin και τα Excel Operations Που αυτό περιλαμβάνει.

Ευχαριστώ για την προσοχή σας.