Jump to content

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

Recommended Posts

  • 1 month later...

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

<script>

// /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);

</script>

<!-- 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

Edited by jffp
Link to comment

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.