I have an HTML Drag'n'drop edit on my system and I need to include a new button that will perform a new function in the editor. My editor is similar to https://unlayer.com/. Documentation: https://docs.unlayer.com/docs
It is basically a button to include e-commerce products within HTML.
By selecting the button, the customer will be able to search for products by name, category and a few more options. This product list will be retrieved from my backend via JSON.
After the selected product, an HTML must be pasted showing data for this product. The data will basically be name, price, promotional price, button for purchase with direct link. All product information will be in the JSON mentioned earlier.
New functionality in the editor where we will add a new button to the drag and drop editor. This button will include HTML with a photo, title , prices, button and link for a product from the customer's online store.
1) A new button with the product title will be available to be dragged into the editor. This button will only appear if the customer is connected to an e-commerce platform. The solution I thought for this is for me to pass some parameter when showing the editor and the button appears if it is a product = true parameter, for example.
2) When dragged , you should put a basic HTML with no picture and no text and click r it will open a form next to right with the options
a. The form will appear one combo box with the categories of products, such as a search that will search for title or product code. All category and product information will be searched via our back - end.
b. Another option is that the customer can display the product with a horizontal or vertical image . The idea of this option is that sometimes you will have products with a height greater than width and vice versa. Sometimes the product will not fit just to the left of the information (see image above), the photo of the product will need to come above the information.
c. Another option will be to choose the color of the button that will be used
d. Another option will be to choose the font and font size to be used .
e. Another option is the title of the button that will come as standard BUY, but can be changed to another title with a limitation of 10 characters.
f. Whenever it is changed in the form, it must be changed in real time in the editor. For example, if I change the color of the button, it should automatically change in the editor
3) The HTML that will be placed basically is a photo (to the left or above the information), a title, a price that may have a promotional price (in this case the normal price is crossed out) , information about how many times without interest , an HTML pattern to make the shape of the button and the product link in the button link (the link information turns into the product's JSON) . The HTML we will create together, I will pass it as it should be and you create the coding.
UX/UI Designer for Social Media App Category: Graphic Design, Mobile App Development, Prototype Design, User Interface / IA, UX / User Experience Budget: $750 - $1500 USD
