Skip to content

Example of customizing a marketplace on sharetribe.com

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.

10 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!

  5. Vinay Popat says:

    Hi guys, anyone able to create a “Make Offer” or “Name your price” button, with a field for the buyers offer amount.

    Once the buyer makes an offer, it dyanmically changes the price for them to check out and pay.

    Once authorized payment is succesful, the seller has the option, as usual to accept the payment (offer) or decline the buyers request.

     

     

  6. moore says:

    Hi Vinay,

    I’d suggest posting in the sharetribe forums.

  7. Tax says:

    Hi there,

    What would you suggest as the best way to get some custom scrip written for the images to view as portrait rather than landscape across the platform for both web and mobile. should this be a relatively easy action?

  8. M says:

    Hi,

    I’ve just tested your code and I don’t see any button popping up anywhere?

    I’m not a developer so I might missed something here. Could it be that the code is outdated by now?

    And yes, I did open and close with a head and script tag.

    Thanks!

  9. moore says:

    It is likely outdated code, yes, since the code is nearly 4 years old. Sorry!

  10. moore says:

    Sorry, I haven’t touched Sharetribe for a couple of years, so can’t give any advice.

Comments are closed.