Drag and drop sorting of additional images

This modifier adds the ability to sort product images by dragging and dropping and exchanging additional images with the main product image in the OpenCart admin panel.

BASIC FUNCTIONS

1. Drag and drop images to change the sort order
2. Exchange additional images with the main image
3. Automatic update of sort values
4. Visual effects when dragging

Installation

1. Install the modifier through the admin panel
2. Update the modifier cache

Use

1. Go to edit the product (Catalogue > Products > Edit)
2. Open the tab "Images"
3. To change the order of imagesdrag them using the drag icon ☰
4. To exchange an additional image with the main one, click on the icon exchange ⇄

Notes

• The modifier automatically hides the sort order input field, since sorting is done by dragging
• Sorting values are updated automatically when drag and drop
• The modifier requires jQuery UI
• The modifier uses the error="skip" attribute, which allows it to work even with changes in the template
• When adding a new image, it automatically receives a sequence number at the endlist

How it works:
The modifier adds the following changes to the product editing template:

• Adds IDs to images for access via JavaScript
• Adds a column with drag and drop and share icons
• Hides the sort order input field
• Adds JavaScript code to handle drag and drop and exchange
• Adds styles for visual design

JQuery UI Sortable is used for sorting, which allows you to drag and drop list items. As you drag, the sort values ​​in hidden fields are automatically updated.
The image sharing feature uses JavaScript to exchange values ​​and sourcesimages between the main and additional images.

For coffee!

Write a review

Your Name:


Your Review: Note: HTML is not translated!

Rating: Bad           Good

Enter the code in the box below: