# Implementation Principles of Page Editing Experience ## Implementation Principles of Page Editing Experience: Impact of Changes and How to Address Them Ptengine's page editing feature enables intuitive and flexible operations, allowing you to adjust site content and layout in real-time. By leveraging this feature, you can expect improvements in user experience and increased conversion rates. However, **when the original page structure is changed, the edited experience may become invalid**. Below, we provide a detailed explanation of the implementation principles of page editing experience, the impact of changes, and how to address expiration. ## Implementation Principles of Page Editing Experience ### **How Page Editing Works** Page editing uses **selectors** to identify elements to be edited, and saves the changes made. When a page is rendered, Ptengine's server identifies elements based on saved selectors, thereby realizing page editing. ### **What is a Selector?** A selector is an identifier used to identify HTML elements. Like a map's directions, it allows you to find elements at specific positions on a page based on that information. It typically consists of an element's tag name, class name, ID, and other properties. As shown in the example in the figure below: The selector corresponding to the text: **Realize so easily** is: `body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)`. ### An Example of Page Editing Experience For example, suppose you want to replace the text **"Realize so easily"** in the first view of the page with **"Realize swiftly and intelligently"**. When you update the text and click "Save," the experience saves the selector and the changes made. The data structure will be approximately as follows: ``` [{ selector: 'body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)', text: 'Realize swiftly and intelligently' }] ``` Finally, when the client page is rendered, the experience finds the element following the **selector** saved in the experience, and replaces the content of that element. ## **Impact of Original Page Changes on Experience** On the other hand, if the client's original page is changed, the accuracy of the selector may be affected. If the page change only involves replacement of text or images, the selector is typically unaffected, and the page editing experience remains valid. However, if changes are made to the page structure (such as deletion of elements, changes to class names, or adjustments to the overall structure), the selector may no longer accurately identify the previously specified element, potentially resulting in the page editing experience becoming invalid. Based on the example experience mentioned above, we explain in more detail: ### Example 1: When the Original Page Adjusts Text Assume the original page simply adjusts text only. In that case, it would be as follows: Selector: `body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)` Selector: `body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)` In this case, since there are no changes to the selector, the experience is not affected and will function normally. ### Example 2: When the Original Page Adjusts Page Structure Assume the original page adjusts the banner's page structure, removes the subtitle, and needs to update styles and text. Selector: `body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)` Selector: `body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud **> div.pt-head > h1**` In this case, as shown in the figure above, due to page structure changes caused by element deletion or replacement, the selector does not function correctly, ultimately resulting in the experience changes becoming invalid. ### Example 3: When Element IDs on the Original Page Change Dynamically ❌ Assume the `id` attribute of elements on the original page is generated dynamically, and the element `id` changes upon page update or refresh. Selector: `body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)` Selector: `body > **#__nuxt-xxad-da** > **#__layout-x-xx** > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)` As shown in the figure above, due to changes in page IDs, the selector does not function correctly, ultimately resulting in the experience changes becoming invalid. ## How to Address Experience Expiration Before making changes to the page structure, you need to be mindful of parts where page editing has already been performed, and avoid making changes to elements for which selectors have already been set. After making changes, you can confirm the impact on inline editing using the following methods: ### Step 1: Preview the Experience If the page editing experience is found to be expired or abnormal, first preview the experience to confirm whether the expiration is due to changes in page structure. **Preview is normal:** This indicates that there are no issues with the page structure. Users should pay attention to the application scope of the page experience and the trigger conditions of the experience. **Preview is abnormal:** Proceed to the next step for confirmation. ### Step 2: Re-edit the Experience Enter the experience editing screen and check whether the changed items display **\[Element not found]**. If this display appears, it means that the changed item has expired. If the expiration display appears: Delete the changed item and re-identify the correct element to perform page editing. ### Step 3: Contact Technical Support If the expiration issue is not resolved through the above steps, or if further assistance is needed, please contact the technical support team. ## In Closing It is very important for everyone to understand the principles of page editing and selectors. By verifying whether selectors are accurate after page changes, you can prevent page editing from expiring, and improve the accuracy and reliability of experience data. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://helps.ptengine.com/en/developer/inline-edit-mechanism.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.