DYNAMIC Lightbox with an embedded Spotify player

Ask the community
, , , ,
1

Hi all !

Is there a way to make the URL of a Spotify player to be set according to user selection?

I’m trying to make a portfolio website, showcasing my musical works.
the main page shows a grid with all the album-arts.

I’m trying to get the following effect:
Clicking an image (or related button…) opens a Lightbox with an embedded Spotify player, and sets the player’s URL according to whichever photo is clicked.

So far I’ve been using an app called Spotify Music Player. I was surprised to see there were so few of them, and that this was the only one that is supported by Wix Studio.
Anyway, the widget looks nice but it has some issues loading sometimes, and I had to pay membership to unlock the option for the URL to be automated.

I didn’t want to use a separate lightbox for each item, so I tried to do it using CMS, but I’m not sure I’m using it correctly. I couldn’t figure out how to send or filter the correct information for the player to play the right song (it currently plays only the first song in the dataset).

As mentioned - I’m using Wix Studio…

Any ideas how to create this effect ?
Is there a better way to achieve it with coding? I’m pretty new to JS, but am willing to learn more…

Thx =)

2

You can pass data to the lightbox using the context argument in the openLightbox funciton

If you can set the URL using code, it’d be better performing than having a dataset within the lightbox, seeing as you’ve already loaded all the relevant data outside it

Item list page

import wixWindow from 'wix-window-frontend'
$w('#repeater').onItemReady(($item, itemData) =>
    $item('#spotifyButton').onClick(() => 
        wixWindow.openLightbox('lightboxName', itemData.url)))
                                            // ^ Lightbox context

Lightbox

import { lightbox } from 'wix-window-frontend'
const url = lightbox.getContext()
// Set the URL however you do in the app
3

Use a CMS to store album info and display it in a grid. Add a Lightbox with an HTML Embed for the Spotify player. When an album is clicked, pass its Spotify URL to the Lightbox using wixWindow.openLightbox(), then update the player’s URL dynamically with wixWindow.getContext(). This setup keeps things simple and easy to update.

4

Hey @lyar_Dalva

You can use Spotify Music Player to embed player with CMS capability.

Simply install the app, and connect it with CMS. The content inside will be based on the CMS data, which means the content can change when you change current item index with the wix dataset api in frontend.