Share.md

Share

Description

Share is a VTEX component that allows to share a product url via social medias. This component can be imported and used by any VTEX app.

📢 Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.

Table of Contents

• Usage
  • Blocks API
    • Configuration
  • Styles API
    • CSS Namespaces

Usage

You should follow the usage instruction in the main README.

Then, add share block into your app theme, as we do in our Product Details app.

Blocks API

When implementing this component as a block, various inner blocks may be available. The following interface lists the available blocks within Share and describes if they are required or optional.

  "share": {
    "component": "Share"
  }

For now this block does not have any required or optional blocks.

Configuration

Through the Storefront, you can change the Share's behavior and interface. However, you also can make in your theme app, as Store theme does.

Prop name	Type	Description	Default value
className	String	The main container classes	null
shareLabelClass	String	The share label classes	true
buttonsContainerClass	String	The button container classes	true
options	Options	Share button options, like "size"	{}
social	Social	The possible social medias to be displayed	{Facebook: true, Twitter: true, WhatsApp: true, Pinterest: true}
imageUrl	String	Image url to share in social medias

Options:

Prop name	Type	Description
size	Number	The size of the share button in pixels

Social:

Prop name	Type	Description
Facebook	Boolean	If facebook social media will be shown
Twitter	Boolean	If twitter social media will be shown
WhatsApp	Boolean	If whatsApp social media will be shown

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

Below, we describe the namespace that are defined in the Share.

Class name	Description	Component Source
shareContainer	The main container of Share	index
shareLoader	The share loader	index
shareLabel	The share label	index
shareButtons	The main container of social media buttons	index
shareSocialButton	The share social media button	index
shareSocialIcon	The share social media icon	index