Product page (social sites) - Waiviogit/waivio GitHub Wiki

The product page has been updated with a new implementation, adopting the classic design utilized by major e-commerce sites.

Elements Description

BREADCRUMBS - Navigational path that illustrates the user's journey to the current product: Home > Category > Subcategory > Product. The product name is truncated to maintain a clean appearance.

NAME - The complete name of the product is displayed here.

TITLE - This is the title of the product.

RATINGS - A visual representation of the product's quality, shown through a star system and accompanied by a label indicating the aspect of the product being rated (e.g., Quality, Value).

PRICE - The cost of the product.

OPTIONS - A collection of available options for the product, displayed in full.

BUY_IT_ON - Button linked to an affiliate program, directing the user to a purchase platform.

AVATAR - The primary image of the product, which can be viewed in full-screen mode.

GALLERY - A selection of images from the product's gallery.

DESCRIPTION - The description is interlaced with images from the gallery, arranged in a checkerboard pattern. If the number of images exceeds the amount of text, the remaining images are displayed after the checkerboard sequence.

MENU_ITEM - The menu items are presented as expandable buttons resembling a menu. The first item is expanded by default. If the item type does not support expansion within the page (not a page, list, newsfeed, or widget), the plus button will not be displayed.

DETAILS - The essence of this product is captured in its detailed specifications, which provide a comprehensive overview for the discerning customer.

  • BRAND - Directs to the brand's page or conducts a search by this brand when a specific brand page does not exist.
  • MANUFACTURER - Leads to the manufacturer's page or initiates a search by this manufacturer if a dedicated page does not exist.
  • MERCHANT - Connects to the merchant's page or searches by this merchant in the absence of a merchant page.
  • PARENT - Link to the parent object's page.
  • WEIGHT - Indicates the product's weight.
  • DIMENSIONS - Lists the product's dimensions.
  • DEPARTMENTS - Provides a link to the product listing within this department. Displays three by default, with an option to 'Show all'.
  • ID - Displays a list of product and group IDs, with a default 'show' button to reveal more.
  • WEBSITE - Links to an external website or page for additional resources.

ADD_ONS - This section curates a selection of additional products recommended complementing the main item.

FEATURES - Key attributes and specifications of the product are showcased here, providing an in-depth look at what sets this product apart.

SIMILAR - Discover a collection of items similar to the product in view, automatically curated based on department categorization. A limit of 30 objects ensures a focused yet diverse range of alternatives.

RELATED - Explore a list of related items that are connected to the product through shared characteristics or department classification. This selection, also capped at 30 objects, is designed to offer broader options that resonate with the product's theme.

TAGS - Navigate through the product's tags, which serve as quick links to other items sharing the same attributes or themes, facilitating a streamlined browsing experience.

WRITE_REVIEWS - Click the 'Write Review' button to access the editor and contribute product evaluation.

REVIEWS - This section is a compilation of all the reviews that mention the product, offering a collective insight from the user community and aiding in informed purchasing decisions.

image

Additional information