Intention:
This document is intended to give someone a tire-kicking experience of implementing the LoudCrowd web components that power the Creator Storefronts
Audience:
A web developer wanting to check out LoudCrowd's storefront tech
Intro:
LoudCrowd's Creator Storefronts are, at the display layer, powered by html web components that dynamically load data into predefined locations of your web page. This means that, in it's simplest form, there are two essential parts to getting the blocks to render:
loading the javascript
placing the components
Furthermore, LoudCrowd has built a demo ambassador capability to render mock data. This bypasses the backend api calls and will give you the ability to see the web components, and even start to style them to your brand, without having to have setup the rest of the data connections or add anyone to a program yet.
Doing it:
Wherever you like to develop, start a new html file and place this sample code that does #1 and #2 above:
<!DOCTYPE html>
<head>
<script type="module" src="https://pub.loudcrowd.com/embed.js"></script>
<script>
function initLoudCrowd() {
window.loudcrowd.init("DEMO_SHOP");
};
if (window.loudcrowd) {
initLoudCrowd();
} else {
document.addEventListener("loudcrowd-global-loaded", initLoudCrowd);
}
</script>
</head>
<body>
<ambassador-featured-product-block></ambassador-featured-product-block>
<ambassador-hero-block></ambassador-hero-block>
<ambassador-feed-block></ambassador-feed-block>
</body>
Now just open that file in your browser being sure to include the demo_ambassador url parameter, for example:
...path-to-file/demo.html?lc_ambassador_id=demo_ambassador
To see the <ambassador-featured-product-block> you will need to add the following url parameters to the end of the previous url:
&featured&lc_product_id=demo_product
Taking it further:
The first thing you probably notice after getting the above demo working is that these aren't your products, and the styles of the blocks don't match your brand. Whereas the first point requires having a valid Loudcrowd account set up to source your product data, the second point is something you can change already. For more information about styling the web components please review the Styling Storefront Blocks doc.
Here is an example where adding this style block to the body of the html document produces a very different look and feel to the page:
<style>
ambassador-hero-block {
--lc-primary-font-color: #333;
--banner-background: #ffffff;
}
ambassador-feed-block {
--card-border-radius: 0px;
--price-promotional-color: #7516c2;
--price-discounted-color: #7516c2;
}
</style>
