Share different products from the same page

MULTI SHARE TUTORIAL

What is multi share? Its a method of having several products on the same page each with their own link that will allow a user to share each product separately from the same page. DEMO

Requirements:

AddShoppers widget code must be installed on the page first (should be anywhere on your site if you installed the widget in your header or footer)

Step 1.

Add "itemprop" tags to relevant information. Below is a list of the tags you will need to add as well as some example html showing how it would look on a sample product page.



  • name: (add this to the tag that is wrapped around your product name)itemprop="prodname"
  • url: (add this to an A tag that links to the product) itemprop="produrl"
  • image url: (add this ti your image tag) itemprop="prodimageurl"
  • (optional)price: (add this to the tag that is around your products price) itemprop="prodprice"


Example code on how the itemprop tag should be added can be found here: Itemprop Example

Step 2.

Now that you have an itemprop value added to all relevant information copy and paste the JS from here: JS to add to your site. and paste it at the bottom of your page.


Step 3.

Now you can add a call to action to initiate the share. You can use virtually any HTML element as long as you include onclick="defineShare(this);" in the tag. Check out these initiate share examples to get an idea of how to use this on your site. You will need to have one of these call to actions for each product on the page.


Step 4.

Depending on where you added the share tag from Step 3 you may need to modify a single line of the javascript from Step 2.


getChildren(productId.parentNode.childNodes);

The reason you need to look at this is to figure out how many parent nodes you need to go up in order to find the node that wraps the individual product and list.


Here are a few examples:


2 parents:

[second node]
product info etc…..

then you would change the JS in Step 2

From: getChildren(productId.parentNode.childNodes);

To: getChildren(productId.parentNode.parentNode.childNodes);


3 parents:

This example is using an unordered list and the multishare link is 3 nodes deep so the function call in the Javascript from Step 2 would need to be changed.

From: getChildren(productId.parentNode.childNodes);

To: getChildren(productId.parentNode.parentNode.parentNode.childNodes);

How does it look in action? Check it out here: DEMO if you click on the “share me!!!" link that is below the price of each product you will notice that the AddShoppers sharing modal populates with the corresponding products name, url, image and price.