Twitter Product Cards

This topic applies to

Applies to

SuiteCommerce Web Stores

SuiteCommerce Advanced supports Twitter Product Cards which enable shoppers to attach media experiences to Tweets that link to product detail pages. Shoppers can Tweet your products by clicking the Twitter button on the product details page and a card visible to all of their followers is automatically added to their Tweet. This Card can show item details including an image, a description, and two other key item details such as price, availability, sizes or colors.

For more information on Twitter Product Cards see Product Cards.

Configure Twitter Product Cards

Follow the correct configuration procedures below, depending on the version of SuiteCommerce Advanced you are implementing. For information on configurable properties, regardless of your implementation, see Configuration Properties Reference.

Required Twitter Product Cards properties are automatically configured within the SC.Shopping.Configuration.JS file in the ShoppingApplication module. These include product details such as title, description, and image:

// [Twitter Product Card](https://dev.twitter.com/docs/cards/types/product-card)
      ,   'twitter:card': seo_type
      ,   'twitter:site': seo_twitter_site
      ,   'twitter:creator': seo_twitter_creator
      ,   'twitter:title': seo_title
      ,   'twitter:description': seo_twitter_description
      ,   'twitter:image:src': seo_image
      ,   'twitter:domain': seo_domain
      ,   'twitter:data1': seo_twitter_price
      ,   'twitter:label1': seo_twitter_label_one
      ,   'twitter:data2': seo_availability
      ,   'twitter:label2': seo_twitter_label_two

The following screenshot shows the Twitter data collected in the HTML header output.

In addition to the required card properties Twitter Product Cards support two custom data types. By default, these are configured to return the item price and item availability. It is recommended that you keep the default configuration for these properties.

To disable Twitter Product Cards create a custom ShoppingApplication module and edit SC.Shopping.Configuration.JS. Set the enable parameter to false in the twitter function. This removes the Twitter button from the product details page and disables Twitter functionality. For detailed instructions on creating a custom SuiteCommerce Advanced Module see Customize and Extend Core SuiteCommerce Advanced Modules in the SuiteCommerce Advanced Developer’s Guide

The following code snippet lists the twitter configuration options in the SC.Shopping.Configuration.JS file:

// @property {Object} twitter twitter Social Sharing Service
   ,   twitter: {
         enable: true
      ,   popupOptions: {
            status: 'no'
         ,   resizable: 'yes'
         ,   scrollbars: 'yes'
         ,   personalbar: 'no'
         ,   directories: 'no'
         ,   location: 'no'
         ,   toolbar: 'no'
         ,   menubar: 'no'
         ,   width: '632'
         ,   height: '250'
         ,   left: '0'
         ,   top: '0'
         }