Simple product recommendation

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

  1. First create a new Flex Content.
  2. 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
  3. Paste the HTML code below into the HTML Editor
  4. Paste the CSS code below into the CSS Editor
  5. 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");
	});
}