Jump to content

creating a dynamic button that pulls information from product options selector

Recommended Posts

The goal is to have a single button under description in "additional info" section (injected thru a code block). When a customer chooses one of the available product size options it will link to one of the four external web pages with additional assets (disregard the framing options for now but im curious to learn how to incorporate that in the future as well). It is important that the button only links a specific link that would depend on which product variant the customer is viewing. It already has a correlation between product variants and images that are displayed (for example if I select a "large" and select "black frame" the corresponding image pops up. Maybe I can add 4 buttons and code for them to not show by default and only populate one when either a specific size variant is selected or an image corresponding to that size is displayed? I tried being more creative and attempted linking image id for every image, then tried linking image indicator numbers but my code didn't seem to know where to pull info from. 
 

<a class="custom-button" id="button1" href="link 1">Button 1</a>
<a class="custom-button" id="button2" href="link 2">Button 2</a>
<a class="custom-button" id="button3" href="link 3">Button 3</a>
<a class="custom-button" id="button4" href="link 4">Button 4</a>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const buttons = document.querySelectorAll(".custom-button");
    const indicator = document.querySelector(".ProductItem-gallery-current-slide-indicator[data-product-gallery='indicator']");
    const indicatorText = indicator.textContent;
    const indicatorNumber = parseInt(indicatorText.split(" /13")[0]);

    buttons.forEach(button => {
        button.style.display = "none";
    });

    switch (indicatorNumber) {
        case 5:
        case 6:
        case 10:
            document.getElementById("button1").style.display = "inline-block";
            break;
        case 11:
        case 4:
        case 8:
            document.getElementById("button2").style.display = "inline-block";
            break;
        case 7:
        case 2:
        case 12:
            document.getElementById("button3").style.display = "inline-block";
            break;
        case 3:
        case 1:
        case 0:
            document.getElementById("button4").style.display = "inline-block";
            break;
        default:
    }
});
</script>

If there is a more streamlined way to accomplished this that would be my dream come true!

Thanks for your time!

Edited by updosed
Link to comment
  • updosed changed the title to creating a dynamic button that pulls information from product options selector
  • Replies 0
  • Views 897
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.