Difference between revisions of "Shopify Javascript Callbacks"
From the Directed Edge Developer Base
| (One intermediate revision by the same user not shown) | |||
| Line 56: | Line 56: | ||
{ | { | ||
var item = document.createElement("div"); | var item = document.createElement("div"); | ||
| + | container.appendChild(item); | ||
item.className = "directededge-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
Contents
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>