APP CATALOGO - Em

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)