Magento 2 Multi Vendor Product 360 View
Using Marketplace Product 360 view Add-on for Magento 2 (Adobe Commerce) gives the ability to the admin as well as the store sellers to add-up the products with a 360-degree view which displays product’s profile from every possible angle, which enriches the look of the product as well as of store.
Note – This is an Add-on of Magento 2 Multi-Vendor Marketplace, So in order to take benefits of Marketplace Product 360 View Add-on, you must have Magento 2 Multi Vendor Module installed in the first place.
Watch the video tutorial below to understand the extension workflow:
Features
- Admin and seller can easily set the 360-degree view of a product.
- Admin and seller can delete the images they added to a 360-degree product view.
- The images supported format must be jpg, jpeg, PNG, gif only.
- The add-on supports Simple & Configurable product types for admin products.
- The add-on supports Simple & Configurable product types for sellers products.
- With 360-degree product view, a customer can view every side of a product in a 360-degree rotating view.
- Customer can pause or start again the 360-degree product view by clicking on the start/stop button.
- In addition, to pause and start the rotation, the customer can also after stopping the rotation just slide the images with the mouse to view the slow movement of the product image from each angle.
- The spin speed with which images rotate in a 360-degree view of a product can be managed by the admin.
- Admin and seller can preview the product 360 views, before saving the product and can manage the images accordingly.
Installation
Customers will get a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has an src folder, inside the src folder you have the app folder.
You need to transfer this app folder into the Magento 2 (Adobe Commerce) root directory on the server as shown below.
After the successful installation, you have to run these commands in the Magento 2 root directory:
First command –
| 1 | php bin/magento setup:upgrade |
Second Command –
| 1 | php bin/magento setup:di:compile |
Third Command –
| 1 | php bin/magento setup:static-content:deploy |
After running the commands, you have to flush the cache from Magento admin panel by navigating through System > Cache management as shown below.
Configuration For Multi-lingual Support
For the multilingual support, admin will navigate through Store > Configuration > General > Locale Options and select the locale as German (the language into which admin want to translate his store content).
Translation
If a user wants to translate their module from English to German then they need to follow the path /app/code/Webkul/MpProduct360view/i18n in their unzipped folder and will get a CSV file with name “en_US.csv”.
Now they will rename that CSV as “de_DE.csv” and translate all right side content after the comma in the German language.
After editing the CSV, save it and then upload it to the path /app/code/Webkul/MpProduct360view/i18n where they have installed Magento 2 on the server.
The module will get translated into the German Language. It supports both RTL and LTR languages.
The user can edit the CSV like the image below.
Initial Add-On Configuration
After successfully installing the add-on, the admin will perform some basic steps to configure it.
The admin will navigate to Store> Configuration> Product 360 view configurations as per the snapshot below.
From here, the admin will:-
- Enable the add-on by selecting “Yes” or “No”.
- Set 360 Frame Time: Admin can also set 360 Frame Times for rotation of the file.
- It is in a millisecond if it is less in number then it rotates fast or if it is more in number then rotates slow.
- Thumbnail Image: Admin can upload a thumbnail image of allowed file types: jpg, jpeg, gif, png. This image will be displayed at the start of the product 360 view images.
Admin Product End Management
In order to set the product 360-degree view for admins’ product, let us navigate to the Catalog->Products. Here the admin can create a new product as well as can edit an existing one to add the 360-degree view of a product.
Note:- The add-on supports Simple & Configurable product types for admin products.
Now for instance lets take an example of product “Chair”, click on edit to make the product in edit mode.
After this scroll down to the Product 360 degree view option under it. From here the admin will firstly enable the option to use the 360 degree view feature on this product as shown below.
The admin will now upload the images in such a sequence as per the product view which ultimately helps in creating a better 360-degree product view.
After uploading the images, the admin even can take a preview of the 360-degree product view in order to add or replace more pictures in order to improve the frame rate.
After uploading the pictures, the admin needs to save the product so that the end customer can take a 360 degree product view.
FrontEnd View Of The Product
The customer needs to visit the product page to view the 360 degree product view. As shown below.
Now clicking on the 360 degree image will open up the 360 degree product view which generally help out the customer to view the product from every possible angle.
The customer in order to get a 360-degree view can just play the product rotation which generally showcases the 360 degrees of the product.
Also the customer can pause/stop the rotation by just a mouse click on the button available.
In addition, to pause and play the rotation, the customer can also after stopping the rotation just slide the images with the mouse to view the slow movement of the product image from each angle.
As this is a marketplace add-on, So it offers the same functionality of adding 360-degree product view experience for the seller’s product as well.
Seller’s Product End Management
In order to set the product 360-degree view for the product, the seller needs to login into their account. Here the seller can create a new product as well as can edit an existing one to add the 360-degree view to a product.
Note:- The add-on supports Simple & Configurable product types for sellers products.
Seller, for instance, creates a new product & fill out all the necessary information in the concerned fields and will reach to the Product 360-degree view configuration setting.
Similarly, the seller for this product will add up the product images from Product 360 View setting for creating a 360 degree product view .
After uploading the images, the seller also takes a preview of the 360 degree product view in order to add or replace more pictures in order to improve the frame rate.
Now the seller needs to save the product so that the end customer can take a 360-degree product view.
Product 360 Degree View For Sellers Product
The customer needs to visit the product page to view the 360 degree product view. As shown below.
Now in order to experience the 360 degree view of this product, the customer needs to click on the 360 degree thumbnail below.
And, finds the 360 degree view of the product. As shown below in the screenshot.
The customer in order to get a 360-degree view can just play the product rotation which generally showcases the 360 degrees of the product.
Also the customer can pause/stop the rotation by just a mouse click on the button available.
In addition, to pause and play the rotation, the customer can also after stopping the rotation just slide the images with mouse to take a slow movement of the product image from each angle.
In conclusion, that’s all for the Marketplace Product 360 View for Magento 2 (Adobe Commerce), in case of any query, you can create a ticket at webkul.uvdesk.com or contact us at store.webkul.com/contacts/ to let us know your views to make the plugin better.
Explore the Adobe Commerce Cloud development services by Webkul. You may also browse other Magento 2 marketplace addons. Also our quality Magento 2 extensions.