Rendering a badge on top of a product

To render a badge on top of a Product Summary component, for example, product collection on a Shelf block, you combine the Product Highlights app and Stack Layout.

badgebadge

Before you start

  1. Knowledge of how the Product Summary, Product Highlights, Stack Layout, and Product collections work is required for this recipe. If you have any doubts regarding them, we strongly recommend you access their technical documentation: Product Summary, Product Highlights, Stack Layout
    and Collections.

  2. Ensure you have already installed VTEX IO CLI on your machine.

  3. Also, make sure you have as a dependency "vtex.product-summary": "2.x" in your theme’s manifest.json.

Step-by-step

  1. In your theme’s manifest.json file, add the Product Highlights app and Stack Layout as a dependency:

    “dependencies” : {
    +  "vtex.product-highlights": "2.x",
    +  "vtex.stack-layout": "0.x”,
    
    }
    
    
  2. Open a product template you desire.

  3. Then, add the stack-layout component to the blocks list of the desired template, for example:

    {
    "product-summary.shelf": {
      "children": [
    +    "stack-layout#prodsum",
        ]
      },
    ...
    
  4. In the theme’s template, declare the stack-layout component, and add the "product-summary-image#shelf" and "[email protected]:product-highlights#collection" as its children to render the image and the badge, respectivetly.

    "stack-layout#prodsum": {
        "children": [
          "product-summary-image#shelf",
          "[email protected]:product-highlights#collection"
        ]
      },
    
  5. Then declare the props of the children. The first is "product-summary-image#shelf" props, responsible for rendering the product's image.

    
    "product-summary-image#shelf": {
        "props": {
          "showBadge": true,
          "aspectRatio": "1:1",
          "maxHeight": 300
        }
      },
    
  6. After declare the props and the children of [email protected]:product-highlights#collection: product-highlight-wrapper and product-highlight-text.

    ℹ️

    Info

    The product-highlight-text only renders the text already defined in the Collection page in a store’s Admin. For more information about it, refer to Collections articles and the Product Highlights app

    
    "[email protected]:product-highlights#collection": {
        "props": {
          "type": "collection"
        },
        "children": ["product-highlight-wrapper"]
      },
      "product-highlight-wrapper": {
        "props": {
          "blockClass": "collection"
        },
        "children": ["product-highlight-text"]
      },
      "product-highlight-text": {
        "props": {
          "message": "{highlightName}"
        }
                 },
      ...
    

Once you have declared the blocks’ props, link the app and see the changes live at the Development workspace you are working.

Related Articles


Did this page help you?