This was created as a little challenge for myself originally to see if I could create a social proof model with freely available random user data and it turned out pretty well. Next step is creating an app that pulls real orders from shopify.
I’ve added comments to it all so even non-coders can get a general idea of how it all works.
Please Note: I don’t suggest using this in a real store scenario as it’s all fake/random data.
If you do decide to use this, keep in mind that there are only a certain number of profile pictures which will regenerate with new random names, just refresh constantly and you’ll see for yourself.
Without futher ado, heres all the code!
Assuming you’re using Shopify and the Brooklyn theme you would add this code into your product-template.liquid file where you would like it shown.
<div class="grid no-marg-left">
<div class="grid__item user-purchase">
<div class="grid">
<div class="grid__item one-quarter">
<img id="user-pic" />
</div>
<div class="grid__item three-quarters">
<div class="user-details text-left">
<span id="fName"></span> from <span id="city"></span> recently purchased the {{product.title}}
</div>
<p id="user-date" class="text-left"></p>
</div>
</div>
</div>
</div>
In your Assets folder create a new file and name it user-purchase ending with .css and copy paste this code below.
/* fixes up margin issues to display properly*/
.no-marg-left {
margin-left: 0px;
}
/* This makes the user image round rather than square */
#user-pic {
border-radius: 50%;
}
/* font-size to work with my theme design and margin to work with social sharing buttons underneath */
.user-details {
font-size: 14px;
margin-bottom: 10px;
}
/* smaller font size and more greyed out color for the date/time details */
#user-date {
margin-bottom: 9px;
font-size: 12px;
color: #717171;
}
/* This is all the "user" details that will pop up */
.user-purchase {
/* This border was added to work with my design */
/* border-top: 1px solid #e3e3e3; */
padding: 10px 0;
margin-top: 10px;
/* This will make sure nothing is shown at first*/
display: none;
}
.user-details span {
/* Fixes the spacing issue for the #city underline(border-bottom) */
display: inline-block;
}
#fName {
/* Makes the name bold */
font-weight: bold;
}
/* Dotted underline for the city */
#city {
border-bottom: 1px dotted #000;
text-decoration: none;
}
Make sure you also call it by adding this line of code into your theme.liquid file
{{ 'user-purchase.css' | asset_url | stylesheet_tag }}
In your Assets folder create a new file and name it user-purchase ending with .js and copy paste this code below.
// Only runs after page is loaded
$(document).ready(function() {
// Makes sure all the user information is hidden to begin
$(".user-purchase").hide().fadeIn(3000).fadeOut(3000);
//// Only runs after element is loaded
$(".user-purchase").ready(function() {
//function to capitalize first letter of each word as the API sends everything lowercase
$.fn.capitalize = function() {
return this.each(function() {
var $this = $(this),
text = $this.text(),
tokens = text.split(" ").filter(function(t) {
return t != "";
}),
res = [],
i,
len,
component;
for (i = 0, len = tokens.length; i < len; i++) {
component = tokens[i];
res.push(component.substring(0, 1).toUpperCase());
res.push(component.substring(1));
res.push(" "); // put space back in
}
$this.text(res.join(""));
});
};
// Calls the API and data
$.ajax({
// You can customize nationality, gender and do much more
// Check out the documentation for more info here
// https://randomuser.me/documentation
// Calling API and specifying nationalities US, AU & NZ to be generated
url: 'https://randomuser.me/api/?nat=us,au,nz,gb&gender=female',
dataType: 'json',
success: function(data) {
//just to shorten code when calling each variable
var api = data.results["0"];
// You can call mutiple variables like first name, last name, city, state and post code
// For more info check out the Results section https://randomuser.me/
// Below are are few examples of what has been added in so far
//Requests first name and adds it to the ID fName
$('#fName').html(api.name.first);
//Requests city and adds it to the ID city
$('#city').html(api.location.city);
//Requests state and adds it to the ID state
$('#state').html(api.location.state);
//Requests user image and adds it to the link to the img tag with the class user-pic
$('#user-pic').attr("src", api.picture.medium);
// Capitalizes variables first name, city and state
$('#fName,#city,#state').capitalize();
}
});
// Function to generate a date between 2 dates
function randomDate(start, end) {
var genDate = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
var formattedDate = dateFormat(genDate, "dddd, mmmm dS yyyy 'at' h:MMTT");
$('#user-date').append(formattedDate);
}
// creating old date
var daysAgo = new Date();
// Amount of days ago - you can change this to however many days you would like
var days = 3;
daysAgo.setDate(daysAgo.getDate() - days);
//calls the randomDate function to call a date between the daysAgo you set and today
randomDate(daysAgo, new Date());
// fades in all the information 3 seconds (3000 miliseconds) after the page and element has loaded
$(".user-purchase").hide().fadeIn(3000); //animating
});
});
Make sure you also call it by adding this to the bottom of your product-template.liquid file above {% schema %}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
{{ 'user-purchase.js' | asset_url | script_tag }}
You will also need to download and upload Steven Levithan’s date.format.js code and upload it to your Assets folder
http://stevenlevithan.com/assets/misc/date.format.js
Make sure you also call it by adding this to the bottom of your product-template.liquid file too.
{{ 'date.format.js' | asset_url | script_tag }}