WordPress plugin – HNB tečajna lista

U članku u kojem sam pisao o tome kako omogućiti istovremeno korištenje kune kao valute trgovine bazirane na WooCommerceu i PayPala (koji ne podržava HRK kao valutu) te u kojem smo kreirali Plugin za Woocommerce (HRK valuta + PayPal + HNB konverzija), za dohvaćanje tečaja koristili smo HNB Exchange Rate Lookup API. U današnjem članku predstavljam plugin koji koristi navedeni API ali za dovaćanje i prikaz tečajne liste u stranicama, objavama, sidebar widgetu (ili bilo gdje u temi) i to uz pomoć shortcodea.

Ovaj plugin je baziran na odličnom jQuery pluginu kojeg je napravio kolega Aleks Aćimović te je dostupan na GitHub-u.

Plugin gets the currency list in JSONP using AJAX which makes possible using cross-domain requests from JavaScript directly from the user’s browser.

Anatomija plugina

Iz originalnog jQuery plugina koristimo jQuery i css datoteke. Njih smo enqueue-ali u novokreiranoj php datoteci.

function mxhnb_scripts() {
	wp_enqueue_style('mxhnbcss', plugins_url( 'css/currency-exchange-list.css', __FILE__ ));
	wp_enqueue_script( 'mxhnb', plugins_url( 'js/currency-exchange-list.js', __FILE__ ), array('jquery'), '', true );
}

add_action( 'wp_enqueue_scripts', 'mxhnb_scripts' );

Kreiranje shortcodea

Slijedeći korak bilo je definiranje atributa te kreiranje shortcodea. Zavisno o parametrima shortcodea prikazivati ćemo defaultne ili prilagođene vrijednosti.

function mxhnbshortcode($atts) {
    $options = shortcode_atts(array(
                              'date' => null,
                              'currencies' => null,
                              'buying' => null,
                              'median' => null,
                              'selling' => null
                              ), $atts);

    $js_options = new stdClass();
    if ($options['date']) {
        $js_options->date = $options['date'];
    }
    if ($options['currencies']) {
        $js_options->currencyList = explode(',',$options['currencies']);
    }
    if ($options['buying']) {
        $js_options->hideBuying = $options['buying'];
    }
    if ($options['median']) {
        $js_options->hideMedian = $options['median'];
    }
    if ($options['selling']) {
        $js_options->hideSelling = $options['selling'];
    }

    $js_options = json_encode((array) $js_options);

    return '
<div id="hnb"></div>
'
    .'<script type="text/javascript">'
    .'jQuery(document).ready(function() { jQuery.fn.getCurrencyExchangeRates(' . $js_options . '); });'
    .'</script>';
}
add_shortcode('tecajna-lista', 'mxhnbshortcode');

Shortcode atributi

Osnovni shortcode koristi zadane vrijednosti jQuery plugina a to je prikaz tečajne liste na današnji dan za ove valute: CHF, GBP, USD i EUR.

[tecajna-lista]

Podržane valute od strane HNB-a su: AUD, CAD, CZK, DKK, HUF, JPY, NOK, SEK, CHF, GBP, USD, EUR, PLN. Zato za prikaz tečajne liste svih dostupnih valuta dodamo shortcode koji izgleda ovako:

[tecajna-lista currencies=’AUD,CAD,CZK,DKK,HUF,JPY,NOK,SEK,CHF,GBP,USD,EUR,PLN’]

Žalite li prikazati tečajni listu za određeni datum i za određene valute, shortcode će izgledati ovako:

[tecajna-lista date=’2015-03-15′ currencies=’USD,EUR’]

Iako ovaj plugin ima vlastitu css datoteku i segmenti tečajne liste se mogu vizualno prilagođavati, zbog prikaza u sidebaru koji ima ograničenu širinu ili zbog prikaza bilo gdje u temi, gdje je skučen prostor, možete korištenjem atributa prikazati npr. samo srednji ili samo kupovni i prodajni tečaj za devize . U tom slučaju shortcode će izgledati ovako:

[tecajna-lista currencies=’USD,EUR’ median=’hide’]

Mogu li koristiti tečajnu listu bilo gdje u temi?

Naravno. U željenu php datoteku teme dodate slijedeći kod:

<?php echo do_shortcode('[tecajna-lista]'); ?>

Plugin za prikaz HNB tečajne liste

Downloadajte ga, instalirajte ga kao svaki drugi plugin (upload zip datoteke) i aktivirajte. Slobodno ga koristite u svojim projektima. Plugin je objavljen pod GPL3 licencom.

NAPOMENA: testirano na WordPressu 4.2, koristeći slijedeće teme: Twenty Thitreen, Twenty Fourteen, Twenty Fifteen.
NAPOMENA 2: Screenshotovi prikazuju tečajnu listu koristeći Twenty Fifteen temu.