A label display method and apparatus

Abstract

This invention discloses a label display method and apparatus, relating to the field of computer technology. One specific embodiment of the method includes: acquiring pre-constructed size data of multiple product label sets and label display containers; calculating the size data of each product label set, and determining the total size data corresponding to the multiple product label sets based on the size data of each product label set; comparing the total size data corresponding to the multiple product label sets with the size data of the label display containers, and determining the display mode of the multiple product label sets based on the comparison result, so as to display the multiple product label sets according to the display mode. This embodiment can determine the display mode of multiple product label sets based on the total size data of the multiple product label sets and the size data of the label display containers, and automatically switch the display mode according to the available space when the size of the label display containers changes, improving the integrity and visibility of the product page and enhancing the product recognition efficiency for customer service personnel.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a label display method and apparatus. Background Technology

[0002] In customer service product recommendation scenarios, responsive tab bars below each product are a common design approach, used to display the product's category attributes. Category tags (such as three-year warranty, seven-day price guarantee, and money-back guarantee for damaged goods) allow for a seamless presentation of product information, enabling customer service representatives to quickly locate product categories, identify matching products for customers, and promptly answer their questions. However, when the product page width is shortened, too many tags can make the product bar excessively tall, resulting in an unattractive visual effect and potential for tag clutter and confusion. Existing solutions primarily involve expanding / collapsed tabs exceeding N tags per line in one direction or displaying all tags on a new line based on a fixed width. These methods, by crudely truncating or wrapping, easily lead to an overall inflated product page height and visual clutter, resulting in low product recognition efficiency for customer service personnel. Summary of the Invention

[0003] In view of this, embodiments of the present invention provide a label display method and apparatus that can determine the display mode of multiple product label sets based on the total size data of multiple product label sets and the size data of the label display container. When the size of the label display container changes, the display mode is automatically switched according to the available space, which improves the integrity and visibility of the product page, thereby improving the product recognition efficiency of customer service personnel.

[0004] To achieve the above objectives, according to one aspect of the present invention, a label display method is provided, comprising: Obtain multiple pre-built product tag sets and the size data of the tag display container; Calculate the size data for each product tag set, and determine the total size data for multiple product tag sets based on the size data of each product tag set; The total size data corresponding to multiple product tag sets is compared with the size data of the tag display container. Based on the comparison results, the display mode of multiple product tag sets is determined, and the multiple product tag sets are displayed according to the display mode.

[0005] Optionally, multiple pre-built product tag sets are obtained through the following steps: Extract multiple product tags and their corresponding category identification information from the obtained product tag attribute data; Multiple product labels are grouped based on classification identification information, and multiple product label sets are generated based on the grouping results.

[0006] Optionally, the size data of each product tag set is calculated, and the total size data corresponding to multiple product tag sets is determined based on the size data of each product tag set, including: Iterate through each of the multiple product tag sets; For a set of product tags, iterate through each product tag in the set and obtain the original size data corresponding to each product tag; sum the original size data corresponding to each product tag with the preset tag spacing size data to obtain the first calculated size data corresponding to each product tag; accumulate the first calculated size data corresponding to all product tags in a set of product tags to obtain the first size data corresponding to the set of product tags. The first size data of each product tag set is summed to obtain the first total size data corresponding to multiple product tag sets.

[0007] Optionally, the size data of each product tag set is calculated, and the total size data corresponding to multiple product tag sets is determined based on the size data of each product tag set, including: Iterate through each of the multiple product tag sets; For a set of product tags, iterate through each product tag in the set and abbreviate each product tag according to a preset abbreviation rule to obtain the abbreviated size data corresponding to each product tag; sum the abbreviated size data corresponding to each product tag with the preset tag spacing size data to obtain the second calculated size data corresponding to each product tag; accumulate the second calculated size data corresponding to all product tags in a set of product tags to obtain the second size data corresponding to the set of product tags. The second size data of each product tag set is summed to obtain the second total size data corresponding to multiple product tag sets.

[0008] Optionally, the total size data corresponding to multiple product tag sets is compared with the size data of the tag display container, and the display mode of the multiple product tag sets is determined based on the comparison result, including: Determine the numerical value between the first total size data corresponding to multiple product label sets and the size data of the label display container; In response to the fact that the first total size data corresponding to multiple product tag sets is less than or equal to the size data of the tag display container, the display mode of the multiple product tag sets is determined to be the full mode; In response to the fact that the first total size data corresponding to multiple product tag sets is greater than the size data of the tag display container, the numerical value between the second total size data corresponding to multiple product tag sets and the size data of the tag display container is determined. In response to the fact that the second total size data corresponding to multiple product tag sets is less than or equal to the size data of the tag display container, the display mode of the multiple product tag sets is determined to be abbreviation mode; In response to the fact that the second total size data corresponding to multiple product tag sets is greater than the size data of the tag display container, the display mode of the multiple product tag sets is determined to be icon mode.

[0009] Optionally, after determining the display mode for multiple product tag sets based on the comparison results, the method further includes: In response to the situation where any product tag set cannot be fully displayed within the preset number of display rows in display mode, obtain the tag set container size data corresponding to the product tag set; Based on the container size data of the tag set and the original size data of each product tag in the product tag set, the display status of each product tag in the product tag set is determined, and the indicator count result is generated.

[0010] Optionally, based on the container size data of the tag set and the original size data of each product tag in the product tag set, the display status of each product tag in the product tag set is determined, and an indicator counting result is generated, including: Iterate through each product tag in the product tag set; The original size data of the product labels are summed to obtain the current total size data of the labels; the current total size data of the labels is compared with the size data of the label set container, and the display state of the product labels is determined based on the comparison result; the display state is either expanded or collapsed. A status indicator and its count result are generated based on the display status of each product label.

[0011] According to a second aspect of the present invention, a label display device is provided, comprising: The acquisition module is used to acquire multiple pre-built product tag sets and the size data of the tag display container; The determination module is used to calculate the size data of each product label set and determine the total size data corresponding to multiple product label sets based on the size data of each product label set. The display module is used to compare the total size data of multiple product tag sets with the size data of the tag display container, determine the display mode of multiple product tag sets based on the comparison results, and display multiple product tag sets according to the display mode.

[0012] According to a third aspect of the present invention, an electronic device is provided, comprising: One or more processors; Memory, used to store one or more programs. When one or more programs are executed by one or more processors, the one or more processors implement the methods of any of the above embodiments.

[0013] According to a fourth aspect of the present invention, a computer-readable medium is provided having a computer program stored thereon, which, when executed by a processor, implements the method of any of the above embodiments.

[0014] According to a fifth aspect of the present invention, a computer program product is provided, including a computer program that, when executed by a processor, implements the method of any of the above embodiments.

[0015] One embodiment of the above invention has the following advantages or beneficial effects: It acquires pre-constructed size data of multiple product tag sets and tag display containers; calculates the size data of each product tag set; determines the total size data corresponding to multiple product tag sets based on the size data of each product tag set; compares the total size data corresponding to multiple product tag sets with the size data of the tag display containers; determines the display mode of multiple product tag sets based on the comparison result; and displays multiple product tag sets according to the display mode. This embodiment can determine the corresponding display mode of multiple product tag sets based on the total size data corresponding to multiple product tag sets and the size data of the tag display containers. When the size of the tag display containers changes, the display mode is automatically switched according to the available space, improving the integrity and visibility of the product page, thereby enhancing the product recognition efficiency of customer service personnel.

[0016] The further effects of the aforementioned unconventional alternative methods will be explained below in conjunction with specific implementation methods. Attached Figure Description

[0017] The accompanying drawings are provided to better understand the invention and are not intended to unduly limit the scope of the invention. Wherein: Figure 1 This is a schematic diagram of the main flow of the label display method according to an embodiment of the present invention; Figure 2 This is a schematic diagram of the main flow of a three-level dynamic folding algorithm according to a preferred embodiment of the present invention; Figure 3 This is a schematic diagram of the main process of a dual-state counting feedback mechanism according to a preferred embodiment of the present invention; Figure 4 This is a schematic diagram of the main modules of the label display device according to an embodiment of the present invention; Figure 5 This is an exemplary system architecture diagram in which embodiments of the present invention can be applied; Figure 6 This is a schematic diagram of the structure of a computer system suitable for implementing terminal devices or servers of the present invention. Detailed Implementation

[0018] The following description, in conjunction with the accompanying drawings, illustrates exemplary embodiments of the present invention, including various details to aid understanding. These details should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the invention. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0019] It should be noted that the acquisition, storage, and application of personal information involved in the embodiments of the present invention comply with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0020] In customer service product recommendation scenarios, responsive tab bars below each product are a common design approach, used to display the product's category attributes. Category tags (such as three-year warranty, seven-day price guarantee, and money-back guarantee for damaged goods) allow for a seamless presentation of product information, enabling customer service representatives to quickly locate product categories, identify matching products for customers, and promptly answer their questions. However, when the product page width is shortened, too many tags can make the product bar excessively tall, resulting in an unattractive visual effect and potential for tag clutter and confusion. Existing solutions primarily involve expanding / collapsed tabs exceeding N tags per line in one direction or displaying all tags on a new line based on a fixed width. These methods, by crudely truncating or wrapping, easily lead to an overall inflated product page height and visual clutter, resulting in low product recognition efficiency for customer service personnel.

[0021] In view of this, according to one aspect of the present invention, a label display method is provided.

[0022] Figure 1 This is a schematic diagram illustrating the main flow of a label display method according to an embodiment of the present invention. Figure 1 As shown, the label display method according to an embodiment of the present invention includes the following steps S101 to S103.

[0023] Step S101: Obtain multiple pre-built product label sets and the size data of the label display container.

[0024] A product tag set refers to a collection of tags formed by grouping multiple product tags associated with the same product according to preset business rules. Each product tag describes the product's attributes, status, or characteristics. Multiple product tag sets can correspond to product attributes of different dimensions or categories, supporting the hierarchical expression of product information. The tag display container is an interface element used to hold and display the above multiple product tag sets, and its size data is used to define the displayable area of ​​the product tag sets.

[0025] Multiple pre-built product tag sets can be obtained by aggregating the original product tags associated with the products according to preset grouping rules. These grouping rules define the affiliation and display order of product tags within the same tag set, thus forming multiple structured product tag sets before interface rendering. This pre-building process can be completed during the front-end page initialization or data loading phase, and each product tag set is managed as an independent data unit. When obtaining the size data of the tag display container, the actual rendered size data of the corresponding interface element can be read after the interface rendering is complete, reflecting the actual usable display space in the current screen environment. Alternatively, the size of the tag display container can be calculated before rendering based on interface layout configuration parameters, preset width rules, or container parent size constraints, thereby obtaining the tag display container size data.

[0026] Step S102: Calculate the size data of each product tag set, and determine the total size data corresponding to multiple product tag sets based on the size data of each product tag set.

[0027] The size data for each product tag set represents the space occupied by the set when it is fully displayed on the interface. This size data includes at least the horizontal dimensions of each product tag within the set, as well as the cumulative dimensions formed by the preset spacing between adjacent product tags. The total size data for multiple product tag sets is the sum of the size data of each set when they are displayed consecutively within the same tag display container. This total size is used to determine whether multiple product tag sets can be fully displayed within the target display area.

[0028] Specifically, based on the actual size obtained after interface rendering, the actual rendered size of each interface element corresponding to each product tag in the product tag set can be read one by one, and then accumulated in combination with preset tag spacing rules to obtain the size data of the product tag set. Alternatively, before interface rendering, the size of each product tag can be estimated based on the text content length, font style, font size parameters, and preset spacing rules of the product tags, and the estimation results can be accumulated to obtain the size data of the product tag set.

[0029] When determining the total size data for multiple product tag sets, the size data already acquired for each product tag set can be sequentially summed to obtain the overall size data for multiple product tag sets in the same display row. Alternatively, the size data of each product tag set can be weighted or regularized and summarized based on the number of product tag sets, display arrangement rules, and preset layout parameters to form the total size data.

[0030] Step S103: Compare the total size data corresponding to multiple product tag sets with the size data of the tag display container, determine the display mode of multiple product tag sets based on the comparison result, and display the multiple product tag sets according to the display mode.

[0031] Display modes are the specific display formats used when presenting multiple product tag sets within a tag display container. They are used to balance information integrity and interface readability within a limited display space. Display modes include at least full mode, thumbnail mode, and icon mode, etc. Different display modes correspond to different product tag display rules to control the displayed content, display length, or display format of product tags.

[0032] When comparing the total size data of multiple product tag sets with the size data of the tag display container, the total size data can be directly compared with the available size of the tag display container. If the total size data is less than or equal to the size data of the tag display container, the full display mode is selected. If the total size data is greater than the size data of the tag display container, the size data under thumbnail display is further compared to determine whether to use thumbnail display mode or icon display mode. Alternatively, based on preset display mode determination rules or threshold ranges, the proportional relationship between the total size data and the tag display container size data can be analyzed, and the corresponding display mode can be selected according to the range in which the proportion falls, thereby adaptively adjusting the display method of multiple product tag sets under different screen sizes or layout conditions.

[0033] This embodiment acquires the size data of multiple pre-built product tag sets and tag display containers; calculates the size data of each product tag set; determines the total size data corresponding to multiple product tag sets based on the size data of each product tag set; compares the total size data corresponding to multiple product tag sets with the size data of the tag display containers; and determines the display mode of multiple product tag sets based on the comparison result, so as to display multiple product tag sets according to the display mode. This embodiment can determine the corresponding display mode of multiple product tag sets based on the total size data corresponding to multiple product tag sets and the size data of the tag display containers, and automatically switches the display mode according to the available space when the size of the tag display containers changes, improving the integrity and visibility of the product page, thereby improving the product recognition efficiency of customer service personnel.

[0034] Optionally, the pre-built multiple product tag sets are obtained through the following steps: extracting multiple product tags and their corresponding classification identification information from the obtained tag attribute data corresponding to the products; grouping the multiple product tags based on the classification identification information, and generating multiple product tag sets according to the grouping results.

[0035] In this embodiment, the tag attribute data corresponding to the product is first obtained from the data source associated with the product. The tag attribute data describes the product's characteristics, status, or business attributes, and includes classification identification information used to distinguish the tag affiliation. The tag attribute data is parsed to extract multiple product tags and their corresponding classification identification information. Based on this, the multiple product tags are aggregated according to the classification identification information, grouping information with the same classification identification into the same set, thus forming multiple product tag sets. The generated product tag sets can reflect the product attribute structure under different dimensions or different business semantics.

[0036] In another embodiment, the original tag attribute data corresponding to the product can be preprocessed before extracting the product tags, and missing or conflicting classification identification information can be completed or standardized. Then, based on the preset grouping rules or mapping relationship table, the product tags are dynamically mapped to the corresponding product tag set, and the display order within the product tag set is sorted and optimized during the generation process.

[0037] Through the above embodiments, the structured organization of product labels can be completed before the display stage, effectively reducing the complexity of subsequent size calculation and display mode judgment, improving the flexibility and consistency of product label display, and enhancing the interface's adaptability to complex label scenarios.

[0038] Optionally, the size data of each product tag set is calculated, and the total size data corresponding to multiple product tag sets is determined based on the size data of each product tag set. This includes: traversing each product tag set in multiple product tag sets; for a product tag set, traversing each product tag in the product tag set and obtaining the original size data corresponding to each product tag; summing the original size data corresponding to each product tag with the preset tag spacing size data to obtain the first calculated size data corresponding to each product tag; accumulating the first calculated size data corresponding to all product tags in a product tag set to obtain the first size data corresponding to a product tag set; and accumulating the first size data of each product tag set to obtain the first total size data corresponding to multiple product tag sets.

[0039] This embodiment first iterates through multiple pre-built product tag sets to obtain each product tag set as an independent size calculation unit. For any product tag set, it continues to iterate through each product tag contained in that product tag set, and obtains the original size data corresponding to each product tag through the interface element size reading interface or the measurement capabilities provided by the rendering engine. The original size data is used to reflect the actual space occupied by the product tag in the complete display state. Based on the obtained original size data, the original size data is summed with the preset tag spacing size data to obtain the first calculated size data of a single product tag when displayed, thereby uniformly considering the width of the product tag body and the spacing requirements between adjacent product tags. Then, the first calculated size data corresponding to all product tags in the same product tag set are accumulated to obtain the first size data corresponding to that product tag set, which is used to characterize the overall size occupied by the product tag set under the single-line display condition. Finally, the first size data corresponding to multiple product tag sets are further accumulated to form the first total size data corresponding to multiple product tag sets. The first total size data can be understood as the total size data of multiple product tag sets in the complete mode.

[0040] In another embodiment, the original size data of the product labels can be predicted and calculated based on the text content, font parameters, and preset spacing rules of the product labels before the interface is rendered. The corresponding size data can be directly summarized at the product label set level, and then the size results of each product label set can be summarized to reduce the dependence on the rendering size at runtime.

[0041] By using the above methods, the overall space requirements of multiple product tag sets can be accurately assessed before display, making the display mode judgment more precise, effectively avoiding tag overflow or information obstruction, and improving the stability and readability of the interface display.

[0042] Optionally, the size data of each product tag set is calculated, and the total size data corresponding to multiple product tag sets is determined based on the size data of each product tag set. This includes: traversing each product tag set in multiple product tag sets; for a product tag set, traversing each product tag in the product tag set, abbreviating each product tag according to a preset abbreviation rule to obtain the abbreviated size data corresponding to each product tag; summing the abbreviated size data corresponding to each product tag with the preset tag spacing size data to obtain the second calculated size data corresponding to each product tag; accumulating the second calculated size data corresponding to all product tags in a product tag set to obtain the second size data corresponding to a product tag set; and accumulating the second size data of each product tag set to obtain the second total size data corresponding to multiple product tag sets.

[0043] This embodiment iterates through multiple pre-built product tag sets, proceeding through the size calculation process for each set. For any given product tag set, it iterates through each product tag within that set and abbreviates its content according to preset abbreviation rules. These rules limit the number of characters to be retained, add ellipsis markers, or replace text with simplified text, thus obtaining the abbreviated size data for each product tag in the abbreviated display state. Then, the abbreviated size data is summed with preset tag spacing data to obtain the second calculated size data for a single product tag in abbreviated mode, ensuring the calculation result reflects both the tag content width and the spacing requirements between tags. Based on this, the second calculated size data for all product tags within the same product tag set are accumulated to obtain the second size data for that product tag set, representing the overall size occupied by the product tag set in abbreviated display mode. Finally, the second size data obtained for multiple product tag sets are accumulated to form the second total size data for multiple product tag sets. This second total size data can be understood as the total size data of multiple product tag sets in abbreviated mode.

[0044] In addition, before the interface is rendered, the product label text can be preprocessed based on the abbreviation rules, and the size of the abbreviation product label can be uniformly estimated by combining font style parameters and preset spacing rules; then the corresponding second size data can be obtained directly at the product label set level, and the size results of each product label set can be merged, thereby reducing the dependence on obtaining the runtime rendering size.

[0045] Through the above embodiments, the display space occupied by the product tag set can be reduced without sacrificing overall readability, and the appropriate display mode can be adaptively selected within a limited display area, thereby improving the stability of the interface layout and display efficiency.

[0046] Optionally, the total size data corresponding to multiple product tag sets is compared with the size data of the tag display container, and the display mode of the multiple product tag sets is determined based on the comparison result, including: determining the numerical value between the first total size data corresponding to the multiple product tag sets and the size data of the tag display container; in response to the first total size data corresponding to the multiple product tag sets being less than or equal to the size data of the tag display container, determining the display mode of the multiple product tag sets as full mode; in response to the first total size data corresponding to the multiple product tag sets being greater than the size data of the tag display container, determining the numerical value between the second total size data corresponding to the multiple product tag sets and the size data of the tag display container; in response to the second total size data corresponding to the multiple product tag sets being less than or equal to the size data of the tag display container, determining the display mode of the multiple product tag sets as abbreviated mode; in response to the second total size data corresponding to the multiple product tag sets being greater than the size data of the tag display container, determining the display mode of the multiple product tag sets as icon mode.

[0047] In the specific implementation process, the first step is to obtain the initial total size data corresponding to multiple product tag sets and the size data of the tag display container, and compare the two values ​​to determine whether the multiple product tag sets can be displayed in a single line within the tag display container under full display conditions. When the initial total size data is less than or equal to the size data of the tag display container, it indicates that the current display space can accommodate all product tag content, and the display mode of the multiple product tag sets is determined to be full mode, displaying all product tags in complete text form. If the initial total size data is greater than the size data of the tag display container, it indicates that there is insufficient space in full mode, and the second total size data corresponding to the multiple product tag sets is further obtained and compared with the size data of the tag display container. When the second total size data is less than or equal to the size data of the tag display container, it indicates that the multiple product tag sets can be fully displayed within the display area in abbreviated display mode, and the display mode is determined to be abbreviated mode; when the second total size data is still greater than the size data of the tag display container, it is determined that the current display space cannot meet the text display requirements, and the display mode is switched to icon mode to display the product tag sets graphically.

[0048] In another implementation, a ratio threshold or priority rule can be introduced during the comparison process to classify the excess ratio between the first total size data and the label display container size data. When the excess ratio is small, the abbreviation mode is selected first, and when the excess ratio is large, the icon mode is selected directly, thereby reducing the computational overhead caused by multiple comparisons.

[0049] Through the above embodiments, the optimal product tag set display mode can be automatically selected based on the actual constraints of the display space, effectively avoiding the problem of tag content overflow, while taking into account information integrity and interface simplicity, and improving the overall user experience.

[0050] Optionally, after determining the display mode of multiple product tag sets based on the comparison results, the method further includes: in response to the fact that any product tag set cannot be fully displayed within a preset number of display rows in the display mode, obtaining the tag set container size data corresponding to the product tag set; and determining the display status of each product tag in the product tag set based on the tag set container size data and the original size data of each product tag in the product tag set, and generating an indicator counting result.

[0051] This embodiment further detects the actual display status of each product tag set in the current display mode. When any product tag set cannot be fully displayed within a preset number of display rows, a secondary display control process is triggered. The size data of the tag set container corresponding to the product tag set is obtained. This data is used to limit the available display space of the product tag set on the page. Based on the comparison between the tag set container size data and the original size data of each product tag in the product tag set, the system calculates the cumulative size of the product tags to determine whether each product tag can be fully displayed within the current tag set container, and determines the display state of the product tag as either expanded or collapsed. For product tags determined to be collapsed, a corresponding indicator count is generated to represent the number of currently undisplayed product tags, and the indicator count is presented along with the visible product tags. In another embodiment, after obtaining the tag set container size data, the product tags can be sorted according to preset priority rules or classification weights. The display state of the product tags is then determined sequentially according to the sorting results, thereby prioritizing the display of key information and displaying low-priority product tags with a collapsed count.

[0052] This embodiment achieves adaptive expansion and collapse control of product labels in space-constrained scenarios, and provides clear feedback to users on the scale of hidden information through indicator counting results, enhancing the perceptibility of the display status and the predictability of operation, thereby improving the usability and interaction efficiency of product label display.

[0053] Optionally, based on the size data of the label set container and the original size data of each product label in the product label set, the display state of each product label in the product label set is determined, and an indicator count result is generated, including: traversing each product label in the product label set; accumulating the original size data of the product labels to obtain the current total size data of the labels; comparing the current total size data of the labels with the size data of the label set container, and determining the display state of the product labels based on the comparison result; the display state is either an expanded state or a collapsed state; and generating a status indicator and its indicator count result based on the display state of each product label.

[0054] Specifically, the process begins by sequentially traversing each product tag within the target product tag set, acquiring the original size data for each tag during the traversal. Following the order of the product tags in the display sequence, the original size data of each tag is accumulated to form the current total tag size, representing the cumulative display space occupied from the first product tag to the current tag. Then, the current total tag size is compared with the tag set container size. If the current total tag size is less than or equal to the tag set container size, the corresponding product tag is determined to be in an expanded state and displayed as visible content. If the current total tag size is greater than the tag set container size, the current product tag and its subsequent tags are determined to be in a collapsed state and are not directly displayed in the current tag set container. Based on the above display state determination results, a state indicator corresponding to the collapsed state is generated, and the number of product tags in the collapsed state is counted to form an indicator count result, used to indicate the scale of currently hidden product tags to the user. In addition, before traversing the product tags, the product tags can be sorted or classified according to their business type, importance, or historical interaction frequency. Then, the size accumulation and display status judgment can be performed according to the sorted order, so as to prioritize ensuring that high-value product tags are in the expanded state, while the remaining product tags are presented in the collapsed count form.

[0055] This embodiment can achieve refined display control of product labels within a limited display space, and provide visual feedback on hidden information through clear indicator counting results, effectively reducing interface congestion and improving the user's efficiency in recognizing key product information and the certainty of interaction.

[0056] According to a preferred embodiment of the present invention, a responsive multi-level tag display method for customer service scenarios is provided, applicable to high-density multi-tag display scenarios such as product recommendations and auxiliary product detail displays. This embodiment achieves efficient presentation of key product attributes within a limited display space through a three-level dynamic folding algorithm, a context-preserving strategy, and a dual-state counting feedback mechanism, avoiding interface congestion and loss of key information, thereby improving customer service personnel's efficiency in identifying product attributes and the certainty of their operations.

[0057] In the implementation process, the web page receives the tag attribute data corresponding to the products from the server during the initialization phase. Each product tag in the tag attribute data is pre-configured with corresponding category identifier information, used to represent the attribute dimension to which the product tag belongs. This category identifier information is uniformly configured in the operation system, such as warranty attributes, after-sales attributes, and logistics attributes. After receiving the product tag attribute data, the web page automatically groups the product tags based on the category identifier information and uses a mapping data structure to store the product tag sets corresponding to different category dimensions, thereby constructing multiple product tag sets.

[0058] After constructing the product tag sets, taking a single-row display scenario as an example, a unified layout calculation is performed on multiple product tag sets within a limited horizontal space. First, the tag display container used to hold the product tag sets is obtained, along with its available size data. The size data of the tag display container can be obtained by directly reading the width attribute of the corresponding container element after page layout rendering, or it can be set through pre-configured style rules or business parameters.

[0059] After obtaining the size data of the label display container, the three-level dynamic folding algorithm is executed. Since there are different categories of product label sets, it is necessary to determine which level of the three-level mode should be displayed in the current container. The three-level dynamic folding mode determination matrix for the product label set is shown in Table 1 below, where W is the label display container ele assigned to the product label set, and its width W equals ele.offsetWidth. The sum of the widths of the product labels in multiple product label sets (each label's width equals offsetWidth) equals TCW. The sum of the widths of the product label sets in the abbreviated mode equals TSW. The three-level dynamic folding mode determination matrix can initially determine the display mode of the current product label set. TCW can iterate through all product tag sets and sum the width (offsetWidth + 8px) of each product tag in each set. The 8px is an extra margin provided to ensure an 8px distance between tags. TSW can iterate through the entire product tag set using the sum of the widths of all product tag sets in abbreviated mode, and sum the width of each product tag in each set, keeping only the first two characters + ellipsis + 8px. The 8px is an extra margin provided to ensure an 8px distance between tags.

[0060] Table 1. Three-level dynamic folding mode determination matrix

[0061] Based on the decision matrix of the product tag sets in Table 1, the three-level dynamic folding algorithm for multiple product tag sets is as follows: Figure 2 As shown, the available width W of the container is obtained. The available container width is used to determine whether a row can hold all the tag sets. Tag sets A, B, ..., N are traversed. Then, all tags within each tag set are traversed, and the width of each tag is obtained (by calling the `offsetWidth` method in the element's JavaScript). An additional 8px is added to each tag to separate the tags. Then, the width of each tag in each tag set is added together to obtain the width of each tag set: AW, BW, ..., NW. Finally, the width of each tag set is added together to obtain the total width TCW of all tag sets, which equals AW + BW + ... + NW. If TCW <= W, it means the total width TCW of all tag sets is less than or equal to the width W of the available container element, and all tags can be placed in a row, i.e., all tags are displayed in full mode. If TCW > W, it means the available container element cannot hold all tags, and full mode cannot be used. Then, TSW <= W. If the total width TSW of all tag sets in shortened mode is less than or equal to the width W of the available container element, it means all shortened tags can be placed in a row, i.e., all tags are displayed in shortened mode. If neither of the above two conditions is met, then all tags will be displayed in icon mode. The browser's `resize` event listens for changes in the web container's width; once the container width changes, the available width `W` is retrieved again. Alternatively, a minimum width can be set for the tag collection, ensuring that the tag collection can only be displayed up to the first, second, or third level.

[0062] After the three-level dynamic folding mode is determined, if any product tag set still cannot be fully displayed within the preset number of display rows in the current display mode (e.g., icons cannot be displayed in one row, or a minimum width is set for the tag set so that the tags can only be displayed in the first-level mode), then a dual-state counting feedback is provided by the indicator. Each tag set is expanded and collapsed separately, and the number of expansions and collapses is counted. The process is as follows: Figure 3As shown, the code retrieves the width of the tag set container. This width is equal to the custom width (tag set 'a': 100px, tag set 'b': 200px, etc.), or the width evenly divided among all tag sets (the width of the outer container divided by the number of tag sets). The cumulative tag width is initialized to 0. The code iterates through the next tag sequentially, checking for any unread tags. If not, it adds an indicator + X (collapsed state) to the last visible tag. Clicking +X expands the display to show all visible tags (expanded state). A collapse indicator is added to the last expanded tag. Clicking collapse (Y) collapses the tag. After collapsing, another indicator + X is added to the last visible tag. This process of expansion and collapse creates a dual-state counting indicator display. If there are still unread tags, the code retrieves the total width of the current tag. It checks if the tag width + cumulative width is less than or equal to the tag set container width + 80px. If so, the current tag is marked as visible, and the cumulative width is equal to the previous cumulative width + the current tag width. Then, the code iterates through the next tag sequentially. If not, the current tag and the remaining tags are marked as hidden, and an indicator + X is added to the last visible tag. Additionally, the browser's `resize` event is used to listen for changes in the web container's width. Once the width changes, the tag set container width is re-acquired. Debounce is used during width change monitoring to trigger the calculation process only once every 500ms, avoiding excessive calculations that could degrade CPU performance and cause page lag. Based on these steps, the width of the tag set can be customized within a single line, or the width can be uniform, evenly dividing the tag set container's width for adaptive bi-state counting expansion and collapse.

[0063] Through the above embodiments, the present invention achieves hierarchical display of product labels, retention of key information, and perceptible status feedback within a limited display space. It effectively avoids the problems of information loss and interface chaos caused by simple truncation or forced line breaks in traditional label display methods, and improves the efficiency of product attribute recognition and operation decision-making in customer service scenarios.

[0064] According to a second aspect of the present invention, a label display device is provided.

[0065] Figure 4 This is a schematic diagram of the main modules of a label display device according to an embodiment of the present invention. Figure 4 As shown, the label display device 400 includes: The acquisition module 401 is used to acquire multiple pre-built product label sets and the size data of the label display container; The determination module 402 is used to calculate the size data of each product label set and determine the total size data corresponding to multiple product label sets based on the size data of each product label set. The display module 403 is used to compare the total size data of multiple product tag sets with the size data of the tag display container, determine the display mode of multiple product tag sets based on the comparison result, and display the multiple product tag sets according to the display mode.

[0066] Optionally, the label display device 400 also includes a building module, which is used for: Extract multiple product tags and their corresponding category identification information from the obtained product tag attribute data; Multiple product labels are grouped based on classification identification information, and multiple product label sets are generated based on the grouping results.

[0067] Optionally, the determining module 402 is also used for: Iterate through each of the multiple product tag sets; For a set of product tags, iterate through each product tag in the set and obtain the original size data corresponding to each product tag; sum the original size data corresponding to each product tag with the preset tag spacing size data to obtain the first calculated size data corresponding to each product tag; accumulate the first calculated size data corresponding to all product tags in a set of product tags to obtain the first size data corresponding to the set of product tags. The first size data of each product tag set is summed to obtain the first total size data corresponding to multiple product tag sets.

[0068] Optionally, the determining module 402 is also used for: Iterate through each of the multiple product tag sets; For a set of product tags, iterate through each product tag in the set and abbreviate each product tag according to a preset abbreviation rule to obtain the abbreviated size data corresponding to each product tag; sum the abbreviated size data corresponding to each product tag with the preset tag spacing size data to obtain the second calculated size data corresponding to each product tag; accumulate the second calculated size data corresponding to all product tags in a set of product tags to obtain the second size data corresponding to the set of product tags. The second size data of each product tag set is summed to obtain the second total size data corresponding to multiple product tag sets.

[0069] Optionally, the display module 403 is also used for: Determine the numerical value between the first total size data corresponding to multiple product label sets and the size data of the label display container; In response to the fact that the first total size data corresponding to multiple product tag sets is less than or equal to the size data of the tag display container, the display mode of the multiple product tag sets is determined to be the full mode; In response to the fact that the first total size data corresponding to multiple product tag sets is greater than the size data of the tag display container, the numerical value between the second total size data corresponding to multiple product tag sets and the size data of the tag display container is determined. In response to the fact that the second total size data corresponding to multiple product tag sets is less than or equal to the size data of the tag display container, the display mode of the multiple product tag sets is determined to be abbreviation mode; In response to the fact that the second total size data corresponding to multiple product tag sets is greater than the size data of the tag display container, the display mode of the multiple product tag sets is determined to be icon mode.

[0070] Optionally, the label display device 400 also includes a generation module, which is used for: In response to the situation where any product tag set cannot be fully displayed within the preset number of display rows in display mode, obtain the tag set container size data corresponding to the product tag set; Based on the container size data of the tag set and the original size data of each product tag in the product tag set, the display status of each product tag in the product tag set is determined, and the indicator count result is generated.

[0071] Optionally, the generation module is also used for: Iterate through each product tag in the product tag set; The original size data of the product labels are summed to obtain the current total size data of the labels; the current total size data of the labels is compared with the size data of the label set container, and the display state of the product labels is determined based on the comparison result; the display state is either expanded or collapsed. A status indicator and its count result are generated based on the display status of each product label.

[0072] It should be noted that the specific implementation details of the label display device of the present invention have been described in detail in the label display method above, so the content will not be repeated here.

[0073] According to a third aspect of the present invention, an electronic device is provided, comprising: one or more processors; and a storage device for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the method provided in the first aspect of the present invention.

[0074] According to a fourth aspect of the present invention, a computer-readable medium is provided having a computer program stored thereon, which, when executed by a processor, implements the method provided in the first aspect of the present invention.

[0075] According to a fifth aspect of the present invention, a computer program product is provided, including a computer program that, when executed by a processor, implements the method provided in the first aspect of the present invention.

[0076] Figure 5 An exemplary system architecture 500 is shown that can be applied to the label display method or label display device of the present invention.

[0077] like Figure 5 As shown, system architecture 500 may include terminal devices 501, 502, and 503, a network 504, and a server 505. Network 504 serves as the medium for providing communication links between terminal devices 501, 502, and 503 and server 505. Network 504 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.

[0078] Users can use terminal devices 501, 502, and 503 to interact with server 505 via network 504 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 501, 502, and 503, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social media platform software, etc. (for example only).

[0079] Terminal devices 501, 502, and 503 can be various electronic devices with displays that support web browsing, including but not limited to smartphones, tablets, laptops, and desktop computers.

[0080] Server 505 can be a server that provides various services, such as a backend management server that supports shopping websites browsed by users using terminal devices 501, 502, and 503 (for example only). The backend management server can analyze and process data such as received tag display requests, and feed back the processing results (such as tag display results - for example only) to the terminal devices.

[0081] It should be noted that the label display method provided in this embodiment of the invention is generally run by server 505, and correspondingly, the label display device is generally set in server 505.

[0082] It should be understood that Figure 5 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.

[0083] The following is for reference. Figure 6 It shows a schematic diagram of the structure of a computer system 600 suitable for implementing a terminal device of the present invention. Figure 6The terminal device shown is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of the present invention.

[0084] like Figure 6 As shown, the computer system 600 includes a central processing unit (CPU) 601, which can perform various appropriate actions and processes based on programs stored in read-only memory (ROM) 602 or programs loaded from storage section 608 into random access memory (RAM) 603. The RAM 603 also stores various programs and data required for the operation of the system 600. The CPU 601, ROM 602, and RAM 603 are interconnected via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0085] The following components are connected to I / O interface 605: an input section 606 including a keyboard, mouse, etc.; an output section 607 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 608 including a hard disk, etc.; and a communication section 609 including a network interface card such as a LAN card, modem, etc. The communication section 609 performs communication processing via a network such as the Internet. A drive 610 is also connected to I / O interface 605 as needed. A removable medium 611, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on drive 610 as needed so that computer programs read from it can be installed into storage section 608 as needed.

[0086] In particular, according to the embodiments disclosed in this invention, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments disclosed in this invention include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 609, and / or installed from removable medium 611. When the computer program is run by central processing unit (CPU) 601, it performs the functions defined above in the system of this invention.

[0087] It should be noted that the computer-readable medium shown in this invention can be a computer-readable signal medium, a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this invention, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this invention, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media can also be any computer-readable medium other than computer-readable storage media, which can send, propagate, or transmit programs for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wireless, wire, optical fiber, RF, etc., or any suitable combination thereof.

[0088] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of the present invention. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more operable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually operate substantially in parallel, and they may sometimes operate in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0089] The modules described in the embodiments of the present invention can be implemented in software or hardware. The described modules can also be housed in a processor; for example, a processor can be described as including an acquisition module, a determination module, and a display module. The names of these modules do not necessarily limit the module itself; for example, the acquisition module can also be described as "a module for acquiring pre-built sets of multiple product labels and the size data of the label display container."

[0090] In another aspect, the present invention also provides a computer-readable medium, which may be included in the device described in the above embodiments; or it may exist independently and not assembled into the device. The computer-readable medium carries one or more programs that, when executed by the device, cause the device to include: acquiring pre-constructed size data of multiple product label sets and label display containers; calculating size data of each product label set; determining total size data corresponding to the multiple product label sets based on the size data of each product label set; comparing the total size data corresponding to the multiple product label sets with the size data of the label display containers; determining a display mode for the multiple product label sets based on the comparison result; and displaying the multiple product label sets according to the display mode.

[0091] The computer program product provided in this embodiment of the invention includes a computer program that, when executed by a processor, implements the label display method in this embodiment of the invention.

[0092] According to the technical solution of the present invention, the following advantages or beneficial effects are achieved: Multiple pre-constructed product tag sets and tag display container size data are acquired; the size data of each product tag set is calculated; the total size data corresponding to the multiple product tag sets is determined based on the size data of each product tag set; the total size data corresponding to the multiple product tag sets is compared with the size data of the tag display container; based on the comparison result, the display mode of the multiple product tag sets is determined, and the multiple product tag sets are displayed according to the display mode. This embodiment can determine the corresponding display mode of multiple product tag sets based on the total size data corresponding to the multiple product tag sets and the size data of the tag display container, and automatically switch the display mode according to the available space when the size of the tag display container changes, improving the integrity and visibility of the product page, thereby improving the product recognition efficiency of customer service personnel.

[0093] The specific embodiments described above do not constitute a limitation on the scope of protection of this invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can occur depending on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this invention should be included within the scope of protection of this invention.

[0094] It should be noted that the acquisition, storage, and application of user personal information involved in the technical solution disclosed herein comply with the provisions of relevant laws and regulations and do not violate public order and good morals.

Claims

1. A label display method, characterized in that, include: Obtain multiple pre-built product tag sets and the size data of the tag display container; Calculate the size data of each of the product label sets, and determine the total size data corresponding to the plurality of product label sets based on the size data of each of the product label sets; The total size data corresponding to the multiple product tag sets is compared with the size data of the tag display container. Based on the comparison result, the display mode of the multiple product tag sets is determined, and the multiple product tag sets are displayed according to the display mode.

2. The method according to claim 1, characterized in that, Multiple pre-built product label sets are obtained through the following steps: Extract multiple product tags and their corresponding category identification information from the obtained product tag attribute data; Based on the classification identification information, the multiple product tags are grouped, and multiple product tag sets are generated according to the grouping results.

3. The method according to claim 1, characterized in that, Calculate the size data for each of the product label sets, and determine the total size data corresponding to the plurality of product label sets based on the size data of each of the product label sets, including: Iterate through each of the multiple product tag sets; For a set of product tags, iterate through each product tag in the set and obtain the original size data corresponding to each product tag; sum the original size data corresponding to each product tag with the preset tag spacing size data to obtain the first calculated size data corresponding to each product tag; accumulate the first calculated size data corresponding to all product tags in the set to obtain the first size data corresponding to the set of product tags. The first size data of each product tag set is summed to obtain the first total size data corresponding to the multiple product tag sets.

4. The method according to claim 3, characterized in that, Calculate the size data for each of the product label sets, and determine the total size data corresponding to the multiple product label sets based on the size data of each of the product label sets, including: Iterate through each of the multiple product tag sets; For a set of product tags, each product tag in the set is traversed, and each product tag is abbreviated according to a preset abbreviation rule to obtain the abbreviated size data corresponding to each product tag; the abbreviated size data corresponding to each product tag is summed with the preset tag spacing size data to obtain the second calculated size data corresponding to each product tag; the second calculated size data corresponding to all product tags in the set are accumulated to obtain the second size data corresponding to the set of product tags. The second size data of each product tag set is summed to obtain the second total size data corresponding to the multiple product tag sets.

5. The method according to claim 4, characterized in that, The total size data corresponding to the multiple product tag sets is compared with the size data of the tag display container. Based on the comparison result, the display mode of the multiple product tag sets is determined, including: Determine the numerical value between the first total size data corresponding to the multiple product label sets and the size data of the label display container; In response to the fact that the first total size data corresponding to the plurality of product tag sets is less than or equal to the size data of the tag display container, the display mode of the plurality of product tag sets is determined to be the full mode; In response to the fact that the first total size data corresponding to the plurality of product tag sets is greater than the size data of the tag display container, the numerical value between the second total size data corresponding to the plurality of product tag sets and the size data of the tag display container is determined; In response to the fact that the second total size data corresponding to the plurality of product tag sets is less than or equal to the size data of the tag display container, the display mode of the plurality of product tag sets is determined to be abbreviation mode; In response to the fact that the second total size data corresponding to the plurality of product tag sets is greater than the size data of the tag display container, the display mode of the plurality of product tag sets is determined to be icon mode.

6. The method according to claim 1, characterized in that, After determining the display mode of the multiple product tag sets based on the comparison results, the method further includes: In response to the fact that any of the product tag sets cannot be fully displayed within a preset number of display rows in the display mode, the size data of the tag set container corresponding to the product tag set is obtained; Based on the container size data of the tag set and the original size data of each product tag in the product tag set, the display status of each product tag in the product tag set is determined, and an indicator count result is generated.

7. The method according to claim 6, characterized in that, Based on the container size data of the tag set and the original size data of each product tag in the product tag set, the display status of each product tag in the product tag set is determined, and an indicator counting result is generated, including: Iterate through each product tag in the product tag set; The original size data of the product labels are summed to obtain the current total size data of the labels; the current total size data of the labels is compared with the size data of the label set container, and the display state of the product labels is determined based on the comparison result; the display state is either an expanded state or a collapsed state. A status indicator and its count result are generated based on the display status of each product label.

8. A label display device, characterized in that, include: The acquisition module is used to acquire multiple pre-built product tag sets and the size data of the tag display container; The determining module is used to calculate the size data of each of the product label sets, and determine the total size data corresponding to the plurality of product label sets based on the size data of each of the product label sets. The display module is used to compare the total size data corresponding to the multiple product tag sets with the size data of the tag display container, determine the display mode of the multiple product tag sets based on the comparison result, and display the multiple product tag sets according to the display mode.

9. An electronic device, characterized in that, include: One or more processors; Storage device for storing one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1-7.

10. A computer-readable medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1-7.

11. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the method as described in any one of claims 1-7.

Images