VTEX Developer Portal

Seller Selector displays the number of sellers your marketplace has for each product. It enables users to compare prices from each seller and add the desired product to their cart.

exampleLayoutexampleLayout

Configuration

  1. Install the Seller Selector app to your store with the following command:
vtex install [email protected]
  1. Add the Seller Selector app to your theme's dependencies in the manifest.json as shown below:
"dependencies": {
  "vtex.seller-selector": "0.x"
}
  1. Add the link-seller block, exported by the vtex.seller-selector app, inside your product page (store.product template). When rendered, the block will create a link to the Seller Selector main page. For example:
 "flex-layout.col#right-col": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0
    },
    "children": [
      "product-name",
+     "link-seller"
      "product-price#product-details",
      "product-separator",
      "flex-layout.row#buy-button",
      "availability-subscriber",
      "shipping-simulator",
      "share#default"
    ]
  },

By declaring the link-seller block, a page containing all available sellers will be displayed automatically. However, you can configure the Seller Selector page layout, using props for each one of the blocks used to build it behind the scenes.

Advanced Configuration

Behind the scenes, the Seller Selector page uses the following default implementation:

{
  "store.sellers": {
    "blocks": [
      "seller-table"
    ]
  },
  "seller-table": {
    "children": [
      "vtex.store-components:product-name",
      "seller-simulate-shipping",
      "seller-head",
      "seller-body"
    ]
  },
  "seller-head": {
    "children": [
      "seller-head-cell#Seller",
      "seller-head-cell#Price",
      "seller-head-cell#Shipping",
      "seller-head-cell#PriceWithShipping",
      "seller-head-cell#BuyButton"
    ]
  },
  "seller-head-cell#Seller": {
    "props": {
      "title": "Seller"
    }
  },
  "seller-head-cell#Price": {
    "props": {
      "title": "Price"
    }
  },
  "seller-head-cell#Shipping": {
    "props": {
      "title": "Shipping"
    }
  },
  "seller-head-cell#PriceWithShipping": {
    "props": {
      "title": "Price With Shipping"
    }
  },
  "seller-head-cell#BuyButton": {
    "props": {
      "title": "Add To Cart"
    }
  },
  "seller-body": {
    "children": [
      "seller-row"
    ]
  },
  "seller-row": {
    "children": [
      "seller-name",
      "seller-price",
      "seller-shipping",
      "seller-price-with-shipping",
      "seller-add-to-cart"
    ]
  },
  "seller-add-to-cart":{
    "blocks":[
      "add-to-cart-button"
    ]
  }
}
Block nameDescription
seller-tableLayout block that provides a table to build the Seller Selector page with other blocks. It is possible to build the page using three main blocks: seller-simulate-shipping, seller-head and seller-body (declared as children of seller-head).
seller-simulate-shippingBuilds a form so users can add a postal code and then simulate the shipping costs to the desired address.
seller-headBuilds a header to be used on the Seller Selector table. You can pass to it the seller-head-cell block as children.
seller-head-cellDefines a title for each column in the table header.
seller-bodyDefines the page main content. It is responsible for displaying all sellers' data in the table body.
seller-rowUsed inside the Seller Selector table to separate seller's data into columns. You can use the blocks listed below (seller-name, seller-price, seller-shipping, seller-price-with-shipping, seller-add-to-cart) as seller-row's children in order to provide all needed seller's data.
seller-nameDisplays the seller name.
seller-priceDisplays the seller price for a given product.
seller-shippingDisplays shipping cost considering the sellers' data.
seller-price-with-shippingDisplays the purchase final cost (shipping cost + product price).
seller-add-to-cartDisplays a Buy button that adds a given seller's product to the shopping cart. It is possible to use two different blocks inside of it buy-button or add-to-cart-button
buy-buttonDefault buy button, will be used if nothing is provided in the blocks section of seller-add-to-cart
add-to-cart-buttonBuy button to use with Minicart.V2 and GoCommerce Stores

link-seller props

Prop nameTypeDescriptionDefault value
messagestringText displayed on link counterstore/seller-link.linkText
Message variablesTypeDescriptionExample
sellerQuantitynumberNumber of sellers sell this productView {

This block uses the ICU Message Format, making it possible to fully edit the text message and variables displayed on block.

seller-table props

Prop nameTypeDescriptionDefault value
limitShownShippingInformationnumberMax number of shipping options to be displayed.3

seller-add-to-cart props

Prop nameTypeDescriptionDefault value
isOneClickBuybooleanDefines if users will keep navigating in the same page once the Buy button was clicked on (true) or if they will be redirected (false)false

seller-head-cell props

Prop nameTypeDescriptionDefault value
titlestringText displayed on the table header for each column.undefined

Modus operandi

The Seller Selector app fetch seller's data automatically from the admin's Catalog .
Behind the scenes, the blocks exported from the app use the product context in which they are inserted to identify the seller's data in the SKU registry.
Based on this, they are able to display seller data without having to declare each desired seller in your theme.

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.

CSS Handles
linkSellerContainer
linkSeller
linkSellerText
linkSellerNumber
sellerMasterContainer
sellerBuyContainer
sellerList
sellerBodyCell
sellerHead
sellerHeadCell
sellerHeadText
sellerName
sellerPrice
sellerPriceShipping
sellerPriceShippingText
sellerRow
sellerShipping
sellerShippingText
sellerRow
simulateShipping
simulateShippingSearch
simulateShippingSpinner

Updated 2 months ago


Seller Selector


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.