Proposal Summary
This proposal covers the update in the image gallery enhancement in the PDP page.
Requirement
The PDP image gallery section needs to be upgraded by adding the extra features mentioned below.
- The PDP’s main image needs to have arrows to scroll the images.
- The main image needs to be expanded and displayed on the popup when clicking on it.
- The main image shown on the website will be from the item record field “LARGE IMAGE 0”.
- For slider, the images need to be displayed from the fields ALTIMAGE1, ALTIMAGE2, etc.
- We need to be able to add additional images if needed.
Deliverables
The image from the field “LARGE IMAGE 0” in the item record will be used as the product image across the entire website.
The images in the image gallery slider will be taken from the fields ALTIMAGE1, ALTIMAGE2, etc. instead of associated images.
As given in the example Astir Australia | Physio Supplies, Rehabilitation, Sports Medicine Supplies, Physiotherapy Equipment & Supplies by ASTIR AUSTRALIA we can show the image gallery slider with two arrows to move right and left the slider at the bottom of the main image in the PDP.
We will implement the following functionalities on the PDP image gallery.
- The right and left arrows will be added to the main image as well.
- When the page loads, the first image in the slider will be selected by default and it will be displayed on the top.
- When the slider’s right and left arrows are clicked, the main image at the top will switch to the appropriate image and the slider will move in those directions.
- When we click the main image, it zooms out and displays the item image in a popup. The image can be scrolled left and right using the arrows on the popup.
Currently we can display 5 thumbnail images as there are 5 custom fields in the item record.
Since we need to use the custom fields for slider images, we must create additional custom fields to add more images.
We will keep a configuration array to maintain the slider images. If we want to show more images in the slider, the internal id of the fields needs to be added to the array.
Assumptions
The item images (Main image and alt images) for all the items need to be added in the item record.
The new fields for the additional alt images need to be created and added to the configuration array to display it on the website.
The image from the field “LARGE IMAGE 0” in the item record will be used as the product image across the entire website from PLP, PDP and checkout pages.