Articoli

Come visualizzare la percentuale di sconto in Magento

Capita spesso che un cliente richieda la visualizzazione, oltre al prezzo pieno ed a quello speciale, anche della percentuale di sconto applicata ad un articolo.

In Magento questa opzione non è contemplata (o meglio “automatizzata”) nel pannello di amministrazione, dobbiamo quindi aggiungere “a mano” del codice che ci permetta la visualizzazione della label con la percentuale di sconto applicata.

Il codice qui di seguito va aggiunto al file catalog/product/view.phtml del template in uso:

/* Visualizza Percentuale Sconto */
$percentuale_sconto = ceil(100 - (( 100/$_product->getPrice() ) * $_product->getFinalPrice() ));
if($percentuale_sconto > 0){
echo 'Risparmi il '.$percentuale_sconto.' %';
}
/* Fine - Visualizza Percentuale Sconto */

In pratica, non facciamo altro che calcolare e visualizzare la percentuale di sconto a partire dal prezzo speciale, se questo è stato impostato.

C’è però da notare una cosa: quanto appena descritto visualizzerà lo sconto nella sola pagina di dettaglio del prodotto!

Nella lista/griglia non troveremo alcuna traccia delle modifiche effettuate.
Perchè lo sconto venga visualizzato in tutte le pagine, il file da modificare sarà catalog/product/price.phtml (testato in Magento versione 1.8.1.0).

 

Richiedi, senza alcun impegno, una nostra consulenza, sapremo aiutarti nella realizzazione del tuo progetto.

 

 

Image CRUD: gallerie immagini in un lampo

Eccoci nuovamente a parlare del framework CodeIgniter (chi non lo conoscesse, può leggere un brevissimo articolo qui: https://www.walkermanstudio.com/codeigniter-framework-php-tuttofare), più precisamente di una libreria che ci aiuterà non poco durante la realizzazione dei nostri progetti.

Se dovessimo realizzare una galleria immagini per un sito, un’applicazione web, dovremmo sicuramente pensare a come presentare il frontend (ordinamento in griglia oppure tramite lista? E’ meglio realizzare le anteprime? E le didascalie? Mentre per gli album?), ma dovremmo soprattutto considerare la parte gestionale… lavoro non poco complesso e non proprio immediato: upload di file singoli e/o multipli, restrizioni sulla tipologia di file, gestione degli album, ridimensionamento delle immagini, etc…

Bene… in aiuto ci viene una libreria che promette (e, aggiungiamo, mantiene) di velocizzare la creazione di gallerie immagini e la loro gestione.

La libreria in questione è Image CRUD. Integrabile facilmente in Codeigniter, con pochissime righe di codice avremo un CRUD (Create, Read, Update, Delete) veloce e flessibile.

Vediamo insieme alcune delle principali funzionalità di Image CRUD:

– selezione e upload multiplo di immagini
– generazione automatica delle anteprime
– ordinamento “drag&drop” delle immagini
– inserimento didascalia
– raggruppamento immagini (creazione album)

Tutto questo si ottiene riportando nel vostro controller questa semplicissima funzione (esempio presente nella documentazione ufficiale):
function example1()
{
$image_crud = new image_CRUD();

// indichiamo la tabella che nel nostro database conterrà i riferimenti ai file sul server
$image_crud->set_table(‘example_1’);

// indichiamo il campo “chiave primaria” della nostra tabella poc’anzi descritta
$image_crud->set_primary_key_field(‘id’);

// indichiamo il campo, autogenerato, per l’url all’immagine
$image_crud->set_url_field(‘url’);

// indichiamo il percorso “contenitore” delle nostre immagini
$image_crud->set_image_path(‘assets/uploads’);

// generiamo il codice, pronto per essere visualizzato
$output = $image_crud->render();

// et voilà!
$this->_example_output($output);
}

La documentazione ed altri esempi presenti sul sito degli sviluppatori ci insegnano ad eseguire un ordinamento (set_ordering_field()), utilizzare una “categoria” per le nostre immagini (set_relation_field()) e ad impostare un titolo (set_title_field())

Come integrarlo in Codeigniter?
Innanzitutto recatevi sul sito ufficiale e scaricate l’ultima versione disponibile:
http://www.grocerycrud.com/image-crud/download

Scompattate l’archivio, contenente le cartelle “application” e “assets”, nella root del vostro progetto Codeigniter.
Troverete un controller ed una view che forniscono tutti gli esempi per poter iniziare ad utilizzare la libreria.
Unica accortezza è quella di creare la tabella, che conterrà i dati delle nostre immagini, nel database e, se pensate di utilizzarla, la tabella delle “categorie”.

 

Richiedi, senza alcun impegno, una nostra consulenza, sapremo aiutarti nella realizzazione del tuo progetto.

 

 

Google Chrome Experiments: showroom della creatività!

Cos’è Google Chrome Experiments?

Il progetto, nato come sito web ufficiale di Google per valutare le performance del proprio browser web Chrome, parte nel (lontano) 2009.
Pian piano sempre più coder hanno preso parte al progetto, proponendo i propri lavori: giochi, progetti artistici, progetti audio interattivi… oggi se ne contano più di 600!

Il filo che tiene legati tutti (o quasi) gli “esperimenti” sono le tecnologie utilizzate, tutte rigorosamente open-source: HTML5 (accompagnato da CSS3), WebGl, JavaScript, SVG, Canvas.

Nel 2012, con l’introduzione del browser Chrome per dispositivi mobile, è stata aggiunta al sito la sezione dedicata esclusivamente alle applicazioni per questi dispositivi. Attualmente sono presenti circa 20 app fruibili dai suddetti dispositivi (qui il link per visionarli http://www.chromeexperiments.com/mobile/)!

Qui invece troverete i progetti da visionare sul vostro PC http://www.chromeexperiments.com/webgl/

Ricordate che è indispensabile utilizzate Google Chrome per avere una resa ottimale.

Segnaliamo alcune dei migliori progetti, iniziando dai videogames:

World Wide Maze: trasforma qualsiasi sito web in un labirinto!
http://www.chromeexperiments.com/webgl/

Racer: per dispositivi mobile, permette di gareggiare in modalità multiplayer e di estendere le tracce (le piste dove il vostro cursore “corre”) su più schermi (max 5!)!
http://www.chromeexperiments.com/racer/

HexGL: gioco di corse futuristico. Adrenalinico!
http://hexgl.bkcore.com/

Browser Pong: il famoso Pong presentato nella versione… browser. Da provare.
http://stewd.io/pong/

…lasciamo i videogame e passiamo ad altro:

ROME: 3 Dreams Of Black: un meraviglioso film interattivo.
http://ro.me/

Animated Volume Particles: 3d, particelle, textures…
http://empaempa.github.io/GLOW/examples/complicated/

Puplo: bellissimo esempio di come una “semplice” grafica accompagnata da animazione puo’ sbalordire.
http://dl.dropboxusercontent.com/u/6983010/wserv/gexp_pulpo/index.html

WebGL Image Filter: un editor grafico su browser? Si!
http://evanw.github.com/webgl-filter/

Belli, vero?
Beh, ora non ci resta che realizzare il nostro di progetto interattivo…
Buon coding a tutti!

AGGIORNAMENTO:

Aggiungiamo qualche altro esperimento pescato fra i numerossissimi presenti sul sito ufficiale.

JS Racing: gioco di corse automobilistico online
http://www.chromeexperiments.com/detail/js-racing/

Autumn: demo ispirato alla stagione autunnale 🙂
http://www.chromeexperiments.com/detail/autumn/

Artificial Neural Network: una visualizzazione astratta delle… connessioni neurali!
http://www.chromeexperiments.com/detail/artificial-neural-network/

Plink: esperimento musicale multiutente
http://www.chromeexperiments.com/detail/plink-multiplayer-music-experience/

AGGIORNAMENTO Gennaio 2015:

Segnaliamo altri esperimenti da… sperimentare!

http://www.chromeexperiments.com/detail/drive/

http://www.chromeexperiments.com/detail/heavenly-glory/

http://www.chromeexperiments.com/detail/apexvj/

http://www.chromeexperiments.com/detail/helvetica-clock-2/

http://www.chromeexperiments.com/detail/polysonic/

 

 

jQuery e AJAX in WordPress

Veniamo subito al dunque: si deve utilizzare codice PHP richiamato da una pagina, senza che questa venga ricaricata (chiamata asincrona).

In WordPress è possibile fare una cosa del genere? La risposta è SI.

Se creo un file PHP e lo salvo nella cartella del tema corrente di WordPress, all’interno dello stesso file non potrò utilizzare alcuna funzione nativa di WordPress… se non faccio prima alcune operazioni.

Per iniziare: i file che modificheremo si trovano nella cartella del tema attivo: …wp-content/themes/NOME_TEMA_ATTIVO

Dobbiamo, come prima cosa, scrivere nella sezione “head” del nostro file “header.php” il codice necessario ad includere il file admin-ajax.php.

Questo file, appartenente alle API di WordPress, non fa altro che prendere in consegna le chiamate AJAX, sia del frontend che del backend, e restituirne le risposte.

Ritornando al codice da inserire nel file header.php:

Fatto ciò, se non lo abbiamo già fatto, creiamo il file .php che fornirà le informazioni da visualizzare (risposta alla chiamata partita dalla pagina…). Per nostra comodità, nominiamo il file ajax_response.php e lo inseriamo sempre nella cartella del nostro tema attivo WordPress.

A questo punto dobbiamo “far capire” a WordPress che vogliamo utilizzare il suddetto file. Possiamo farlo aggiungendo un hook nel file functions.php:

function use_ajax() {
include(TEMPLATEPATH . '/ajax_response.php');
}
add_action('wp_ajax_my_action', 'use_ajax');
add_action('wp_ajax_nopriv_my_action', 'use_ajax');

Ora siamo pronti ad effettuare la chiamata AJAX, utilizzando jQuery, dal file interessato (es.: popolamento dropdown).
Il nostro codice sarà, quindi, simile a:

Per finire, un semplice schema che riepiloga il funzionamento delle chiamate asincrone AJAX da una pagine del tema corrente WordPress.

Schema chiamate AJAX in WordPress

Richiedi, senza alcun impegno, una nostra consulenza, sapremo aiutarti nella realizzazione del tuo progetto.

Elementi di portfolio