Best Practices for Using Wingify Editor

This article covers the following:

• Considerations while working with the Edit HTML or Edit operation
• Considerations while working with Editor Settings
• Considerations while working with the Add JavaScript operation
• Considerations while working with the CSS operation
• Considerations while working with the Change Image operation
• Considerations while working with the Move operation

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.

Add Styles (CSS)

If you are using the code editor to add CSS properties within the <style> tag, make sure to use !important with each property to ensure that all previous CSS properties are overridden and changes in variation are implemented.

Example

.class-name {
Attribute1 = value!important;
Attribute2 = value!important;
}

Change Image

While adding a new image for your variations using the Change Image operation, if the image size is bigger than the control’s image, the original image might show for a moment before the variation image is loaded. To avoid flickering in such cases, use Edit HTML operation or the code editor and use Hide operation on the image in the control.

Within the Edit Html or JavaScript code, add a style attribute with value as display:block !important so that whenever this operation is executed, its visibility is set to true. When a visitor lands on the web page, the hide operation will ensure the control image is hidden, and the new image will display when Edit Html/JavaScript code has rendered the image.

If you enter the image URL on your own server, it could further reduce the loading time and overall flickering effect.

Move Operation

• Move operation on any element moves it relative to its current position in exact pixels you specify.
• Imagine moving an element by a huge distance into some other section on the page. Now that section can be visible somewhere else based on the screen size (which is very popular these days using media queries). In that case, your moved element won’t appear at the place you wanted it to be.
• A better approach in such cases would be to write custom CSS changes. You can also include media queries to apply the changes based on the screen width.
• You can also rearrange elements using the Rearrange operation if your purpose was to swap the positions of two elements present on your web page.