Store Link

This repository provides some blocks that can help you creating links in a store.

image

Configuration

  1. Add store-link app to your theme's dependencies in the manifest.json, for example:
{
  "vtex.store-link": "0.x"
}

Now, you are able to use all blocks exported by the store-link app. Check out the full list below:

Block nameDescription
link.productA link that consumes the product context.
linkA normal link that doesn't consume any context.
  1. Based on the exported list, choose the desired block and declare it in the block that will host the link. Find below an example of a link.product being used in the product-summary block:
{
  "link.product#product-page": {
    "props": {
      "href": "/{slug}/p",
      "label": "More details >"
    }
  },
  "product-summary.shelf": {
    "children": [
      "product-summary-image",
      "product-summary-name",
      "product-rating-inline",
      "product-summary-space",
      "product-summary-price",
      "link.product#product-page
    ]
  },
}

A more complex example with modal-layout blocks can be found in the Quick View example at the modal-layout documentation.

⚠️ Note that there is a {slug} placeholder being passed onto the href prop in the example above. When rendered, this placeholder will be overwritten by the value accrued from the closest product context, generating a link like /everyday-necessaire/p. Therefore, remember that in order for this format to work you have to place the link.product block inside of a another block that provides a product context, such as the ProductSummary.

All blocks exported by store-link share the same props:

Prop nameTypeDescriptionDefault value
labelstringLink textundefined
hrefstringLink URL'#'
targetstringThis prop works the same way as the target of the anchor element of htmlundefined

When creating a Link URL for your link.product block, use the variables listed below. With them, you will be able to structure any desired URL for your store, such as a link to a given product department (/{department}).

Value valueDescription
'brand'Name of the product brand
'brandId'ID of the product brand
'category1'Height level category in the category tree
'category2'Second highest level category
'category3'Third hieghest level category
'category4'Fourth highest level category
'department'Product department
'productId'Product ID
'skuId'Current selected SKU ID
'slug'The link text used to create the product link

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization. All blocks have the same handles

CSS Handles
childrenContainer
label
link