1 1. Catalogo De productos Versión 1 Contenido: 1.1 RECURSOS Y UTILIDADES. 1.1.1 Recursos librerías. 1.1.2 Recursos Adicionales. 1.2 INTRODUCCIÓN. 1.3 ANÁLISIS. 1.3.1 Cuadro de productos. 1.3.2 Ver más detalle. 1.3.3 Paginado. 1.3.4 Opciones de visualización. 1.3.5 Carrito de compra. 1.3.6 Acción Resultado. 1.3.7 Tema. 1.3.7 Entradas. 1.3.9 Procesos. 1.4 TEMAS o SKIP 1.4.1 Fundamento Tema. 1.4.2 Tema Básico 1.5 ORIGEN DE DATO JSON 1.5.1 Tipos de origen 1.5.2 Tipo Plano 1.5.3 Tipo origen Base de datos. 1.5.4 Estructura de Json: 1.5.5 Estructura de Json Base de datos: 1.6 SCRIPT HERRAMIENTA 1.7 CONFIGURAR SERVER LOCAL 1.8 CONFIGURAR SERVER WEB 2 1.1 RECURSOS Y UTILIDADES 1.1.1 Recursos librerías: Recursos Descripción json.php Librería Útil de json cuando se trabaja con el lenguaje php json.js Librería Útil de json cuando se trabaja con el lenguaje javaScript LibSysfer.js Librería de recursos generales básica y base en Ajax conexenrutar.php Librería puente para conexión base datos permite enlutarlas conex.php Realiza conexión con base de datos productos.js Librerías contenedora de funciones relacionada con catalogo de producto table.css Hoja estilo para diseñar tabla de productos Scrip_server.php Librería para crear un archivo plano de producto en caso de trabajar json plano origen_catalogo.php TemaNOMBRE.js Modal.css ftp_foto.php Abre un archivo plano o conecta a una bd recupera un json Esta librería es utilizada para diseñar temas de su nombre cambia Librería que permite el uso de formulario modal en la pagina Librería para actualizar foto en el ftp y redimensiona imagen 1.1.2 Recursos Adicionales Recursos Descripción nofoto.jpg Imagen que indica que no hay foto disponible para el producto mostrado anim.gif Animación de carga al realizar una acción ajax Titulocarrito.jpg Imagen de titulo del carrito Origen Externa Externa Externa Externa Externa Interno Interno Interno Interno Interno Externo Externo Origen Interno Interno Interno 1.2 INTRODUCCIÓN el catalogo web consiste en mostrar los productos estos podrá ser añadirlo a una canasta y en ello realizar una acción predefinida tales como pedidos, cotización etc. este proceso debe ser independiente a la forma de conexión ya sea por base de datos o por archivos planos. Puede ser trabajado con 2 tipos de origen o cualquiera que genere un json, según la estructura definida 1.3 ANÁLISIS 1.3.1 Cuadro de productos: mostrar imagen, precios configurable según necesidad, descripción, referencia, link a ver más detalle. Descripción Imagen Precio Ver mas Referencia Añadir Al carrito Este cuadro debe estar sometido a un tema y estar aislada de la librería que serán desarrollada independiente 3 1.3.2 Ver más detalle: este mostrara las diferentes características del producto seleccionado. Imagen principal Imágenes Adicionales Características detalladas Está sometido a el tema seleccionado 1.3.3 Paginado: Controlar las paginas automáticamente según el numero de productos con las siguientes características, pagina inicio, página anterior, número de páginas, página siguiente, pagina final. esta paginación va de acuerdo al tema seleccionado. Primera Pagina Anterior Pagina Numero Paginas Siguiente Pagina Ultima pagina 1.3.4 Opciones de visualización Ordenar Por: Ordena Según los parámetros que los productos tengan. Ver como: Lista(visualiza en forma de lista fila=1) o Cuadrícula(visualiza en forma de Cuadriculas Fila=n). Productos por página: usuario selecciona los numero de conjunto de pagina. Forma de Lista: Forma de Cuadriculas: 4 1.3.5 Carrito de compra: muestra los productos seleccionados y añadido a la canasta. muestra la lista de producto y aquí se añade la cantidad por defecto es 1. aquí se realizara la acción de: cambiar cantidad, eliminar de la cesta, adicionar productos. Cantidad de productos quitar productos imágenes Descripción Cantidad Precios Vaciar Cesta Total Productos Sumatoria El carrito está sometido al tema seleccionado 1.3.6 Acción Resultado: el resultado generado el proceso de catalogo es generar un json de los artículos seleccionados en la sesta, este es enviado a una aplicación para su procesamiento. [{"Ccodemp":"890404363","fecha":"00\/00\/00","items":[ ["0022354","producto1","cantidad"] ]]}] la estructura del json resultado se actualizara según sea necesario. 1.3.7 Tema: esta librería es diseñada para cambiar la piel de el catalogo. conjunto de funciones para cambiar piel del 1.3.7 Entradas: buscar_productos(codemp,RutaImagen,PColumnasProducto,PLimiteProductos): buscar los productos y crear el json o codemp=codigo empresa o RutaImagen=ruta de las imagnes o PColumnasProducto=columna de visualizar mostrar_productos(Actual_Pagina,columna,inicio,limite,contenedor) visualizar en tabla filtrar_productos(clase, Titulo) filtra el producto según su clase o búsqueda ver_mas(código) ver más detalle el producto 1.3.9 Procesos: 5 Método buscar_productos respuesta_productos filtrar_productos mostrar_productos Paginador_productos Producto_ErrorImagen Producto_Carrito Mostrar_Carrito Eliminar_Carrito Sumatoria_Carrito ver_mas justNumbers formatNumber getGET doAjax Descripción Busca un origen y crea un json de producto Recibe el Json y lo procesa según el resultado Filtra la búsqueda de producto según sea la necesidad Visualiza en la tabla los producto según sus parámetros Configura un paginado de producto Verifica si hay un error al cargar la imagen y coloca defecto Agrega o quita del la cesta Visualiza los productos que se encuentran en la cesta Elimina de la cesta el producto deseado Suma y totaliza los valores de la cesta Visualiza los producto con detalle Verifica di un control es solo numero Cambia a moneda Procesa los get de la url Función ajax principal Retorno void void void void HTML void void void void void void String String String void Librería productos.js productos.js productos.js productos.js productos.js productos.js productos.js productos.js productos.js productos.js productos.js LibSysfer.js LibSysfer.js LibSysfer.js LibSysfer.js 1.4 TEMAS o SKIP Para reutilizar los script y manipular mediante temas cambiando la máscara de presentación. la pagina contenedora contiene los diferentes div yo controles: importante definir la Ruta de imágenes del tema: <script>var Rpacht="http://www.em-empire.com/appweb/";</script> <input name="textfield" type="hidden" id="numero_carito" value="0" /> <label id="numero_carito_div"></label> <div id="productos"> <script language="javascript"> buscar_productos("890404363","appcatalogo/productos/",3,3); </script> </div> * Hay un control textfield oculto con el fin de mantener la sumatoria de producto en canasta. * Hay un contenedor div con el fin de contener las información de productos. 1.4.1 Fundamento Tema. los fundamentos de la librería TemaXXX.js consiste en números de funciones que tratara de crear diseño. var Qcar=0; variable global para sostener la acción que se realice sobre agregar o quitar a la cesta. 1.4.1.1 Tema_CuadorProducto Tema_CuadorProducto(Pcodigo,mostrado,Findefila,Descripcion,pRutaImagen,Precio,Referencia,C arrito,Vvista): crea un cuadro contenedor de productos recibe 6 Pcodigo: Código del producto Findefila: fin de la fila para saber cuándo cerrar una fila Descripción: Descripción del producto pRutaImagen: Ruta donde está guardada la imagen de los productos. Precio: Precio del producto. Referencia: Referencia del producto. Carrito: if(Carrito==0) es porque no se ha agregado la canasta si es (1) se agrego a la canasta. Vvista: tipo de vista cuadricula(1) o lista(0). Esta Función debe retornar un String HTML. 1.4.1.2 Tema_Vermas Tema_Vermas(codigo,oJsonP,pRutaImagen): tema ver mas envía a un modal la información para que el usuario lo visualice. codigo: Código del producto oJsonP: Json de producto original. pRutaImagen: : Ruta donde está guardada la imagen de los productos. Se encía el json por que en algún momento podre mostrar mas información 1.4.1.2.1 Imagen_Tema (depende de : Tema_Vermas) Imagen_Tema(pcodigo): función para verificar acción al pulsar agregar o quitar carrito. pcodigo: código del producto. 1.4.1.3 Tema_Carrto Tema_Carrto(JsonA,RutaImagen):Diseña el carrito lisando los que se encuentran en la cesta JsonA: Json donde se encuentra los datos de productos. RutaImagen: Ruta de imágenes de los productos. Debe retornar un String Html. 7 1.4.2 Tema Básico Vista Cuadricula: Vista lista: Carrito de compra: 1.5 ORIGEN DE DATO JSON el origen de dato consiste en que la aplicación recibirá un Json de algún método ya sea por algún tipo de origen es decir por algún medio. 1.5.1 Tipos de origen: es una forma de de identificar el origen donde proviene el Json, es muy útil dividir el origen ya que esto nos da la viabilidad de utilizar cualquier origen que resulte un json. por el momento tenemos 2 básico, tipo de origen plano y tipo de origen bd(base de datos) 1.5.2 Tipo Plano: el tipo plano es: El tipo de origen de datos plano, proviene de un archivo plano. para utilizar este tipo necesitamos estas librería. * Generar_Plano: esta librearía genera un archivo plano dependiendo el código ('codemp') de la empresa este consulta la base de datos de la empresa según sus parámetros y genera un txt. http://localhost/www.em-empire.com/appweb/Generar_Plano.php?codemp=000000 el 000000=código de la empresa. * origen_catalogo: esta librería es única es decir si el catalogo se utilizara como plano debe remplazar el código perteneciente al origen plano generado por (Scrip_server.php). sera llamada y esta debolvera el json con la estructura. * productos.txt: archivo generado por Generar_Plano y devuelve un Json. 8 1.5.3 Tipo origen Base de datos: el tipo de origen de datos bd, proviene de una base de datos independientemente el motor que utilice, básicamente se utiliza mysql por ser popular. * origen_catalogo: esta librería es única cambia su código y realiza la consulta y genera el json. * conex: libreria de conexión a base de datos. * conexenrutar: esta librería consulta el código de la empresa y en ruta a la configuración pertinente y llama al conex.php para establecer conexión 1.5.4 Estructura de Json: [{"Ccodemp":"0000","fecha":"00\/00\/00","modo":"general","items": [["01","02","03","04","05","06","07","08","09"],["01","02","03","04","05","06","07","08","09"] }] 1.5.5 Estructura de Json Base de datos: function productos($Ccodemp,$fecha,$modo) $artcod=$rowcar['artcod']; $artdes=utf8_encode($rowcar['artdes']); $artdes=str_replace('"','.',$artdes); $artdes=str_replace('&','y',$artdes); $artref=utf8_encode($rowcar['artref']); $artref=str_replace('"','',$artref); $artref=str_replace('&','',$artref); $productos[0]->items[$correr][0] = $artcod;//codigo $productos[0]->items[$correr][1] = $artdes;//descripcion $productos[0]->items[$correr][2] = $artref;//referencia $productos[0]->items[$correr][3] = $rowcar['artcla'];//precio venta $productos[0]->items[$correr][3] = $rowcar['artcla'];//precio venta $productos[0]->items[$correr][4] = "0";//Carrito 0 no agragado 1 agregado $productos[0]->items[$correr][5] = $rowcar['artpvp'];//precio venta $productos[0]->items[$correr][6] = $rowcar['artcrd'];//precio credito $productos[0]->items[$correr][7] = $rowcar['artmay'];//precio mayoreo $productos[0]->items[$correr][8] =1;//cantidad $productos[0]->items[$correr][9] =$rowcar['artmar'];//cod marca $artobs=utf8_encode($rowcar['artobs']); $artobs=str_replace('"','',$artobs); $artobs=str_replace('&','',$artobs); $productos[0]->items[$correr][10] =$artobs;//observacion 1.6 SCRIPT HERRAMIENTA 9 ftp_foto.php: Redimensiona y sube al ftp las imágenes (Se encuentra en el server local) Scrip_server: Genera un archivo plano según la información (se encuentran en el server web) origen_catalogo: consulta el origen de datos (se encuentran en el server web). 1.7 CONFIGURAR SERVER LOCAL: Para Configurar El Server Local: 1. Configurar apache www 2. Crear directorio de imágenes 3. copiar el script de foto ftp. 4. Configurar el empire.ini direccionando la ruta de las imágenes foto, para que el programa direccione al directorio servidor local. 5. Colocar en el modulo de crear articulo el llamado de los script foto y el script de origen de datos json que se encuentra en la web colocando el codigo codemp. * script origen de datos: http://www.em-empire.com/bc/Scrip_server.php?codemp=0000. * script foto ftp: http://localhost/ftp_foto.php?codigo=000 (si no tiene código actualiza toda las fotos y si tiene código solo sube el producto que se creó) 6. configurar router salida de pagina web.(ip publica o no ip) 7. registrar en admemp la conexión de la empresa. en el servidor de empire 1.8 CONFIGURAR SERVER WEB: Para configurar servidor web. 1.8.1 Origen de datos Planos Colocar los script de conexiones y script de generar json. * conex.php (ServidorWeb/origenbd/origenplano/librerias) * conexenrutar.php (ServidorWeb/origenbd/origenplano/librerias) * JSON.php (ServidorWeb/origenbd/origenplano/librerias) * ftp_foto.php (ServidorWeb\origenplano) * origen_catalogo.php (ServidorWeb\origenplano) * productos.txt (ServidorWeb\origenplano) * Scrip_server.php (ServidorWeb\origenplano) (colocar por defecto el código de la empresa codemp), este genera un plano con el fin de copiar json en el server web. 1.8.2 Origen de datos BD Si se desea conectar origen de datos con base de datos cambiar origen_catalogo.php por el script que consulte la base de datos y envié un json cuando se le consulte. Colocar los script de conexiones y script de generar json. conex.php (ServidorWeb/origenbd/librerias) conexenrutar.php (ServidorWeb/origenbd/librerias) JSON.php (ServidorWeb/origenbd/librerias) origen_catalogo.php ((ServidorWeb/origenbd)