Configure a Dynamic Bundles Action

Contact your dedicated Customer Success Manager (CSM) if you want to add the Monetate Dynamic Bundles feature to your account.

Monetate provides two Dynamic Bundles action templates:

  • The basic Dynamic Bundles action template allows you to include the product on which the bundle is based as the first product in the results slider when used with a bundle in which Prepend context item in recommendation is set to YES.
  • The Dynamic Bundles with Context Item action template includes CSS and JavaScript so that you can the product on which the bundle is based is styled different from the recommended products when used with a bundle in which Prepend context item in recommendation is set to YES.

Unless you select a bundle in which Prepend context item in recommendation is set to YES, the product on which the bundle is based does not appear with the recommended products regardless of which action template you use.

Follow these steps to build a Web experience with a Dynamic Bundles action.

  1. Create a new Web experience, and then configure the WHY and WHO settings.
  2. Click WHAT and then click ADD ACTION.

    Callout of the WHAT settings and the ADD ACTION button on the Experience Editor page

  3. Click Product Recommendations.

    Callout of the Product Recommendation option on the Action Type panel of the WHAT settings

  4. Select the Dynamic Bundles action template that you want to use.

    Callout of a Dynamic Bundles action template on the Product Recommendations panel of the WHAT settings

  5. Complete the required settings.
    1. Input the element selector identifying where on a product detail page you want the Dynamic Bundles slider to appear.

      Callout of the 'Element selector' field on the Dynamic Bundles action template

    2. Select an option from Insert Method to determine where the action should be inserted relative to the selected node you input in the previous step.

      Callout of the Insert Method selector on the Dynamic Bundles action template

    3. Toggle RecheckForElement to NO if you do not want Monetate to recheck for the selected node for up to 3 seconds if it doesn't find it immediately. Toggle SelectMultipleElements to YES if you want the platform to display the recommendations at every occurrence of the selected node on the page if it finds multiple occurrences.

      Callout of the RecheckForElement option and SelectMultipleElements option on the Dynamic Bundles action template

    4. Select the bundle that you want to use. Scroll through the list of bundles in the selector, or use the search bar to find one by name.

      If you're using the Dynamic Bundles with Context Item action template, ensure that the bundle that you select has Prepend context item in recommendation set to YES.

      Callout of the 'Dynamic Bundle strategy' selector on the Dynamic Bundles action template

    5. Input the minimum number of products that must be available to trigger the action.

      Setting Minimum products returned to zero prevents the bundle from firing.

      If in step 5d you selected a bundle with Prepend context item in recommendation enabled, then the context item counts toward meeting the threshold you set in Minimum products returned.

      Callout of the 'Minimum products returned' field on the Dynamic Bundles action template

    6. Input the maximum number of products that you want to appear in the slider.

      You cannot configure a Dynamic Bundles slider to show more than nine recommended products.

      If in step 5d you selected a bundle with Prepend context item in recommendation enabled, then the context item counts toward meeting the threshold you set in Maximum products returned.

      Callout of the Maximum products returned' field on the Dynamic Bundles action template

    7. Select from Orientation the movement of product images in the slider.

      Callout of the Orientation selector that is expanded to show the options—'Horizontal - Left to Right,' 'Horizontal - Right to Left,' and 'Vertical'—on the Dynamic Bundles action template

    8. As necessary, modify the code in HTML for the action that builds the slider structure.
      • To add slide navigation buttons, use the attributes data-prev-button and data-next-button. If you include optional arrow images, then you must include elements with the attribute data-prev-button and data-next-button for them to appear.
      • To add location-related dynamic text, select an option from SELECT DYNAMIC TEXT, and then paste the code snippet into the code editor.

      Callout of the HTML code in the editor that creates the action container, and a callout of the SELECT DYNAMIC TEXT selector on the Dynamic Bundles action template

    9. As necessary, modify the code in HTML for products that builds the product slides. See Modifying the Slide Template in Build a Product Recommendations with Slotting Action for more information.

      Callout of the 'HTML for products' code editor, which is used to create the slides for each recommended product, on the Dynamic Bundles action template

    10. Optionally, revise the CSS that is appended to the DOM in a <style> or <link> element, or click CHOOSE SAVED CSS or UPLOAD CSS to insert code into the editor. If you're using the Dynamic Bundles with Context Item action template, see Styling the Context Item for more information.

      Use the placeholder #MONETATE-ID as the selector for the action's wrapper ID.

      Callout of the CHOOSE SAVED CSS button and the UPLOAD CSS button accompanying the CSS editor on the Dynamic Bundles action template

    11. As necessary, modify the code in Slides Visible to change the slide visibility options. See Modifying the Slide Visibility Template in Build a Product Recommendations with Slotting Action for more information.

      Callout of the code in the Slides Visible editor on the Dynamic Bundles action template

  6. Optionally, add image files to be used for the slider navigation buttons by clicking CHOOSE EXISTING, GENERATE IMAGE, or UPLOAD for Previous Button Image and Next Button Image, respectively.

    Callout of the CHOOSE EXISTING button, GENERATE IMAGE button, and UPLOAD button for the Previous Button Image field and for the Next Button Image field on the Dynamic Bundles action template

  7. Optionally, configure the action with JavaScript.

    If you're using the Dynamic Bundles with Context Item action template, the JavaScript editor natively includes code required for the product on which the bundle is based to appear along with the recommended products. See Styling the Context Item for more information.

    If you're using the basic Dynamic Bundles action template and want to use JavaScript to customize the action for your site, contact your dedicated Customer Success Manager (CSM) and request that an action template that includes a JavaScript editor be added to your account.

    Example of the JavaScript editor on the Dynamic Bundles action template

  8. Optionally, add one or more action conditions. Click ADD CONDITION and then navigate the categories and options to set any conditions that must be met for the action to fire. See Action Conditions for more information.

    The action condition category options accessible from the ADD CONDITION selector

  9. Click CREATE.

Finish building the experience by configuring the WHEN settings. Ensure that you preview the experience before activating it. See Activate an Experience for Preview and Testing for more information.

Styling the Context Item

The Dynamic Bundles with Context Item action template natively includes both CSS and JavaScript necessary for the product on which the bundle is based to appear along with the recommended products but be styled differently.

You must select a bundle that has Prepend context item in recommendation set to YES to make use of the CSS and JavaScript included in the action template.

HTML for Products

The HTML code that configures and styles the recommended products in the bundle varies slightly from the HTML code used in the basic Dynamic Bundles action. 

<a href="{{link}}" data-pid="{{id}}">
  <div>
    <img src="{{imageLink}}" alt="{{id}} - {{title}}">
  </div>
  <div>
    <div class="product-title">{{title}}</div>
    <div>
      <span>{{price|priceFormat: $1,000.00}}</span>
      <span>{{salePrice|priceFormat: $1,000.00}}</span>
    </div>
  </div>
</a>

CSS for the Context Item

The following code snippet contains the default CSS that controls the appearance of the product on which the bundle is based.

#MONETATE-ID .context-item-main {
  display: flex;
  /*height : 600px;*/
  justify-content: center;
}
#MONETATE-ID .context-item {
  border: 1px solid #979797;
  flex: 1;
  padding: 25px;
  position: relative;
}
#MONETATE-ID .context-item .mt-merch-item img {
  width: 100% !important;
  height: 100%;
}
#MONETATE-ID .context-item a {
  text-decoration: none;
}
#MONETATE-ID .context-item a div {
  margin: auto;
}
#MONETATE-ID .context-item a .product-title {
  margin-top: 15px;
  margin-bottom: 10px;
}
#MONETATE-ID .mt-hover-wrapper {
  display: none;
}
#MONETATE-ID a .product-title {
  white-space: normal;
  word-break: break-word;
  margin-bottom: 17px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  #MONETATE-ID {
    text-align: center;
    font-size: 12px;
    flex-direction: column;
    max-height: 100%;
    max-width: max-content;
    margin: 5%;
  }
  #MONETATE-ID .context-item-main {
    flex-direction: column;
    height: auto;
  }
  #MONETATE-ID .context-item {
    max-height: max-content;
  }
  #MONETATE-ID .context-item a div {
    width: 100%;
  }
  #MONETATE-ID [data-slide] {
    flex-basis: 33.33% !important;
  }
  #MONETATE-ID [data-slide] img {
    height: auto;
    width: 100% !important;
    margin-bottom: 15px;
  }
  #MONETATE-ID [data-slider-mask] {
    margin-top: 0px;
  }
  #MONETATE-ID [data-slide]:not(:first-child) {
    border-top: none;
    /* Remove top border for elements that are not the first child */
  }
  #MONETATE-ID [data-slide]:nth-child(3n+2) {
    border-left: 1px solid #979797;
  }
}

@media (max-width: 768px) {
  #MONETATE-ID {
    text-align: center;
    font-size: 12px;
    flex-direction: column;
    max-height: 100%;
    max-width: max-content;
    margin: 5%;
  }
  #MONETATE-ID .context-item-main {
    flex-direction: column;
    height: auto
  }
  #MONETATE-ID .context-item {
    width: 100%;
    max-height: max-content;
  }
  #MONETATE-ID .context-item a div {
    width: 100%;
  }
  #MONETATE-ID .context-item a .product-title,
  #MONETATE-ID .context-item a div span {
    margin-left: auto;
  }
  #MONETATE-ID [data-slide] {
    flex-basis: 33.33% !important;
  }
  #MONETATE-ID [data-slide]>div {
    padding: 10px
  }
  #MONETATE-ID a .product-title {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 20px
  }
  #MONETATE-ID [data-slide] img {
    height: auto;
    width: 100% !important;
    margin-bottom: 15px;
  }
  #MONETATE-ID [data-slider-mask] {
    margin-top: 0px;
  }
  #MONETATE-ID a div+div {
    font-size: 12px;
  }
  #MONETATE-ID [data-slide]:not(:first-child) {
    border-top: none;
    /* Remove top border for elements that are not the first child */
  }
  #MONETATE-ID [data-slide]:nth-child(3n+2) {
    border-left: 1px solid #979797;
  }
}

JavaScript

The following code snippet contains the JavaScript required for the product on which the bundle is based to appear along with the recommended products.

var slides = document.querySelectorAll(".mt-merch-item");
if (slides.length > 1) {
  var firstSlide = slides[0];
  var contextItemDiv = document.querySelector(".context-item");
  contextItemDiv.appendChild(firstSlide.cloneNode(true));
} else {
  var ctx = document.querySelector('.ctl-wrapper');
  ctx.style.display = "none";
}

Related Articles