Creating a shoppable video carousel in Tapcart

Purpose:

The purpose of this guide is to embed shoppable video carousels on your Tapcart Home page or Collection Pages

Intended Audience:

Ecommerce Manager, CSMs

Creating the LyveCom 'Carousel' 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,
                    lng: 'en'
                });
            };

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

           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 embed the custom block using the Tapcart builder on any page

Updated on: 04/06/2024