Here’s an example of some javascript code I wrote to customize a sharetribe.com marketplace.

This code adds a LinkedIn share button to the listing page.

Comments inline.

window.onload = function () {  // make sure you run after the document has been loaded, otherwise you won't have access to jquery.
	$( document ).ready(function() {
    		startcustomization();
	});
}

function startcustomization() {
	console.log("cust started");  // good old debugging log statements.
 	var d = document.createElement("div");  // adding a div to hold our stuff
	d.className = "listing-tweet-button"    // leveraging a existing css class

 	var s = document.createElement("script");  // inject a script tag
    	s.type = "text/javascript";
    	s.src = "//platform.linkedin.com/in.js";  // this code is all from https://developer.linkedin.com/plugins/share 
        var textnode = document.createTextNode("lang: en_US");
	d.appendChild(s);

 	var s = document.createElement("script");  // had to inject both script tags, otherwise they weren't executed.
    	s.type = "IN/Share";
	// commented out: s["data-url"] = "http://www.foo.com";  If you wanted to share a different page than the one that the sharebutton was on, you'd use this.  The share button defaults to sharing the page it is installed on.  
	d.appendChild(s);

	$(".listing-social").append(d);  // find where the other share buttons are, and append our div
}

 

You can, of course, stack as many interesting custom functions as you’d like into this script.  Do make sure you’re hosting the script on an SSL server (an S3 bucket will do fine) otherwise the script won’t be loaded, since sharetribe.com runs SSL only.

4 thoughts on “Example of customizing a marketplace on sharetribe.com

  1. Duc says:

    Thank you Dan! Do you have any recommended resources online for somebody with no knowledge of javascript to quickly learn how to inject scripts specifically for Sharetribe? As for CSS, I have some knowledge about how CSS work in general, but I am not sure how to implement it specifically for Sharetribe. Do you have some resources on this? Thank you very much!

  2. moore says:

    Hi Duc,

    Sorry, don’t have any great resources for you. I’d probably just google for “jquery tutorial” since you’re probably going to want to leverage jquery to make your front end changes. As far as CSS, I’d download the sharetribe CSS and study the classes.

    Best of luck!

  3. Duc says:

    Thank you for response, Dan. I just need to change the color of the contact button and its text to white to make them invisible to the reader, thus disallowing buyers and sellers to bypass the market place (contact messages are not viewable by admin). I used CSSViewer to inspect the class of the button and the text inside it to find:

    <A>.profile-contact-link
    <DIV>.content

    Is it possible to make these two attributes white by script injection?

    I contacted Sharetribe support but they did not answer, understandably because they want users to pay $99/month for that.

  4. moore says:

    Hi Duc,

    Yes, that looks pretty straightforward. Haven’t tested this, but something like $(“a.profile-contact-link”).css(‘color’,’white’); to change the color of the text, and ‘background-color’ for the background of the button.

    Good luck!

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA *

 


© Moore Consulting, 2003-2017 +