Consejos útiles

Cesta para tienda online php

Pin
Send
Share
Send
Send


Primero debe crear un contenedor div, al que llamaremos ".shopping-cart".

En su interior, tendremos un encabezado y tres elementos que contendrán:

  • El botón "Eliminar" y el botón "Agregar a favoritos",
  • Imagen del producto
  • Nombre del producto y descripción
  • Botones con los que puede establecer la cantidad de bienes,
  • El precio final.

Asegúrese de incluir la fuente que usamos en esta guía al crear la cesta para el sitio en PHP. Ahora agregue los estilos básicos para la sección del cuerpo:

Después de eso, cree una canasta con dimensiones de 750 por 423 píxeles y establezca estilos para ella. Tenga en cuenta que usamos flexbox, por lo que establecemos la propiedad de visualización en flex y la dirección de flex en column. Debido a que la dirección flexible está configurada en fila de manera predeterminada:

Ahora cree el primer elemento de la cesta para el sitio en JavaScript, que será el nombre del producto. Para hacer esto, cambie el valor de altura a 60 píxeles y establezca algunos estilos básicos. Los siguientes tres artículos son artículos en la cesta. Para cada uno de ellos estableceremos la altura en 120 píxeles y mostraremos: flex:

Establecemos los estilos básicos. Ahora para configurar los estilos de los productos. Los primeros elementos son los botones Eliminar y Agregar a favoritos.

Siempre me gustó la animación del botón del corazón del tweet. Creo que se verá genial en el script de la cesta para el sitio:

Configuramos la clase is-active cuando se hace clic en el botón para animarla usando jQuery, pero más sobre eso en la siguiente sección:

El siguiente elemento del script de la cesta para el sitio HTML es la imagen del producto, para lo cual debe especificar un campo a la derecha de 50 píxeles:

A continuación, debe establecer estilos para la cantidad de bienes comprados: botones para aumentar y disminuir la cantidad. Primero, crearemos carritos de compras CSS para el sitio y luego lo haremos funcionar usando JavaScript:

Costo total de los bienes:

También implementamos la función de adaptabilidad de la cesta para el sitio HTML al agregar las siguientes líneas de código:

Eso es todo por CSS.

Javascript

Antes de hacer una cesta en el sitio, cree una animación de corazones que comenzará cuando el usuario haga clic en ellos:

Ahora haga que funcionen los botones para la cantidad de bienes comprados:

Y esta es nuestra versión final de la cesta de productos para el sitio:

¡La guía está completa! Espero que lo hayas disfrutado y hayas aprendido algo nuevo. Si tiene preguntas, ¡escríbalo en los comentarios!

Esta publicación es una traducción del artículo "Cómo crear una interfaz de usuario de carrito de compras usando CSS y JavaScript", preparado por el equipo amigable del proyecto de tecnología de Internet

Una canasta pequeña para una tienda en línea.

Por el término cesta pequeña, entiendo la interfaz de la presentación de productos diferidos para la compra, que, por regla general, se coloca en el encabezado del sitio.

Canasta pequeña sirve como un tipo de indicador para los visitantes, según el cual el usuario puede navegar en la cantidad de productos pendientes y el monto total del pedido.

A primera vista, parece que no hay nada más fácil que implementar tal cosa usando una sesión, pero hay una serie de dificultades. Por ejemplo, si configura una tarea: para que cuando el usuario regrese al sitio, la canasta se llene con los mismos productos que en el momento de su lanzamiento. En este caso, no puede simplemente administrar la sesión.

Hay varias formas de resolver este problema:

  1. Almacene el contenido de la cesta para cada usuario registrado en la base de datos
  2. Almacene el contenido de la cesta de cualquier usuario en las cookies del navegador

En la mayoría de los casos, la segunda opción es mejor que la primera, por lo que la desarrollaremos. Es decir Como resultado, nuestra canasta debería funcionar en conjunto sesión + cookies

Proceder, arrancar header.php e inserte la salida de nuestra cesta en el diseño:

Aquí tenemos una llamada al contenido de la matriz $ smal_cart , que estará disponible en la plantilla después de otros pasos.
Para una percepción conveniente, agregue a style.css estilos para la canasta:

Puede ver cómo ha cambiado la apariencia del sitio. Ahora profundicemos en la estructura del sistema y comencemos a crear los archivos necesarios.

Como el componente es pequeño cesta para tienda online no es una página separada, entonces no crearemos un controlador para ella, ya tenemos una representación externa en la plantilla general, por lo tanto, una vistas ella tampoco lo tendrá, pero modelo Todavía tengo que hacerlo.

En carpeta application models crear un archivo cart.php con el siguiente contenido:

clase Application_Models_Cart
<
función addToCart ($ id, $ count = 1)
<
$ _SESSION = $ _SESSION + $ count,
volver verdadero
>

función delFromCart ($ id, $ count = 1)

Este modelo actualizará la información sobre el contenido de la cesta. Por ahora, es suficiente para nosotros tener solo la función de agregar productos, pero en el futuro crearemos interfaces para las funciones de retirar productos y limpiar la canasta.

Todos los datos del producto de la cesta, estaremos almacenados en una matriz $ _SESIÓN en forma de matriz asociativa, cuyas claves serán ID productos, y el valor es el número de estos productos en la cesta. Tal minimalismo jugará en nuestras manos al transferir esta información a las cookies.

Ahora tenemos un modelo Application_Models_Cart, y es lógico suponer que debería llamarse desde algún lugar. Se llamará al modelo desde el controlador de directorio. ¿Por qué catalogar? Porque los enlaces ‘Al carro‘Hemos localizado en la página del catálogo vinculado a archivos modelo-controlador-vista relacionado con el componente del catálogo. Y también porque por ahora no iremos a la página de la canasta grande. Al hacer clic en estos enlaces, debemos permanecer en la página del catálogo, y la información en la cesta pequeña debe cambiar.

Hablando de enlaces, ‘Al carro‘Cambiemos el valor del atributo de inmediato href en vista de catálogo

Como resultado, obtenemos un enlace del formulario

http://lifeexampleshop.ru/catalog?in-cart-product->

Cuando un usuario hace clic en este enlace, sistema mvc transferir el control a aplicación /controllers/catalog.php. ¿Dónde insertamos ahora el código del controlador deseado para este evento?

class Application_Controllers_Catalog extiende Lib_BaseController
<
índice de función ()
<
si ($ _REQUEST)
<
$ cart = new Application_Models_Cart,
$ cart -> addToCart ($ _REQUEST),
Lib_SmalCart :: getInstance () -> setCartData (),
encabezado ('Ubicación: / catálogo'),
salir
>

$ model = new Application_Models_Catalog,
$ Items = $ model -> getList (),
$ this -> Items = $ Items,
>
>

Déjame explicarte lo que está sucediendo aquí. Primero verifica si se hizo clic y se pasó el enlace ID Producto a añadir. Si Obtener parámetro ID del producto en el carrito contiene ID , luego el control se transfiere al modelo, cuya función addToCart () , agrega el producto deseado a la cesta o solo aumenta su cantidad. Cadena Lib_SmalCart :: getInstance () -> setCartData () , requiere atención especial, yo poema adios Lo omitiré, imagina que simplemente no existe. En esta etapa, tenemos toda la información sobre el contenido de la cesta de la tienda en línea y se almacena en la sesión. Por lo tanto, podemos regresar con seguridad a la página del catálogo mediante una redirección:

Como todavía no sabemos qué Ajax y no podremos hacerlo sin volver a cargar la página, simplemente volvemos a la página del catálogo para ver los cambios en la cesta. (Sobre lo básico Ajax se puede leer aquí)

Podríamos detenernos en esto si no fuera por la tarea de guardar información cuando el usuario regrese después de cerrar el navegador. Es hora de volver a la línea que falta:

Vale la pena advertir que más adelante, las personas que tienen poco conocimiento de OOP, será difícil entender el código línea por línea, pero en el sentido general no habrá nada complicado. Lo que pasa en esta línea:

  1. Lib_SmalCart - interpretado por nuestro sistema como instanciando una clase Smalcartubicado en lib smalcart.php
  2. ::- obtener acceso a las funciones de clase
  3. La llamada de cualquier función de esta clase debe pasar por la función getInstance ()cuya tarea es eliminar todos los intentos repetidos posibles para crear una instancia de esta clase. Este método se llama Singleton.
  4. setCartData () - serializa los datos de la cesta de la sesión y los escribe en galleta.

Para una vista más clara, abra el archivo lib smalcart.php en él, traté de describir en detalle la esencia de cada función, por lo que no hay mucho que comentar. Lo único que hay que decir es que el método llama getCartData () de esta clase ocurre en el archivo function.php , que es otro separador de lógica del diseño y escribe en una variable $ smal_cart Toda la información necesaria para la salida.

Recuerde el primer paso en este artículo que estamos en header.php código insertado:

Entonces, ahora probablemente entiendas de dónde viene esta matriz $ smal_cart y puede notar que la cadena lógica de intercambio de información está cerrada.

Vale la pena señalar que con las cookies deshabilitadas, este mecanismo no funcionará, al igual que cualquier mecanismo que use sesiones, ya que el identificador de sesión para su correcto funcionamiento es almacenado y transmitido por las mismas cookies.

A todos aquellos que necesitan explicaciones más exhaustivas, les aconsejo que escriban preguntas en los comentarios o en correo electronico.

Hoy hemos agregado una gran cantidad de código que debe considerarse y digerirse antes de entrar en las siguientes partes de la tienda. Espero que no tengas dificultades para entender este artículo "Cesta para tienda online php" Si no te has registrado correo electronico o rss boletín, no dude en suscribirse. Puede descargar la lista de esta lección en:

Lea también artículos relacionados:

Para no perderse la publicación del próximo artículo, suscríbase al boletín por correo electrónico o RSS del blog.

¿Por qué es tan importante colocar correctamente una cesta de la tienda en línea?


Es difícil imaginar una tienda en línea sin una cesta. Es por eso que es necesario elaborarlo con cuidado, ya que la actividad comercial exitosa y, en consecuencia, las ganancias del propietario del sitio dependen directamente de ello. Una cesta de pedidos inconveniente e insuficientemente pensada en la tienda en línea causa muchos problemas: es difícil de encontrar, el comprador no entiende cómo usarla. Como resultado, el pedido puede fallar en la última etapa, cuando solo queda pagarlo.

El hombre en la página del carrito en la tienda en línea:

  • Comprueba y realiza un pedido.
  • ve el monto total de la compra,
  • analiza si compró todo de lo que planeó,
  • excluye algunos productos que se agregan espontáneamente.

En la página de la cesta, usted, como vendedor, podrá vender otra cosa, obligar al cliente a comprar bienes adicionales.

Conozca la analítica de su tienda en línea. Si los usuarios suelen tirar cestas, significa que abandonan el sitio en esta página sin pagar el pedido. Por lo tanto, las deficiencias deben buscarse aquí.

¿Cuál debería ser la canasta de compras perfecta en línea?

  1. Botón Añadir al carrito.

Este es el botón principal en la interfaz de la tienda y, por lo tanto, debe desarrollarlo de acuerdo con todas las reglas:

  • el botón debe ser simple, claro y notable,
  • debe llamarse "Comprar" o "Agregar al carrito" (el nombre debe reflejar la acción objetivo del visitante),
  • El botón también debe colocarse en la imagen ampliada en la tarjeta del producto.

Después de hacer clic en el botón Comprar, el cliente debe recibir algún tipo de comentario. Supongamos que una persona hace clic en este botón y cambia el nombre a "En la canasta". Puede dirigir inmediatamente al cliente a la cesta o mostrar un mensaje emergente sobre el movimiento del producto en ella.

Buen ejemplo: "Aliexpress" es una conocida tienda en línea. "Agregar al carrito": este es el nombre del botón Agregar en este sitio. Es simple, comprensible y notable incluso en una pantalla pequeña.


Mal ejemplo: intenta adivinar cómo pedir un pastel en el sitio pirogidomoy.ru. Los desarrolladores han proporcionado para esta opción el signo "+" al lado del pastel, sin embargo, el usuario puede no adivinarlo y abandonar el sitio.


A menudo, los diseñadores comienzan a mostrar creatividad donde no es necesario. La etiqueta de la cesta debe estar duplicada en casi todas las páginas de la tienda en línea, y es mejor si el cliente la ve de inmediato. Pero, por desgracia, los usuarios a menudo tienen que adivinar acertijos para encontrar el mismo icono.

Mal ejemplo: no hay etiqueta de cesta en la tienda online de Mebelny Solo hay la inscripción "Su pedido: mientras está vacío»En la parte superior de la pantalla.


En la cesta, en primer lugar, debe haber una lista de productos seleccionados, además, en una forma simple y conveniente para la percepción. Al estar en la página del producto, generalmente vemos bellas imágenes con una descripción clara. Pero en la cesta, los productos no se ven mejor. A menudo ni siquiera hay una imagen, solo el nombre está presente. Y si el visitante se sintió atraído por una hermosa foto del producto o recordó su compra solo por la imagen, entonces cuando va a la canasta puede pensar ... y cambiar de opinión para hacer un pedido.

Buen ejemplo: en la cesta de la tienda en línea de Logotype, el producto se muestra junto con la foto, y el cliente recuerda fácilmente lo que agregó.


Mal ejemplo: solo se muestran los nombres de los productos en la cesta. Si una persona agregó primero todo lo que le interesaba, luego eligió lo que necesitaba, entonces tendrá dificultades para hacer un pedido.


La canasta debe estar diseñada de tal manera que una persona pueda cambiar fácilmente a la tarjeta del producto seleccionado: es posible que no recuerde lo que estaba viendo antes o que no quiera aclarar las características del producto.

También es importante que el cliente tenga la oportunidad de retirar los bienes. Esta función se realiza mediante el botón "Eliminar" al lado de cada producto. Además, este elemento debe excluir la posibilidad de hacer clic accidentalmente.

Buen ejemplo: el visitante puede ver el producto y eliminarlo de la cesta con un solo clic. Al mismo tiempo, el botón "Eliminar", aunque pequeño, es bastante notable, y la probabilidad de que una persona lo presione inadvertidamente se reduce a casi cero.


Mal ejemplo: el producto se elimina de la cesta de la tienda en línea, pero es posible que los usuarios no lo sepan, ya que el botón en la parte superior de la pantalla se encuentra sin éxito. Es difícil entender qué funciones realiza y qué producto excluye.


  1. Información adicional en la cesta.

En la cesta, debe colocar enlaces a la información que el cliente necesitará antes de comprar: cómo pagar los productos, cómo se realizan la entrega y la devolución, etc. Este es un requisito previo. Si lo sigue, los compradores potenciales no tendrán dudas innecesarias al realizar un pedido.

Además, todo el procedimiento para realizar un pedido en el sitio debe ser claro para el cliente, desde el principio hasta su finalización exitosa.

Buen ejemplo: todas las etapas de la entrega del producto son visibles, los enlaces a la información sobre el soporte de pedidos, las opciones de entrega se publican, se indican las garantías del vendedor para el intercambio o devolución de bienes. Gracias a la información completa, el comprador confía mucho más en la tienda.


Al seguir estas pautas, hará que el carrito de compras sea claro y fácil para los visitantes. Esto aumentará su lealtad a la tienda en línea y su negocio crecerá con más éxito.

10 reglas para crear una cesta de la tienda en línea

  1. El carrito es fácil de encontrar.

A continuación, veremos cómo hacer una cesta de la tienda en línea. Esto es parte de la interfaz del sitio que es familiar para muchos usuarios. Por lo tanto, no intente impresionar a los clientes con soluciones de diseño no estándar. Deben entender de inmediato que se trata de una canasta de pedidos en la tienda en línea: el ícono del carrito, la bolsa de compras, la cesta de mano. El símbolo debe hacer que el usuario se asocie con una tienda real.

Se debe proporcionar acceso a la cesta desde cualquier página del sitio. Este elemento debe ubicarse en un lugar familiar, generalmente se elige la esquina superior derecha.


No es necesario mostrar un icono de banner. En combinación con otros banners e imágenes de productos en la página, el ícono se volverá invisible (estamos hablando del hecho comprobado de “ceguera al banner), especialmente si se encuentra en un lugar no estándar, por ejemplo:


Al mirar la mini canasta, el comprador debe comprender qué tipo de bienes y por la cantidad que ya le ha agregado. El estado de la cesta ciertamente debe estar sincronizado con las acciones del usuario en modo en línea. Es decir, si agrega o elimina los productos, el precio de compra y el número de artículos deberían cambiar en la cesta de compra después del recálculo automático.

¿Qué debe reflejarse si la cesta está vacía? En muchas tiendas en línea, se indica "La cesta está vacía" o "En su cesta hay 0 productos por 0 rublos", y eso es todo. A veces, una cesta vacía no es visible en absoluto, y este es un gran error de los desarrolladores.

La situación más común es cuando un cliente visita el sitio por primera vez y aún no ha elegido nada. Se debe utilizar en beneficio de la tienda en línea. Esta es una de las opciones: colocar un texto con un mensaje sobre un regalo que ya está en la canasta. Se proporciona un regalo para el cliente por cada compra. Muestras de productos, recuerdos con símbolos de la compañía o servicios pueden servir como presentación.

Otra forma: al lado de una cesta vacía, coloque un anuncio que indique que solo hoy una persona recibe un descuento en el pedido o, en el caso de la compra, los bienes se le entregarán de forma gratuita. Si no desea ofrecer descuentos y gastar dinero en regalos, publique un enlace a las instrucciones "Cómo hacer un pedido".

Artículos recomendados sobre este tema:

  1. La página del carrito es clara y simple.

En la página principal separada de la cesta se debe indicar información completa para el visitante sobre sus compras y una amplia funcionalidad para cambiar el pedido.


Es mejor diseñar la página de la cesta utilizando la estructura de la tabla: es más fácil percibir el mismo tipo de información sobre productos agregados. La representación visual de la canasta debe ser lo más simple posible y, por lo tanto, vale la pena usar fuentes típicas y elementos simples.

Cada nuevo encabezado debe estar visualmente separado del anterior. Возле каждого товара в корзине нужно размещать его фото, название и ссылку на страницу с описанием (с открытием в соседней вкладке браузера).

Si el cliente desea ajustar su pedido, debe hacerlo sin problemas, sin devolver los productos al catálogo. Esto ahorra tiempo al visitante y es más probable que realice una compra. Asegúrese de que el usuario pueda eliminar con calma este o aquel producto de la cesta, agregar o reducir la cantidad de artículos idénticos y cambiar varias características, por ejemplo, el color. Al realizar cambios, la página debe actualizarse sin volver a cargarla, y el costo del pedido y la entrega se volverán a calcular automáticamente.

Damos un ejemplo del diseño de la cesta en una tienda en línea para una mejor comprensión de la información en este párrafo.


  • Tenga en cuenta que en la cesta se propone comprar productos, de modo que se obtenga el importe del pedido para la entrega de mensajería gratuita.
  • Es posible cambiar la posición agregada: elija un color, tamaño, cantidad diferente.
  • Hay una foto del producto y un enlace a su descripción.
  • Es posible eliminar las mercancías.

La canasta utiliza una estructura tabular simple: todos los artículos están separados entre sí por una delgada línea.

  1. Sin recargos ocultos.

Los estudios muestran que, con mayor frecuencia, los usuarios no completan los pedidos debido a que en la etapa final de la compra aparecen inesperadamente costos adicionales. El principal problema, como regla, es el precio de entrega. Para que el visitante no pase el tiempo pasando por las etapas del pedido y no se sienta decepcionado al final, todos los costos adicionales que excedan el precio de compra deben informarse lo antes posible, a más tardar en la página del carrito. Y mejor, incluso antes, cuando una persona solo elige bienes.

Todo el mundo ama la entrega gratuita, y a menudo es ella quien se convierte en un factor decisivo al elegir una tienda.

Además, el cliente puede estar decepcionado y negarse a comprar debido a que la entrega será más larga de lo esperado, o porque el producto deseado no está disponible (además, fue posible agregarlo a la cesta, pero al momento del pago resultó que los bienes no están en stock). Notifique al cliente sobre la disponibilidad y los tiempos de entrega estimados antes de que el cliente comience a realizar el pedido.

  1. Navegación clara al realizar un pedido.

Por lo general, un pedido en una tienda en línea se puede hacer de dos maneras:

  • cumplir las condiciones de una instrucción paso a paso que consta de varias páginas,
  • complete el formulario de pedido en una página larga, donde debe ingresar los detalles necesarios para el pago y la dirección.


Puede usar ambos métodos, pero el primero es más simple y más comprensible. Probablemente se esté preguntando: ¿cuántos pasos en el proceso de pago están mejor previstos? Los hermanos Eisenberg, expertos en el campo de TI, creen que si todas las etapas son convenientes y están bien desarrolladas, su número no importa. Pero corriendo a los extremos, haciendo tantos pasos, no recomendamos. La cantidad óptima es de tres a cuatro.

Si se utilizan instrucciones paso a paso, el comprador debe ver el estado actual de lo que ya se ha hecho y lo que queda por hacer. Debe ser conveniente para el cliente de su tienda cancelar las acciones anteriores y cambiar la información en cualquier momento.

Recomendamos agregar un botón para el siguiente paso en cada etapa del pedido para que el proceso de compra sea completamente transparente para el cliente. Intente no usar palabras comunes para el nombre de los botones, por ejemplo, "Siguiente". Una persona debe comprender claramente qué hacer a continuación y, por lo tanto, es mejor nombrar los botones específicamente, por ejemplo, "Ir al pago". El botón para pasar al siguiente paso siempre debe colocarse a la derecha, y el botón de retorno debe estar a la izquierda.

  1. Ofrezca realizar un pedido por teléfono.

Le recomendamos que coloque el número de teléfono del administrador en un lugar visible en la página de pago junto con la oferta para realizar un pedido a través de él (por ejemplo, mediante una devolución de llamada). Los visitantes comenzarán a comprar con más frecuencia y usted aumentará sus ventas. Al realizar una compra, el cliente de una forma u otra plantea varias preguntas, por ejemplo, ¿completó el formulario correctamente? ¿Su pedido incluso fue procesado? Si una persona confía en la tienda y no tiene dudas de que si surge un problema, lo ayudarán a resolverlo, hará una compra sin dudarlo.

  1. Mantener el estado actual de la canasta.

Muchos no realizan compras en las tiendas en línea sobre la marcha, prefieren echar un vistazo más de cerca, preguntar el precio, seleccionar los artículos que les gustan en la cesta y usarlos como "Favoritos".


Al mismo tiempo, sin realizar una compra por primera vez, estos mismos clientes regresan a la tienda después de un tiempo y se sienten decepcionados al ver que los productos diferidos no se guardaron. La gente puede regresar en unos pocos días y unos pocos meses. Por lo tanto, recomendamos que el período de almacenamiento de las cestas de cookies sea lo más largo posible.

Los estudios muestran que si el proceso de compra se ve interrumpido por un mensaje sobre el registro obligatorio, en cada uno de los cuatro casos, el cliente abandona el sitio sin comprar nada. Por qué Alguien no quiere crear cuentas regulares, recordar nombres de usuario y contraseñas de ellos, alguien no quiere proporcionar información personal una vez más, etc.

Que hacer Ofrezca al cliente que realice un pedido de varias maneras: regístrese para comprar productos con descuento en el futuro y utilice bonos, o pague rápidamente los productos con un solo clic, dejando solo su teléfono y discutiendo todas las condiciones del pedido solo con el gerente.


Si una persona decidió hacer un pedido sin registrarse, luego de haber recibido el pago y notificar al cliente la recepción del pedido para su procesamiento, debe invitarlo a registrarse para recibir bonos en el futuro. Es decir, el cliente puede comprar fácilmente el producto que le gusta, mientras que la probabilidad de que se registre (estar de buen humor después de una compra exitosa) es muy alta.

También le recomendamos que brinde la oportunidad de registrarse en la tienda a través de las redes sociales. De las redes sociales recibirá ciertos datos sobre una persona, lo que posteriormente simplificará el llenado de formularios.

  1. Optimice los formularios para completar.

No debería haber demasiados campos. Su cantidad debe ser la mínima necesaria para realizar una compra. No escuche a los vendedores y no organice una encuesta interminable que consiste en preguntas como: "¿Te gusta el rango?", "¿Está satisfecho con el nuevo diseño del sitio?"

Si la información se puede indicar en un campo (por ejemplo, apellido, primer nombre, segundo nombre con dirección), hágalo sin dividirlo en varias líneas.

Al ingresar datos del cliente, no debe haber requisitos muy complejos. No solicite indicar el teléfono solo con espacios o sin el número 8. Deje que las personas indiquen el número de teléfono como están acostumbrados, y el sistema lo convertirá al formato deseado.

Todos están molestos por la necesidad de desmarcar las casillas de verificación llenas automáticamente, por ejemplo, dar su consentimiento para pagar servicios adicionales o recibir noticias por correo electrónico. Las casillas de verificación rellenadas automáticamente, por supuesto, aumentarán el número de suscriptores del boletín. ¿Pero serán leales a tu tienda? Apenas

Un ejemplo vívido: en el sitio web Avito.ru, el visitante ya ha marcado la compra de servicios adicionales, y para colocar un anuncio de forma gratuita, una persona se ve obligada a eliminarlos de tres nombres:


A menudo, en las tiendas en línea existe un servicio de garantía impuesto y otros servicios. El cliente debe decidir qué elegir y en qué gastar dinero.

  1. Da las gracias al usuario. Y no solo eso.

Entonces, el cliente pasó por todas las etapas de hacer un pedido y presionó el botón "Pagar". Aquí, la tienda en línea debe mostrar que todo el proceso de hacer una compra está controlado y que el pago no ha ido "a ninguna parte".

La tienda en línea debe dar retroalimentación al cliente. Después de recibir el pago, debe informar inmediatamente al visitante por correo electrónico que se ha recibido el dinero y que se está procesando el pedido. Si la persona solo dejó el teléfono, notifíquele la hora de la llamada y verifique que los gerentes lo hayan contactado. El cliente confiará en la tienda si los gerentes le devuelven la llamada 10 segundos después de enviarle un mensaje sobre la compra. Las tiendas en línea siempre se recomiendan a amigos y conocidos.

Los 5 artículos principales que serán útiles para cada líder:

¿Qué tan importante es la actualización automática de la cantidad de productos en la cesta de la tienda en línea?

Parece que cambiar la cantidad de productos en la cesta de una tienda en línea agregando nuevos o eliminando artículos innecesarios es fácil. Pero un análisis del proceso de compra mostró que varios elementos críticos de implementación puede convertir un evento simple en un problema real.

Si requiere que los clientes hagan clic, por ejemplo, en el botón o en el enlace Actualizar para guardar los cambios, es posible que algunos no los guarden. Alguien no entenderá que necesita informar a la tienda sobre su elección dos veces (es decir, ingrese un nuevo número en el campo con la cantidad y luego haga clic en el botón "Actualizar"), y alguien simplemente no notará este botón. Como resultado, algunos clientes pasan a nuevas tareas sin editar la cantidad de productos.

Por lo tanto, es importante que estos campos se actualicen automáticamente, lo que no se proporciona para el 56 por ciento de las tiendas en línea. Es necesario que los cambios realizados por los usuarios se tengan en cuenta de inmediato, para que la información se actualice enmismo segundo, sin clics adicionales fuera de los campos para confirmar.

Actualizar la cantidad de productos después de que un visitante hizo clic en un objeto fuera del campo (evento OnBlur) no es la mejor solución. Esto no tiene en cuenta el comportamiento típico de los usuarios que ingresan inmediatamente un nuevo número y hacen clic en el botón "Siguiente" o activan una acción para otra posición en la lista ("Guardar en marcadores", "Eliminar", etc.).

Y, por último, para indicar la cantidad de productos pendientes, puede usar no solo los campos para ingresar números, sino también listas desplegables.

Qué más considerar al crear una cesta de la tienda en línea


Invitación para realizar una compra:

  • El botón de compra al lado del producto debe indicar la acción objetivo, por ejemplo, "pedido", "comprar", etc. Si contiene un texto como "Quiero", esto puede considerarse como un simple deseo, pero no una compra.
  • Si no hay texto en el botón de compra, debe ser grande, visible, con un ícono comprensible.
  • El botón Comprar debe colocarse en todas las páginas del sitio donde se presenta el producto, tanto en bloques con una breve descripción (el catálogo en sí) como cuando se navega a la página del producto.
  • Si el visitante desea agregar productos a la cesta que ya están en él, entonces el nombre del botón Comprar debería cambiar a "Los productos ya están en la cesta".

  • El usuario debe estar bien orientado en la canasta misma. Digamos que quiere aumentar la cantidad de productos que contiene. En este caso, vale la pena proporcionar los botones "+" y "-".
  • El cliente debe tener la oportunidad en cualquier momento de regresar del mecanismo de pedido directamente a la tienda en línea.
  • El botón de retroceso debe ser brillante y visible.
  • Una excelente solución sería indicar directamente en la cesta el costo de la entrega.
  • Después de realizar una compra, las buenas tiendas en línea agradecen cortésmente a sus clientes.

  • Es mejor si la información sobre la devolución de compras se duplicará durante el proceso de pedido.
  • Una función visual relevante será la demostración de productos relacionados y la capacidad de posponer su producto favorito.
  • Si una persona no compró los productos ayer y regresó a la tienda hoy, entonces los productos deben guardarse en la cesta.

Cree tres niveles de compra en complejidad en la página de pago:

  • Rápido - el cliente ingresa una dirección de correo electrónico o número de teléfono y discute con el consultor todas las demás condiciones del pedido. Si es posible comprar con un solo clic, el visitante no debería tener dificultades para ingresar información innecesaria. Por ejemplo, una persona puede seleccionar un solo producto, hacer clic en "Comprar con un clic" y, por lo tanto, ir automáticamente al formulario de pedido.
  • Nuevo cliente - la tienda ofrece al cliente que se registre y luego muestra los campos de entrada: apellido, nombre, segundo nombre, dirección, correo electrónico, número de teléfono, métodos de pago y entrega.
  • Usuario registrado - el cliente inicia sesión con su contraseña de inicio de sesión, y toda la información sobre él se inserta automáticamente en el formulario.

Si el gerente de la tienda no responde durante mucho tiempo, el comprador considera esto como una actitud irrespetuosa. Por lo tanto, el gerente debe conocer las compras al instante para contactar a los clientes lo antes posible y confirmar sus pedidos.

Instrucciones paso a paso para crear una simple canasta de compras en línea

Las cestas de las tiendas en línea son diferentes. Pero le diremos cómo crear un módulo clásico para una tienda en línea basada en PHP. Para colocar un acceso directo, generalmente eligen un lugar destacado: el encabezado del sitio en la parte superior derecha. Una pequeña canasta de pedidos en la tienda en línea es un tipo de indicador que muestra cuántos productos va a comprar con qué costo total.

Este es el algoritmo paso a paso para crear una cesta para una tienda en línea:

  1. Abra el archivo llamado header.php en la carpeta raíz de su sitio. Luego inserte los valores básicos de la futura canasta en el diseño:


Utiliza el relleno de la matriz $ smal_cart. Estará disponible en la plantilla principal de la tienda en línea después de un tiempo. Para hacer esto, debe realizar algunos procedimientos más.

Para hacer que la cesta de la tienda en línea se vea simple y armoniosa, agregue los siguientes estilos al archivo style.css:


A continuación, ya puede ver los cambios externos en el diseño de la tienda en línea.

Ahora necesita sumergirse en la estructura del sistema de la canasta. Dado que el módulo de carrito no es una página separada, no puede crear un controlador adicional para él. El diseño ya está en la plantilla y, por lo tanto, no desarrollamos vistas. Solo necesita resolver el parámetro del modelo.

Para hacer esto, abra la carpeta de la aplicación y luego los modelos. A continuación, cree un archivo llamado cart.php y agregue los siguientes datos:


Este modelo le permitirá actualizar el contenido de los contenidos del módulo de la cesta. Hasta ahora, puede limitarse solo a las funciones de agregar productos, pero en el futuro debe crear interfaces especiales que le permitan eliminar un producto específico o vaciar completamente la cesta.

Los datos del producto en la cesta estarán contenidos en la matriz $ _SESSION. Es una matriz asociativa, en la que las claves son la ID de los productos, y el valor es el número de productos pendientes. El uso de una estrategia minimalista simplificará el proceso de transferencia de datos a las cookies.

Tenemos una base de datos Application_Models_Cart lista para usar. Ahora necesita ser activado.

Antes de eso, realice cambios en el atributo href para que el módulo funcione más correctamente:


Cuando hace clic en él, el sistema mvc redirigirá el manual a la sección application / controllers / catalog.php. Aquí también debe hacer pequeños cambios.

Pegue el siguiente código de cesta para la tienda en línea para el escenario que necesitamos:


En principio, esto se puede terminar. Tomamos la base del módulo de carrito de compras en línea. Lo único: se debe prestar especial atención a la línea Lib_SmalCart :: getInstance () -> setCartData () especificada en el código indicado anteriormente. Las personas con poco conocimiento de OOP no entenderán exactamente cuál fue su papel principal en la estructura general. Por lo tanto, analicemos cada elemento del código:

Lib_SmalCart le permite desarrollar un módulo de la clase SmalCart en la sección lib,

getInstance () - Con este comando puede llamar a cada función individual. Su objetivo principal es descartar intentos repetidos de crear una instancia de la misma clase,

setCartData () Ayuda a organizar la información del producto desde la cesta y registrar la sesión en cookies. Esto garantiza a los usuarios la preservación de la información sobre el pedido, incluso si accidentalmente van a otros sitios o incluso cierran la página del navegador.

Para facilitarle el trabajo de la cesta de la tienda en línea, abra nuevamente el archivo en la sección lib llamada smalcart.php. Después de las medidas tomadas anteriormente, todos los puntos de contacto principales serán más comprensibles y lógicos. Cabe señalar que cuando las cookies están desactivadas, el mecanismo no funcionará como debería. Esto se explica por el hecho de que estas cookies solo envían el identificador de sesión.

17 errores que hacen que las cestas de compras en línea estén vacías

  • Mucha información adicional sobre el producto en la cesta.

Intente no cargar la cesta de la tienda en línea con información innecesaria para el cliente, indicando los artículos y las especificaciones detalladas del producto. Es suficiente limitarnos a enlaces a una tarjeta de producto con una descripción detallada. Es mejor evitar los números de parte, especialmente los largos. Pero hay excepciones, por ejemplo, la recogida, cuando los productos según el artículo deben pedirse en el punto de entrega.

  • Incapacidad para volver a comprar desde el carrito.

El botón "Volver a comprar" es necesario, aunque solo sea porque alienta al usuario a continuar comprando.


  • El icono de la papelera se encuentra en una ubicación no estándar.

Al colocar el icono no en un lugar visible, en la parte superior, como todos están acostumbrados, sino en los rincones ocultos del sitio, los propietarios de las tiendas en línea cometen un grave error. Algunos no tienen este icono en absoluto.


  • Redacción incomprensible y apariencia de la motivación para comprar.

Los desarrolladores se equivocan cuando usan imágenes con una canasta, una caja, un animal, etc., y no un botón:

  1. "A la canasta"
  2. Comprar
  3. "Haga un pedido".

No siempre está claro para los usuarios que al hacer clic en el ícono de la cesta, especialmente en uno pequeño e ilegible, se agregará un producto. También es mejor desde la posición de los motores de búsqueda si el botón se llama comercialmente: "Comprar" o "Agregar al carrito".


  • No puede agregar un artículo al carrito desde la lista general de productos.

Клиент может добавить товар, только если перейдет на его карточку. Обычно так делают интернет-магазины, которые продают дорогостоящую продукцию, требующую детального изучения и ввода дополнительных данных. Такой подход предотвращает спонтанные покупки. Плюс это или минус – решать вам.

  • После добавления товара в корзину не происходит никаких видимых изменений.

После нажатия кнопка не меняется, например, на «В корзине» – ни цветом, ни содержанием, или же изменения незначительные (как правило, в корзине отображается количество товаров и их общая сумма). Haga que el cliente pueda entrar de inmediato en la cesta y, a partir de ahí, siga los enlaces para volver a comprar.

  • Al hacer doble clic en el botón "Comprar", el producto se cancela o se aumenta su cantidad.

Una persona puede presionar accidentalmente un botón y no notar que el producto ha desaparecido de la cesta, o no prestar atención a que su cantidad ha aumentado en el pedido; en una palabra, es mejor rechazar esta función.

  • Después de la limpieza, la cesta se vacía por completo.

La cesta de pedidos en la tienda en línea en el sentido literal se "borra", las instrucciones de acción, las condiciones, etc. desaparecen. Después de la limpieza (posiblemente al azar), el cliente nuevamente necesita instrucciones. Una persona no debe volver a cargar las páginas y buscar nuevamente una forma de agregar productos al pedido. Motivarlo a la acción!

  • Mensajes de coloración emocional negativa en la canasta.


Las personas están asustadas por los mensajes negativos, por ejemplo, "Tienes 0 compras" o "No tienes cupones de descuento". Una canasta vacía debe alentar la acción y no informar la ausencia de nada.

  • No puede cambiar la cantidad en un carrito.

El cliente no entiende qué botón presionar para cambiar la cantidad de bienes. A veces, tal acción no se proporciona en absoluto. Debe usar los iconos estándar "+" o "-" o las flechas "↑ arriba" y "↓ abajo".

  • No hay ningún enlace a la tarjeta del producto en la cesta.

El cliente se ve obligado a regresar a la tienda en línea y buscar el producto para volver a ver sus características.

  • Demasiado notable

    Instrucciones paso a paso para crear una canasta

    Existen diferentes versiones de canastas, sin embargo, consideraremos el desarrollo de un módulo clásico para tiendas en línea creado sobre la base de PHP. Como regla general, se coloca en un lugar visible, en el encabezado del sitio en la esquina superior derecha. Una canasta pequeña es un tipo de indicador que muestra cuántos productos y cuánto va a comprar.

    Entonces, paso a paso las instrucciones sobre cómo crear una canasta para una tienda en línea:

    1. Abra un archivo llamado header.php. Se encuentra en la carpeta raíz de su sitio. Luego, inserte los valores básicos de nuestra futura canasta en el diseño:

    En este caso, se utiliza el contenido de la matriz $ smal_cart. Estará disponible en la plantilla principal de la tienda en línea un poco más tarde. Esto requerirá una serie de acciones específicas.

    2. Para que la cesta se vea simple y armoniosa, agregue los siguientes estilos al archivo style.css:

    Después de eso, ya puede ver los cambios visuales en la apariencia de la tienda en línea.

    3. Ahora necesitamos profundizar en la estructura del sistema de la canasta. Debido al hecho de que el módulo del carrito no es una página separada, no puede crear un controlador adicional para él. La apariencia ya se muestra en la plantilla, por lo que no hacemos el desarrollo de vistas. Nos restringimos al estudio del parámetro modelo.

    Para hacer esto, vaya a la carpeta de la aplicación y luego en los modelos. Después de eso, crea un archivo llamado cart.php. Agregue el siguiente contenido:

    Curso gratuito de programación PHP

    Aprenda el curso y aprenda a crear un sitio dinámico en PHP y MySQL desde cero utilizando el modelo MVC

    En el curso de 39 lecciones | 15 horas de video | códigos fuente para cada lección

    Este modelo le permite actualizar los datos contenidos en el contenido del módulo del carrito. Hasta ahora, solo las funciones de agregar productos son suficientes, sin embargo, para el futuro es necesario desarrollar interfaces especiales para que sea posible eliminar un producto específico o vaciar toda la cesta.

    La información del producto en la cesta estará contenida en la matriz $ _SESSION. Es una matriz asociativa en la que las claves son las ID de los productos, y el valor es el número de productos agregados a la cesta. Una estrategia minimalista simplificará el proceso de transferencia de información a las cookies.

    Por lo tanto, tenemos una base de datos Application_Models_Cart lista para usar. Ahora necesitas activarlo.

    4. Antes de eso, hagamos cambios en el atributo href para que el módulo funcione correctamente:

    Ahora el enlace se verá así: http: //example.site.ru/catalog? In-cart-product->

    Cuando hace clic en este enlace, el sistema mvc redirigirá el manual a la sección application / controllers / catalog.php. A su vez, aquí también haremos modificaciones menores.

    5. Pegue el siguiente código para el script que necesitamos:

    En principio, esto se puede detener. La base de nuestro módulo de cesta para la tienda en línea está lista. Lo único es: centrémonos en la línea Lib_SmalCart :: getInstance () -> setCartData (), que se especificó en el código anterior, por separado. Las personas que tienen poca experiencia en OOP obviamente no entenderán cuál es su papel principal en la estructura general, así que analicemos cada código individual:

    Lib_SmalCart: le permite crear un módulo de la clase SmalCart, que se encuentra en la sección lib.

    getInstance (): con la ayuda de este comando se llama a cada función individual. Su tarea principal es eliminar los intentos repetidos de formar una instancia de la misma clase.

    setCartData (): le permite organizar la información del producto de la cesta y registrar la sesión en cookies. A su vez, esto garantiza a los usuarios la preservación de los datos del pedido, incluso cuando accidentalmente hacen clic en otros sitios o incluso cierran la página del navegador.

    Para tener una idea más clara de cómo funciona la canasta, vuelva a abrir el archivo en la sección lib llamada smalcart.php. Después de las operaciones anteriores, todos los puntos de contacto principales serán más comprensibles y lógicos. Vale la pena señalar que si las cookies están deshabilitadas, entonces el mecanismo no podrá funcionar correctamente. Esto se debe al hecho de que la transferencia del identificador de sesión se lleva a cabo precisamente gracias a estas cookies.

    Por cierto, si profesionalmente decidió crear tiendas en línea o sitios de diferentes orientaciones, le recomendamos que se familiarice con este curso de 30 días. Contiene conocimientos fundamentales sobre el desarrollo de proyectos adaptativos en línea con miras a su posterior monetización. Si desea mejorar sus habilidades en uno o incluso varios niveles, asegúrese de estudiar el curso anterior.

    Como estas ¿Fue útil el material y la lectura no fue en vano? Luego comparta el artículo con sus amigos y colegas en las redes sociales. Quizás uno de ellos simplemente no puede encontrar una solución cualitativa a este problema.

    Gracias por leer nuestros artículos. Cada vez tratamos de presentar el contenido de una manera aún más interesante y útil. Todo lo mejor, ¡hasta pronto!

    Curso gratuito de programación PHP

    Aprenda el curso y aprenda a crear un sitio dinámico en PHP y MySQL desde cero utilizando el modelo MVC

    En el curso de 39 lecciones | 15 horas de video | códigos fuente para cada lección

    Mira el video: Curso de crear tu tienda online con carrito de compra html5 php y mysql (Julio 2020).

    Pin
    Send
    Share
    Send
    Send