Setting Up A 'For You' page in Tapcart

Purpose:

The purpose of this guide is to create an endless scroll 'For You' page in your Tapcart app.

Intended Audience:

Ecommerce Manager, CSMs

Creating the LyveCom 'For You' Custom Block

Navigate over to Custom Blocks in the Tapcart builder
Create a new "Custom Block"
Open the Custom Block Code Editor in TapCart

In your newly created custom block, access the custom block code editor.



In the custom block code editor, you will find three tabs: HTML, CSS, and JS.

HTML Tab:

Insert the following HTML code:

<!-- HTML -->
<div id="lyvecom">
  <div class="lyvecom_carousel--component"></div>
</div>
<!-- END HTML -->

CSS Tab:

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: Helvetica;
}

h1 {
    margin: 10px 0px;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    margin-top: 20px;
}

JS Tab:

Incorporate the LyveCom playlist script below:

function injectLyveComWidgetScript() {
    var scriptElement = document.createElement('script');
    scriptElement.src = 'https://dashboard.lyvecom.com/widget/widget.js';
    // Call mountCarouselComponent() when the script is loaded
    scriptElement.onload = function() {
        LyveComWidget.mountCarouselComponent({
            carouselID: 'CAROUSEL ID',
            parentElement: '.lyvecom_carousel--component',
            carousel: true,
            openedByDefault: true,
            lng: 'en'
        });
    };

    window.document.addEventListener('FullLyveComOpen', () => {
        document.getElementById('lyvecom').style.height = `calc(${Tapcart.variables.device.windowHeight || 750}px - 80px)`;
    });

    window.document.addEventListener('FullLyveComClosed', () => {
        document.getElementById('lyvecom').style.height = 'auto';
    });

    document.head.appendChild(scriptElement);
}

// Call the function to inject the script
injectLyveComWidgetScript();

Note: Replace YOUR CAROUSEL ID with your playlist ID in the LyveCom Dashboard when publishing your playlist.





Proceed to creating a Custom Block Screen in Tapcart

Updated on: 04/06/2024