Difference between revisions of "Shopify Javascript Callbacks"

From the Directed Edge Developer Base
Jump to: navigation, search
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
__TOC__
 
__TOC__
 
 
== Add a hover effect to the recommendations (jQuery) ==
 
== Add a hover effect to the recommendations (jQuery) ==
  
Line 58: Line 57:
 
         var item = document.createElement("div");
 
         var item = document.createElement("div");
 
         container.appendChild(item);
 
         container.appendChild(item);
 +
        item.className = "directededge-item";
  
 
         var imageLink = document.createElement("a");
 
         var imageLink = document.createElement("a");
Line 81: Line 81:
 
         price.innerHTML = products[i].price;
 
         price.innerHTML = products[i].price;
 
     }
 
     }
 +
}
 +
</script>
 +
</source>
 +
 +
== Truncate recommendation titles (jQuery) ==
 +
<source lang="javascript">
 +
{% assign directed-edge-callback = 'truncateRecommendationTitles' %}
 +
<script type="text/javascript">
 +
function truncateRecommendationTitles() {
 +
var max = 10;
 +
$(".directededge-title-cell a").each(function() {
 +
  if(this.innerHTML.length > max) {
 +
    this.innerHTML = this.innerHTML.substr(0, max - 3) + "...";
 +
  }
 +
});
 
}
 
}
 
</script>
 
</script>
 
</source>
 
</source>

Latest revision as of 22:53, 30 January 2013

Add a hover effect to the recommendations (jQuery)

This changes the text color and the border color of the image simultaneously.

{% assign directed-edge-callback = 'addHoverEffectToRecommendations' %}
{% include 'directed-edge' %}

<script type="text/javascript">
function addHoverEffectToRecommendations() {
    function findIndexInRow(e) {
        var children = e.parentElement.children;
        for(var i = 0; i < children.length; i++) { if(children[i] == e) { return i; } }
    }

    function findTitleForImage(e) {
        return $(e.parentElement).next().children()[findIndexInRow(e)];
    }

    function findImageForTitle(e) {
        return $(e.parentElement).prev().children()[findIndexInRow(e)];
    }

    $(".directededge-image-cell").hover(function() {
        $("img", this).css("border-color", "#DDD");
        $("a", findTitleForImage(this)).css("color", "#FD885D");
    }, function() {
        $("img", this).css("border-color", "#FFF");
        $("a", findTitleForImage(this)).css("color", "#242424");
    });

    $(".directededge-title-cell").hover(function() {
        $("img", findImageForTitle(this)).css("border-color", "#DDD");
        $("a", this).css("color", "#FD885D");
    }, function() {
        $("img", findImageForTitle(this)).css("border-color", "#FFF");
        $("a", this).css("color", "#242424");
    });
}
</script>

Add the items to the DOM tree without any styling

{% assign directed-edge-jsonp = 'showRecommendations' %}
{% include 'directed-edge' %}

<script type="text/javascript">
function showRecommendations(data)
{
    var container = document.getElementById("directededge-blocks");
    var products = data.related_products;

    for(var i = 0; i < products.length; i++)
    {
        var item = document.createElement("div");
        container.appendChild(item);
        item.className = "directededge-item";

        var imageLink = document.createElement("a");
        item.appendChild(imageLink);
        imageLink.className = "directededge-image-link";
        imageLink.href = products[i].link;

        var image = document.createElement("img");
        imageLink.appendChild(image);
        image.className = "directededge-image";
        image.src = products[i].image;

        var title = document.createElement("a");
        item.appendChild(title);
        title.className = "directededge-title";
        title.href = products[i].link;
        title.innerHTML = products[i].title;

        var price = document.createElement("a");
        item.appendChild(price);
        price.className = "directededge-price";
        price.href = products[i].link;
        price.innerHTML = products[i].price;
    }
}
</script>

Truncate recommendation titles (jQuery)

{% assign directed-edge-callback = 'truncateRecommendationTitles' %}
<script type="text/javascript">
function truncateRecommendationTitles() {
 var max = 10;
 $(".directededge-title-cell a").each(function() {
   if(this.innerHTML.length > max) {
     this.innerHTML = this.innerHTML.substr(0, max - 3) + "...";
   }
 });
}
</script>