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.
- COMO TIENE QUE SER MI TIENDA
- HOSTING DEMO
- IDIOMAS
- INSTALACIÓN HIKASHOP
- PANEL DE CONTROL
- CONFIGURANDO LA TIENDA
- Tienda ( datos de contacto )
- Moneda
- Impuestos
- Gestión de impuestos
- Métodos de envío
- Idioma
- Formas de Pago
- Imágenes
- ALTA DE CATEGORÍAS Y PRODUCTOS
- ACTIVANDO LA TIENDA
- MENU CATEGORIAS Y PRODUCTOS
- 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
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
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.
5 Panel de Control
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
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.
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.
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.
Una vez dentro , a través de la opción Administrar Tasas daremos de alta cada tipo impositivo.
Posteriormente asignaremos cada tasa a la zona geográfica donde se aplicará
Una vez creado el impuesto deberemos de publicarlo
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.
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.
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.
Una vez hemos configurado nuestro método de envío deberemos de publicarlo
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.
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.
Editando los ficheros con las traducciones de HikaShop también nos permitirá acceder a una actualización desde la web oficial de HikaShop
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.
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 ;
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
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.
PayPal
En nuestro ejemplo , crearemos una forma de pago por transferencia haciendo uso del plugin HikaShop bank transfer
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.
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.
Las opciones avanzadas nos permiten la personalización de estilos en que se mostrarán los productos o categorías.
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.
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.
En primer lugar crearemos las categorías que representan las agrupaciones en las que daremos de alta nuestros productos.
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.
Asignamos la Categoría
Desde la ficha del producto fijamos el precio , observamos y comprobamos el cálculo del tipo impositivo que se corresponde con el anteriormente configurado.
Asignamos una imagen del 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.
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.
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
Una vez guardado , HikaShop activará un enlace dentro del módulo, que nos permite acceder a su configuración de funciones :
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.
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.
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.
------
Joomla! to infinity and beyond
------
Some articles published on the Joomla Community Magazine represent the personal opinion or experience of the Author on the specific topic and might not be aligned to the official position of the Joomla Project
By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/
Comentarios