Προσθήκη κώδικα ή σεναρίου σε σελίδα στο CS-Cart και Multi-Vendor

Μερικές φορές χρειάζεται να προσθέσετε JavaScript ή κάποιον άλλο κώδικα από μια υπηρεσία τρίτου (για παράδειγμα, για να προσθέσετε ένα διαδικτυακό chat στη σελίδα). Το CS-Cart και το Multi-Vendor σας επιτρέπουν να το κάνετε χωρίς να τροποποιήσετε αρχεία, μέσω blocks.

Αυτό το άρθρο θα εξηγήσει πώς να προσθέσετε κώδικα σε μια σελίδα του καταστήματός σας. Θα καλύψουμε ένα παράδειγμα και θα εξηγήσουμε τι να κάνετε σε άλλες περιπτώσεις.

Για παράδειγμα, πρέπει να προσθέσουμε τον ακόλουθο κώδικα σε ΟΛΕς τις σελίδες του ιστότοπου:

<script>
    alert('If you see this text, then the script works.');
</script>

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

Προσθήκη κώδικα στο <Body> ή σε Συγκεκριμένο Σημείο της Σελίδας

1. Απενεργοποιήστε τους επεξεργαστές WYSIWYG. Είναι βολικοί για τη σύνταξη άρθρων ιστολογίου ή περιγραφών προϊόντων, αλλά μπορούν να αφαιρέσουν τα «περιττά μέρη» του κώδικα και να τον σπάσουν. Ακόμα κι αν μεταβείτε στη λειτουργία επεξεργασίας πηγαίου κώδικα (συνήθως είναι το κουμπί <> στον επεξεργαστή), ο κώδικας μπορεί να σπάσει την επόμενη φορά που θα επεξεργαστείτε και θα αποθηκεύσετε το μπλοκ.

   Πηγαίνετε στο Settings → Appearance, ορίστε το Default WYSIWYG editor σε Do not use, και αποθηκεύστε τις αλλαγές σας.

2. Δημιουργήστε ένα νέο μπλοκ. Μπορείτε να τοποθετήσετε μπλοκ σε διαφορετικές σελίδες διάταξης (αρχική σελίδα, σελίδες προϊόντων, άρθρα ιστολογίου κ.λπ.). Η επιλογή εξαρτάται από το σημείο όπου πρέπει να προσθέσετε τον κώδικα.
   • Στην περίπτωσή μας πρέπει να προσθέσουμε τον κώδικα σε όλες τις σελίδες. Ο ευκολότερος τρόπος είναι να το κάνετε στην προεπιλεγμένη σελίδα διάταξης. Αν προσθέσετε ένα μπλοκ στο Top panel, Header, ή καλύτερα, στο Footer (επειδή δεν έχει μπλοκ εξ ορισμού), ο κώδικας θα προστεθεί παντού. Ωστόσο, δεν όλες οι σελίδες διάταξης χρησιμοποιούν Top panel, Header, και Footer από την προεπιλεγμένη σελίδα διάταξης. Για παράδειγμα, η σελίδα checkout έχει μόνο Content, και όλα τα άλλα μπλοκ αφαιρούνται εξ ορισμού. Το κατάστημά σας μπορεί να έχει άλλες σελίδες διάταξης όπως αυτή. Προσθέστε το μπλοκ και σε αυτές τις σελίδες διάταξης.
   • Υπάρχουν άλλες περιπτώσεις, όταν χρειάζεστε τον κώδικα σε όλες τις σελίδες προϊόντων ή άρθρα ιστολογίου. Στη συνέχεια, πρέπει να επιλέξετε την αντίστοιχη σελίδα διάταξης (για παράδειγμα, «Products») και να προσθέσετε το μπλοκ εκεί. Αν χρειάζεστε το μπλοκ μόνο για ένα συγκεκριμένο προϊόν, είναι καλύτερο να το απενεργοποιήσετε εξ ορισμού. Θα το ενεργοποιήσετε για ένα προϊόν στην καρτέλα Layout της σελίδας επεξεργασίας του προϊόντος.
3. Όταν δημιουργείτε ένα νέο μπλοκ, πρέπει να επιλέξετε τον τύπο του. Υπάρχουν δύο τύποι μπλοκ για προσθήκη κώδικα:
   • HTML block είναι επαρκές στις περισσότερες περιπτώσεις. Υποστηρίζει κείμενα ή σενάρια όπως JavaScript από την αρχή αυτού του άρθρου. Αυτό είναι το μπλοκ που συνιστούμε, και είναι η μόνη επιλογή διαθέσιμη για πωλητές στο Multi-Vendor (υποθέτοντας ότι μπορούν να επεξεργάζονται διατάξεις).
   • HTML block with Smarty support είναι χρήσιμο όταν πρέπει να λάβετε κάποια δεδομένα από το CS-Cart ή Multi-Vendor με συναρτήσεις.

     Αν προσθέσετε τον κώδικα στο μπλοκ με υποστήριξη Smarty, και ο κώδικας περιλαμβάνει { ή }, τότε περικλείστε τον κώδικα με τις ακόλουθες ετικέτες: {literal}...{/literal}.

4. Προσθέστε τον κώδικά σας στην καρτέλα Content και αποθηκεύστε τις αλλαγές σας. Σημειώστε ότι το περιεχόμενο εξαρτάται από τη γλώσσα:
   • Όταν δημιουργείτε μπλοκ, το περιεχόμενό του θα αντιγραφεί σε όλες τις γλώσσες που έχετε.
   • Αν επεξεργαστείτε το υπάρχον μπλοκ αργότερα για να αλλάξετε τον κώδικα, φροντίστε να επιλέξετε το πλαίσιο ελέγχου Apply to all languages στην καρτέλα Content. Διαφορετικά, το περιεχόμενο θα εξαρτηθεί από τη γλώσσα που επέλεξε ο πελάτης.

     

5. (προαιρετικό) Το CS-Cart και το Multi-Vendor μετακινούν σενάρια στο τέλος του κώδικα της σελίδας. Το σεναρίο από αυτό το άρθρο ενεργοποιεί ένα αναδυόμενο παράθυρο προγράμματος περιήγησης που δεν εξαρτάται από τη θέση του σεναρίου στον κώδικα της σελίδας. Ωστόσο, αν προσθέτετε ένα αντικείμενο (όπως χάρτης ή διαφήμιση), μπορεί να βρίσκεται στο κάτω μέρος της σελίδας, και όχι όπου είναι το μπλοκ. Για να εμφανιστούν όλα όπως προορίζεται να εμφανίζονται και για να αποτρέψετε το σεναρίο από μετακίνηση στο τέλος της σελίδας, προσθέστε το microformat data-no-defer. Δείτε πώς μοιάζει με τον κώδικά μας:

   <script data-no-defer>
       alert('If you see this text, then the script works.');
   </script>

Προσθήκη κώδικα στο <Head>

Μερικές φορές ο κώδικας πρέπει να προστεθεί στο <head>...</head>. Αυτό γίνεται στις ρυθμίσεις των σελίδων διάταξης, στο πεδίο Custom HTML code. Οι σελίδες διάταξης όπου προσθέτετε τον κώδικα καθορίζουν ποιες σελίδες του καταστήματός σας θα έχουν αυτόν τον κώδικα.

Αν προσθέσετε τον κώδικα στην προεπιλεγμένη σελίδα διάταξης, θα δείτε το πλαίσιο ελέγχου Copy to other locations. Αν το επιλέξετε, θα μπορέσετε να προσθέσετε τον κώδικα σε όλες τις σελίδες του ιστότοπού σας γρήγορα, χωρίς να περάσετε από κάθε σελίδα διάταξης.

Εγκατάσταση του Προσθέτου