Difference between revisions of "Shopify Javascript Callbacks"
From the Directed Edge Developer Base
(Created page with "== A collection of Javascript callbacks that can be used to customize the Directed Edge Shopify app == === Add a hover effect to the recommendations (jQuery) === This changes t...") |
|||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | + | __TOC__ | |
| − | + | == 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
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>