Difference between revisions of "Shopify Javascript Callbacks"

From the Directed Edge Developer Base
Jump to: navigation, search
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
== A collection of Javascript callbacks to customize our Shopify app ==
+
__TOC__
−
 
+
== Add a hover effect to the recommendations (jQuery) ==
−
=== Add a hover effect to the recommendations (jQuery) ===
 
  
 
This changes the text color and the border color of the image simultaneously.
 
This changes the text color and the border color of the image simultaneously.
  
 
<source lang="javascript">
 
<source lang="javascript">
 +
{% assign directed-edge-callback = 'addHoverEffectToRecommendations' %}
 +
{% include 'directed-edge' %}
 +
 +
<script type="text/javascript">
 
function addHoverEffectToRecommendations() {
 
function addHoverEffectToRecommendations() {
 
     function findIndexInRow(e) {
 
     function findIndexInRow(e) {
Line 36: Line 39:
 
     });
 
     });
 
}
 
}
 +
</script>
 +
</source>
 +
 +
== Add the items to the DOM tree without any styling ==
 +
<source lang="javascript">
 +
{% 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>
 +
</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>
 
</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>
Retrieved from "https://developer.directededge.com/index.php?title=Shopify_Javascript_Callbacks&oldid=267"