Logo de La Isla de Internet Home | Mapa Web | Contacto
La EmpresaServiciosReferenciasSoporteTarifas
Soporte
FAQ

Guías de uso

Guía del webmaster

 

Guías de Uso

> Tienda Virtual


Gráfico diseñoGráfico diseño

 

En esta sección puedes consultar todas las opciones disponibles en el panel de control de la tienda virtual o dominio e-com de La Isla de Internet. Además, conocerás los conceptos necesarios para comenzar a crear tu catálogo de productos, desde los más básicos hasta los más avanzados: atributos de artículos, estructuración por familias, formularios compactos..., o cómo crear un botón o enlace para acceder desde tus páginas web a la tienda virtual, entre otras cosas.

Configuración de la aplicación

Los Dominios e-com asociados al plan comercial de alojamiento disponen de una amplia variedad de opciones de configuración a través del panel de control de la aplicación. Estas opciones permiten afinar el funcionamiento de la tienda virtual para que funcione según tus necesidades de forma totalmente automática. Las opciones están clasificadas en categorías.

Servidor

Permite configurar la página de entrada a la tienda, la dirección web donde residirán las imágenes del catálogo y el icono de entrada.

Aspecto

Aquí están las opciones que determinarán el aspecto de las páginas web generadas por la propia aplicación: cesta de la compra, formulario de registro, etc. Existen numerosas opciones, como la de añadir el logotipo de la empresa, los colores de fondo, texto y enlaces y la opción de que los botones de los formularios sean sustituidos por imágenes.

Además de estas opciones, las páginas generadas por la aplicación utilizan una hoja de estilos en cascada de nombre tienda.css, que se encuentra en la raíz del dominio contratado. La tabla en la que se exponen la cesta de la compra, el formulario de registro... utilizan estilos que puedes redefinir en la hoja de estilos nombrada, pudiendo configurar así el aspecto final (colores, tipo de letra, etc.) de cada página.

Comercio

En esta categoría se especifican los datos de la empresa vendedora y los atributos de los artículos (tallas, colores...), si los tienen.

Monetarios

Datos referidos a cobros y tipos de moneda. Se pueden configurar las formas de pago aceptables, que incluyen pago por tarjeta de crédito, cheque y contra reembolso y otras opciones.

Gastos de envío

Es posible limitar los países desde los que se aceptan pedidos, asignar una cantidad extra a cobrar a los pedidos que se distribuyan contra reembolso y asignar gastos de manipulación en función del país de destino. Por último, existe una tabla para asignar los gastos de envío en función de tres parámetros: país de destino, agencia de transporte (correos, Seur, DHL...) y cuantía del pedido. Teniendo en cuenta los datos que introduzcamos en estas tablas, la aplicación calculará automáticamente la cuantía de estos gastos para cada pedido realizado.

Descuentos

Es posible asignar porcentajes de descuento sobre el total del pedido en función de la cantidad de artículos comprados o del precio total de la compra. En esta sección se especifican los tramos de descuentos.

TPV virtual

Permite asignar el TPV virtual que prefieras como forma de pago para tarjetas de crédito.

Creación de un catálogo de productos

Para crear el catálogo de productos de tu tienda virtual, utiliza tu editor de páginas web favorito o bien encarga a un webmaster profesional el diseño y realización de tus páginas. Puedes hacer las páginas con total libertad, adaptando el diseño a tus necesidades específicas. Únicamente has de tener en cuenta estos detalles:

  • Las imágenes deben incorporarse como URL's absolutas, apuntando al directorio de imágenes que haya configurado en la sección servidor del panel de control de la aplicación.
  • Debes crear un formulario en cada página de producto, que es el que permitirá a los clientes comprar el producto. Este formulario debe incorporar un botón de compra para añadir el producto a la cesta y varios campos ocultos que informen de las características del producto.
  • Cuando publiques tu catálogo en el servidor, has de tener en cuenta que los archivos HTML del catálogo son los únicos que van al servidor FTP del dominio e-com, mientras que los archivos gráficos han de ser colocados en el directorio de imágenes del dominio web.
Veamos a continuación cada uno de estos puntos por separado.

Las imágenes con direcciones web absolutas

Tu aplicación de comercio electrónico (dominio e-com) residirá en una máquina separada a la del dominio contratado. En dicha máquina se copian sólo los archivos del catálogo con extensión HTML. Las imágenes (archivos .jpg) deben ir a un directorio del dominio contratado. Por ello, las imágenes deben incluirse en las páginas HTML del catálogo con una URL absoluta, apuntando al directorio de imágenes que especifique la configuración del servidor. Es decir, las marcas HTML de imagen deben ser del estilo:

<IMG SRC="http://www.dominio.com/images/miproducto.jpg">

donde http://www.dominio.com/images es el directorio de imágenes que debe ser especificado en la configuración de la aplicación (configuración de servidor dentro del panel de control).

El formulario de compra

Cada página de producto debe incluir un formulario, que es el que permitirá a los clientes pulsar el botón de comprar para añadir el artículo a la cesta de la compra. El formulario debe incluir al menos un botón de envío (que puede ser una imagen si lo configuras así en el panel de control de la aplicación), de forma que al pulsarlo se añade el artículo a la cesta de la compra y tres campos ocultos de información acerca del producto que se está vendiendo:

  • ITEM_ID representa un identificador único para el producto.
  • ITEM_NAME representa el nombre del producto.
  • ITEM_PRICE representa el precio.
Puedes crear el formulario de varias formas:
  • Directamente en el código HTML. Escribe las siguientes marcas:

    <form method="POST" action="!MYURL!">
    <input type="hidden" name="ITEM_ID" value="123">
    <input type="hidden" name="ITEM_NAME" value="nombre producto">
    <input type="hidden" name="ITEM_PRICE" value="5000">
    <input type="submit" value="COMPRAR">
    </form>

    Esto creará un formulario con un botón con el texto COMPRAR, aunque este texto puede ser personalizado. La propiedad "action" del formulario apunta a la macro !MYURL!, la cual será sustituida por la URL de la aplicación en cada momento. De esa forma no hay que preocuparse de cuál es la dirección web exacta de la aplicación. Los tres campos ocultos cuyos nombres comienzan por "item" son los que especifican las características del producto y sus valores deben ser adaptados a cada artículo en concreto. Puedes utilizar este código a modo de plantilla, pues se trata de un código HTML común que debe incluirse en todas las páginas del catálogo, cambiando las características propias de cada artículo (identificación, nombre y precio). Debes tener cuidado de que cada marca HTML del formulario de pedido esté en una línea diferente, tal y como aparece en el código de ejemplo.

  • Utilizando FrontPage. Selecciona la opción de menú insertar/formulario. Dejaúnicamente el botón de enviar y después selecciona las propiedades del formulario. Escoge "enviar a otra secuencia de comandos ISAPI, NSAPI, CGI...". Pulsa el botón opciones. En el cuadro de texto "acción" escribe !MYURL!, y en el método elige POST. Ahora pulsa el botón avanzadas para introducir los campos ocultos. En la ventana que sale podrás incorporar los campos ocultos pulsando el botón agregar. Saldrá una nueva ventana con dos campos: nombre y valor.

    1.- Pon como nombre ITEM_ID y como valor el identificador único del producto.
    2.- Vuelve a pulsar agregar para incorporar otra pareja nombre-valor. En este caso pon como nombre ITEM_NAME y como valor el nombre que deseas para el producto.
    3.- Vuelve a pulsar el botón agregar e incorpora como nombre ITEM_PRICE y como valor el precio unitario del artículo.

    Publicación del catálogo

    El catálogo debe publicarse separando las páginas HTML de las imágenes y cualesquiera otros archivos referenciados (audio, applets de java...). Las páginas HTML deben copiarse mediante FTP al directorio del servidor que les corresponda, según el idioma en el que estén. Cuando te conectes por FTP al servidor de tu dominio e-com, verás dos directorios: el esp o directorio para el catálogo en español y el ing o directorio para el catálogo en inglés. En cuanto a las imágenes, debes colocarlas en el directorio de tu dominio que hayas especificado anteriormente.

Temas avanzados sobre el catálogo

En esta sección se comentan las posibilidades adicionales de que dispones a la hora de crear el catálogo de productos de tu tienda virtual (dominio e-com).

Atributos de artículos

Es posible incorporar hasta tres atributos de artículos. Por atributo entendemos una característica del artículo que no influye en su precio, como por ejemplo el color, la talla, etc.. Si en tu caso el atributo debe influir en el precio, entonces es que se trata de una característica que define un artículo distinto y no de un atributo.

Por ejemplo, supongamos que decides vender camisetas de equipos de fútbol y que las tienes disponibles en tallas normal, mediana y grande. En primer lugar debes decidir si la talla influye en el precio. Si no influye, entonces la talla puede ser un atributo incorporado a cada camiseta. Si influye, entonces una camiseta de talla normal de determinado equipo debe ser un artículo distinto a la camiseta grande del mismo equipo. Al ser un artículo distinto podrás especificar un precio diferente.

Los atributos suelen tener una lista cerrada de valores aceptables. En nuestro ejemplo anterior, el atributo "talla" podría tener sólo tres valores (normal, mediana y grande). Por ello los atributos se suelen representar mediante listas desplegables de las que hay que seleccionar un valor. Aun así, esto no es obligatorio y si el atributo no es representable mediante una lista cerrada, pueden utilizarse también campos de texto en los que el cliente puede escribir libremente el valor del atributo.

Incorporar atributos a los artículos

Para incorporar un atributo debemos realizar dos acciones:

  • En el panel de control de configuración de la aplicación, sección "comercio", escribe los nombres de los atributos de tus artículos. Estos nombres se utilizarán como título de columna en la tabla de la cesta de la compra. Puedes especificar hasta tres atributos distintos.
  • En la página del catálogo escribe un campo con el nombre ITEM_OPTION1 para el primer atributo, ITEM_OPTION2 para el segundo e ITEM_OPTION3 para el tercero.
Por ejemplo, si en el panel de control has especificado que tus artículos tienen sólo un atributo que se llama "talla", para que aparezca éste en las páginas del catálogo y el cliente pueda seleccionarlo en una lista desplegable, hay que poner un código como éste:

<select name="ITEM_OPTION1">
<option>pequeña</option>
<option>mediana</option>
<option>grande</option>
</select>

Campo 'número de artículos'

Actualmente se tiende a facilitar el proceso de incorporación de un artículo a la cesta de la compra, haciendo que simplemente sea necesario pulsar un botón, sin necesidad de especificar cuántos artículos queremos comprar. Por ejemplo, si vendemos libros y sabemos que el 99% de nuestros compradores adquieren un único ejemplar de cada libro que compran, no parece conveniente obligarles a escribir "1" en un campo que indica el número de ejemplares del artículo. Además, el cliente siempre puede cambiar este número en la tabla de la cesta de la compra.

Sin embargo puede haber otros tipos de productos que se compren habitualmente por cantidades. En tales casos es imprescindible que en la página de catálogo del artículo figure un campo "número de artículos" a incorporar en la cesta. Para obtener un campo que sea interpretado por la aplicación como número de artículos, basta con que tenga el nombre "QTY". Por ejemplo, el código siguiente crea un campo de texto en el catálogo que indica la cantidad de artículos a incorporar a la cesta:

<input type="text" name="QTY">

Formulario compacto de compra

Si el número de artículos puestos a la venta es pequeño, quizá sea conveniente disponer de una única página donde estén todos los productos. De esa forma le evitaríamos al cliente la molestia de navegar por todas las páginas del catálogo. O tal vez nos pueda parecer una mejor estrategia comercial mostrarle todos los productos a la vez. La diferencia con el método estándar es que no es necesario navegar por las páginas del catálogo que nos muestran los artículos uno a uno, sino que se dispone de una especie de formulario de compra en el que aparecen todos juntos y podemos especificar la cantidad a comprar de cada uno de ellos.
Para conseguir un formulario compacto de compra basta con escribir los campos definitorios de todos los artículos en un único formulario. Por ejemplo, si sólo vendemos camisetas del Real Madrid y del FC Barcelona a 30 € y sin atributos, tendríamos un formulario compacto con el siguiente código:

<form method="POST" action="!MYURL!">
Real Madrid. Número de camisetas:
<input type="hidden" name="ITEM_ID" value="MADRID">
<input type="hidden" name="ITEM_NAME" value="Camiseta del Madrid">
<input type="hidden" name="ITEM_PRICE" value="30">
<input type="text" name="QTY" value="0">
<br>
F.C. Barcelona. Número de camisetas:
<input type="hidden" name="ITEM_ID" value="BARCA">
<input type="hidden" name="ITEM_NAME" value="Camiseta del Barcelona">
<input type="hidden" name="ITEM_PRICE" value="30">
<input type="text" name="QTY" value="0">
<br>
<input type="submit" value=" COMPRAR ">
</form>

El formulario es el mismo que se utiliza cuando realizamos el catálogo de un único producto, con la diferencia de que aquí escribimos los campos de múltiples artículos. Nótese que en los formularios compactos es imprescindible que exista el campo cantidad (de nombre QTY). De lo contrario se interpretaría que queremos comprar un ejemplar de cada artículo que aparezca en el formulario. Fijáte que a los campos cantidad se les asigna por defecto el valor 0. Este detalle también es importante: no obligues a tus clientes a especificar los artículos que no quieren comprar. Es mejor que cambien el 0 por el 1 en los artículos que deseen.

Enlaces entre páginas del catálogo

Aunque las páginas del catálogo sean archivos HTML, realmente no están visibles en internet por sí mismas, sino sólo a través de la aplicación de tienda virtual. Es decir, si por ejemplo tienes una página del catálogo llamada libro50.html, no existe ninguna dirección web del estilo a ecom.dominio.com/libro50.html para que se pueda llamar a la página del catálogo directamente. En su lugar debes llamar a la aplicación de tienda virtual con un parámetro especial, lo cual permitirá que se muestre la página del catálogo deseada. Ese parámetro tiene por nombre thispage y por valor el nombre de la página del catálogo deseada. En nuestro ejemplo, con un código como el siguiente se crearía un enlace a libro50.html:

<a href="!MYURL!?thispage=libro50.html">

La URL de la aplicación se especifica con la macro !MYURL! y se le pasa la variable thispage, con el valor de la página que se desea mostrar. Este sistema también funciona con el método POST de llamadas. Por ejemplo, el siguiente código creará un botón de formulario con el texto "Mostrar página", que al ser pulsado llamará a la página libro50.html:

<form method="POST" action="!MYURL!">
<input type="hidden" name="thispage" value="libro50.html">
<input type="submit" value="Mostrar página">
</form>

Organización de artículos por familias

Si tu catálogo de productos es amplio, tal vez desees incorporar una organización de artículos por familias, o algún sistema alternativo de navegación asistida. Nuestra aplicación de tienda virtual no impone limitaciones en uno u otro sentido. Por un lado no se obliga a crear estructuras organizativas que pudieran ser inconvenientes en algunos casos (como obligar a clasificar todos los artículos en familias y subfamilias). Por otro lado nada impide que estas clasificaciones se puedan crear a medida de cada cual.

Por ejemplo, supongamos que vende camisetas de equipos de fútbol de todo el mundo y que deseas clasificar los equipos por continentes. Para conseguir esto únicamente tienes que crear las páginas que necesite tu sitio web. Por ejemplo:

  • Creamos una página inicial de la tienda, que tenga enlaces a las páginas de Europa, América, África y Asia (de momento no tenemos camisetas de equipos de Oceanía ni de la Antártida). Estos enlaces se realizan en la forma vista en el apartado anterior, llamando a la aplicación con la variable thispage.
  • Creamos las páginas de los continentes. Cada una de estas páginas tendrá enlaces a los equipos de fútbol de ese continente de los cuales vendemos camisetas. De nuevo utilizaremos el método de thispage para enlazar con dichas páginas.
  • Creamos las páginas de los equipos en sí, que ya son las páginas de venta. En cada una de estas páginas vendemos una camiseta.
Como puedes ver, hemos creado una estructura en árbol con dos niveles: continente y equipo. Y para ello no ha sido necesario hacer nada especial, simplemente crear las páginas de la misma forma que las hubiéramos hecho para un sitio web normal. Las páginas de continentes son páginas normales del catálogo. La única diferencia es que no las utilizamos para vender sino para enlazar con otras.

Otra posibilidad alternativa o complementaria a la estructuración jerárquica de los artículos por familias son las barras de navegación lineales. Es decir, botones o enlaces que nos permitan ir al artículo siguiente o al anterior. La interpretación de cuál es el artículo anterior y el siguiente a uno dado depende enteramente de cada tienda. De nuevo, la implementación de esta barra de navegación es tan sencilla como realizar un enlace con tu editor de páginas web. Simplemente recuerda thispage.

Desde el formulario compacto en el que todos los artículos aparecen en la misma página, hasta los catálogos con múltiples niveles organizativos, nuestra aplicación de comercio electrónico se adapta a tu modelo de negocio y te permite crecer con él.

El punto de entrada a la tienda

En alguna página del sitio web principal de tu dominio contratado deberá estar el punto de entrada a la tienda, el cual podrá ser un enlace normal o bien un botón de formulario. Si deseas utilizar la característica bilingüe, deberá tener dos puntos de entrada, uno para cada idioma. Cuando crees el punto de entrada a la tienda debes saber también el nombre de la página de inicio de la tienda. Normalmente ésta página estará diseñada a modo de tabla de contenido, o bien tendrá algún medio de navegación por el catálogo: enlaces a categorías o a productos. El punto de entrada a la tienda se puede crear de varias formas.

Directamente en HTML

Para entrar a la tienda mediante un botón de formulario, utiliza un código como el siguiente (suponiendo que tu subdominio se llame ecom):

<form method="post" action="http://ecom.dominio.com/tienda.pl">
<input type="hidden" name="action" value="ENTER">
<input type="hidden" name="thispage" value="index.html">
<input type="submit" value="ENTRAR A LA TIENDA">
</form>

El texto en negrita se puede cambiar según las siguientes normas:

  • Si en lugar de tienda escribe shop, entrarás a la aplicación en inglés y se utilizarán las páginas del catálogo en inglés.
  • index.html es la primera página del catálogo a mostrar, pero puede cambiarse por el nombre que desees.
  • ENTRAR A LA TIENDA es el texto del botón.
Si deseas utilizar un enlace normal en lugar de un botón de formulario, entonces escribe un código como el siguiente:

<a href="http://ecom.dominio.com/tienda.pl?action=ENTER&thispage=index.html">
Entrar a la tienda</a>

Utilizando FrontPage

Si deseas crear un botón de formulario para entrar a la tienda, selecciona la opción de menú "insertar/formulario". Deja únicamente el botón de enviar, cuyo texto puedes modificar libremente, y después selecciona las propiedades del formulario. Escoge "enviar a otra secuencia de comandos ISAPI, NSAPI, CGI...". Pulsa el botón opciones:

  • En el cuadro de texto "Acción" escribe http://ecom.dominio.com/tienda.pl. Si deseas crear un botón para la tienda en inglés, escribe shop en lugar de tienda.
  • En el método elige POST.
Ahora pulsa el botón avanzadas para introducir los campos ocultos. En la ventana que sale podrás incorporar los campos ocultos pulsando el botón agregar. Saldrá una nueva ventana con dos campos: nombre y valor.
  • Escribe como nombre action y como valor enter.
  • Vuelve a pulsar agregar y ahora escribe como nombre thispage y como valor el nombre de la página del catálogo que es la entrada a la tienda, por ejemplo index.html.
Si deseas utilizar un enlace normal como punto de entrada, escribe para él una URL como la siguiente:

http://ecom.dominio.com/tienda.pl?action=ENTER&thispage=index.html



Política de privacidad - © La Isla de Internet S.L. 2012