HTML Editing

HTML Editing

The page editing feature allows direct editing of HTML code.

The edited code can be reflected in the production environment through Ptengine.

While this feature is extremely convenient for those with HTML knowledge, please be cautious as it may cause unexpected issues if you lack proper knowledge or experience.

Interactive Content Issues

What is Interactive Content

It refers to content or features that respond to user interactions such as clicks or mouse-overs.

The following elements are examples:

Navigation menus

Accordion panels

Add to cart buttons

Purchase buttons

Input forms

Various links

Situation Description

Please be fully aware of the following risks associated with HTML editing:

Impact on JavaScript Events Editing specific elements may cause the following dynamic functions to malfunction: Slider functionality

Popup display/hide

Other interactive features

Impact on Module Structure Changing the HTML structure may cause the following issues: Tab switching functionality stops

Navigation menu breaks

Layout distortion

Abnormal module interaction functionality

To prevent these issues, pay attention to the following points when editing:

Fully confirm the function and role of the target element before editing

Keep changes to the minimum necessary

Always perform functionality checks after editing (preview feature)

Best Practices for Safe HTML Editing

1. Minimize Editing of Interactive Elements

Special caution is needed when modifying elements linked with JavaScript

JavaScript events must be reapplied after changes

If you want to achieve similar functionality, we recommend using "Code Mode" to add new code

2. Edit at Individual Element Level

Even if you need to change multiple content items, try not to edit higher-level elements (parent elements)

Editing each element that needs to be changed individually provides the following benefits: Can maintain the overall page structure

Can minimize unexpected impacts

Makes it easy to identify and fix problems if they occur

3. Recommended Approach for HTML Editing

For example, let's explain the case where you need to change three content items in the red frame in the image below.

✅ Recommended: Edit Individual Elements

Change elements 1, 2, and 3 individually (3 operations)

High safety

Limited scope of impact

Easy to identify if problems occur

Easy to undo changes

❌ Not Recommended: Batch Editing

Select upper layers and edit in batch (1 operation)

DANGER Risks of Batch Editing

Structure Breakdown Page layout is easily corrupted

Unexpected side effects are likely to occur

Impact on Interactive Elements JavaScript event malfunction

Dynamic feature failure

Important Notes

While batch editing can reduce work time, it has the following drawbacks: High risk of destroying page structure

Fixing may take considerable time

Testing and verification becomes more complex

Copy and Paste

You can freely copy elements within a page and paste them in another location.

While this feature is very convenient, unexpected problems may occur if used incorrectly. The main precautions are explained below.

About Duplicate IDs

When copying an element, if that element has an ID set, multiple elements with the same ID will exist on the same page. According to W3C standards, IDs must be unique within a page, so duplicates can cause malfunctions.

Expected Issues

Event processing linked to IDs does not work correctly

Expected behavior or interaction is not executed on the copied element

Recommended Usage Method

Check the HTML after pasting the element

Check if ID attribute is included

If an ID exists, change it to a new value that does not duplicate

function findDuplicateIds() {
    // Get all elements on the page
    const allElements = document.querySelectorAll('*');
    const idMap = {};
    // Iterate through all elements and check for duplicate IDs
    allElements.forEach((element) => {
        const id = element.id;
        if (id) {
            if (idMap[id]) {
                // If a duplicate ID exists, output it
                console.log(`Duplicate ID found on page: ${id}`);
            } else {
                // If no duplicate, add the ID to the map
                idMap[id] = true;
            }
        }
    });
}
// Call the method to find duplicate IDs
findDuplicateIds();

You can check if there are duplicate IDs in the page using the above code by following these steps:

Open Developer Tools on the target website Windows/Linux: F12 key or Ctrl + Shift + I

Mac: Command + Option + I

Select the "Console" tab

Copy and paste the above code into the console

Press Enter to execute

WARNING If there are duplicate IDs: A message stating "The page contains elements with duplicate IDs: [duplicate ID]" will be displayed.

If there are no duplicate IDs: No message will be displayed.

Style Inheritance

When copying and pasting elements, the appearance or layout may differ from the original element.

For example, when moving product information within a page:

Product image size changes

Price display position shifts

Description text formatting is corrupted

To prevent these issues, style settings must be properly inherited.

Tips for Maintaining Styles

The following two methods are effective for maintaining styles when moving elements:

CSS review Check the style application status

Adjust selectors

Confirm relationships between elements

Direct style settings Specify styles directly within HTML

Keep structure simple

Minimize the impact of moving

These methods allow you to maintain consistent design.

Interactive Feature Synchronization Issues

When you copy an element and place it in a new location, the operation function that the original element had may not work correctly. For example, if you copy an "Add to Cart" button, clicking the button in the new location will not respond.

Situation Description

It is common that operation functions set on the original element (such as adding to cart, ordering products, favorite registration, etc.) do not work by simply copying and placing them in a new location. This is because only the appearance of the element is copied, and the processing settings running in the background are not inherited.

Recommended Approach

Avoid Handling Interactive Elements

We recommend avoiding copying elements with operation functions (such as buttons or forms).

If Copying is Necessary

Add code to execute interaction events for newly pasted elements using JavaScript.

When adding code, you can execute it using a code mode like the following:

Here's a simple explanation of how to add JavaScript interaction events to elements:

Open the browser's developer tools

Select the target element in the element panel

Check the event listener section: Find the necessary event type

Check the related JavaScript logic

With these steps, you can add appropriate interaction events to elements.

---

Changing Styles

Element styles can be adjusted within the page editing feature. For example, colors, layouts, fonts, etc. can be changed.

When Styles are Not Applied

Main Reasons

CSS specificity (priority) issues

Conflict with existing styles

Selector specification error

Recommended Solution

If style adjustments are not reflected, you can directly change the style in CSS code mode and use !important to raise the priority.

Example:

.target-element {
    color: blue !important;
    font-size: 16px !important;
}

In Conclusion

To effectively and safely utilize Ptengine's inline editing feature, it is important to understand how each function works and potential issues. This allows you to avoid common problems and maintain normal website operation and excellent user experience.

Important Notes:

Always back up before performing operations

Perform thorough testing after making changes

By following these principles, you can maximize the use of Ptengine.