Best Practices for Using Wingify Editor

Attention: You are viewing documentation for Visual Editor. If you are looking for Visual Editor Next documentation, click here.

#Edit HTML or Edit operation

• When you use HTML or Edit HTML operation for an element you want to modify in a web page, the editor displays the content (rich formatted or raw HTML) of the particular element. After your modifications, the final new HTML content of that element is stored by Wingify. While implementing the change on the page element, Wingify replaces the original HTML of the element with the new (modified) HTML saved in the Wingify editor.
• Do not use Edit HTML or Edit operation on dynamic content such as product image/price/description, cart product count, dynamic headlines, and so on.
• Use Edit or Edit HTML operations on specific elements requiring minor modification or changing a single element in a web page. We do not recommend using a full-page edit HTML operation.
• If you want to add new content on a page, use the Copy element operation to clone the element and then edit it using the Edit or Edit HTML operations.
• Use other operations like Move, Resize, Change Text wherever possible. They do not interfere with the dynamism of any element.
• We recommend using Add JavaScript/CSS operation to modify your elements with CSS and JavaScript.
• Avoid using multiple Edit HTML operations on the same set of elements. You can use one single HTML operation to apply all the required changes.

#Configure Editor Setting

If you have used Wingify’s visual editor to apply changes, and they do not reflect on the page when you Preview the test, there could be a possibility that the elements on which the changes are applied load on the page after the changes from Wingify have been fired. In such a case, configure the SPA/SSR editor settings that are suitable for you. This repeatedly checks for the elements on which the changes were applied and applies them as soon as they are loaded on the page.

#Add JavaScript

If you use the Add JavaScript operation to add a JavaScript/jQuery to change some web page elements, you might notice that the changes do not appear as they should on the live site. Use the setInterval() function to check for the target element, and as soon as it’s available, then apply the change as shown in the following code:

// Avoid multiple setIntervals gettings started.
if (window.vwoElInterval) {
  clearInterval(window.vwoElInterval);
}
window.vwoElInterval = setInterval(function() {
  if (vwo_$(CSS_SELECTOR_PATH_OF_ELEMENT).length) {
    // Make changes that require the element to be present
    clearInterval(window.vwoElInterval);
  }
}, 100);

You can add the setInterval() function from the Add JavaScript section of the code editor and modify it accordingly.

This is only applicable when you made changes to your web page using the custom code. If you use the Wingify Visual Editor to make the changes, refer to SPA/SSR editor settings.

Note: As a best practice, make sure to provide a unique name to the variable for every block of setInterval that you add. In the above example, the variable name is window.vwoElInterval. This can be changed to window.vwoBannerImage or any other meaningful name as well.

#Add Styles (CSS)

If you are using the code editor to add CSS properties within the