Archimidis Mertzanos.

Archimidis Mertzanos.


Proud Father & Husband - WordPress Lover - Lead WordPress Developer @ Hellenic Technologies - Plugin Author - Speaker @ WordCamp Athens 2017

Αύγουστος 2017
ΔΤΤΠΠΣΚ
« Ιαν Σεπ »
 123456
78910111213
14151617181920
21222324252627
28293031 

Kατηγορίες


Τιμολόγιο στο Woocommerce χωρίς χρήση Plugin.

Αρχιμήδης ΜερτζάνοςΑρχιμήδης Μερτζάνος

Καλησπέρα σε όλους. Πρωτίστως να ευχηθώ καλή συνέχεια καλοκαιριού και κατά δεύτερον να ευχηθώ καλές διακοπές σε όσους δεν έχουν πάει. Έχει περάσει πολύς καιρός και  έχουν αλλάξει διάφορα στη ζωή μου. Πλέον θα αρθρογραφώ υπό τη σκέπην της Hellenic Technologies και φυσικά ανήκω στο ανθρώπινο δυναμικό της , ειδικά στην κατασκευή ιστοσελίδων με WordPress. Σήμερα λοιπόν θα ασχοληθούμε με το τιμολόγιο στο Woocommerce.

Τιμολόγιο στο Woocommerce – Πρόλογος

Το θέμα που πραγματεύεται το σημερινό Woocommerce tutorial είναι κάτι που όλους μας , είτε ως freelancers ,είτε ως project managers είτε ως πελάτες μας έχει «ανησυχήσει» σίγουρα. Είναι η προσθήκη της δυνατότητας για τιμολόγιο στο Woocommerce. Να μπορεί δηλαδή ο πελάτης να συμπληρώνει στοιχεία τιμολογίου και ο eshop administrator να μπορεί στη συνέχεια να «κόβει» τιμολόγιο στον πελάτη αυτό. Πριν καιρό υπήρξε ένα plugin στο WordPress.org που έδινε αυτή τη δυνατότητα στα ελληνικά Woocommerce eshops , το οποίο όμως για αδιευκρίνιστο λόγο δεν υπάρχει πλέον διαθέσιμο. Έτσι αποφάσισα να γράψω ένα οδηγό ο οποίος θα σας δείξει πώς μπορείτε να ενεργοποιήσετε στοιχεία τιμολογίου στο eshop σας και να μπορεί ο εκάστοτε πελάτης να επιλέγει μεταξύ απόδειξης και τιμολογίου.

Τι γνώσεις πρέπει να έχω για να ακολουθήσω;

Όπως έχω πει πάμπολλες φορές, τα βασικά εφόδια της παρακολούθησης όλων των Woocommerce Tutorials και όχι μόνο είναι η καλή διάθεση και η θέληση για μάθηση. Βέβαια για να παρακολουθήσετε το tutorial «Τιμολόγιο στο Woocommerce» θα πρέπει να γνωρίζετε:

Δεν θα φτιάξουμε το συγκεκριμένο feature σαν plugin αλλά θα χρησιμοποιήσουμε το functions.php αρχείο ενός child theme. Το theme είναι το Storefront theme που είναι το επίσημο δωρεάν theme για το Woocommerce.

Ξεκινώντας το τιμολόγιο για Woocommerce. Πρώτες σκέψεις

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

Τι θέλω να κάνω; Ποιο πρόβλημα θα επιλύσω στο τέλους αυτού του άρθρου;

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

  1. Επωνυμία Εταιρείας
  2. Επάγγελμα
  3. Α.Φ.Μ
  4. Δ.Ο.Υ

Το Woocommerce plugin δεν διαθέτει τα πεδία αυτά by default. Εμείς λοιπόν θα τα δημιουργήσουμε.

Πώς θα «δημιουργήσω» τα πεδία για τιμολόγιο στο Woocommerce;

Όπως είπαμε και παραπάνω, δεν θα χρησιμοποιήσω Plugin για αυτή την εργασία αλλά θα φτιάξω κάποια functions τα οποία θα κάνουν τις εξής εργασίες.

Τι αποτέλεσμα θέλω να πετύχω;

Θέλω να καταφέρω τα εξής:

  1. Ο χρήστης να μπορεί να επιλέξει τιμολόγιο και να συμπληρώνει τα αντίστοιχα πεδία αυτού.
  2. Ο admin να μπορεί στην παραγγελία να βλέπει τα στοιχεία αυτά.

Ξεκινώντας το tutorial «Τιμολόγιο στο Woocommerce».

Καταρχάς θα κάνουμε ένα WordPress installation είτε τοπικά , είτε σε κάποιον live server. Σε αυτό το installation θα εγκαταστήσουμε το Woocommerce plugin καθώς και το storefront theme και θα τα ενεργοποιήσουμε φυσικά. Το πιο καλό στοιχείο είναι ότι πλέον με την εγκατάσταση του Woocommerce και χρησιμοποιώντας τον wizard που εμφανίζεται , σας προτείνετε να εγκαταστήσετε και το Storefront theme. Έτσι εγκαθιστάτε και τα 2 .

Έχοντας κάνει τα παραπάνω σας προτείνω να χρησιμοποιήσετε άλλο ένα WordPress plugin , το Woocommerce Products Generator για να προσθέσετε μερικά dummy products στο νέο eshop σας. Στη συνέχεια συνδέστε στο eshop σας τον αγαπημένο σας HTML/CSS editor και ξεκινάει η δράση.

Μερικά λόγια για τα WordPress action hooks / filter hooks.

Τα hooks είναι μία πολύ βασική δυνατότητα που παρέχει το WordPress στους διάφορους developers .Είναι κάποια σημεία , κάποια functions στα οποία μπορούμε εμείς είτε να δέσουμε τα δικά μας είτε να αλλάξουμε αυτό που παράγουν με ένα δικό μας function. Στην πρώτη περίπτωση έχουμε να κάνουμε με τα  «action hooks» ενώ στη δεύτερη με τα «filter hooks». Ένα πολύ απλό παράδειγμα χρήσης action hook είναι ο τρόπος με τον οποίο κάνουμε enqueue τα styles και τα scripts στο WordPress. Για παράδειγμα μέσα σε κάποιο αρχείο functions.php σίγουρα έχετε δει το παρακάτω κομμάτι κώδικα:

function example_load_styles(){
wp_enqueue_style(............);
}

add_action('wp_enqueue_scripts','example_load_styles');

Στο παράδειγμά μας , φτιάξαμε μία custom function «example_load_styles» και την «κρεμάσαμε» στο hook «wp_enqueue_scripts» και έτσι προσθέσαμε τα διάφορα stylesheets που θέλαμε.

Το WordPress καταρχήν αλλά και πολλά καλά Custom WordPress themes και Plugins φτιάχνονται με την λογική των hooks για να μπορούμε εύκολα να αλλάξουμε αυτό που λαμβάνουμε χωρίς να κάνουμε αλλαγές στα διάφορα core files. Το ίδιο ισχύει φυσικά και με το Woocommerce plugin. Εμείς, στο tutorial αυτό θα χρησιμοποιήσουμε διάφορα hooks του για να τροποποιήσουμε την checkout page ώστε να προστεθούν τα στοιχεία τιμολογίου.

Τι hooks θα χρησιμοποιήσουμε για το τιμολόγιο για Woocommerce;

Καταρχάς ότι custom coding γράψουμε ,θα το περάσουμε στο functions.php του child theme που δημιουργήσαμε , εγκαθιστώντας το storefront theme. Για να κάνουμε ένα child theme, ο απλός τρόπος είναι να χρησιμοποιήσουμε plugin. Ένα πολύ καλό WordPress plugin είναι το One Click Child Theme Plugin.

Όσον αφορά τα hooks ψάχνοντας στο codex του Woocommerce , στο ίδιο το Woocommerce αλλά και στο ίντερνετ σίγουρα θα χρειαστούμε να «πειράξουμε» το εξής hook:

woocommerce_checkout_fields

Άρα λοιπόν δεν μένει κάτι άλλο από το να αρχίσουμε να γράφουμε κώδικα. Όπως θα παρατηρήσετε , επειδή θέλουμε να προσθέσουμε πεδία στα υπάρχοντα , το πάνω Hook είναι «filter» hook. Μας επιτρέπει δηλαδή να αλλάξουμε, να μετατρέψουμε το default αποτέλεσμα όχι όμως να το σβήσουμε. Είναι προφανές ότι θέλουμε να διατηρήσουμε τα υπάρχοντα πεδία.

Πώς μπορώ να προσθέσω ένα έξτρα πεδίο στο Woocommerce checkout;

Σύμφωνα με το codex του Woocommerce ένα πεδίο έχει την εξής μορφή. Δείτε σχόλια για επεξήγηση.

$fields['section']['item_name'] = array(
		'label'       => __( 'Το Label στη φόρμα', 'woocommerce' ),
		'required'    => true,// αν είναι υποχρεωτικό
		'type'        => 'select', // text,checkbox etc
		'class'       => array( 'form-row-wide' ), // διάφορα CSS classes
		'clear'       => true, // Ορίζει ένα clear fix στο Label και στο πεδίο.
		'options'     => array( // σε περίπτωση που είναι select
			'0' => 'Νο',
			'1' => 'Yes'
		)
	);

Έτσι λοιπόν θα φτιάξουμε ένα custom function που θα δέσουμε με το hook που αναφέραμε πιο πάνω και θα προσθέσω τα πεδία που θέλω. Τον παρακάτω κώδικα τον γράφω στο functions.php αρχείο του child theme.

function hta_add_timologio_fields($fields) {

	$fields['billing']['billing_needs_timologio'] = array(
		'label'       => __( 'Θέλετε τιμολόγιο;', 'woocommerce' ),
		'required'    => false,
		'type'        => 'select',
		'class'       => array( 'form-row-wide invoice-select' ),
		'clear'       => true,
		'options'     => array(
			'0' => 'Νο',
			'1' => 'Yes'
		)
	);

	$fields['billing']['billing_epaggelma'] = array(
		'label'       => __( 'Επάγγελμα', 'woocommerce' ),
		'placeholder' => _x( 'Επάγγελμα', 'placeholder', 'woocommerce' ),
		'required'    => false,
		'type'        => 'text',
		'class'       => array( 'form-row-wide invoice-field invoice-epaggelma-field' ),
		'clear'       => true,
	);

	$fields['billing']['billing_afm'] = array(
		'label'       => __( 'ΑΦΜ', 'woocommerce' ),
		'placeholder' => _x( 'ΑΦΜ', 'placeholder', 'woocommerce' ),
		'required'    => false,
		'type'        => 'text',
		'class'       => array( 'form-row-wide invoice-field invoice-afm-field' ),
		'clear'       => true,
	);

	$fields['billing']['billing_doy'] = array(
		'label'       => __( 'ΔΟΥ', 'woocommerce' ),
		'placeholder' => _x( 'ΔΟΥ', 'placeholder', 'woocommerce' ),
		'required'    => false,
		'type'        => 'text',
		'class'       => array( 'form-row-wide invoice-field invoice-doy-field' ),
		'clear'       => true,
	);

	return $fields;
}

add_filter( 'woocommerce_checkout_fields', 'hta_add_timologio_fields' ); // Εδώ θα τρέξω το filter hook που θα δέσω την δική μας function πάνω του.

Μικρή επεξήγηση παραπάνω κώδικα

Χωρίς να πούμε πολλά ο παραπάνω κώδικας κάνει το εξής. Δηλώνει 4 έξτρα πεδία στη σελίδα checkout . Όλα τα πεδία είναι της μορφής $fields[‘billing’][‘billing_afm’]  όπου το πρώτο κομμάτι είναι το που βρίσκεται το πεδίο,μέσα σε ποιο section βρίσκεται. Στην περίπτωση μας βρίσκεται στα billing fields. Το δεύτερο κομμάτι είναι το name attribute του πεδίου αυτού το οποίο θα χρησιμοποιήσουμε και αργότερα. Βλέποντας πλέον το checkout διακρίνω τα νέα πεδία.

Τιμολόγιο στο Woocommerce, έξτρα πεδία

Στη συνέχεια και αφού σώσω τις αλλαγές πάω στο demo site μου, βάζω κάτι στο καλάθι και πάω στο checkout page όπου βλέπω αυτό.

Πώς εμφανίζω τα πεδία για το τιμολόγιο στο Woocommerce στην παραγγελία;

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

Εννοείται ότι θα χρησιμοποιήσω κάποιο Woocommerce hook για να τα εμφανίσω εκεί. Ψάχνοντας καλά βρίσκουμε ότι μπορούμε να χρησιμοποιήσουμε είτε το woocommerce_admin_order_data_after_shipping_address  (θέση 2) είτε το woocommerce_admin_order_data_after_billing_address (θέση 1) για να εμφανίσουμε τα πεδία. Ας δοκιμάσουμε το πρώτο. Στο functions.php γράφουμε τον εξής κώδικα. Δείτε σχόλια για τυχόν επεξηγήσεις.

/*
 * Show the fields into the order edit area
 */
function hta_show_timologio_fields_in_order( $order ) {

	$html            = '<div class="extra-order-fields">';
	$needs_timologio = get_post_meta( $order->id, '_billing_needs_timologio', true ); // παίρνουμε 0 ή 1  το ορίσαμε πιο πάνω. Ειναι το αποτέλεσμα από το dropdown.


	if ( $needs_timologio == 1 ):

		/*= Εάν θέλει ο χρήστης τιμολόγιο, εμφάνισε τα στοιχεία =*/
		$html .= '<h3>Στοιχεία Τιμολογίου</h3>';

		/*= Προσοχή. θα παρατηρήσετε ότι σε κάθε custom field βάζουμε ένα underscore _ μπροστά.Αυτό διότι όταν τα δηλώνουμε παραπάνω , το woocommerce τα αποθηκεύει έτσι στα post meta. Το _ κρύβει στην ουσία τα post meta από την edit screen της παραγγελίας. */

		$html .= '<p>ΕΠΑΓΓΕΛΜΑ: <strong> ' . get_post_meta( $order->id, '_billing_epaggelma', true ) . '</strong></p>';
		$html .= '<p>ΑΦΜ: <strong> ' . get_post_meta( $order->id, '_billing_afm', true ) . '</strong></p>';
		$html .= '<p>ΔΟΥ: <strong>' . get_post_meta( $order->id, '_billing_doy', true ) . '</strong></p>';

	endif;
	$html .= '</div>';

	echo $html;
}

add_filter( 'woocommerce_admin_order_data_after_shipping_address', 'hta_show_timologio_fields_in_order', 20 ); // Χρησιμοποιήσαμε το hook αυτό και μάλιστα "δένουμε" τη δική μας function εκεί.

Πάμε να κάνουμε μια παραγγελία ακόμα..

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

Βελτιώσεις στο tutorial «τιμολόγιο στο Woocommerce»

Μέχρι εδώ τα πήγαμε πολύ καλά . Όμως εύκολα διαπιστώνει κάποιος ότι θα μπορούσαμε να κάνουμε κάποιες αλλαγές/προσθήκες στον κώδικά μας ώστε αυτό που φτιάξαμε να είναι ακόμα καλύτερο. Να το κάνουμε πιο user friendly για παράδειγμα. Μία βασική βελτίωση είναι να εμφανίζουμε τα πεδία τιμολογίου ΜΟΝΟ όταν ο χρήστης επιλέγει στο dropdown ότι θέλει τιμολόγιο. Υπάρχουν και μερικές άλλες που θα τις δούμε πιο κάτω.

Βελτίωση 1: Εμφάνιση στοιχείων τιμολογίου μόνο όταν τα ζητάει ο χρήστης.

Σε αυτό το σημείο θα χρησιμοποιήσουμε λίγο jQuery. Θα κάνουμε το εξής. Θα φτιάξουμε ένα script το οποίο θα ελέγχει καταρχάς το dropdown τι τιμή έχει:

  1. Αν είναι στο «Όχι» τα πεδία θα κρύβονται
  2. Αν είναι στο «Ναι» τα πεδία θα παραμένουν. Αυτό γιατί το Woocommerce λόγω του Session που χρησιμοποιεί κρατά τις επιλογές του χρήστη στη φόρμα . Αν δηλαδή συνδεθείτε ,κάνετε αγορά και εν συνεχεία το ξανακάνετε , όλα τα στοιχεία σας θα είναι στην φόρμα.
  3. Αν ο χρήστης αλλάζει την τιμή του dropdown , τα πεδία θα εμφανίζονται και θα εξαφανίζονται αντιστοίχως.

Μπορούμε να γράψουμε το εξής code block. Εγώ προσωπικά το τοποθέτησα μέσα σε ένα αρχείο childjs.js το οποίο το κάνω enqueue στο child theme που έφτιαξα.

jQuery(document).ready(function($){
	var timSelect = $('#billing_needs_timologio');

	// Εδώ κοιτάμε αν είναι επιλεγμένο το "οχι" ή το "ναι" κατά την φόρτωση της σελίδας.
	if(timSelect.val() == 0){
		hide_invoice_fields();
	}else{
		show_invoice_fields();
	}
	
	// Εδώ κοιτάμε το onchange event
	timSelect.on('change',function(){
		if($(this).val() == 1){
			show_invoice_fields();
		}
		else{
			hide_invoice_fields();
		}
	});
	
	// Βοηθητικές functions
	function show_invoice_fields(){
		$( '.invoice-field' ).each(function() {
		$(this).show('slow');
		});
	}
	function hide_invoice_fields(){
		$( '.invoice-field' ).each(function() {
		$(this).hide('fast');
		});
	}
});

Proud Father & Husband - WordPress Lover - Lead WordPress Developer @ Hellenic Technologies - Plugin Author - Speaker @ WordCamp Athens 2017

    6
    Αφήστε σχόλιο

    avatar
    2 Thread Σχολίων
    4 Απαντήσεις στο thread
    0 Ακόλουθοι
     
    Πιο δημοφιλές σχόλιο
    Πιο "καυτό" thread
    3 Comment authors
    spirosΑρχιμήδης ΜερτζάνοςAndreas Recent comment authors
      Subscribe  
    νεότερα παλαιότερα πιο πολύ ψηφισμένα
    Ενημέρωσε με για..
    Andreas
    Guest
    Andreas

    Καλησπέρα Αρχιμήδη,

    Σε περίπτωση που θα ήθελα να ελέγξω και το order status της παραγγελίας τι θα έπρεπε να κάνω;
    Δηλαδή εάν έχει επιλεγεί τιμολόγιο: ΝΑΙ τότε η παραγγελία να μπαίνει σε status hold.

    Ευχαριστώ,

    Ανδρέας

    spiros
    Guest

    «»Μπορούμε να γράψουμε το εξής code block. Εγώ προσωπικά το τοποθέτησα μέσα σε ένα αρχείο childjs.js το οποίο το κάνω enqueue στο child theme που έφτιαξα.»»
    Αρχιμήδη καλησπερα!!
    μηπως μπορεις να μου πεις που να βαλω το αρχειο js? (το εχω βαλει μεσα στον φακελο js του theme). Επισης μπορεις να μου πεις πως θα κανω enqueue στο theme μου? ευχαριστω εκ των προτερων!!