JoomShopping - Aggiungere un video ad un prodotto

google-plus Scritto da . Postato in Joomla!

avatar joomshopping youtubeNell'ultimo mese, ho lavorato per rimettere in sesto e rimodernare un sito e-commerce basato su Joomla! e il componente e-commerce JoomShopping.

Se googolate vi renderete conto che questo componente fa il suo lavoro egregiamente, anche se si tratta di mettere mano ad un sito multilingua come quello da me realizzato. Nel passato, ho messo mano anche a Virtuemart ma la sensazione, soprattutto quando si doveva mettere mano al codice era da capogiro.

JoomShopping è razionale e funzionale. Fa quello per il quale è stato progettato è supportato e soprattutto è versatile. Il prodotto, è tedesco e non mi meraviglio che sia così ben fatto.

A breve vorrei scrivere un articolo su JoomShopping per aiutare chi come me si trova di fronte ad una sfida su come creare un sito e-commerce con Joomla, ma ora entriamo nel merito dell'articolo:

Inserire un video in un prodotto JoomShopping

JoomShopping, consente attraverso la scheda video nei prodotti, di aggiungere facilmente un video ad un prodotto. Le scelte sono fondamentalmente due:

  • la prima caricare un video dal proprio PC alla piattaforma che ospita il sito.
  • La seconda, è quella di incorporare un video attraverso il codice di inclusione iframe di YouTube piuttosto che di Vimeo o altra piattaforma per la condivisione di contenuti multimediali.

Inserisci codice

Per la seconda opzione, basterà cliccare sulla checkbox "Inserisci codice" sotto la casella di testo "Seleziona video" e ci verrà mostrato un'area di testo dove inserire il codice copiato dalla piattaforma video.

Una volta salvato il prodotto, sarà possibile vedere il video da front end, cliccando sull'anteprima del video (se caricata) o sull'immagine a forma di pellicola cinematografica.

L'anteprima o l'immagine della pellicola, verranno visualizzate sotto l'anteprima dell'immagine principale del prodotto. Cliccando sull'una o sull'altra anteprima, passeremo dall'immagine prodotto alla modalità visualizzazione video.

Questa possibilità che ci da il componente, è però da gestire bene perché il video così incorporato in genere ha una larghezza che rischia di sconfinare dal suo contenitore creando problemi soprattutto nella visualizzazione con i dispositivi mobili. Può anche essere abbastanza grande da frapporsi con le anteprime.

Per evitare sovrapposizioni, nel codice del video, sostituiamo l'ampiezza "width" con una dimensione in percentuale (come da esempio qui sotto). Questo consentirà al video di adattarsi in percentuale alla dimensione del contenitore (div) che lo conterrà, senza sforare in una posizione che non gli spetta.

// HTML CODE
 0  <iframe width="70%" height="315" src="/https://www.youtube.com/embed/1uqi7_1-73A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 

Se caricare un solo video vi è sufficiente ciò che vi consente il componente è un buon compromesso.

Inserire il codice del video nella descrizione prodotto

Se la soluzione non vi piace, forse perché lo switch tra le anteprime non vi garba o perché avete intenzione di avere più video nella scheda prodotto, non preoccupatevi.

Infatti, Joomla! vi consente come per il componente com_content (quello cioé degli articoli e dei contenuti nativi di Joomla!) di inserire nella descrizione quanti video volete. Il problema sarà poi quello di metterli in maniera coerente dal punto di vista grafico per non mettere in confusione il cliente.

Per farlo, vi consiglio di disabilitare l'editor dei testi per la descrizione del prodotto.

Copiate ora il codice YouTube e successivamente incollatelo all'interno dello spazio adibito alla descrizione. Se avete un po' di manualità con il codice HTML ancora meglio.

Anche qui, giocate con la dimensione, applicando una percentuale al codice da incorporare sull'ampiezza del video.

Questo metodo di inclusione di contenuti esterni potete applicarlo praticamente ovunque possiate inserire contenuti in Joomla!. Si tratta solo di fare prove su prove e trovare il giusto compromesso con quello che volete ottenere come risultato finale.

Io lo ho applicato qui sotto per l'inclusione del video esplicativo dell'articolo: buona visione!

Se hai gradito l'articolo, condividilo, basta un click:

Aggiungi commento


Codice di sicurezza
Aggiorna

  • logo teoca
  • materexcel collabora
  • logo flash pulizie
  • revolution srl
  • logo planetkoi small
  • logo arcotraslochi
  • montaggio mobili trento
  • logo elevatori sito
  • logo prontopro

Prima di andartene...

Perché non rimanere in contatto?

Clicca sul pulsante "Mi piace" qui sotto per rimanere aggiornato su tutti i nuovi contenuti e ricevere notifica degli articoli interessanti che condivido giornalmente sulla Pagina Facebook dedicata al blog.

Puoi anche iscriverti alla newsletter e al nuovo canale YouTube di blog.dangerx82 così da rimanere sempre aggiornato sui nuovi contenuti...

x

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati. Ti invitiamo a prendere visione della nostra Informativa sulla Privacy (aggiornata il 25/05/2020). Oppure visiona la nostra Cookie Policy (aggiornata il 17/10/2019):