Esta semana se dedicó parte del tiempo a resolver los conflictos que se tenían para insertar en la segunda tienda online elegida el jQuery que se requería para poder mostrar la sidebar verde que aparece para mostrar la información ecológica.
El problema era que la página de HEB cuenta con una restricción para que no se inserte código javascript de manera manual, entonces se utilizó una instrucción de la librería de Chrome:
chrome.tabs.executeScript(null, {file:"js/jquery-2.1.0.min.js"});
chrome.tabs.executeScript(null, {file:"js/bootstrap.min.js"});
con lo que se pudo resolver este conflicto.
Una vez que se realizó este cambio se insertó la barra del lado izquierdo, sin embargo tapaba algunas opciones de la página como se ve a continuación:
Entonces se tuvieron que hacer algunas modificaciones al CSS que acomoda los productos de la página en línea para de esta manera hacer que la barra no tapara ningún botón original.
Se redujo el ancho de la pagina a un "85%" sin embargo fue complicado ya que los elementos no cuentan con ninguna "id" y esta acomodado todo con tablas de html, por lo que se tuvo que estar trabajando con números de elementos en vez de ids o clases.
Así es como queda la interfaz con el ancho de la tabla que muestra el contenido a escala:
Lo siguiente fue tomar el nombre, la marca y la imagen de cada producto mostrado, sin embargo fue también complicado por la cantidad de tablas que hay dentro de tablas y no contienen ids ni clases para organizar el estilo. Los cuales fueron encontrados de la siguiente manera:
var marca = $(this).find("td").eq(1);
marca = marca.find("div").eq(0).html();
console.log(marca);
var image_src = $($(this).find("td").eq(0).find("a").first().find("img").get(0).outerHTML).attr('src');
console.log(image_src);
var product = $(this).find("td").eq(1);
product = product.find("div").eq(1).html();
console.log(product);
Y finalmente se pudo replicar la funcionalidad para este sitio. Los cambios están el repositorio.
Redacción
En la parte de la redacción se trabajó esta semana corrigiendo algunos errores de ortografía y algunos en la bibliografía.
Falta terminar el diseño de los experimentos :(.
Se agregó en Conclusiones el trabajo a futuro.
Para la siguiente semana se tienen que terminar el diseño de experimentos en la redacción y la solución propuesta.
En el código hay que agregar ya interacción con algún servidor.
No hay comentarios:
Publicar un comentario