A script for Ecwid to display Vkontakte social widgets on the product pages

ecwid_vk_widgets.js

/*
 * A script for Ecwid to display Vkontakte social widgets (like, share, comments) on the product pages.
 * Please include it after the Ecwid integration code.
 *
 * Required: Ecwid Product API, Vkontakte API, jQuery
 *
 * Global variables: vkWidgetsSettings (redefines the default widget settings)
 */

/*
 * Widget settings. Please refer to the Vkontakte API documentation for details.
 */
var DefaultVkWidgetsSettings = {
  like: {
    enabled: true,
    elmId: "ecwid_vk_like",
    shareTextMaxLength: 140, // VK restrictions
    elmParentSelector: ".ecwid-productBrowser-details-like", // widget's place
    elmCssClass: "ecwid-vk-like",

    type: 'full', // {'full', 'button', 'mini', 'vertical'}
    width: 250,
    height: 22,
    verb: 0 // {0, 1}
  },

  share: {
    enabled: true,
    elmId: "ecwid_vk_share",
    shareTextMaxLength: 140, // VK restrictions
    elmParentSelector: ".ecwid-productBrowser-details-like", // widget's place
    elmCssClass: "ecwid-vk-share",

    noparse: true
  },

  comments: {
    enabled: true,
    elmId: "ecwid_vk_comments",
    elmParentSelector: ".ecwid-productBrowser-details-comments", // widget's place
    elmCssClass: "ecwid-vk-comments",

    width: 500, // {300-inf}
    limit: 10, // {5-100}
    attach: '*', // { 'graffiti', 'photo', 'audio', 'video', 'link', '*' }
    autoPublish: 1, // {0, 1}
    mini: 'auto', // { 0, 1, 'auto' }
    height: 500, // {0, 500-inf}
    norealtime: 0 // {0, 1}
  }
};


/*
 * Truncate text in product description according to the given limits
 */
function truncateProductDescription(text, length) {
  return ($.trim(text).substring(0, length).split(" ").slice(0, -1).join(" ") + "...");
}

/*
 * Parse the page source and get the product information
 */
function getEcwidProductInfo() {
  var productInfo = {
    'imageUrl': $('.ecwid-productBrowser-details-thumbnail > img').attr('src'),
    'productTitle': $('.ecwid-productBrowser-head').text(),
    'productDescr': $('.ecwid-productBrowser-details-descr').text()
  };

  return productInfo;
}


/*
 * Show VK widgets on the product pages
 */
if (
  typeof (jQuery) == 'function'
  && typeof (Ecwid) == 'object'
  && typeof (VK) == 'object'
) {

  // Apply custom settings if any
  var settings = DefaultVkWidgetsSettings; 
  if (typeof (vkWidgetsSettings) == 'object') {
    for (var vkWidgetType in vkWidgetsSettings) {
      if (typeof (vkWidgetsSettings[vkWidgetType]) == 'object') {
        for (var key in vkWidgetsSettings[vkWidgetType]) {
          settings[vkWidgetType][key] = vkWidgetsSettings[vkWidgetType][key];
        }
      }
    }
  }
 
  // Define handler for loading an Ecwid page
  Ecwid.OnPageLoaded.add(function(page) {
    // Determine if a product page is opened and perform necessary actions
    if (
      typeof(page) == 'object'
      && 'PRODUCT' == page.type
    ) {

      // Get the product information
      var productInfo = getEcwidProductInfo();

      // Get the page URL
      var pageUrl = window.location;

      // Create HTML elements (widget containers)
      for (var vkWidgetType in settings) {
        if (settings[vkWidgetType].enabled) {
          $('#' + settings[vkWidgetType].elmId).remove();
          $(settings[vkWidgetType].elmParentSelector).append(
            "<div id='" + settings[vkWidgetType].elmId + "' class='" + settings[vkWidgetType].elmCssClass + "'></div>"
          ).show(); 
        }
      }

      /*
       * Display like button
       */
      if (settings['like'].enabled) {
        VK.Widgets.Like(
          settings['like'].elmId, 
          {
            type: settings['like'].type,
            width: settings['like'].width,
            pageTitle: productInfo.productTitle,
            pageDescription: truncateProductDescription(productInfo.productDescr, settings['like'].shareTextMaxLength),
            pageUrl: pageUrl,
            pageImage: productInfo.imageUrl,
            text: productInfo.productTitle,
            height: settings['like'].height,
            verb: settings['like'].verb
          }
        );
      }

      /*
       * Display share button
       */
      if (settings['share'].enabled) {
        $('#' + settings['share'].elmId).html(
          VK.Share.button({
            url: pageUrl,
            title: productInfo.productTitle,
            description: truncateProductDescription(productInfo.productDescr, settings['share'].shareTextMaxLength),
            image: productInfo.imageUrl,
            noparse: settings['share'].noparse
          })
        );
      }
    
      /*
       * Display comments
       */
      if (settings['comments'].enabled) {
        VK.Widgets.Comments(
          settings['comments'].elmId, 
          {
            width: settings['comments'].width,
            limit: settings['comments'].limit,
            attach: settings['comments'].attach,
            autoPublish: settings['comments'].autoPublish,
            mini: settings['comments'].mini,
            height: settings['comments'].height,
            norealtime: settings['comments'].norealtime,
            pageUrl: pageUrl
          }
        );
      }
    
    }
  });
}