Method for Displaying Product Details Page and Electronic Device
Through the product details page with a two-layer view structure, the first layer view carries traditional content and the second layer view carries professional content, which solves the problem of difficult to quickly obtain professional information in traditional details pages, and achieves the improvement of information efficiency and the satisfaction of diversified browsing needs.
Patent Information
- Application Number
- CN202111676112.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2021-12-31
- Publication Date
- 2025-07-18
- Estimated Expiration
- 2041-12-31
AI Technical Summary
It is difficult to quickly provide professional content on traditional product details pages. Users need to read prices and other information in turn before they can obtain professional information, which cannot meet the browsing needs of different users.
It adopts a two-layer view structure. The first layer view carries the content of traditional product details pages, and the second layer view carries professional content. Users can switch to browse as needed to provide an operation entrance to trigger content to display.
It improves the efficiency of users to obtain information and meets the browsing needs of different users. Professional content is displayed in an independent layer, and users can read it on demand.
Smart Images

Figure CN114445177B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the technical field of page display, and particularly to a method for displaying a product detail page and an electronic device. Background Art
[0002] In a traditional product information service system, the product detail page mainly presents the product main image, purchase-related information, user evaluation information, product picture and text details, etc. in a straightforward manner in sequence. The browsing order of users is as follows: first look at the main image, then read the purchase-related information (price, promotion, logistics, etc.), and then read the product picture and text details (attributes, styles, on-body pictures, etc.). Although a lot of information is provided on the page and navigation labels such as "Product", "Evaluation", and "Details" can be provided for users to quickly locate each block, for users who have not fully understood the product, they still cannot quickly obtain the information they need.
[0003] Therefore, how to better help users obtain information about products has become a technical problem that needs to be solved by those skilled in the art. Summary of the Invention
[0004] This application provides a method for displaying a product detail page and an electronic device, which can improve the efficiency of users to obtain information and better meet the different browsing needs of different users.
[0005] This application provides the following solutions:
[0006] A method for displaying a product detail page, including:
[0007] Receiving a request to display the detail page of a target product;
[0008] Displaying the detail page of the target product, where the detail page is a double-layer view structure. Among them, the first layer of view carries the first content about the target product, and the second layer of view carries the second content about the target product; the second content includes: professional content generated according to the category to which the target product belongs.
[0009] Among them, the first layer of view and the second layer of view independently display content and respond to user operations.
[0010] Among them, in the initial state, the first layer of view is in an expanded state and partially overlaps the second layer of view, so as to divide the first-screen display range into a first area and a second area. Among them, part of the content in the first layer of view is displayed in the first area, part of the content in the second layer of view is displayed in the second area, and the first area is used as the operation response area for the first layer of view, and the second area is used as the operation response area for the second layer of view.
[0011] Further included are:
[0012] Providing an operation entry for expanding and displaying more content in the second - layer view;
[0013] After a target trigger operation detected through the operation entry, switching the first - layer view to a collapsed state to expand the range of the second area and expand and display more content in the second - layer view.
[0014] Among them, the target trigger operation includes: an upward or downward sliding operation performed in the second area.
[0015] Among them, the second - layer view includes multiple blocks;
[0016] The second - layer view further includes a navigation component, which is displayed as part of the content in the second - layer view in the initial state, and the navigation component is used to provide navigation labels for each block;
[0017] The trigger operation includes: a trigger operation performed on the navigation labels in the navigation component.
[0018] Among them, the part of the content in the second - layer view displayed in the initial state includes: the content of the main - image area in the second - layer view;
[0019] During the process of left - right sliding and switching of multiple main - image contents in the main - image area, the navigation component is in a collapsed state;
[0020] The trigger operation includes: expanding the navigation component and performing a trigger operation on the navigation labels therein.
[0021] Among them, the main - image content is generated after being synthesized according to the atmosphere background image related to the second - layer view and the image of the target commodity.
[0022] Further included are:
[0023] During the process of displaying more content in the second - layer view within the visible range of the window, providing the navigation component to quickly locate the target block through the navigation component.
[0024] Among them, the navigation component is in the form of a turntable, and is used to select the target block by rotating the turntable to make the navigation label corresponding to the target block enter the focus area.
[0025] Among them, providing the operation entry for expanding and displaying more content in the second - layer view includes:
[0026] Provide an operation option at the top of the first - layer view for folding down the first - layer view.
[0027] The target trigger operation includes:
[0028] A trigger operation initiated by the operation option for folding down the first - layer view.
[0029] Among them, it also includes:
[0030] During the process of displaying more content in the second - layer view, some key content in the first - layer view is displayed at the bottom layer above the second - layer view.
[0031] Among them, it also includes:
[0032] During the process of displaying some key content in the first - layer view at the bottom layer, provide an operation option for expanding the first - layer view upward, so that through this operation option, the second - layer view is switched to the folded - up state, and the range of the first area is expanded to display the content of the first - layer view.
[0033] Among them, it also includes:
[0034] During the process of displaying more content in the second - layer view, if the content in the second - layer view has scrolled to the bottom, when receiving an operation of continuing to scroll upward, the second - layer view is restored to the folded - up state, and the range of the first area is expanded to display the content of the first - layer view.
[0035] Among them, it also includes:
[0036] At the bottom of the content of the second - layer view, provide an operation option for positioning to and displaying the target block in the first - layer view, so that when the content in the second - layer view has scrolled to the bottom, through this operation option, the content in the target block in the first - layer view is displayed.
[0037] Among them, the professional content is structured professional content generated according to the content template corresponding to the target category to which the target product belongs and the relevant data about the target product.
[0038] Among them, the content template is used to define the professional content fields included in the target category, and the professional content fields are determined according to the professional decision - making factors required by users under the target category.
[0039] Among them, the first content carried by the first-layer view includes transaction content, evaluation content, picture and text details content, and / or recommendation content of the target commodity.
[0040] Among them, the detailed page for displaying the target commodity includes:
[0041] Load the first page container that supports the double-layer view structure, so as to create the first-layer view and the second-layer view through the first page container, render the first content into the first-layer view, and render the second content into the second-layer view.
[0042] Among them, it also includes:
[0043] If only a single copy of the content of the target commodity is obtained, load the second page container to display the single copy of the content in a tiled structure.
[0044] A method for displaying a commodity detailed page, including:
[0045] Receive a request to display the detailed page of the target commodity;
[0046] Display the detailed page of the target commodity. The detailed page has a double-layer view structure. Among them, in the initial state, the first-layer view is in an expanded state and partially overlaps the upper layer of the second-layer view, so as to divide the first-screen display area into a first area and a second area. Among them, part of the content in the first-layer view is displayed in the first area, part of the content in the second-layer view is displayed in the second area, and the first area is used as the operation response area for the first-layer view, and the second area is used as the operation response area for the second-layer view;
[0047] Provide an operation entry for expanding and displaying more content in the second-layer view;
[0048] After a target trigger operation detected through the operation entry, switch the first-layer view to a collapsed state and expand and display more content in the second-layer view.
[0049] A device for displaying a commodity detailed page, including:
[0050] A request receiving unit, configured to receive a request to display the detailed page of the target commodity;
[0051] A page display unit for displaying the details page of the target product. The details page has a double-layer view structure. Specifically, the first layer of the view carries the first content about the target product, and the second layer of the view carries the second content about the target product. The second content includes professional content generated according to the category to which the target product belongs.
[0052] A device for displaying a product details page, comprising:
[0053] A request receiving unit for receiving a request to display the details page of the target product;
[0054] A page display unit for displaying the details page of the target product. The details page has a double-layer view structure. In the initial state, the first layer of the view is in an expanded state and partially overlaps the upper layer of the second layer of the view, so as to divide the first-screen display range into a first area and a second area. Specifically, in the first area, part of the content in the first layer of the view is displayed, in the second area, part of the content in the second layer of the view is displayed, and the first area is used as the operation response area for the first layer of the view, and the second area is used as the operation response area for the second layer of the view;
[0055] An operation entry providing unit for providing an operation entry for expanding and displaying more content in the second layer of the view;
[0056] An expansion display unit for, after detecting a target trigger operation through the operation entry, switching the first layer of the view to a collapsed state and expanding and displaying more content in the second layer of the view.
[0057] A computer-readable storage medium having a computer program stored thereon, which when executed by a processor implements the steps of the method described in any one of the foregoing.
[0058] An electronic device, comprising:
[0059] One or more processors; and
[0060] A memory associated with the one or more processors, the memory for storing program instructions, which when read and executed by the one or more processors, execute the steps of the method described in any one of the foregoing.
[0061] According to the specific embodiments provided in the present application, the present application discloses the following technical effects:
[0062] Through the embodiments of the present application, a double-layer view content structure can be provided on the detail page of the target product. In this way, the first layer of the view can carry the first content about the target product, and the second layer of the view can carry the second content about the target product. Among them, the second content includes: professional content generated according to the category characteristics of the target product. In this way, professional content can be generated for the product according to the industry characteristics of the specific product category, etc., and can be displayed through a separate layer of view. Therefore, more professional information can be provided for users through the product detail page. At the same time, for the content between different layers, there is no need to read it sequentially from top to bottom according to the traditional reading mode, so that the efficiency of users obtaining information can be improved, and different browsing needs of different users can be better met.
[0063] In a preferred embodiment, in the initial state when the detail page of the target product is displayed, the first layer of the view can be in an expanded display state, and the first layer of the view can be displayed in a manner of partially overlapping the upper layer of the second layer of the view. In this way, within the first screen range, part of the content of the first layer of the view and part of the content of the second layer of the view can be displayed simultaneously, enabling users to perceive the existence of the two layers of content. In addition, an operation entry for expanding and displaying more content in the second layer of the view can be provided. After a target trigger operation detected through the operation entry, the first layer of the view can be switched to a collapsed state, and more content in the second layer of the view can be expanded and displayed. In this way, the professional content can be displayed in an independent layer and can be expanded and displayed when the user needs it.
[0064] Of course, it is not necessary for any product implementing the present application to achieve all the above advantages simultaneously. BRIEF DESCRIPTION OF THE DRAWINGS
[0065] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings required for use in the embodiments. Obviously, the drawings in the following description are only some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.
[0066] Figure 1 is a schematic diagram of the system architecture provided by the embodiments of the present application;
[0067] Figure 2 is a flowchart of the first method provided by the embodiments of the present application;
[0068] Figures 3-1 to 3-3 is a schematic diagram of the page double-layer structure provided by the embodiments of the present application;
[0069] Figures 4-1 to 4-3 It is a schematic diagram of the interface in the example provided by the embodiments of the present application;
[0070] Figure 5 It is a flowchart of the second method provided by the embodiments of the present application;
[0071] Figure 6 It is a schematic diagram of the first device provided by the embodiments of the present application;
[0072] Figure 7 It is a schematic diagram of the second device provided by the embodiments of the present application;
[0073] Figure 8 It is a schematic diagram of the electronic device provided by the embodiments of the present application. Detailed implementation manners
[0074] Next, the technical solutions in the embodiments of the present application will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art belong to the scope of protection of the present application.
[0075] First of all, it should be noted that the inventors of the present application found in the process of implementing the embodiments of the present application that some products actually require relatively professional content introduction to better convey their characteristics to users. Moreover, from the perspective of some users who have a relatively in-depth understanding of products in certain industries and categories, they also need to make purchase decisions based on this relatively professional content. For example, taking the perfume category as an example, for some "senior" users, they may not only need to pay attention to factors such as its brand, price, fragrance type, etc., but also need to pay attention to its fragrance notes information (including top notes, middle notes, base notes), lasting power, and so on. However, the traditional product detail pages generally have a general tiled display structure. Even if they can provide the professional information of the product, it is scattered in the long pictures in the text and picture detail blocks, which is not conducive to users' reading and information acquisition. In addition, there are also some merchants who do not interpret the professional information of products well. Even if there is an interpretation, it is mostly presented in the form of pictures. Moreover, there are differences in the ability of different merchants to interpret the products professionally and the logic of information editing, etc. This makes it possible that even for the same product, the information obtained by users in different product detail pages may be different, and it is difficult for users to obtain relatively unified and stable information.
[0076] To facilitate users in obtaining professional content about products, a feasible approach is to edit the professional content in a unified structured format and then display it to enhance the unity and stability of the information obtained by users. However, how to present this professionally edited content to users is an issue that needs to be considered. For example, if it is still displayed in the existing tiled structure of the product detail page, this professional content can be used as part of the text and image detail block. However, users still need to read information such as price before they can read the text and image detail information. Or, the professional content can be directly placed before the price and other text and image detail content, which also requires users to read the professional content first and then read the price and other text and image detail content. That is to say, in the tiled structure mode, the user's reading mode is to read sequentially from top to bottom, and the reading needs of different users may be different. Some users may be more concerned about this professional information, while some users may be more concerned about traditional price information, text and image detail information, etc. Therefore, no matter where the professional content is placed on the page, it is difficult to meet the different browsing needs of all users.
[0077] Therefore, in the embodiments of the present application, for products with the need to uniformly and stably express professional content, a two-layer view content structure can be provided in their product detail pages. The first layer of the view can be similar to the traditional product detail page, which can include purchase-related information, user evaluation information, text and image detail information of the product, recommendation information, etc., and can also maintain the original information structure of the product detail page (of course, there may no longer be a main image, which will be introduced later) to ensure the original browsing habits of users; the second layer of the view can be specifically used to carry the professional content of the product (which can be generated according to the category characteristics of the target product).
[0078] In a preferred embodiment, in the initial state of displaying the details page of the target product, the first-layer view can be in an expanded state, and the first-layer view can be partially superimposed on the upper layer of the second-layer view, so that the user can read some content in the second-layer view and some content in the first-layer view within the first screen range (since the second-layer view is located at the bottom layer and the first-layer view is partially superimposed on the upper layer of the second-layer view, within the screen space range of the first screen, some content in the second-layer view is located in the upper area of the screen, and some content in the first-layer view is located in the lower area of the screen). That is to say, in the initial state, the user can perceive the existence of two layers of content. At the same time, an operation entry for expanding and displaying more content in the second-layer view can be provided, so that the user can select to read more content in the first-layer view or the second-layer view according to their actual browsing needs. For example, since the first-layer view is in an expanded state by default, if the user wants to continue reading the content in the first-layer view, they can directly perform an upward sliding operation within the content area where the first-layer view is located, so that more content in the first-layer view slides into the visible range of the window, and the user can read it. This process is similar to the process of the user browsing a traditional product details page. If more content in the second-layer view needs to be read, the corresponding trigger operation can be performed through the aforementioned operation entry for expanding and displaying more content in the second-layer view (for example, performing an upward or downward sliding operation in the area where some content of the second-layer view is located on the first screen, or if a navigation component is provided for the second-layer view, it can also be triggered by operating the navigation component, etc.). After detecting such a trigger operation, the first-layer view can be switched to a collapsed state, and more content in the second-layer view can be expanded and displayed. The user can also perform an up and down sliding operation to slide more content in the second-layer view into the visible range of the window, and the user can read it.
[0079] In the above manner, since structured professional content, key value point content, etc. can be provided for specific products, and this content can be displayed in the second layer view through the double-layer view structure of the product detail page, while the first layer view can be used to present content in the traditional way of a product detail page, etc. In this way, there is no need to read sequentially from top to bottom according to the traditional reading mode, thus improving the efficiency of users to obtain information. Among them, in the default state, the first layer view can be in an expanded display state and partially overlay on the upper layer of the second layer view. Therefore, when a user enters the product detail page, they can see some content in both layers at the same time. For example, the first layer view can mainly display core information such as price and promotions, enabling users to quickly obtain core information such as price. On the other hand, by performing operations such as swiping down in the area where the content of the second layer view is located or operating on the navigation components therein, the display of the content of the second layer view can be triggered, so that information such as the professional content and key value points of the product can be directly browsed. In this way, if a user needs to browse the ordinary detail content of a product, they can browse the first layer view, and if they need to browse the professional content of the product, they can quickly switch to the second layer view for browsing. Therefore, it can meet the various browsing needs of users.
[0080] Among them, regarding the professional content specifically displayed in the second layer view, in one way, it can be obtained by directly extracting it from the graphic and text details of the product. Or, in another way, considering that the professional information in the detail pages of some products may be inaccurate or incomplete, etc., therefore, professional data about the product (in the case where the same product includes multiple different SKUs (stock keeping units), it can be collected according to the SKU dimension) can also be collected offline in advance and filled into a structured template to generate professional content / value point content about a specific product / SKU. Among them, the specific template can also be pre-configured.
[0081] To achieve the above purpose, as Figure 1As shown, a configuration backend can be provided for technicians / operators in the product information service system. Specifically, when implemented, the configuration backend can be divided into a template configuration backend and a data configuration backend. Through the template configuration backend, different templates can be configured for different categories. In each template, information such as which specific content fields are required and data requirements for each field can be defined (the template can include specific professional content field names, and these professional content field names can be determined according to the professional decision factors required by users under the target category). Subsequently, some products can be selected, and through the above-mentioned data configuration backend, professional content can be generated for these products. For example, according to the category to which the product belongs, the corresponding template can be determined, and then according to the professional content fields defined in the template corresponding to the specific category, corresponding attribute values can be configured for the specific fields, so as to generate structured professional content for the specific product. This professional content can be saved in the database. When specifically required to display the details page of a target product, the server can read the professional content of the product from this database. Additionally, another piece of content can also be read from other databases. For example, this other piece of content can include purchase-related content, evaluation-related content, graphic and text details content, recommendation-related content, and so on. In this way, the two pieces of content can be displayed on the client side through a two-layer view structure.
[0082] The following provides a detailed introduction to the specific implementation solutions provided by the embodiments of the present application.
[0083] Embodiment 1
[0084] First, from the perspective of the client, Embodiment 1 of the present application provides a method for displaying a product details page. Refer to Figure 2 and this method can include:
[0085] S201: Receive a request to display the details page of a target product.
[0086] Specifically, when implemented, users can initiate a browsing request for the details page of the target product in various ways. For example, during the process of browsing the product recommendation information provided on the client home page, if interested in a certain product, the user can click its link to initiate an access to the details page of the product. Or, during the process of searching for a product, if interested in a certain search result, the user can also click its link to initiate an access to the corresponding product details page. Or, access to the details page of a specific product can also be initiated from various other traffic distribution pages such as the store page, category page, channel page, promotion activity page, and so on.
[0087] S202: Display the detail page of the target product. The detail page has a two-layer view structure. Specifically, the first-layer view is used to carry the first content about the target product, and the second-layer view is used to carry the second content about the target product. The second content includes: professional content generated according to the category to which the target product belongs.
[0088] After receiving an access request for the detail page of the target product, the detail page of the target product can be displayed. In the embodiments of the present application, two pieces of content can be associated with the same target product and can be displayed in a page container that supports a two-layer view structure in the client.
[0089] Regarding the second content, it mainly refers to professional content generated according to the category to which the target product belongs. In the embodiments of the present application, to generate this professional content, as described above, a corresponding professional content configuration template can be created in advance for specific categories. After that, some products can be selected and professional content can be generated for these products in a unified manner. For the sake of easy understanding, the generation process of specific professional content will be introduced below.
[0090] As described above, in specific implementation, first, through the template configuration background, different templates can be configured for different categories. In each template, information such as which specific content fields are required and the data requirements for each field can be defined. The specific content fields can be determined based on the decision factors of users under the same category. That is to say, through big data analysis, investigation and visits, expert opinions, etc., it can be determined which professional factors users mainly consider or which value points they mainly focus on when making decisions about products under the same category. For example, regarding the perfume category, specific professional decision factors may include top notes, middle notes, base notes, perfume concentration, professional evaluations, etc. Additionally, in an optional manner, the determined decision factors can be clustered. For example, top notes, middle notes, and base notes can be clustered into fragrance notes, etc., so that the same category corresponds to multiple modules, and each module can include one or more decision factors, and these factors can respectively correspond to one field. Of course, when defining the template, if it is necessary to add a navigation component to the second-layer view, fields related to the navigation component can also be configured in the template, such as the number of navigation labels and the names of each navigation label (which can correspond to the names of each module), etc.
[0091] That is to say, different templates can be configured for each category according to the characteristics of each category. After completing the configuration of the template corresponding to a specific category, the corresponding template can be used to configure the corresponding data for a specific product / SKU, so as to generate the professional content corresponding to the specific product / SKU, etc. Such content can be used for display in the second-level view of the product details page.
[0092] In specific implementation, the data corresponding to a specific product / SKU can be collected by the system operators, etc. Then, through the data configuration background, data configuration is performed for the specific product / SKU respectively. For example, first, the corresponding template can be selected according to the category to which the product / SKU belongs. Then, according to the fields defined in the template and the data requirement information on the specific fields, etc., data configuration is performed for each field respectively (it can be configured only for the required fields, or for all fields respectively). After completing the data configuration, the professional content corresponding to the product / SKU can be generated. Then, it can be saved to the database system. For example, a database table can be created in the database system for the scenario of the embodiment of the present application, where multiple copies of data can be saved, and each copy of data can include the professional content corresponding to a product / SKU (including multiple fields and the values on the fields).
[0093] It should be noted here that it may not be necessary to display the details page in the form of a two-layer view content structure for all products. For example, only products under some special categories may have the need to display professional content separately. In addition, even for products under the same category, only some products may have pre-generated structured professional content. Therefore, in specific implementation, a special identifier can also be added to the products that have generated structured professional content. In this way, when displaying the details page, it can be determined whether to display through the two-layer view structure according to whether the specific product has the above special identifier. If there is no such special identifier, the traditional tiled structure can be used for display.
[0094] After the client receives a request for displaying the details page of a target product, it can submit the request to the server. Among them, for products with special identifiers, the server can obtain two pieces of content about the specific product from multiple databases. One of them can include the professional content implemented for the product in the embodiments of the present application, and the other piece of content may not be limited in the embodiments of the present application. For example, it can include purchase-related content, evaluation content, graphic and text details content, recommendation content, etc. These contents can usually be obtained from other databases. For example, for purchase-related content, including title, price, specification parameters, etc., since these information need to be filled in when the merchant publishes the product, these contents can be read from the database related to product publishing. In addition, regarding the recommendation content, it can be read from the database corresponding to the relevant recommendation module, and so on. After that, the server can merge the two pieces of content read and return them to the client.
[0095] It should be noted here that in the specific implementation, the server can also check the integrity of the professional content of the specific product. This integrity can be reflected in two levels. First, in the case where a single product corresponds to multiple different SKUs, whether each SKU has been configured with structured professional content; second, whether the required information in each field of the structured data of each SKU is complete. If the above integrity conditions are met, it can be displayed in the form of the double-layer view structure described in the embodiments of the present application. Otherwise, a common details page can be displayed to avoid problems such as errors during the display process of the double-layer view structure.
[0096] On the client side, a first page container supporting the double-layer view structure can be pre-implemented. When there are two pieces of content for the target product, the client can load this first page container, so that the two pieces of content can be displayed through the page container of the double-layer view structure. Specifically, after the client receives the first content and the second content returned by the server, it can determine the details page of the double-layer view content structure for displaying the current target product. At this time, the first page container supporting the double-layer view structure can be loaded in the details page. In this way, a first layer view and a second layer view can be created in the first page container, and through the first page container, the first content is rendered into the first layer view, and the second content is rendered into the second layer view. Among them, regarding the specific first layer view and the second layer view, they can specifically be two independent view stacks implemented within the same page container to achieve hierarchical and independent display of different contents.
[0097] It should be noted here that the client can also implement a second page container that supports a common tiled structure at the same time. For products that do not have pre-generated separate professional content, or products with incomplete configured professional content, the server can return a single piece of content to the client in a traditional manner. At this time, the client can load the second page container to display the common details page of the product in a common tiled manner.
[0098] In specific implementation, during the display process through the hierarchical structure, the first-layer view and the second-layer view exist independently, rather than in a parent-child or affiliated relationship. That is to say, both can independently display the content in each layer and independently respond to user operations. This is completely different from the solution of displaying a floating layer on top of a certain page. First of all, the floating layer is usually displayed only when a certain operation is triggered. And after the floating layer is displayed, the main page loses the ability to respond to user operations, and the floating layer completely responds to user operations. However, in the embodiments of the present application, the first-layer view and the second-layer view can exist at the same time, and both can respond to user operations.
[0099] For example, in the initial state, the first-layer view can be in an expanded state and partially superimposed on the upper layer of the second-layer view. In this way, the first-screen range can be divided into a first area and a second area. Among them, part of the content in the first-layer view is displayed in the first area, and part of the content in the second-layer view is displayed in the second area. And the first area is used as the operation area for the first-layer view, and the second area is used as the operation area for the second-layer view. For example, as Figure 3-1 shown, it is a schematic diagram of the details page in the initial state. Among them, the second area where part of the content shown in the second-layer view is located is shown at 31, and the first area where part of the content shown in the first-layer view is located is shown at 32. In this way, for consumer users, the existence of the two layers of content can be perceived. And in this state, if the user operates on the content in the second-page view in the above-mentioned second area. At the same time, if the user swipes up in the first area shown at 32, more content in the first-layer view can enter the visible range of the window.
[0100] Among them, since in the initial state, the content of the first-layer view is displayed in a way that partially superimposes on the upper layer of the second-layer view, only the content in the head area of the second-layer view can be displayed. Therefore, the content in this head area can play a role in guiding the user to view the content of the second-layer view. In specific implementation, in order to achieve the above purpose, the main picture content can be provided in the above-mentioned head area of the second-layer view. At this time, in the above Figure 3-1In the initial state shown, a left - right sliding operation can be performed within the second region shown at 31 to switch and display multiple main image pictures. That is, in Figure 3-1 the example shown, the main picture content in the second layer view can be shown within the second region shown at 31.
[0101] It should be noted here that in the embodiment of the present application, since this main picture content is located in the second layer view, and the second layer view is related to the professional content of the commodity, etc., and usually some atmosphere background pictures, etc. may be required for rendering. Therefore, in order to better match the overall atmosphere of the second layer view, each of the main image pictures shown in the main picture area can also be obtained by synthesizing a pre - set atmosphere background image and a white - background commodity image (in the traditional commodity details page, the main picture area usually shows white - background commodity pictures). In addition, since there is already a main picture area in the second layer view, and the first layer view starts to be shown from below this main picture area, the first layer view can no longer provide a separate main picture area and can directly start to be shown from contents such as the title and price.
[0102] Since in the default state, the first layer view is located on the upper layer and the second layer view is located on the lower layer, and only part of the content of the head can be shown, therefore, in order to enable more content in the second layer view to have the opportunity to be shown, an operation entry for expanding and showing more content in the second layer view can also be provided. Among them, there can be multiple ways to specifically provide the operation entry, and multiple operation entries can co - exist, so that the user can trigger the expansion and display of more content in the second layer view through multiple methods and multiple gestures. At the same time, the first layer view can be retracted, so that the range of the second region is expanded, enabling the operation of the second layer view by the user to be responded to within a larger visible area range.
[0103] For example, in one way, this operation entry can be provided in the aforementioned second region. Specifically, by performing an upward or downward sliding operation in this second region, the expansion and display of more content in the second layer view can be triggered.
[0104] Alternatively, since a specific second-layer view may include multiple blocks for displaying multiple pieces of professional content. For example, for a category such as perfume, the specific professional content can be divided into multiple blocks such as fragrance notes, fragrance reviews, and longevity, and so on. At this time, a navigation component can also be provided for the second-layer view, and this navigation component can be used to provide navigation labels for each block. For example, in the above example of the perfume category, navigation labels such as the above-mentioned fragrance notes, fragrance reviews, and longevity can be provided in the navigation component. By clicking on a specific navigation label, the location of the specific block can be quickly located for display. In this case, in the above-mentioned initial state, this navigation component can also be displayed as part of the second-layer view. For example, as shown in Figure 3-1 the part shown at 33 in, the navigation component can be displayed in the main image area of the second-layer view. In this way, by performing a corresponding trigger operation on the navigation label in the navigation component, the display of the second-layer view can be triggered. Among them, during the process of performing a trigger operation on the navigation label in the navigation component, vibration feedback of the terminal device can also be provided simultaneously, so as to increase the certainty of the user's operation behavior.
[0105] Among them, when specifically implemented, during the process of left and right sliding and switching display of multiple main image contents in the main image area, in order to avoid excessive occlusion of the main image, the navigation component can be in a retracted state (for example, as shown at 34 in Figure 3-2 , in the retracted state, a small part of the navigation component can also be displayed). At this time, the user can pull up the retracted navigation component to the expanded state shown in Figure 3-1 by performing a leftward pull-up operation on the retracted navigation component. Alternatively, when the main image area is swiped to the left until the end and then released after continuing to swipe left, the navigation component can also be evoked to the expanded state. At this time, by performing operations such as clicking on the navigation label in the navigation component, the display of the second-layer view can be triggered.
[0106] When specifically implemented, in an optional manner, as shown at 33 in Figure 3-1 , the navigation component can be displayed in a turntable style. In this way, by rotating the turntable, the navigation label corresponding to the target block can be made to enter the focus area to select the target block. For example, in the state shown in Figure 3-1 , the current one in the focus area is "Commodity", that is, the main image part of the second-layer view is currently being displayed. If the turntable is rotated so that the navigation label "Fragrance Notes" enters the focus area, the display of the second-layer view can be triggered.
[0107] In addition, an operation option for retracting the first-layer view downward can also be provided at the top of the first-layer view. For example, it can be asFigure 3-2 The "short line" shown at 35 in
[0108] After receiving a specific target trigger operation, the first-layer view can be switched to the collapsed state, and more content in the second-layer view can be expanded and displayed. For example, as Figure 3-3 shown, a larger area shown at 36 can be used to display the content of the second-layer view, and by performing an up-and-down sliding operation in this area, more content in the second-layer view can also be displayed within the visible range of the window. Of course, during the process of expanding and displaying more content in the second-layer view, the aforementioned navigation component can also be provided to quickly locate the target block through the navigation component. And, during the process of sliding the second-layer view up and down in the area shown at 36, the navigation component can also be in the collapsed state, as Figure 3-3 shown at 38 in
[0109] During the process of expanding and displaying more content in the second-layer view, some key content in the first-layer view can also be displayed at the bottom. That is to say, after the first-layer view is collapsed, it is not completely not displayed, but can be as Figure 3-3 shown at 37 in
[0110] Furthermore, during the process of displaying some key content in the first-layer view at the bottom, an operation option for expanding the first-layer view upward can also be provided. For example, as Figure 3-3 shown at 39 in
[0111] Of course, during the process of displaying more content in the second-layer view, if the content in the second-layer view has scrolled to the bottom, when receiving an operation of continuing to scroll up, the second-layer view can be restored to the retracted state, and the content of the first-layer view can be expanded and displayed. That is to say, after completing the display of all the content in the second-layer view, if continuing to scroll up, the second-layer view can be automatically retracted, and the first-layer view can be re-expanded and displayed.
[0112] For better understanding, the following uses an example in an actual application to introduce various state changes of the above-mentioned detailed page. Assume that the target product currently being displayed is a perfume. Then, in the initial state of displaying its detailed page, the first-screen display situation can be as Figure 4-1 shown. Among them, the area shown as 41 is a part of the content displayed in the second-layer view, that is, the main image area of the second-layer view; the area shown as 42 is a part of the content displayed in the first-layer view. At this time, if an upward scroll operation is performed in the area shown as 42, other content in the first-layer view can be continuously displayed. If an upward or downward scroll is performed in the area shown as 41, or triggered through the navigation component shown in the 41 area, more content of the second-layer view can be expanded and displayed. At this time, it can be as Figure 4-2 shown. In the area shown as 43, more content of the second-layer view can be displayed, and in this 43 area, it is possible to scroll up and down, or operate on the navigation component, to display other content of the second-layer view in this 43 area. During this process, the first-layer view can be retracted, but some key content therein can be displayed at the bottom in a relatively small form such as a card. For example, as Figure 4-2 shown in the area 44 in it, which mainly can display information such as the price of the product. At this time, if an upward pull operation is performed on the first-layer view through the operation option at the top of the retracted first-layer view, the first-layer view can be switched back to the expanded display state, and at the same time, the second-layer view can be retracted.
[0113] In addition, since the content in the first-layer view may usually be relatively large, at the bottom of the content in the second-layer view, an operation option can also be provided for quickly positioning to a certain target block in the first-layer view for display, so that when the content in the second-layer view has scrolled to the bottom, through this operation option, the content in the target block in the first-layer view can be displayed within the visible range of the window. For example, as Figure 4-3 shown at 45 in it, an operation option of "View Graphic Details" can be provided. After the user finishes browsing the content in the second-layer view, through this operation option, they can quickly position to the graphic details block in the first-layer view for display, and so on.
[0114] As described above, in a specific implementation, in a preferred embodiment, the professional content about a specific product in the embodiments of the present application may be structured content generated according to the content template corresponding to the target category to which the target product belongs and the relevant data about the target product collected in advance. Among them, the content template can be used to define the professional content fields included in the target category, and the professional content fields are determined according to the professional decision factors required by users under the target category.
[0115] In summary, through the embodiments of the present application, a two-layer view content structure can be provided on the detail page of the target product. In this way, the first content about the target product can be carried by the first layer of view, and the second content about the target product can be carried by the second layer of view. Among them, the second content includes: professional content generated according to the category characteristics of the target product. In this way, professional content can be generated for the product according to the industry characteristics of the category to which the specific product belongs, and can be displayed through a separate layer of view. Therefore, more professional information can be provided to users through the product detail page. At the same time, for the content between different layers, there is no need to read it sequentially from top to bottom according to the traditional reading mode, so that the efficiency of users obtaining information can be improved, and the different browsing needs of different users can be better met.
[0116] In a preferred embodiment, in the initial state of displaying the detail page of the target product, the first layer of view can be in an expanded display state, and the first layer of view can be displayed in a manner of partially overlapping the upper layer of the second layer of view. In this way, within the first screen range, part of the content of the first layer of view and part of the content of the second layer of view can be displayed at the same time, so that users can perceive the existence of the two layers of content. In addition, an operation entry for expanding and displaying more content in the second layer of view can be provided. After the target trigger operation detected through the operation entry, the first layer of view can be switched to a collapsed state, and more content in the second layer of view can be expanded and displayed. In this way, the professional content can be displayed in an independent layer and can be expanded and displayed when the user needs it.
[0117] Embodiment 2
[0118] The foregoing First Embodiment mainly introduced scenarios where specialized content of a product needs to be separately displayed. In actual applications, similar requirements may also exist in other scenarios. For example, in addition to the need for more unified and stable display of the foregoing specialized content, some special value points of the product (which can usually be "selling points", etc.), including value points that users may be more concerned about, may also need to be displayed in a more unified and stable manner, rather than being scattered in the long picture of product details and graphics. At this time, the solution provided in the embodiments of the present application can also be applied to the above scenarios. Therefore, the Second Embodiment also provides a method for displaying a product details page. Refer to Figure 5 , the method may include:
[0119] S501: Receive a request to display the details page of the target product;
[0120] S502: Display the details page of the target product. The details page has a double-layer view structure. Among them, in the initial state, the first-layer view is in an expanded state and partially overlays the upper layer of the second-layer view, so as to divide the first-screen display area into a first area and a second area. Among them, some content in the first-layer view is displayed in the first area, some content in the second-layer view is displayed in the second area, and the first area is used as the operation response area for the first-layer view, and the second area is used as the operation response area for the second-layer view;
[0121] S503: Provide an operation entry for expanding and displaying more content in the second-layer view;
[0122] S504: After detecting a target trigger operation through the operation entry, switch the first-layer view to a collapsed state and expand and display more content in the second-layer view.
[0123] Regarding the parts not detailed in the Second Embodiment, reference may be made to the foregoing First Embodiment or the records in other parts of this specification, which will not be elaborated here.
[0124] It should be noted that the embodiments of the present application may involve the use of user data. In actual applications, user-specific personal data can be used in the solutions described in this article within the scope permitted by applicable laws and regulations (for example, with the user's explicit consent and effective notice to the user, etc.) in compliance with the applicable laws and regulations of the country where it is located.
[0125] Corresponding to the First Embodiment, the embodiments of the present application also provide a device for displaying a product details page. Refer to Figure 6 , the device may include:
[0126] A request receiving unit 601, configured to receive a request for displaying a details page of a target product;
[0127] A page display unit 602, configured to display the details page of the target product, where the details page has a two-layer view structure. Specifically, the first layer of the view carries first content about the target product, and the second layer of the view carries second content about the target product; the second content includes: professional content generated according to the category to which the target product belongs.
[0128] Wherein, the first layer of the view and the second layer of the view independently display content and respond to user operations.
[0129] Specifically, in an initial state, the first layer of the view can be in an expanded state and partially superimposed on the second layer of the view, so as to divide the first-screen display range into a first area and a second area. Specifically, in the first area, part of the content in the first layer of the view is displayed, and in the second area, part of the content in the second layer of the view is displayed, and the first area is used as an operation response area for the first layer of the view, and the second area is used as an operation response area for the second layer of the view.
[0130] At this time, the device may further include:
[0131] An operation entry providing unit, configured to provide an operation entry for expanding and displaying more content in the second layer of the view;
[0132] An expand display unit, configured to, after detecting a target trigger operation through the operation entry, switch the first layer of the view to a collapsed state, so as to expand the range of the second area and expand and display more content in the second layer of the view.
[0133] Wherein, the target trigger operation includes: an upward or downward sliding operation performed in the second area.
[0134] Specifically, the second layer of the view includes a plurality of blocks;
[0135] The second layer of the view further includes a navigation component, and in the initial state, it is displayed as part of the content in the second layer of the view. The navigation component is used to provide navigation labels for each block;
[0136] The trigger operation includes: a trigger operation performed on a navigation label in the navigation component.
[0137] Wherein, part of the content in the second layer of the view displayed in the initial state includes: the content of the main image area in the second layer of the view;
[0138] During the process of horizontally sliding and switching multiple main image contents in the main image area, the navigation component is in a collapsed state;
[0139] The triggering operation includes: expanding the navigation component and performing a triggering operation on the navigation labels therein.
[0140] Specifically, the main image content is generated after being synthesized based on the atmosphere background image related to the second-layer view and the image of the target commodity.
[0141] In addition, the device may further include:
[0142] A navigation component providing unit, configured to provide the navigation component during the process of displaying more content in the second-layer view within the visible range of the window, so as to quickly locate to the target block through the navigation component.
[0143] Wherein, the navigation component is in the form of a turntable, and is used to select the target block by rotating the turntable to make the navigation label corresponding to the target block enter the focus area.
[0144] Specifically, the operation entry providing unit may specifically be used for:
[0145] Providing an operation option at the top of the first-layer view for collapsing the first-layer view downward;
[0146] At this time, the target triggering operation includes:
[0147] A triggering operation initiated through the operation option for collapsing the first-layer view downward.
[0148] In addition, the device may further include:
[0149] A bottom display unit, configured to bottom-display some key contents in the first-layer view on the upper layer of the second-layer view during the process of displaying more content in the second-layer view.
[0150] Furthermore, the device may further include:
[0151] A first expansion option providing unit, configured to provide an operation option for expanding the first-layer view upward during the process of bottom-displaying some key contents in the first-layer view, so as to switch the second-layer view to a collapsed state through this operation option and expand the range of the first area to display the content of the first-layer view.
[0152] A switching unit, configured to, during the process of displaying more content in the second-layer view, if the content in the second-layer view has scrolled to the bottom, when receiving an operation of continuing to scroll upward, restore the second-layer view to the retracted state, expand the range of the first area, and display the content of the first-layer view.
[0153] A second expansion option providing unit, configured to provide an operation option for positioning to a target block in the first-layer view for display at the bottom of the content of the second-layer view, so that when the content in the second-layer view has scrolled to the bottom, the content in the target block in the first-layer view can be displayed through this operation option.
[0154] Wherein, the professional content is structured professional content generated according to the content template corresponding to the target category to which the target commodity belongs and the relevant data about the target commodity; wherein, the content template is used to define the professional content fields included in the target category, and the professional content fields are determined according to the professional decision factors required by users under the target category.
[0155] The first content carried by the first-layer view may include transaction content, evaluation content, graphic and text details content, and / or recommendation content of the target commodity.
[0156] Specifically, the display unit may specifically be configured to:
[0157] Load a first page container that supports the double-layer view structure, so as to create a first-layer view and a second-layer view through the first page container, render the first content into the first-layer view, and render the second content into the second-layer view.
[0158] The display unit may also be configured to:
[0159] If only a single piece of content of the target commodity is obtained, load a second page container to display the single piece of content in a tiled structure.
[0160] Corresponding to Embodiment 2, the embodiment of the present application further provides a device for displaying a commodity details page. Refer to Figure 7 and this device may include:
[0161] A request receiving unit 701, configured to receive a request for displaying a details page of a target commodity;
[0162] A display unit 702 for displaying a detail page of the target product. The detail page has a double-layer view structure. In the initial state, the first-layer view is in an expanded state and partially overlays the upper layer of the second-layer view, so as to divide the first-screen display range into a first area and a second area. In the first area, some content in the first-layer view is displayed, and in the second area, some content in the second-layer view is displayed. The first area is used as an operation response area for the first-layer view, and the second area is used as an operation response area for the second-layer view;
[0163] An operation entry providing unit 703 for providing an operation entry for expanding and displaying more content in the second-layer view;
[0164] An expansion display unit 704 for, after detecting a target trigger operation through the operation entry, switching the first-layer view to a collapsed state and expanding and displaying more content in the second-layer view.
[0165] In addition, an embodiment of the present application also provides a computer-readable storage medium, on which a computer program is stored. When the program is executed by a processor, the steps of the method described in any one of the foregoing method embodiments are implemented.
[0166] And an electronic device, including:
[0167] One or more processors; and
[0168] A memory associated with the one or more processors, where the memory is used to store program instructions. When the program instructions are read and executed by the one or more processors, the steps of the method described in any one of the foregoing method embodiments are executed.
[0169] Wherein, Figure 8 The architecture of the electronic device is exemplarily shown. For example, the device 800 can be a mobile phone, a computer, a digital broadcast terminal, a messaging device, a game console, a tablet device, a medical device, a fitness device, a personal digital assistant, an aircraft, etc.
[0170] Referring to Figure 8 , the device 800 may include one or more of the following components: a processing component 802, a memory 804, a power component 806, a multimedia component 808, an audio component 810, an input / output (I / O) interface 812, a sensor component 814, and a communication component 816.
[0171] The processing component 802 generally controls the overall operation of the device 800, such as operations associated with display, telephone calls, data communication, camera operations, and recording operations. The processing element 802 may include one or more processors 820 to execute instructions to complete all or part of the steps of the methods provided by the technical solutions of the present disclosure. In addition, the processing component 802 may include one or more modules to facilitate the interaction between the processing component 802 and other components. For example, the processing component 802 may include a multimedia module to facilitate the interaction between the multimedia component 808 and the processing component 802.
[0172] The memory 804 is configured to store various types of data to support the operation of the device 800. Examples of such data include instructions for any application or method operating on the device 800, contact data, phone book data, messages, pictures, videos, etc. The memory 804 may be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk, or optical disk.
[0173] The power supply component 806 provides power to various components of the device 800. The power supply component 806 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power for the device 800.
[0174] The multimedia component 808 includes a screen that provides an output interface between the device 800 and the user. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touches, swipes, and gestures on the touch panel. The touch sensors can not only sense the boundaries of touch or swipe actions, but also detect the duration and pressure associated with the touch or swipe operations. In some embodiments, the multimedia component 808 includes a front camera and / or a rear camera. When the device 800 is in an operation mode, such as a shooting mode or a video mode, the front camera and / or the rear camera can receive external multimedia data. Each of the front camera and the rear camera may be a fixed optical lens system or have a focal length and optical zoom capabilities.
[0175] The audio component 810 is configured to output and / or input audio signals. For example, the audio component 810 includes a microphone (MIC) that is configured to receive external audio signals when the device 800 is in an operating mode, such as a call mode, a recording mode, and a voice recognition mode. The received audio signals can be further stored in the memory 804 or transmitted via the communication component 816. In some embodiments, the audio component 810 further includes a speaker for outputting audio signals.
[0176] The I / O interface 812 provides an interface between the processing component 802 and a peripheral interface module, and the peripheral interface module may be a keyboard, a click wheel, buttons, etc. These buttons may include, but are not limited to: a home button, a volume button, a power button, and a lock button.
[0177] The sensor component 814 includes one or more sensors for providing an assessment of the state of various aspects of the device 800. For example, the sensor component 814 can detect the on / off state of the device 800, the relative positioning of components, such as the display and keypad of the device 800. The sensor component 814 can also detect a change in the position of the device 800 or a component of the device 800, the presence or absence of user contact with the device 800, the orientation or acceleration / deceleration of the device 800, and the temperature change of the device 800. The sensor component 814 can include a proximity sensor configured to detect the presence of nearby objects without any physical contact. The sensor component 814 can also include a light sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, the sensor component 814 can further include an acceleration sensor, a gyro sensor, a magnetic sensor, a pressure sensor, or a temperature sensor.
[0178] The communication component 816 is configured to facilitate communication between the device 800 and other devices in a wired or wireless manner. The device 800 can access a wireless network based on a communication standard, such as WiFi, or a mobile communication network such as 2G, 3G, 4G / LTE, 5G, etc. In an exemplary embodiment, the communication component 816 receives broadcast signals or broadcast-related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component 816 further includes a near field communication (NFC) module to facilitate short-range communication. For example, the NFC module can be implemented based on radio frequency identification (RFID) technology, infrared data association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology, and other technologies.
[0179] In an exemplary embodiment, the device 800 may be implemented by one or more application specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components for performing the above method.
[0180] In an exemplary embodiment, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 804 including instructions, and the above instructions can be executed by a processor 820 of the device 800 to complete the method provided by the technical solution of the present disclosure. For example, the non-transitory computer-readable storage medium may be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.
[0181] From the description of the above embodiments, those skilled in the art can clearly understand that the present application can be implemented by means of software plus a necessary general hardware platform. Based on such an understanding, the technical solution of the present application, in essence, or the part that contributes to the prior art can be embodied in the form of a software product. The computer software product can be stored in a storage medium, such as a ROM / RAM, a magnetic disk, an optical disk, etc., and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the methods described in various embodiments or some parts of the embodiments of the present application.
[0182] Each embodiment in this specification is described in a progressive manner. For the same or similar parts among the embodiments, reference can be made to each other. Each embodiment focuses on the differences from other embodiments. In particular, for a system or system embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can refer to the partial description of the method embodiment. The systems and system embodiments described above are merely illustrative. The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place, or may be distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art can understand and implement it without creative efforts.
[0183] The above has introduced in detail the method for displaying product details pages and the electronic device provided by this application. Specific examples are used in this article to elaborate on the principle and implementation manner of this application. The description of the above embodiments is only used to help understand the method and its core idea of this application; at the same time, for those of ordinary skill in the art, according to the idea of this application, there will be changes in the specific implementation manner and application scope. In summary, the content of this specification should not be construed as a limitation to this application.
Claims
1. A method for displaying a product details page, characterized in that including: receiving a request to display the details page of a target product; displaying the details page of the target product, the details page being a two - layer view structure. In the initial state, the first - layer view partially overlays the upper layer of the second - layer view to display some content in the first - layer view and some content in the second - layer view on the first screen. Among them, the first - layer view carries the first content about the target product, and the second - layer view carries the second content about the target product; the second content includes: professional content generated according to the content template corresponding to the category to which the target product belongs and the relevant data about the target product.
2. The method according to claim 1, wherein the first - layer view and the second - layer view independently display content and respond to user operations.
3. The method according to claim 2, wherein in the initial state, the first - layer view is in an expanded state, so as to divide the first - screen display range into a first area and a second area. Among them, some content in the first - layer view is displayed in the first area, some content in the second - layer view is displayed in the second area, and the first area is used as the operation response area for the first - layer view, and the second area is used as the operation response area for the second - layer view.
4. The method according to claim 3, wherein further including: providing an operation entry for expanding and displaying more content in the second - layer view; after a target trigger operation detected through the operation entry, switching the first - layer view to a collapsed state, so as to expand the range of the second area and expand and display more content in the second - layer view.
5. The method according to claim 4, wherein the second - layer view includes multiple blocks; the second - layer view further includes a navigation component, and in the initial state, it is displayed as part of the content in the second - layer view. The navigation component is used to provide navigation labels for each block; the trigger operation includes: a trigger operation performed on the navigation label in the navigation component.
6. The method according to claim 4, wherein providing an operation entry for expanding and displaying more content in the second - layer view includes: providing an operation option for collapsing the first - layer view downward at the top of the first - layer view; the target trigger operation includes: a trigger operation initiated through the operation option for collapsing the first - layer view downward.
7. The method according to any one of claims 4 to 6, characterized in that, further including: during the process of displaying more content in the second - layer view, placing some key content in the first - layer view at the bottom on the upper layer of the second - layer view.
8. The method according to claim 7, wherein further including: during the process of placing some key content in the first - layer view at the bottom, providing an operation option for expanding the first - layer view upward, so as to switch the second - layer view to a collapsed state through this operation option, expand the range of the first area, and display the content of the first - layer view.
9. The method according to any one of claims 4 to 6, characterized in that further including: In the process of displaying more content in the second-layer view, if the content in the second-layer view has scrolled to the bottom, when an operation of continuing to scroll up is received, the second-layer view is restored to the collapsed state, and the range of the first area is expanded to display the content of the first-layer view.
10. The method according to any one of claims 1 to 6, characterized in that The content template is used to define the professional content fields included in the category to which the target commodity belongs, and the professional content fields are determined according to the professional decision factors required by users in the category to which the target commodity belongs.
11. The method according to any one of claims 1 to 6, characterized in that Displaying the detailed page of the target commodity includes: Loading a first page container that supports the double-layer view structure, so as to create a first-layer view and a second-layer view through the first page container, rendering the first content into the first-layer view, and rendering the second content into the second-layer view.
12. A method for displaying a product details page, characterized in that, including: Receiving a request to display the detailed page of the target commodity; Displaying the detailed page of the target commodity, the detailed page being a double-layer view structure, wherein, in the initial state, the first-layer view is in the expanded state and partially overlays the upper layer of the second-layer view, so as to divide the first-screen display range into a first area and a second area, wherein a part of the content in the first-layer view is displayed in the first area, a part of the content in the second-layer view is displayed in the second area, and the first area is used as the operation response area for the first-layer view, and the second area is used as the operation response area for the second-layer view; Providing an operation entry for expanding and displaying more content in the second-layer view; After a target trigger operation detected through the operation entry, the first-layer view is switched to the collapsed state, and more content in the second-layer view is expanded and displayed, wherein the more content in the second-layer view includes: professional content generated according to the content template corresponding to the category to which the target commodity belongs and the relevant data about the target commodity.
13. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 12.
14. An electronic device, characterized in that, including: One or more processors; and A memory associated with the one or more processors, the memory being used to store program instructions, and when the program instructions are read and executed by the one or more processors, the steps of the method according to any one of claims 1 to 12 are executed.
Citation Information
Patent Citations
Processing method and device for displaying key information of data item, and client
CN107918896A
Method and device for providing commodity object information and electronic equipment
CN113298585A
Commodity detail information display method and device
CN113610600A