Template Info

Πως κάνουμε Download το Template για το eshop;

Το κατέβασμα του Template μπορεί να γίνει δωρεάν από το σύνδεσμο: mas-template 


Πως προσθέτουμε ένα προϊόν και την τιμή του;

Για να εμφανίζονται σωστά τα άρθρα με τα προϊόντα πρέπει να προσθέσουμε ένα μικρό κομμάτι κώδικα. Για να γίνει αυτόματα αυτή η διαδικασία, ώστε να μη χρειάζεται να γράφουμε τον παρακάτω κώδικα σε κάθε νέο άρθρο, από το κεντρικό μενού πάμε Ρυθμίσεις - > Αναρτήσεις και σχόλια -> Πρότυπο Ανάρτησης και προσθέτουμε:

<div class="product_image">

<a class="cloud-zoom" href="url-image.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img border="0" class="item_thumb" src="url-image.jpg" /></a>

<span class="item_price">00.00 EUR</span></div>

<div class="product_describe">

Description your product.............
</div>


Κάνουμε αποθήκευση των ρυθμίσεων και κατόπιν πάμε Αναρτήσεις -> Δημιουργία νέας ανάρτησης και ανοίγουμε με μορφή HTML. Στον παραπάνω κώδικα αντικαθιστούμε τα κόκκινα γράμματα με τη διεύθυνση της εικόνας που έχουμε μεταφορτώσει. Η τιμή του προϊόντος αντιστοιχεί στους πορτοκαλί αριθμούς.

Πως βάζουμε κατηγορίες;

Σε κάθε άρθρο που γράφουμε, προσθέτουμε Ετικέτες και αυτόματα δημιουργούνται οι κατηγορίες που φαίνονται στο Template.

Slider

Για να δουλέψει σωστά το Slider, θα πρέπει να δημιουργήσουμε πρώτα μερικά άρθρα με προϊόντα, βάζοντας εικόνες και κείμενο ως περιγραφή. Από το κεντρικό μενού στη Διάταξη -> Featured Slider δεν πρέπει να γράψουμε ούτε να αλλάξουμε τίποτα! Το Slider θα παίξει αυτόματα όταν γράψουμε μερικά άρθρα.

Πως αλλάζουμε το νόμισμα συναλλαγής;

Εάν δεν θέλουμε το δολάριο ως νόμισμα συναλλαγής, αλλά το ευρώ, τότε από το κεντρικό μενού πάμε Πρότυπο -> Επεξεργασία HTML και κάνοντας αναζήτηση, με Ctrl+F, βρίσκουμε το παρακάτω:

simpleCart.currency = USD;

και το αλλάζουμε σε: 

simpleCart.currency = EUR;

Επίσης αλλάζουμε και αυτό:

me.currency = USD;

σε

me.currency = EUR;

Αλλαγή στις χρεώσεις του Shopping Cart και εντολή πληρωμής στην Paypal μας.

Από το Πρότυπο -> Επεξεργασία HTML και κάνοντας αναζήτηση, με Ctrl+F, βρίσκουμε το παρακάτω:

<script type='text/javascript'>

simpleCart.email = &quot;johnytemplate@gmail.com&quot;;

simpleCart.checkoutTo = PayPal;

simpleCart.currency = USD;

simpleCart.taxRate  = 0.02;

simpleCart.shippingFlatRate = 3.25;

simpleCart.shippingQuantityRate = 1.00;

simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; ,   &quot;Total&quot;, &quot;remove&quot; ];

</script>

Αντικαθιστούμε τα τονισμένα κόκκινα γράμματα με το email της PayPal μας και έτσι τα χρήματα πηγαίνουν στο δικό μας λογαριασμό.

Αν δεν θέλουμε να χρεώνουμε επιπλέον το φόρο, τότε στο 

simpleCart.taxRate  = 0.02;

το αντικαθιστούμε με

simpleCart.taxRate  = 0.00;

Τα στάνταρ έξοδα αποστολής τα αλλάζουμε από το

simpleCart.shippingFlatRate = 3.25;

Αν θέλουμε να έχουμε στάνταρ χρέωση 4 ευρώ, τότε γράφουμε το παρακάτω:

simpleCart.shippingFlatRate = 4.00;

Αν δεν θέλουμε να χρεώνουμε για κάθε επιπλέον προϊόν έξτρα έξοδα αποστολής, τότε στο:

simpleCart.shippingQuantityRate = 1.00;

αντικαθιστούμε με

simpleCart.shippingQuantityRate = 0.00;

Search bar - Μπάρα αναζήτησης

Επειδή η μπάρα αναζήτησης του Template δεν δουλεύει σωστά, μπορούμε να κάνουμε μια μικρή επέμβαση στον κώδικα, έτσι ώστε τα αποτελέσματα αναζήτησης να προέρχονται από το eshop μας και να εμφανίζονται μέσα σε αυτό. Για να γίνει αυτό, από το Πρότυπο -> Επεξεργασία HTML και κάνοντας αναζήτηση, με Ctrl+F, βρίσκουμε το παρακάτω σημείο του κώδικα:

<div id='searchbarright'>

<form action='http://www.google.com/search' method='get' target='_blank'>

<input name='sitesearch' style='display:none;' value='http://eshopfree.blogspot.gr/'/>

<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:120px;border:none;padding:3px 7px; font:12px Arial;color:#666; background:#fff;border:1px solid #ccc;' type='text' value='Search ...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2yYcxAbXpane7iUZPlhdytp8JGX6hiWWol6rA8opOP1ZbHwWCyE7LPSnJLVdbOd4jxFdwAkV74_LKXfJB4-qK3GOmzlcye05BwA62Z4NlG9eRuPEH7LuST5Rc8Ri4Lxyu3zLnYmLAPr0/s1600/search.jpg' style='padding:0px 3px;' type='image' value='Search'/>

</form>

και τον αντικαθιστούμε με αυτό:

<div id='searchbarright'>

<form action='/search' method='get'>

<input id='search' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:120px;border:none;padding:3px 7px; font:12px Arial;color:#666; background:#fff;border:1px solid #ccc;' type='text' value='Search ...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2yYcxAbXpane7iUZPlhdytp8JGX6hiWWol6rA8opOP1ZbHwWCyE7LPSnJLVdbOd4jxFdwAkV74_LKXfJB4-qK3GOmzlcye05BwA62Z4NlG9eRuPEH7LuST5Rc8Ri4Lxyu3zLnYmLAPr0/s1600/search.jpg' style='padding:0px 3px;' type='image' value='Search'/>

</form>

Social Media Icons

Για να δημιουργήσουμε τα Links μας προς τα Social Media από το Πρότυπο -> Επεξεργασία HTML και κάνοντας αναζήτηση, με Ctrl+F, βρίσκουμε το παρακάτω σημείο του κώδικα:

<div id='searchbarright1'>

<ul class='isocial'>

<li><a class='rss' href='#' target='_blank' title='Subscribe via RSS'/></li>

<li><a class='facebook' href='#' target='_blank' title='Become a Fan'/></li>

<li><a class='twitter' href='#' target='_blank' title='Follow Us'/></li>

<li><a class='google' href='#' target='_blank' title='Google Plus Profile'/></li>

<li><a class='youtube' href='#' target='_blank' title='Watch The Video'/></li>

Όπου υπάρχει κάγκελο # το αντικαθιστούμε με το Link που οδηγεί στη σελίδα μας στο αντίστοιχο Social Network.

Drop Down Menu

Η μπάρα με το Drop Down Menu είναι έτοιμη και μπορεί να διαμορφωθεί μέσα από το Πρότυπο -> Επεξεργασία HTML και κάνοντας αναζήτηση, με Ctrl+F, βρίσκουμε το παρακάτω σημείο του κώδικα:

<div id='topbar'>

<ul id='top'>

<li><a href='/'><span>Welcome</span>Homepage</a></li>

..........................................................................................................

..........................................................................................................

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

Πως ενεργοποιούμε το email Subscription;

Το email subscription αφορά την μπάρα που γράφει " Enter your email address..."
Στην πράξη στέλνει αυτόματα emails μέσω του Feedburner της Google, κάθε φορά που προσθέτουμε ένα νέο άρθρο ή προϊόν στο eshop. Για να λειτουργήσει σωστά θα πρέπει να κάνουμε δυο πράγματα:
1) Αρχικά θα πρέπει να δημιουργήσουμε ένα λογαριασμό στο Feedburner και να ενεργοποιήσουμε από την καρτέλα "Publicize" τα email subscriptions.
2) Από το Πρότυπο -> Επεξεργασία HTML και κάνοντας αναζήτηση, με Ctrl+F, βρίσκουμε το παρακάτω σημείο του κώδικα:

<div id='searchbarleft'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=EDO&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}' onfocus='if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='EDO'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>
    </div>

και στα σημεία που σημειώσαμε με κόκκινο χρώμα να βάλουμε το σωστό όνομα του Feed μας. Διαφορετικά μπορούμε να σβήσουμε όλο το Form action και να αντιγράψουμε τον κώδικα που θα μας δώσει το Feedburner.

More..

Κάποια επιπλέον βοήθεια για αυτό το Template υπάρχει αναρτημένη στον σύνδεσμο blackstore-template-toko-online ,αλλά χρειάζεται μετάφραση καθώς η γλώσσα που χρησιμοποιείται είναι τα Ινδονησιακά..