Exclude product from product recommendations

Highlighted
New Member
2 0 0

I have Route Shipping Insurance installed on a couple of stores. How do I exclude the Route Insurance product from Product Recommendations on my Product pages?

Screen Shot 2020-08-03 at 3.53.38 PM.png

Currently in an unpublished theme: https://kcee3o3v9odpjwyb-10257858615.shopifypreview.com

 

Here is my liquid for that section:
"

 
<div class="product-recommendations" data-product-id="{{ product.id }}" data-limit="3">  {%- if recommendations.products_count > 0 -%}
  <div class="product-recommendations-pannel">
    <h2>You may also like</h2>
    <ul>
      {%- for product in recommendations.products -%}
      <li class="product">
        <a href="{{ product.url }}">
          <img class="product__img" src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.featured_image.alt }}" />
          <p class="product__title">{{ product.title }}</p>
          <p class="product__price">{{ product.price | money}}</p>
        </a>
      </li>
      {%- endfor -%}
    </ul>
  {%- endif -%}
  </div>
</div>
 
<style>
.product-recommendations-pannel h2 {
    text-align: center;
    margin-bottom: 40px;
}
.product-recommendations-pannel ul {
   display:flex;
  justify-content: space-around;
.product-recommendations-pannel ul>li {
  text-align:center;
.product-recommendations-pannel {
    padding: 60px;
    background: #F0E2CD;
}
  .product-recommendations-pannel ul>li {
    text-align: center;
    width: 33%;
}
 
     @media(max-width:767px){
  .product-recommendations-pannel ul>li {
    width: 100% !important;
        margin-bottom: 40px;
}
    .product-recommendations-pannel ul {
    display: inherit !important;
    justify-content: normal;
}
    p.product__title {
    margin-bottom: 0;
}
.product-recommendations-pannel ul>li:last-child {
    text-align: center;
    width: 33%;
    margin-bottom: 0;
}
    
 
    
    
  } 
</style> 
<script>
  
 
var loadProductRecommendationsIntoSection = function() {
  // Look for an element with class 'product-recommendations'
  var productRecommendationsSection = document.querySelector(".product-recommendations");
  if (productRecommendationsSection === null) { return; }
  // Read product id from data attribute
  var productId = productRecommendationsSection.dataset.productId;
  // Read limit from data attribute
  var limit = productRecommendationsSection.dataset.limit;
  // Build request URL
  var requestUrl = "/recommendations/products?section_id=product-recommendations&limit="+limit+"&product_id="+productId;
  // Create request and submit it using Ajax
  var request = new XMLHttpRequest();
  request.open("GET", requestUrl);
  request.onload = function() {
    if (request.status >= 200 && request.status < 300) {
      var container = document.createElement("div");
      container.innerHTML = request.response;
      productRecommendationsSection.parentElement.innerHTML = container.querySelector(".product-recommendations").innerHTML;
    }
  };
  request.send();
};
// If your section has theme settings, the theme editor
// reloads the section as you edit those settings. When that happens, the
// recommendations need to be fetched again.
document.addEventListener("shopify:section:load", function(event) {
  if (event.detail.sectionId === "product-recommendations") {
    loadProductRecommendationsIntoSection();
  }
});
// Fetching the recommendations on page load
loadProductRecommendationsIntoSection();
 
  
  
  
  
</script>
 
 
{% schema %}
  {
    "name": "Section name",
    "settings": []
  }
{% endschema %}
 
{% stylesheet %}
{% endstylesheet %}
 
{% javascript %}
{% endjavascript %}"
 

Thank you!

0 Likes
Highlighted
Astronaut
1074 173 210

1. In your Shopify Admin go to online store > themes > actions > edit code
admin-page.png
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script>
function removeRouteShippingProduct(){
	const isProductPage = /product/.test(window.location.href);
	const product = document.querySelector(`.template-product .product-recommendations-pannel [href*='/products/routeins']`);

	if (!product || !isProductPage){
		return;
	}
	
	product.closest(`.product`).classList.add('routein-product');
	product.closest(`.product`).remove();
	
}
document.addEventListener("DOMContentLoaded", function() {
  setTimeout(removeRouteShippingProduct, 100);
	});
</script>
<style>
.routein-product,
[href*='products/routeins']{
	display: none !important;
}
</style>


Please let me know whether it works.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
New Member
2 0 0

Hi, 

Thank you for the suggestion. It worked, kind of. The script did hide route insurance by now instead of 3 recommended products displaying, only 2 are displaying (see screenshot). The products-recommendations.liquid file I have specifies displaying 3 and that is how the section is designed
so ideally it should display 3, just not route Thank you!

Screen Shot 2020-08-03 at 9.00.31 PM.png

0 Likes
Highlighted
Astronaut
1074 173 210

Hello, 

The script is basically hiding that specific product, so you'd need to set the value to "4" to display another one.

To develop a solution to completely discard the product it would require me to be within your theme to edit the liquid files and create the appropriate code. 

Unfortunately not an entirely flawless solution but this is the best I can do without being in your store.

Kind regards, 

Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes