Aperçu des options de produits personnalisés avec superposition d'images

Question

Je travaille actuellement sur un magasin de vente de produits sur commande. Ces produits doivent être adaptés par le client. Je voudrais avoir un aperçu des options personnalisées choisies par le client en leur montrant graphiquement placés sur l'élément.

Je me fais faire une image transparente séparée pour chaque option, les rendant la même taille que l'ensemble de la taille de l'image de prévisualisation, puis les placer sur le dessus de l'autre.

Si mes intentions ne sont pas claires, s'il vous plaît laissez-moi savoir. Je vais créer une représentation graphique de ce que je veux dire.

Y a-t-il des extensions connues qui font cela? Payé ou libre.

Answer 1

Donc, si je comprends bien votre question, vous voulez construire un affichage d'image en couches d'éléments sélectionnables?

Ainsi, si je vends des chapeaux, l'image de base est à la tête d'une personne, puis l'utilisateur sélectionne un chapeau, et l'image du chapeau est posée sur le dessus de la tête?

concept très intéressant, et je voudrais bien voir le résultat final:)

Comment je le ferais:

Le principal produit devrait être soit un configurable, ou un produit ensemble, avec des produits enfant attachés. Cela vous donne la possibilité d'avoir les aspects personnalisables en utilisant la fonctionnalité de magento de base, donc pas de code supplémentaire nécessaire.

L'image principale du produit serait placé dans un conteneur div, de sorte que son id / classe est connue. Appelons ce image_container '. L'image de l'enfant pour le produit parent serait placé absolue dans ce conteneur.

Chacun des produits pour enfants aurait l'image en couches prévu que son image configuré en tant que son image de base, à nouveau la fonctionnalité de base pure.

Maintenant, vous aurez besoin de code pour lier une coutume sur les événements de modification des entrées enfant sélectionnables (qu'ils choisissent / radios, etc.) Ce serait le feu de certains ajax pour obtenir le chemin à l'image de cet enfant en conséquence. Le résultat serait alors appel ajax insérer un nouvel élément img dans le DOM, comme un enfant pour l'image contenant « image_container », et placé absolue au-dessus de l'image mère. Vous pouvez facilement obtenir le bon x / y coords de l'image statique parent connu.

Vous pouvez ensuite apparaître de nouvelles images dans / comme les options sont modifiées.

Vous pouvez même faire l'image de l'enfant draggable que le client puisse le placer ailleurs sur le parent (si cela est nécessaire)

Hope this helps.

Answer 2

Il existe une extension disponible pour cela. Configurateur par justSelling est celui-là. Il fait exactement ce dont vous avez besoin.

Regardez la démo ici: http: //demo.product -configurator.biz/index.php/functions/demo-6.html