Pages

Once you've implemented product and transaction tracking for your site, and created and tested the recommendation, you can create the modification that actually displays the recommendation data on product pages. The modification first retrieves the data with the Recommendations API and then builds that data into displayable element. When a visitor navigates to a product page, they see recommendations for up to five other products that visitors have typically purchased together with the current product.

In this example, you place the modification after the <section class="product-info"> element on every page whose URL contains the query parameter controller=product. This renders the modification content below the main product details on every product page.

The product page URL scheme and code structure on your site are almost certainly different. The above values are purely for example purposes.

To display the recommendation data with a modification:

  1. Create a placement for the modification.
  2. Create the modification.

Creating the recommendation placement

To create the placement:

  1. In the Frosmo Control Panel, select Modifications > Placements.
  2. Click Create placement.
  3. Define the following settings:

    • Name: Enter a descriptive name, such as "Recommendation - Product Page".
    • Target element: Select CSS selector, and enter "section.product-info" as the selector name.
    • Display method: Select After element.
    • URL matcher: Click Add new rule. Since only the product page URLs contain the query parameter controller=product, define the following rule: "Page query selector controller is exactly product". This means that the placement is valid for a page only when the page URL contains the query key "controller" with the value "product".

      For more information about the URL matcher, see Creating placements.

    The target element, display method, and URL matcher together place the modification after the main product details element on a product page.

  4. Click Save.

You have created the placement.

For more information about placement settings and how to manage placements, see Creating placements.

Creating the recommendation modification

To create the modification:

  1. In the Control Panel, select Modifications > Overview.
  2. Click Create modification.
  3. Enter a descriptive name for the modification, such as "Recommendation - Products purchased together", select Basic as the modification type, and deselect Enable comparison group.

    Creating the recommendation modification

    The comparison group is a useful feature for production modifications, so do not disable it by default. Here, the comparison group is disabled to keep the example as simple as possible. For more information about the comparison group, see Default configuration and data tracking for a visitor.

  4. Click Create modification.
  5. Create the modification content:

    1. Select Content.
    2. Expand variation 1.
    3. In the content field, enter the code that retrieves and displays the recommendation data. Use the following example code as a basis.

      The example code first checks whether the product data is available on the page, since retrieving the recommendation data requires a product ID. If the product data is available, the code then retrieves the recommendation data with the Recommendations API and renders that data into a carousel element on the page.

      <!-- JavaScript for the modification -->
      <script>
          /**
           * Let's assume the product data is available in a global "window.product"
           * object. The "window.product.id" property contains the product ID.
           *
           * If the global product object is available, create the recommendation.
           */
          if (window.product) {
              createRecommendation(window.product.id);
          } else {
              console.log('No product data available on the page.');
          }
      
          /**
           * Create the recommendation for the specified product.
           * @param {number} prodId Product ID
           * @returns {void}
           */
          function createRecommendation(prodId) {
              // Get the recommendation data from the Recommendations API.
              // Note! The domain and "origin" parameter value depend on your
              // Frosmo Platform instance and site origin, respectively.
              var apiUrl = 'https://inpref.com/recoApi/v2?method=multifetch'
                           + '&origin=shop_company_com'
                           + '&recos=[{"name":"Products%20purchased%20together","params":{"productId":"' + prodId + '"}}]';
              fetch(apiUrl)
                  // Return the result as JSON.
                  .then(function (res) {
                      if (!res.ok) {
                          return res.text().then(function (text) {
                              throw new Error(text);
                          });
                      }
                      return res.json();
                  })
                  // Build the HTML content for the recommendation, and render
                  // the recommendation.
                  // Note! The product data attributes available depend on the
                  // data tracked from the site.
                  .then(function (res) {
                      var data = res.data[0];
                      var content = data.map(function (item) {
                          return '<li><a href="' + item.attributes.url + '">'
                                 + '<img src="' + item.attributes.image + '" />'
                                 + '<div class="product-name">' + item.name + '</div>'
                                 + '</a></li>';
                      })
                      .join('\n');
                      renderRecommendation(content);
                  })
                  .catch(function (err) {
                      console.error(err);
                  });
          }
      
          /**
           * Render the recommendation.
           * @param {string} content HTML content to render
           * @returns {void}
           * @todo Implement the carousel functionality.
           */
          function renderRecommendation(content) {
              // Display the pre-hidden container element.
              var container = document.querySelector('.frosmo-recommendation');
              if (!container) {
                  throw new Error('Invalid selector: ".frosmo-recommendation"');
              }
              container.style.display = 'block';
      
              // Create the recommendation carousel from the HTML content.
              // ...
          }
      </script>
      
      <!-- HTML content of the modification -->
      <div class="frosmo-recommendation">
          <h3 class="page-product-heading">Customers who purchased this item also purchased</h3>
          <div class="frosmo-carousel">
              <button class="frosmo-carousel-prev">&#10094;</button>
              <ol class="frosmo-carousel-content"></ol>
              <button class="frosmo-carousel-next">&#10095;</button>
          </div>
      </div>
      
      <!-- CSS for styling the HTML content of the modification -->
      <style>
          .frosmo-recommendation {
              display: none;
          }
      
          /* Style the rest... */
      </style>

      The code omits the details of implementing and styling the recommendation carousel, since these depend on how the product page is built and how the site is styled.

    4. Click Activate for variation 1.
    5. Click Save all.

    Creating the recommendation modification

  6. Define the display options for the modification:

    1. Select Display Options.
    2. Click Select placement.
    3. Select the placement you created above, and click Select.
    4. Click Save.

  7. Click Activate for the modification.

You have created the modification, and you've completed this example. The product pages now recommend products that visitors have typically purchased together.

Recommendation for products purchased together

Figure: Recommendation for products purchased together

  • No labels