Notes on Ptengine Page Editing Feature

When using the Ptengine page editing feature, it is crucial to understand each function and its associated impacts.

This article introduces recommended ways of using commonly used operations such as "editing HTML," "copying and pasting elements," "moving elements," and “editing styles" in Ptengine.

Editing HTML #

With the page editing feature, you can edit the HTML of a page and apply it to live via Ptengine. While this feature is very convenient, improper use may lead to side effects.

Issues with Interactive Content

Interactive content
refers to content that functions based on user interactions such as clicks or mouse overs. This includes menus, accordions, add-to-cart buttons, purchase buttons, forms, links, etc.

Situation Description:

1)Editing HTML may affect JavaScript events that act on specific elements, potentially rendering the original functionality unusable. For instance, editing a slider may cause it to stop sliding properly. Similarly, popups or accordions that open on click may be affected.
2) Editing HTML may disrupt the original structure of modules, rendering functions unusable or causing layout abnormalities. This includes interactions like tabs or menus not responding correctly to mouse clicks.

Recommended Usage:

1)Minimize changes to interactive elements

If you need to modify related elements, you'll need to reapply events using JavaScript after editing and apply them similarly in the "code mode" for a similar experience.

2)Perform edits at individual levels

When modifying multiple contents, it's recommended to edit each one individually rather than selecting a higher-level hierarchy to edit the HTML. This will reduce the risk of breaking the original page structure.

For example, if you want to modify the three contents within the red frame in the image below, there are two methods:

Method 1 Recommended: Make individual changes to 1, 2, and 3, completing the fixes in three edits.
Method 2 Not Recommended: By selecting the higher-level layer containing 1, 2, and 3, you can edit the HTML of the lower layer as well. While this allows for multiple changes at once, it makes the structure more prone to breaking.

Method 2 allows for quicker changes but increases the likelihood of breaking the page structure, leading to adverse effects on interactive elements.

Copying and Pasting #

You can copy any element on the page and paste it elsewhere.

While this feature offers great flexibility, improper use may lead to unexpected consequences. Here are some common scenarios and considerations:

ID Conflicts

If the copied element contains an ID, pasting it may result in multiple elements with the same ID on the page. According to W3C standards, IDs should be unique, and having duplicates can cause unexpected effects.

Situation Description:

Events based on IDs may not trigger, leading to the copied elements not behaving interactively as expected.

Recommended Usage:

After pasting, check the HTML of the pasted element to ensure there are no ID conflicts. If conflicts exist, modify the corresponding ID strings to avoid duplicates on the page.

function findDuplicateIds() {
    const allElements = document.querySelectorAll('*');
    const idMap = {};
    allElements.forEach((element) => {
        const id = element.id;
        if (id) {
            if (idMap[id]) {
                console.log(`Duplicate ID elements exist on the page: ${id}`);
            } else {
                idMap[id] = true;
            }
        }
    });
}
findDuplicateIds();

This code helps identify duplicate IDs on the page. Here's how to use it:

1. Access the website and open Developer Tools > Console.
2. Paste the code into the console.
3. Press Enter to execute and check the output. If there are duplicate elements, the console will display: "Duplicate ID elements exist on the page: [ID of the element]".

Loss of Styles

Pasting elements to a different location on the page may result in the pasted element not retaining its structure or styles compared to the original element.

Situation Description:

For instance, on an e-commerce site, pasting product information (including images, prices, and basic details) to a different location might disrupt the layout of the entire product page.

Recommended Usage:

Check CSS selectors and adjust the style to the pasted elements using “edit style” in the tool bar.
Use inline styles on HTML or reduce the hierarchy of CSS selector specifications to prevent style disruptions caused by copying and pasting operations.

Copy and paste Interactive contents

After pasting, interactive function from the original element may not work on the pasted element. For example, if a "Add to Cart" button is copied and the add to cart function may not work for the pasted button.

Situation Description:

Events bound to the original element (such as adding items to cart or checkout) usually do not automatically work on the newly pasted element.

Recommended Usage:

Avoid copying highly interactive elements. If necessary, use JavaScript to add events to the newly pasted elements.

When adding events, you can use a code mode like the one shown below to execute JavaScript logic.

1. Open the developer tools.
2. Click on the Elements panel and select the target element.
3. Under the Event Listeners, find the event type that needs to be bound and inspect the possible JavaScript logic.
   

Element Movement #

Moving elements is a common need. For example, if analysis from Ptengine's heatmaps reveals that information like discounts or full guarantees pushes purchases, but such details are buried lower on the page, moving them to prominent positions might be beneficial.

Interactive Content not Work after Movement

Situation Description:

Currently, content movement can be achieved through “copy original elements, paste it to the new position, and delete the original element”. Thus, moving requires considering the effects of copying and pasting mentioned before.

Recommended Usage:

Minimize moving highly interactive elements. If necessary, adjust JavaScript to ensure events are triggered on the newly moved elements.
Use the Ptengine code mode and utilize the element movement API shown below:

    // targetSelector： 
ptKit.moveElement(
    "targetSelector",
    "relativeSelector",
  'before', {
    timeout: 60000,
    interval: 500
  }
);

Edit Style #

Element styles can be adjusted within the page editing feature. This includes changes to colors, layouts, fonts, etc.

Failure to Apply Styles

1)Situation Description:
If style changes are not applied after adjustment, it's typically due to style conflicts, where the new styles have lower priority.
2)Recommended Usage:
If changes don't take effect, directly modify styles using CSS code mode and use !important to increase the priority of styles.

Understanding the principles and potential impacts of each feature allows for more effective and safe use of Ptengine's page editing feature. By avoiding common issues like those mentioned above, you can ensure normal website operation and provide an excellent user experience. Always remember to back up and preview before making any changes.