In this tutorial you will create a simple product recommendation Flex Content.
This is how it will look.

- First create a new Flex Content.
- In the Flex Content Settings section use the following
Select content type: Simple Content
Enable Recommendations
Select a recommendation type
Set number of recommendations to three - Paste the HTML code below into the HTML Editor
- Paste the CSS code below into the CSS Editor
- Paste the JavaScript code below into the JavaScript Editor
Attention: To avoid class name conflicts you should use prefixes or suffixes for all your CSS classes. The same applies to JavaScript functions.
After saving the Flex Content it is ready to use. Copy the shortcode ([exm_content id=”74″]) from the top of the editor. This code can be used everywhere shortcodes can be used.
HTML
<div class="products"> {{#recommendation}} <div class="product" data-exm-product-id="{{{id}}}"> <div class="notify"><span id="exm_ecom_notifyType" class=""></span></div> <a href="{{{url}}}"> {{{image}}} <h4 class="title" style="width:100%;">{{title}}</h4> </a> <h4 class="price" style="margin: 0 auto; margin-top: 10px;">{{{price }}}</h4> {{#is_sale}} <div class="sale" style="left: 0;" >Sale</div> {{/is_sale}} <div class="button" style="margin: 0 auto;" onClick="exm_ecom_add_to_basket(this, {{{id}}}, '{{{sku}}}')">By now</div> </div> {{/recommendation}} </div>
CSS
.products { display: flex; flex-wrap: wrap; } .product { display: flex; flex-direction: column; text-align: center; padding: 2%; flex: 1 16%; padding-top: 20px; text-align: center; position: relative; } .button { position: relative; } .image { width: 100%; font-size: 5em; margin: 2px; min-height: 120px; margin: 0 auto; } .sale { padding: 2px; font-weight: bold; position: absolute; background-color: red; color: white; } .price { flex: 1; } .title { flex: 1; } @media (min-width: 1025px) and (max-width: 1280px) { .product { flex: 1 21%; } .products .product:first-child, .products .product:nth-child(2) { flex: 2 46%; } } @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .products { flex-direction: column; } .product { flex: 1 46%; } } @media (min-width: 481px) and (max-width: 767px) { .products { flex-direction: column; } .product { flex: 1 46%; } } @media (min-width: 320px) and (max-width: 480px) { .products { flex-direction: column; } .product { flex: 1 100%; } } @keyframes loader { to { transform: rotate(360deg); } } .loader:before { content: ''; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; border-radius: 50%; border: 2px solid transparent; border-top-color: #07d; border-bottom-color: #07d; animation: loader .8s ease infinite; } /* notify start */ .success { background: #03a679; color: #f0f0f0; } .failure { background: #ff3939; color: #f0f0f0; } .notify { position: relative; top: 0px; width: 100%; height: 0; box-sizing: border-box; color: white; text-align: center; background: rgba(0, 0, 0, .6); overflow: hidden; box-sizing: border-box; transition: height .2s; } #exm_ecom_notifyType:before { display: block; margin-top: 15px; } .active { height: 50px; } .success:before { Content: "Success!"; } .failure:before { Content: "Something went wrong!"; } /* notify end*/
JavaScript
function exm_ecom_add_to_basket($target, product_id, product_sku) { var $thisbutton = jQuery($target); var data = { 'product_sku': product_sku, 'product_id': product_id, 'quantity': 1 }; jQuery(".product[data-exm-product-id=" + product_id + "] .button").toggleClass("loader"); jQuery(".product[data-exm-product-id=" + product_id + "] .button").toggleClass("disabled"); EXM.WOO.addToBasket(product_id, product_sku, 1, (response) => { let notify_class = "success"; if (response.error) { notify_class = "failure"; } jQuery(".product[data-exm-product-id=" + product_id + "] .notify").toggleClass("active"); jQuery(".product[data-exm-product-id=" + product_id + "] .notify span").toggleClass(notify_class); setTimeout(function () { jQuery(".product[data-exm-product-id=" + product_id + "] .notify").removeClass("active"); jQuery(".product[data-exm-product-id=" + product_id + "] .notify span").removeClass(notify_class); }, 2000); jQuery(".product[data-exm-product-id=" + product_id + "] .button").removeClass("loader"); jQuery(".product[data-exm-product-id=" + product_id + "] .button").removeClass("disabled"); }); }