Jump to content

Customize add to cart button on product page to launch a Jotform?

Recommended Posts

  • 1 month later...
  • Replies 1
  • Views 771
  • Created
  • Last Reply

I was able to get it working with an upsell code somone made.  I changed the code where it says ***This is where you insert your custom url*** to redirect to a hidden page that I embedded on the product page>advanced>code injection. That way it will only show for the product you choose.

Form code injected at footer of product page additional info


<!-- Redirect to Upsell Page after clicking on Add To Cart Button -->

<!-- Author: Dmitry Kiselyov @_dmitrykiselyov -->


// /upsell-page is the default URL. To change it, replace /upsell-page with the required URL.

var upsellPageUrl = "/***This is where you insert your custom url***


function redirectToUpsellPageHandler(wrapper){var addToCartButton=wrapper.querySelector(".sqs-add-to-cart-button"),productVariants=wrapper.querySelector(".product-variants");function isVariantInStock(){return productVariants.getAttribute("data-variant-in-stock")}function onClick(){(productVariants&&isVariantInStock()||!productVariants)&&setTimeout((function(){document.location.href=upsellPageUrl}),1200)}addToCartButton&&addToCartButton.addEventListener("click",onClick)}function redirectToUpsellPage(){var productPage=document.querySelector(".collection-type-products.view-item #productDetails, .collection-type-products.view-item .ProductItem-details"),productBlocks;productPage&&redirectToUpsellPageHandler(productPage),[].slice.call(document.querySelectorAll(".sqs-block-product")).forEach(redirectToUpsellPageHandler)}document.addEventListener("DOMContentLoaded",redirectToUpsellPage),window.addEventListener("mercury:load",redirectToUpsellPage);


<!-- end Redirect to Upsell Page after clicking on Add To Cart Button -->


I ended up going with the default product form from squarespace as there was no way to associate the jotform with an order and no way to manually add info to account. I set up a basic on the product page and advanced order form at the bottom of papers page in the shop. You can check out how I implemented the jotform here, www.jonathanfrancisfineprints.com

Link to comment


This topic is now archived and is closed to further replies.

  • 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.