Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Advanced components
Store Link
Official extension
Version: 0.5.1
Latest version: 0.9.4

This page is about version 0.5.1 of the app, which is not the most recent version. The latest stable version is 0.9.4.

The Store Link app provides blocks responsible for displaying links in other theme blocks, such as the Product Summary.

{"base64":"  ","img":{"width":1490,"height":834,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":705454,"url":"https://user-images.githubusercontent.com/8517023/73387868-f1b36f80-42af-11ea-8e24-3045d2c819b4.png"}}

Configuration

  1. Add store-link app to your theme's dependencies in the manifest.json, for example:

_10
{
_10
"vtex.store-link": "0.x"
_10
}

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:

_18
{
_18
"link.product#product-page": {
_18
"props": {
_18
"href": "/{slug}/p",
_18
"label": "More details >"
_18
}
_18
},
_18
"product-summary.shelf": {
_18
"children": [
_18
"product-summary-image",
_18
"product-summary-name",
_18
"product-rating-inline",
_18
"product-summary-space",
_18
"product-summary-price",
_18
"link.product#product-page
_18
]
_18
},
_18
}

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

:warning: 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
displayModeDisplayModeHow the link should be displayed'anchor'
buttonPropsButtonPropsProps to be passed if you use displayMode as 'button'{ variant: 'primary', size: 'regular' }

DisplayMode

ValueDescription
'anchor'Display as a normal link with no styles
'button'Display as a button and accept the variant prop to change the visual of it

ButtonProps

Prop nameTypeDescriptionDefault value
variantVariantThe variant to be used if displayMode is 'button''primary'
sizeSizeWhich predefined size it should use (You can access the Styleguide documentation to understand better how it works).'regular'

Variant

To understand better what means each variant it would be better to access the documentation of our styleguide. The following variants are the one supported by the button right now:

Possible values
'primary'
'secondary'

Size

You can access the documentation of our styleguide to understand better how it works

Possible values
'small'
'regular'
'large'

When creating a Link URL you have the query string values available. Example:


_10
{
_10
"link#foo": {
_10
"props": {
_10
"href": "/login?returnUrl={queryString.returnUrl}",
_10
"label": "Sign in"
_10
}
_10
}
_10
}

If the current page have the query string returnUrl its value will be used, otherwise an empty string will take place.

For the link.product block, you can use variables related to the product in context. 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
See also
VTEX App Store
VTEX IO Apps