The plugin is developed for WordPress version 3.5 and above and WooCommerce plugin version 2.0.0 and above.

The plugin utilizes the WordPress hook API to integrate the Nosto marketing automation service. There are three types of content added to the shop using hooks; JavaScript, tagging blocks and Nosto elements.

JavaScript

The JavaScript used for communication between the shop and Nosto service is added the head section of every page using the “wp_enqueue_scripts” hook. The JavaScript is added as a separate file that is loaded in the html head section.

Tagging blocks

Tagging blocks are used to hold meta-data about products, categories, orders, shopping cart and customers in the shop. The blocks consist of normal html elements that are rendered using php template files.

The following tagging blocks are added:

• Customer tagging
  • Added to the footer of all pages through hook “wp_footer” from the Action API
• Shopping cart tagging
  • Added to the footer of all pages through hook “wp_footer” from the Action API
• Product tagging
  • Added to the top of product pages through hook “woocommerce_before_single_product” from the Action API
• Category tagging
  • Added to the top of category pages through hook “woocommerce_before_main_content” from the Action API
• Order tagging
  • Added to the order confirmation page through hook “woocommerce_thankyou” from the Action API

Nosto elements

Nosto elements are placeholders for the product recommendations coming from the Nosto marketing automation service. A Nosto element is a simple html div element that is populated with content using JavaScript. The elements are rendered using a generic php template file.

By default the module creates the following Nosto elements:

• 3 elements for the product page
  • Added to the footer of product pages through hook “woocommerce_after_single_product_summary” from the Action API
• 3 elements for the shopping cart page
  • Added to the footer of the shopping cart pages through hook “woocommerce_after_cart” from the Action API
• 2 elements for the category page
  • One is added to the top of the category pages through hook ”woocommerce_before_main_content” from the Action API
  • The other is added to the footer of category pages through hook “woocommerce_after_main_content” from the Action API
• 2 elements for the search result page
  • One is added to the top of the search result page through hook ”wcnt_before_search_result”
    • This is a custom hook created by this module
  • The other is added to the footer of search result page through hook “wcnt_after_search_result”
    • This is a custom hook created by this module
  • WooCommerce also implements its own search page, in addition to the default one in WordPress
    • This page has its own hooks that are used for the Nosto elements; “woocommerce_before_main_content” and “woocommerce_after_main_content”
  • Both the custom hooks and the woocommerce ones add the same Nosto elements, as it is inteded that you use either or
• 2 elements for all pages
  • One is added to the top of all pages through hook “wcnt_before_main_content”
    • This is a custom hook created by this module
  • The other is added to the footer of all pages through hook “wcnt_after_main_content”
    • This is a custom hook created by this module

Nosto elements for the sidebars are implemented through the WordPress Widget API. A “Nosto Element” widget is added that the site admin can place in the correct sidebars. This widget has a setting for the id property that will be used as the element div id.

Top Sellers

A “Top Sellers” CMS page is added on plugin first time activation. The page contains only a Nosto element for the recommendations that can be edited directly from the WordPress backend. The page will be set to to draft status, i.e. hidden from the shop, when the plugin is deactivated.