buy together

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Buy Together

App para montar a prateleira de Compre Junto

Media Placeholder

Configuration

1. Adding the app as a theme dependency in the manifest.json file;

  "dependencies": {
    "{vendor}.buy-together": "0.x"
  }

1. Declaring the app's main block in a given theme template or inside another block from the theme.

Remember to add a table with all blocks exported by the app and their descriptions. You can verify an example of it on the Search Result documentation.

Block name	Description
buy-together	XXXXX
product-summary.buy-together	XXXXX
buy-together-product-list	XXXXX
buy-together-product-list.slider	XXXXX
buy-together-total	XXXXX
buy-together-current-product	XXXXX
buy-together-installments	XXXXX
buy-together-buy-button	XXXXX
buy-together-title	XXXXX
buy-together-message	XXXXX
buy-together-discount	XXXXX
buy-together-select-button	XXXXX

buy-together props

Prop name	Type	Description	Default value
useCheckbox	boolean		false
multiSelect	boolean		false
crossSellings	CrossSellingEnum[]		["showtogether"]

buy-together-product-list and buy-together-product-list.slider props

Prop name	Type	Description	Default value
swiperProps	object	XXXXXXXX	{ slidesPerView: 1 }
NextArrow	block	XXXXXXXX	true
PrevArrow	block	XXXXXXXX	undefined
showAllSkus	boolean	will split each sku of product in one shelf	false
preferredSKU	PreferredSKUEnum	XXXXXXXX	FIRST_AVAILABLE
crossSelling	CrossSellingEnum	XXXXXXXX	showtogether

buy-together-product-list.slider props

Prop name	Type	Description	Default value
swiperProps	object	XXXXXXXX	{ slidesPerView: 1 }
NextArrow	block	XXXXXXXX	true
PrevArrow	block	XXXXXXXX	undefined

buy-together-total props

Prop name	Type	Description	Default value
message	string	XXXXXXXX	'Por apenas: {totalPrice}'
markers	array	XXXXXXXX	[]

buy-together-installments props

Prop name	Type	Description	Default value
message	string	XXXXXXXX	Em até {installmentsNumber}x {installmentValue}{hasInterest, select, true {, {interestRate} de juros} false { sem juros}}
markers	array	XXXXXXXX	[]

buy-together-buy-button props

Prop name	Type	Description	Default value
BuyButton	Block	XXXXXXXX	add-to-cart-button

buy-together-title props

Prop name	Type	Description	Default value
text	string	XXXXXXXX	Aproveite, e leve junto

buy-together-message props

Prop name	Type	Description	Default value
message	string	XXXXXXXX	Leve os {selectedCount} produtos
markers	string[]	XXXXXXXX	[]

buy-together-discount props

Prop name	Type	Description	Default value
message	string	XXXXXXXX	com {percentage}% de desconto
minimumPercentage	number	XXXXXXXX	0
markers	array	XXXXXXXX	[]

buy-together-select-button props

Prop name	Type	Description	Default value
label	string	XXXXXXXX	comprar junto

For CrossSellingEnum:

Name	Value	Description
Show Together	showtogether
Accessories	accessories
Similars	similars
Suggestions	suggestions
Who Bought Also Bought	whoboughtalsobought
Who Saw Also Bought	whosawalsobought
Who Saw Also Saw	whosawalsosaw

For PreferredSKUEnum:

Name	Value	Description
First Available	FIRST_AVAILABLE	Selects the first available SKU in stock it finds.
Last Available	LAST_AVAILABLE	Selects the last available SKU in stock it finds.
Cheapest	PRICE_ASC	Selects the cheapest SKU in stock it finds.
Most Expensive	PRICE_DESC	Selects the most expensive SKU in stock it finds.

usage:

{
  "buy-together": {
    "children": ["container#buy-together-content"]
  },
  "container#buy-together-content": {
    "children": ["container#buy-together-content"]
  },
  "container#buy-together-content": {
    "children": ["buy-together-title", "container#buy-together-container"]
  },
  "container#buy-together-container": {
    "children": [
      "buy-together-current-product",
      "container#icon-plus",
      "buy-together-product-list.slider",
      "container#icon-equals",
      "container#buy-together-information"
    ]
  },
  "container#icon-plus": {
    "children": ["icon-plus"],
    "props": {
      "verticalAlign": "middle",
      "horizontalAlign": "center"
    }
  },
  "container#icon-equals": {
    "children": ["icon-equals"],
    "props": {
      "verticalAlign": "middle",
      "horizontalAlign": "center"
    }
  },
  "buy-together-current-product": {
    "blocks": ["product-summary.buy-together"]
  },
  "buy-together-product-list.slider": {
    "blocks": ["product-summary.buy-together"]
  },
  "container#buy-together-information": {
    "children": [
      "buy-together-message",
      "buy-together-total",
      "buy-together-installments",
      "buy-together-buy-button"
    ],
    "props": {
      "preventVerticalStretch": true,
      "blockClass": "buy-together-info"
    }
  },
  "buy-together-buy-button": {
    "props": {
      "BuyButton": "add-to-cart-button"
    }
  },
  "product-summary.buy-together": {
    "children": ["product-summary-image", "product-summary-name"],
    "props": {
      "blockClass": "buy-together"
    }
  }
}

⚠️

To select which SKU will take preference over this prop, create a Product (field) specification and assign the value of the desired SKU to be initially set for each product. If the specification doesn't exist or the value is empty, the preferredSKU prop will be used as a fallback. For more information, please refer to this guide.

Remember to also use this Configuration section to showcase any necessary disclaimer related to the app and its blocks, such as the different behavior it may display during its configuration.

Customization

CSS Handles
container
buyTogetherContainer
currentProduct
currentProductWrapper
discountWrapper
discountPercentage
buyTogetherInfo
productList
buyTogetherProductList
buyTogetherProductItem
arrowDisabled
arrowNext
arrowPrev
arrow
swiperPagination
swiperBulletActive
swiperBullet
swiperWrapper
buyTogetherSelectWrapper
buyTogetherSelectLabel
buyTogetherSelectInput
buyTogetherTitleContainer
buyTogetherTitle
totalValue
installments
installmentsNumber
installmentValue
installmentsTotalValue
interestRate
paymentSystemName