Récupération d'une image au sein d'un site e-commerce via un URL


#1

Bonjour à tous,

Je réalise en ce moment un outil de création de liste de cadeau et son partage.

Nous avons développé plusieurs moyens de “rajouter un élément” dans sa liste de cadeau (plugin, bookmark, etc…), mais aussi, pour les utilisateurs les moins débrouillard, une page sur notre site qui permet de rajouter le cadeau manuellement (URL vers le site ecommerce, nom du cadeau, prix, etc…).

Pour être très clair, le parcours utilisateur très basique est le suivant : l’utilisateur circule sur un site e-commerce (fnac.fr par exemple), il repère un cadeau qu’il aime bien, il veut l’ajouter a sa liste de cadeau. Il va sur notre site, clic sur “ajouter manuelle”, et renseigne les différentes input (URL, nom, prix, etc…)

Mon problème est qu’il est difficile pour l’utilisateur de rajouter l’image de l’objet qu’il ajoute manuellement à sa liste (il doit théoriquement l’upload).

D’ou ma question : vers quelle techno dois-je m’orienter pour récupérer l’image de la page e-commerce, au moment ou l’utilisateur renseigne l’URL vers le site e-commerce ?
Pensez vous que je puisse m’en sortir avec du Headless Chrome ?

Merci à tous pour votre temps =)


#2

Bonjour à toi,

La technologie ici importe peu.

La principale difficulté étant de pouvoir identifier automatiquement quelle image au sein de la page de la fiche produit est l’image du produit lui même.

Il y a un tas d’images sur une page web, qui plus est sur une page de fiche produit sur un site e-commerce. Comment faire pour détecter de manière totalement automatique, l’image qui sera la bonne, parmi toutes celles présentes ?

Tu peux toujours tenter d’identifier les images cliquables par l’intermédiaire de XPaths, mais malheureusement la balise d’une image cliquable n’a pas toujours de lien de parenté avec une balise lien “a”, il se peut que ce comportement soit opaque et implémenté via Javascript.

De plus, chaque site e-commerce étant différent et ayant sa propre structure HTML, à moins d’avoir un bon algo de machine learning pour identifier les images produits, ça risque d’être très compliqué à mettre en oeuvre…

Dernière solution, tu chopes toutes les images présentes au sein de la page, en éliminant celles ayant un lien de parenté avec le header et footer, tu filtres les images qui paraissent trop petites, puis tu demandes à ton utilisateur de sélectionner la bonne image dans celles restantes, et tu uploads automatiquement celle-ci.


#3

Bonjour,

Merci beaucoup pour ta réponse! C’est effectivement la derniere solution que tu proposes que j’envisage.

Il y a exemple concret dans le pluggin et bookmark que propose ce site : https://www.whimventory.com

J’aimerais faire la meme chose, donc scraper toutes les images, eliminer les non conformes, et demander a l’utlisateur de choisir la meilleure (desole j’aurais du preciser dans le post initial).

Tu aurais une idee de quelle technologie utiliser ?
Il me faudrait en fait un substitue a un « content script » utilise dans un plugin Chrome par exemple.
Je me demande aussicomment le faire tourner : directement dans la page de l’utilisateur ? Ou a travers une requette envoyé vers mon serveur ?


#4

Qu’est ce que tu veux dire par “un substitut” au content script d’un plugin Chrome?

Car si l’extension de whimventory peut te servir d’exemple et fait déja plus ou moins le job, tu peux te baser dessus pour créé ton script en Javascript coté client, en utilisant l’API Fetch de Javascript (similaire à XmlHttpRequest pour les requêtes AJAX mais en plus facile à utiliser).

Restes à voir ensuite comment parser le contenu HTML résultant et y appliquer des requêtes XPath par exemple.

Très honnêtement, je privilégierais plus la méthode server-side, tu requêtes la page via un script python / PHP ou Node par exemple (script déclenché par une action du user coté client, via AJAX), tu obtiens donc le DOM de la fiche produit, tu appliques tes sélecteurs XPath / CSS, tu fais le traitement récupérer les sources des images, puis tu renvoies tout ça à ta page HTML via la réponse AJAX.

Utiliser du headless browser juste pour requêter une fiche produit, et en extraire les balises images (attributs sources), c’est faisable, mais ça me parait trop lourd pour une simple tâche.


#5

Je pensais juste à un script, quel qu’il soit, qui puisse interagir avec le DOM d’une page, mon parallèle n’était peut etre pas bien choisi haha.

Merci beaucoup pour tes suggestions, je vais m’orienté vers le server-side en PHP du coup, ca sera le plus simple.

Merci pour tout, je peux te faire un retour si tu le souhaites !


#6

Si tu t’orientes vers PHP, je t’invite à regarder du coté de la librairie QueryPath, très pratique pour faire du XPath.


#7

Pour récupérer l’image dans la plupart des cas je te conseille de regarder du côté de la balise :

Tout le monde ne l’implémentera pas mais ca reste une bonne pratique.


#8

J’ai créé un site de liste de cadeau de naissance pour des amis, et j’ai été confronté au même problème.
La solution très simple que j’ai trouvé était de sortir toutes les images PNG, JPG, PNG présents dans la page aussi bien en balise IMG qu’en balise A ou en action JS.
Je recuperais les 4 plus grandes en terme de taille en pixel (en filtrant deux trois nom de sprite courantes).
Je demandais à l’utilisateur de sélectionner la mieux.


#9

Merci à tous pour vos réponses, j’ai commencé, n’étant pas expert c’est un peu laborieux, mais c’est un plaisir d’apprendre!
A bientôt


Team : CamilleBriceJulienVivianBorisXavierSteven.
Follow @growthhackingfr