Share Product

Use this extension to include product sharing on social channels (Facebook, Twitter, Pinterest) and email.

Installation

1. Copy optional-extensions/share-product to themes/custom-extensions/share-product.
2. Add import ShareProduct from 'custom-extensions/share-product'; to your file, typically PROD.js. Alternatively, it is preferred to asynchronously load in the extension to improve page performance. This can be done by adding the following code to your file:

   (async () => {
       if (!document.getElementsByClassName('js-share-product')[0]) {
           return;
       }
   
       const {default: ShareProduct} = await import('custom-extensions/share-product');
   
       new ShareProduct();
   })();
   

3. Create the following two Theme Component > Content Sections:
   • Share Product Entities
     • Code: share_product_entities
     • Name: Share Product Entities
     • Content: Add content from miva-templates > readytheme > contentsection > share_product_entities.mvt file within the share-product directory
     • Ensure the Wrap in a <div> tag option is unchecked
   • Share Product UI
     • Code: share_product_ui
     • Name: Share Product UI
     • Content: Add content from miva-templates > readytheme > contentsection > share_product_ui.mvt file within the share-product directory
     • Ensure the Wrap in a <div> tag option is unchecked

Example Usage

After the installation steps above have been implemented, the product sharing functionality is ready to be used.

Add Share Product Entities to HEAD Tag

Load the share product entities by rendering the readytheme item in the head tag (ie prod.mvt).

<mvt:item name="readytheme" param="contentsection( 'share_product_entities' )" />

Tip

Optionally, you can override the l.settings:product:social structure members with the entity values if you wish to maintain these in the share_product_entities.mvt. To do so, render the shared_product_entities item above before the l.settings:product:social structure members are defined in the prod.mvt template and update the member values with the l.settings:share_product structure members set in the shared_product_entities item template.

For example:

<mvt:comment>
|
|   Load/Prepare Social Data
|
</mvt:comment>

<mvt:item name="readytheme" param="contentsection( 'share_product_entities' )" />

<mvt:assign name="l.settings:product:social:description"    value="l.settings:share_product:text" />
<mvt:assign name="l.settings:product:social:image"          value="l.settings:share_product:image" />
<mvt:assign name="l.settings:product:social:url"            value="l.settings:share_product:url" />

Render Share Product UI

Load the share product UI template where you wish to display the product sharing UI.

<mvt:item name="readytheme" param="contentsection( 'share_product_ui' )" />

This template can be expanded on to support more social sharing services.

Configuration Options

The ShareProduct class supports an optional configuration object for the first parameter to override any of the default settings. The following table defines the available configuration options:

Name	Type	Description	Default Value
shareAttributes	Object	Configuration options for share HTML attributes	{}
shareAttributes.description	String	Attribute name for description	'data-description'
shareAttributes.media	String	Attribute name for media	'data-media'
shareAttributes.type	String	Attribute name for type	'data-social'
shareAttributes.url	String	Attribute name for url	'data-url'
shareElements	ElementList	Share product elements to trigger the share product functionality	'.js-share-product'