TUTORIAL: Creating a Dynamic Product Variant Selector in Funnelish

Technical
, ,
1

This tutorial will guide you through integrating a dynamic product variant selector in your Funnelish landing page using HTML, CSS, and JavaScript. By the end, your product page will allow users to select variants and dynamically update the checkout link.

Overview

This implementation includes:

  1. HTML Structure: Creating radio buttons for variant selection.
  2. CSS Styling: Styling the variant selector for a polished look.
  3. JavaScript: Dynamically updating the checkout link based on the selected variant.

Step 1: HTML Structure

Here’s the HTML snippet for the product variant selector:

<div class="prod-variants2">
  <input type="radio" id="contactChoice5" name="id" value="47157892874547" data-gtm-form-interact-field-id="0">
  <label onclick="handleVarPriceChange2('$24.99','47157892874547')" for="contactChoice5" class="contactChoice5">
    <div class="var__inner">
      <div class="var__inner__check"></div>
      <div class="var__inner__info">
        <div class="var__info__left">
          <span class="vname_text">6 Filters</span>
          <span class="tapes_text"><span class="pricey">$5 Each</span></span>
        </div>
        <div class="var__info__right">
          <div class="var__title var__price">
            <div class="var__save var__comp"></div>
            <div class="var__title var__price">$29.99</div>
          </div>
        </div>
      </div>
    </div>
  </label>

  <!-- Add more variants similarly -->
</div>

<a class="add-to-cart2" href="#">Add to cart</a>

<script id="variant_metafield_data2" type="application/json">
  {
    "47157892874547": "https://your-link-for-6-filters.com",
    "47008684540211": "https://your-link-for-12-filters.com",
    "47008684474675": "https://your-link-for-24-filters.com"
  }
</script>

Step 2: CSS Styling

Enhance the appearance of the variant selector:

.prod-variants2 {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}
.prod-variants2 label {
  width: 100%;
  border: 2px solid #201547;
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
}
.prod-variants2 input:checked + label {
  border: 4px solid #201547;
}
.add-to-cart2 {
  display: inline-block;
  padding: 15px 30px;
  background-color: #435274;
  color: #fff;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
}

Step 3: JavaScript Functionality

Add the following JavaScript to handle dynamic link updates:

const allVariantMetafieldData2 = JSON.parse(document.querySelector('#variant_metafield_data2').textContent);
const addToCartLink2 = document.querySelector('.add-to-cart2');

const handleVarPriceChange2 = (price, id) => {
  console.log("Selected Price:", price);
  console.log("Selected ID:", id);
  history.pushState({}, null, `?variant=${id}`);
  handleLinkChange2(id);
};

const handleLinkChange2 = (id) => {
  const newHref = allVariantMetafieldData2[id];
  if (newHref) {
    addToCartLink2.href = newHref;
  }
};

document.addEventListener('DOMContentLoaded', () => {
  const selectedVariant = document.querySelector('input[name="id"]:checked').value;
  handleLinkChange2(selectedVariant);
});

Step 4: Testing

  1. Load the page and confirm that the Add to Cart button points to the correct variant link by default.
  2. Click on different variants and verify that the link updates dynamically.

Conclusion

By following this tutorial, you’ve added a dynamic product variant selector to your Funnelish landing page. This feature enhances user experience by updating checkout links in real time.