Feature Request: Zoom in Effect to See Particular Product in Detail

[Shubham29012001]

Is your feature request related to a problem? Please describe.

Users would love to watch more detailed images by hovering them on the image. The same feature is available on different e-commerce applications where a user can hover on a product image to see it in detail. I think it would enrich the user experience.

Describe the solution you'd like.

When we hover on any image in that particular product, we would be able to see more details of the product. Just like in Flipkart, if we hover on any image in a particular product, we get to see a more precise and detailed image of the product.

Eg -

Additional context (if any)

I would like to work on it as GSSoC '22 contributor.

[github-actions[bot]]

Hey @Shubham29012001 👋, thank you for raising an issue. Please make sure that it is detailed, and also following the provided template.

[varunKT001]

Great idea @Shubham29012001 🚀

You can work on it 👍

Make sure the UI you implement for this, blends nicely with the current theme 👍

If you are using VS Code, make sure you download the prettier extension. Also, from the settings, enable, format on save and format on paste. Most of the contributors don't format the files properly and it deteriorates the consistency of the current structure. I have already added a configuration file for prettier so that you don't have to configure it. Every time you save, it formats the file using the config file provided 👍

Also, make sure you update your fork by using the fetch upstream option present on your fork (It won't ask you to open pull request now) 👍

[varunKT001]

@Shubham29012001 Any updates on this?

[Shubham29012001]

Hey @varunKT001, sorry for it but I am going to work on it from today. My exams were going on and have been over now.

[varunKT001]

@Shubham29012001 Great 👍

[varunKT001]

@Shubham29012001 Any updates?

[Shubham29012001]

Hey @varunKT001, I am facing some issues while creating the mentioned feature. I am new to React and therefore it's taking more time for me to understand and apply the feature. Hope it will not create an issue. I am trying my best!!!

[varunKT001]

@Shubham29012001 No issues, take your time 👍

[Shubham29012001]

Hey @varunKT001, I have built the functionality and it's working perfectly but the problem is we need to force install the dependency react-image-magnify package. I have tested out the package with the current version of React and it's working perfectly well.