12 minutos de lectura ( 2487 palabras)

Crea tu Tienda Online con Joomla! 3

Crea tu Tienda Online con Joomla! 3

CREA TU TIENDA ONLINE CON JOOMLA! 3

En el presente artículo aprenderemos las características mas importantes que debe cubrir una tienda online. Sin disponer de ningun recurso previamente, seremos capaces de diseñar y crear una tienda online con todas las funcionalidades necesarias y publicada en Internet. Para ello haremos uso de;

a) Instalación demo Joomla! 3.0 ofrecida en demo.joomla.org

b) Tienda online HikaShop Starter 2.2.3

A continuación dispones de un indice de contenidos.

  1. COMO TIENE QUE SER MI TIENDA
  2. HOSTING DEMO
  3. IDIOMAS
  4. INSTALACIÓN HIKASHOP
  5. PANEL DE CONTROL
  6. CONFIGURANDO LA TIENDA
    1. Tienda ( datos de contacto )
    2. Moneda
    3. Impuestos
    4. Gestión de impuestos
    5. Métodos de envío
    6. Idioma
    7. Formas de Pago
    8. Imágenes
  7. ALTA DE CATEGORÍAS Y PRODUCTOS
  8. ACTIVANDO LA TIENDA
    1. MENU CATEGORIAS Y PRODUCTOS
    2. CARRITO DE LA COMPRA

 

1 ¿Cómo tiene que ser mi tienda?


Cuando un usuario visualiza una ficha de producto en una tienda online, son muchas las variables que puede estar buscando y que decidan si esta dispuesto o no a comprar el producto. Nustra tienda debera disponer de un gestor que nos permita ofrecer en su caso estas variables. Entre ellas:

- marca
- fabricante
- nivel de stock
- ref. artículo
- precio
- gastos de envío
- impuestos
- atributos
- galeria de imagenes
- descripción características
- faq
- garantía
- plazos de devolución
- opiniones usuarios
- distribución redes sociales

Una instalación básica HikaShop Starter junto con Joomla! disponen de lo necesario para poder ofrecer una tienda online que cubrar todas estas necesidades.

2 Hosting Demo

Para el siguiente artículo hemos hecho uso de una instalación demo de Joomla! a través del gestor demo.joomla.org que nos permite disponer de una instalación Joomla! 3 durante un periodo de 30 días en el hosting cloudaccess.net

Una vez dado de alta una instalación Joomla! hemos configurado comprobado los idiomas instalados

3 Idiomas

En caso de tener activado nuestro hosting en Inglés y querer activarlo al español, podremos hacerlo desde nuestra Administrador de Joomla! a través de Extensions > Language Manager dónde buscaremos el idioma Spanish y lo seleccionaremos como idioma predeterminado para el Site como para el Administrator

idiomas 

4 Instalación Hikashop

La instalación de nuestra tienda Hikashop la realizaremos desde Extensiones > Gestor de Extensiones a través de nuestra pestaña “instalar desde la web” y la búsqueda Hikashop

seleccion-tienda-online-hikashop

ventana-instalacion-hikashop

En una primera pantalla HikaShop nos muestra un asistente que permite la configuración de las principales opciones de la tienda. En nuestro caso dejaremos esta configuración para ir viéndola en este artículo y pulsaremos el botón omitir.

omitir-configuracion-previa

 

5 Panel de Control

boton-panel-control

panel-control-hikashop


Una vez instalado el componente Hikashop accederemos al mismo a través del menú Componentes > HikaShop donde tenemos disponible un panel con los iconos de acceso a todas las funciones de configuración de la tienda.

6 Configurando la Tienda

Tienda (datos de contacto)

En primer lugar deberemos de cumplimentar los datos de contacto de la tienda online.

Para ello, desde nuestro Panel de Control iremos al botón Configuración e introduciremos los datos de la dirección

direccion-tienda

 

Moneda

Desde el botón Monedas seleccionaremos la moneda correspondiente en que irán asignados los precios de nuestros productos. Por defecto vienen publicadas 2 monedas Eur y $. Haciendo clic en el nombre de la moneda , accederemos a la configuración del número de decimales y formatos específicos.

seleccion-tipo-moneda

Impuestos

Para configurar los los tipos impositivos aplicables sobre los productos que vamos a vender , iremos al botón Configuración en nuestro panel de administración y accederemos a la opción Impuestos en el menú de opciones.

impuestos


Dentro de la configuración de impuestos disponemos de varias opciones

Impuesto x defecto .: marcando esta opción por defecto se mostrará de forma automática en cada producto que demos de alta.
Tipo aplicable a: en este punto seleccionamos si la tasa aplicable será sobre la dirección de facturación ó la dirección de entrega en caso de no ser la misma
Zona .: aquí seleccionamos los países sobre los que se aplicará la tasa.
VAT Check .: Comprobación online o no , sobre si el cliente está dado de alta en el registro intracomunitario
Mostrar precios con tasas .: Esta opción nos ofrece la posibilidad o no, que los precios mostrados en la tienda incluyen por defecto el iva incluido.
Aplicar descuento .: En caso que el producto disponga de descuentos, desde esta opción podremos administrar la forma en que dicho descuento deseamos que sea aplicable, antes o después de impuestos

Gestión de impuestos

Para fijar el impuesto a aplicar, en la tasa que hemos configurado accederemos a nuestro menú del Panel de Control y dentro de la opción Sistema seleccionaremos Tasas.

item-menu-impuestos

Una vez dentro , a través de la opción Administrar Tasas daremos de alta cada tipo impositivo.

alta-nueva-tasa

asignacion-iva-21

Posteriormente asignaremos cada tasa a la zona geográfica donde se aplicará

alta-zona-geografica-impuesto

configuracion-tasa-pais


Una vez creado el impuesto deberemos de publicarlo

 

publicacion-tasa-impositiva

Métodos de envío

Hikashop dispone de un fantástico plugin para configurar los gastos de envío. El plugin métodos de envío dispone de todas las configuraciones necesarias para poder fijar los costes de envío en función de

- zona de entrega
- peso del producto
- unidades de producto
- coste mínimo
- coste variable en función de un %

Para activar un método de envío manual accederemos a dar de alta el plugin a través de nuestro menú del sistema , opción métodos de envío.

metodos-envio

Una vez hagamos clic en la opción “Nuevo” activamos en primer lugar el plugin y luego pulsamos sobre el para crear un Método de envío.

plugin-shipping

Una vez creado el método de envío tenemos disponible todas las configuraciones para aplicar los costes de transporte en función de zonas de entrega, pesos, tasas fijas, porcentajes, etc.

configura-metodos-envio

Una vez hemos configurado nuestro método de envío deberemos de publicarlo

activacion-metodo-envio

A partir de ahora, y durante el proceso de compra, los clientes dispondrán de la opción de solicitar la facturación con una dirección distinta a la entrega del producto. ( facturar a: entregar en )

Idioma

La gestión de las traducciones incluidas en la tienda ser realiza desde botón de Configuración y accediendo a la ficha Idiomas.

configura-idiomas

Esta sección de idiomas nos mostrará los idiomas disponibles tomando como base los idiomas que tenemos instalados en nuestra web. En nuestro caso el Inglés y el Español. Si nuestro idioma que queremos activar en la tienda, no está accesible, deberemos de configurar en primer lugar los idiomas en el gestor de extensiones de idiomas.

Pulsando el icono editar podemos acceder a las traducciones para realizar ajustes en el significado y significante de los textos.

editar-traducciones

Editando los ficheros con las traducciones de HikaShop también nos permitirá acceder a una actualización desde la web oficial de HikaShop

actualizacion-idioma


Formas de Pago

Las formas de pago que cubren todas las opciones en una tienda de comercio electrónico son; 

  • Transferencia
  • Contrareembolso
  • Tarjeta de Crédito
  • Paypal

Transferencia
Al final de la compra, le indicaremos a nuestro cliente los datos relativos a la cuenta bancaria en la que deberá efectuar la transferencia o ingreso, para finalizar la compra

Contrareembolso
Indicaremos que la compra se efectuará una vez la compañía de mensajería confirme la recepción del ingreso.

Tarjeta de crédito
Deberemos de configurar una pasarela de pagos que de acceso a la cuenta bancaria que deberemos de contratar con nuestra entidad financiera. Durante el proceso de pago, el cliente accede a una zona dispuesta por nuestra entidad financiera donde el cliente registra los datos de su tarjeta de crédito. Una vez validado el pago, el cliente será retornado a la tienda que le mostrará la confirmación del pedido.

PayPal
Similar al proceso de Tarjeta de Crédito, PayPal permite a los clientes hacer uso de su cuenta de PayPal para que este les represente durante el proceso de pago.

La configuración de cada uno de estos pagos la realizaremos accediendo a la opción Formas de pago en el menú superior Sistema dentro de nuestro Panel de Control.

fomas-de-pago

Los pasos a dar para configurar cada una de las formas de pago serán;

1. deberemos de activar cada uno de los plugins asociados a cada forma de pago
2. editaremos el plugin para acceder a su configuración. En el caso de la Tarjeta de Crédito debemos de conciliar la información con los representantes de la entidad financiera.
3. Sistema > configuración > Formas de pago, lista los distintos plugins que vamos instalando. Desde esta sección podremos también habilitarlos o desactivarlos

Para instalar cada plugin haremos clic en el botón Nuevo y seleccionaremos ;

activar-plugin-formas-pago

Pulsando el botón "nueva" nos mostrará un listado con todos los plugins disponibles para configurar las pasarelas de pago.

Transferencia Bancaria
El plugin que deberemos de habilitarla será; Bank Transfer

plugin-bank-transfer

Una vez habilitada, la editamos y guardamos con la configuración deseada.

 

Esta opción nos permitirá mostrarle al cliente , al finalizar la compra, los datos de la cuenta bancaria donde debe de realizar una transferencia para realizar la compra.

Servired ( Visa Tarjeta de Crédito )
Una vez habilitada, la editamos y guardamos con la configuración contrastada con nuestra entidad financiera.

plugin-pago-servired

 

PayPal

plugin-paypal

 

En nuestro ejemplo , crearemos una forma de pago por transferencia haciendo uso del plugin HikaShop bank transfer

plugin-transferencia-bancaria

Imágenes

Las categorías y productos disponen en su configuración de imágenes asociadas. Las dimensiones de estas imágenes, que se muestran cuando navegamos a través de las categorías o cuando seleccionamos la ficha de un producto , vienen configuradas por defecto en base a los valores introducidos dentro de la ficha de configuración general.

Para acceder a la configuración predeterminada que actuará sobre las imágenes que publiquemos junto a cada productos deberemos de acceder a través del botón Configuración en el Panel de Control y posteriormente seleccionar la opción Imágenes en el menú lateral.

configuracion-imagenes-producto

 

Imagen por defecto: imagen que será mostrada en todos aquellos productos / categorías que no dispongan de imagen asociada

Miniaturas , ancho, alto: dimensiones que presentarán los productos cuando sean mostrados en formato lista dentro de su categoría.

Ancho y Altura página de productos: dimensiones de la imagen que se mostrará enla ficha de producto

Ancho y altura de la imagen: El valor que pongamos aquí, será las dimensiones en las que se redimensionan las imágenes cuando las subamos a través de la ficha de producto. Si incluimos o modificamos uno de estos valores, para que surtan efecto, deberemos de volver a subir las imágenes. Si lo dejamos en blanco, las imágenes serán mostradas en sus dimensiones originales, cuando las seleccionemos dentro de la ficha de producto.

Cuando creamos un menú para mostrar las categorías ó listado de productos, las dimensiones y configuración de las imágenes también pueden ser personalizadas a través de las opciones de configuración que dispone el item de menú que hemos creado.

Por ejemplo, cuando creo un menú con un item que llama a “listado de categorías”, se crean unas fichas donde podré controlar los estilos que mostrarán las imágenes asociadas.

Opción de menú que llama al listado de categorías que existen en la tienda.

item-menu-categorias

Las opciones avanzadas nos permiten la personalización de estilos en que se mostrarán los productos o categorías.

opciones-item-categorias

Una vez editamos las opciones, podremos configurar las dimensiones en que se mostrarán las imágenes de forma personalizada para el item, en este caso de las Categorías.

parametros-div

Hasta ahora hemos estado viendo cómo configurar los parámetros más importantes que actuarán durante el proceso de compra en nuestra tienda online. Ahora es el momento de;


1.- Crear categorías que agruparán a nuestros productos
2.- Dar de alta cada productos y asignarle los datos relativos a precio, stock, imágenes, etc
3.- Activar la tienda en el Front-page de la web, con un Menú que liste los productos, un Módulo que permita el registro de usuarios y un Módulo que recoja los productos comprados, nuestro carrito de la compra.

7 Alta de Categorías y Productos

El alta de categorías y productos se realizará a través de los botones Productos y Categorías accesibles e nuestro panel de control. Tanto la sección de Productos y Categorias disponen de forma muy sencilla los formularios para recoger todos los datos asociados a una Ficha de Producto.

productos-y-categorias

En primer lugar crearemos las categorías que representan las agrupaciones en las que daremos de alta nuestros productos.

alta-categorias

nombre-categoria

Una vez hemos creado una categoría , creamos un productos para asignarlo a la misma. Para ello, haremos clic en el botón Productos de nuestro Panel de Control e introduciremos los datos relativos al producto a la vez que lo asignaremos a la categoría anteriormente creada.

 alta-producto

Asignamos la Categoría

asignacion-producto-categoria

Desde la ficha del producto fijamos el precio , observamos y comprobamos el cálculo del tipo impositivo que se corresponde con el anteriormente configurado.

alta-precio

Asignamos una imagen del producto

insertar-imagen-producto

 

8 Activando la Tienda

La publicación de la tienda precisará de los siguientes componentes y módulos.

a) Menú que permita la consulta de las categorías de los productos, así como el registro de usuarios y panel de usuarios para la consulta de pedidos realizados
b) Módulo carrito de la compra

Menú navegación categorías y artículos

Durante la instalación Hikashop crea un Menú cuyos ítems permiten entre otros, el acceso a las categorías de productos y listados, así como, a un formulario registro de usuario o el acceso al panel de control donde el cliente podrá consultar sus pedidos.

menu-hikashop

opciones-menu-hikashop

A través de nuestro gestor en Menús > Gestor de menús podemos publicar directamente el menú en un módulo de menú asignándole la posición seleccionada en nuestra plantilla web.

modulo-menu

En nuestro ejemplo estamos haciendo uso de la plantilla Protostar publicando el menú en la posición 7 que equivale a la columna derecha.

Carrito de la compra

El carrito de la compra es un módulo donde el usuario dispone de información sobre el estado de su compra. Por ejemplo si ha seleccionado un producto o no. Su función principal es, una vez el cliente ha seleccionado los productos, el proceder al proceso de identificación de usuario y pago.

A continuación crearemos el módulo HikaShop Cart Module desde nuestro Gestor de Módulos en nuestro panel de administración, en extensiones > gestión de módulos > nuevo Hikashop Cart Module

modulo-carrito-compra

Una vez guardado , HikaShop activará un enlace dentro del módulo, que nos permite acceder a su configuración de funciones :

opciones-cart-module

Entre las característica mas importantes destacamos;

- incluir un botón que permita eliminar el producto del carrito
- mostrar la imagen del producto
- mostrar votaciones que ha recibido el producto

Una vez publicado nuestro módulo menú junto con el módulo carrito de la compra la web dispone de todo lo necesario.

ejemplo-tienda-online

Una vez accedemos a la tienda, seleccionemos un producto y procedamos a realizar el pedido, HikaShp mostrará en una sola pantalla la dirección de facturación / envío si cumple los requisitos, las formas de pago disponibles en la tienda y una descripción completa del detalle de la factura con los impuestos que incluye y los costes de transporte.

detalle-factura-online

Una vez el cliente pulse el botón Finalizar, la tienda confirmará el pedido a través del mensaje configurado en la forma de pago , en nuestro caso transferencia bancaria.

confirmación-pedido-online

------

Joomla! to infinity and beyond

------

0
Marca tu Calendario
 

Comentarios

¿Ya està registrado? Ingresa Aquí
No hay comentarios por el momento. Sé el primero en enviar un comentario.

By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/