Drinkbox

@creedon OH that makes sense! Glad we got that sorted. Thanks again!

@creedon https://bat-tambourine-b37e.squarespace.com/products/p/kissbeverage Not sure what there is to learn, but here's one of the product pages; site password is "testvibes". Note that none of them are working at the moment, and all of them worked before things suddenly went wrong. By the way, did you by any chance back up the code you made before adding functionality for variants? I regrettably did not, but if possible I'd like to see if that still works.

@creedon WELL it worked for a very short time, and then suddenly for seemingly no reason none of the Add to Cart buttons were links anymore. I'm sorry to rely on you once again, but I'm at my wit's end trying to figure out what's causing the sudden problem 🙃 To the best of my knowledge, I didn't make any meaningful changes to the script between when it worked and when it didn't but I've attached my current code at the bottom in case you can see something I cannot. I've also verified that the sku codes didn't change for the products, so that isn't the issue. The notable changes that happened in that time are: Descriptions were added to each product to display on the product pages. Seems unlikely to cause a problem, but it was done by a colleague working on the website at the same time as I was editing the Products Page Header Code Injection and CSS so maybe there was some sort of interference? Similarly to this thread as well, I removed the Quantity drop-down selection by tagging each product "hidequantity" and adding these lines to the Custom CSS: //Remove Quantity Dropdown// article .tag-hidequantity .product-quantity-input{ display: none; } Reverting these changes did not fix the issue, so I am at a loss. The only other thing is that I initially mistakenly added the above CSS code to the Products Page Header Code Injection. It's worth noting that I first noticed the issue after removing those lines and placing them in the proper place in the Custom CSS, but I find it hard to imagine that they could cause problems even after they're gone. Any advice would be greatly appreciated! As mentioned, here is the code being injected into the Products Page Header: <script> $( ( ) => { // replace add to cart button on product item with button that goes to a url const skuUrlMappings = { /* skus can be copied from a product item if you need more than one mapping then copy and repeat the line below for each mapping, remove the "// " at the beginning of the line and enter the appropriate data the url can be any valid url in the context of Squarespace. It can be a full one like "https://www.squarespace.com/" or a partial url like "/contact" */ // '[enter sku here]' : '[enter url here]', // last or only item doesn't get a comma at the end 'SQ5417563' : 'https://www.bccannabisstores.com/products/cbd-thc-biomed?_pos=4&_sid=a6188a708&_ss=r', //THC CBD Indica 'SQ8161064' : 'https://www.bccannabisstores.com/products/thc-hybrid-thc-biomed?_pos=2&_sid=a6188a708&_ss=r', //THC Hybrid 'SQ2402320' : 'https://www.bccannabisstores.com/products/thc-indica-thc-biomed?_pos=1&_sid=a6188a708&_ss=r', //THC Indica 'SQ6764880' : 'https://www.bccannabisstores.com/products/thc-sativa-lr-thc-biomed?_pos=3&_sid=a6188a708&_ss=r', //THC Sativa 'SQ9487063' : 'https://www.bccannabisstores.com/products/thc-sativa-lr?_pos=6&_sid=a6188a708&_ss=r', //Preroll Sativa // 'SQ7454924' : '', //Preroll Indica //NEED LINK // 'SQ4683342' : '', //Preroll Hybrid //NEED LINK // 'SQ9602290' : '', //Preroll CBD Indica //NEED LINK 'SQ0334801' : 'https://www.bccannabisstores.com/products/thc-kiss-cannabis-beverage-shot?_pos=5&_sid=a6188a708&_ss=r', //THC Kiss 'SQ1331800' : 'https://www.bccannabisstores.com/search?type=article%2Cpage%2Cproduct&q=THC*+BioMed*' //THC Kiss Gummies //NEED LINK } defaultUrl = 'https://www.bccannabisstores.com/search?type=article%2Cpage%2Cproduct&q=THC*+BioMed*'; // do not change anything below, there be the borg here if ( ! $( '.ProductItem' ).length ) return; const skus = $.map ( Static.SQUARESPACE_CONTEXT.product.variants, function ( v ) { return ( v.sku ); } ); /* if our skus don't contain a mapped sku then bail, in other words does not replace add to cart button */ if ( ! skus.some ( r => Object.keys ( skuUrlMappings ).indexOf ( r ) >= 0 ) ) return; let $addToCartButton = $( '.sqs-add-to-cart-button' ); let $addToCartButtonClone = $addToCartButton.clone ( ) .click ( function ( ) { let sku = skus [ 0 ]; // we assume one variant for product item // we go looking for more than one let $productVariants = $( '.product-variants' ); if ( $productVariants.length ) { let selectedVariant = $( '.product-variants' ) .attr ( 'data-selected-variant' ); if ( selectedVariant === undefined ) return; selectedVariant = JSON.parse ( selectedVariant ); sku = selectedVariant.sku; } const url = sku in skuUrlMappings ? skuUrlMappings [ sku ] : defaultUrl; location = url; } ); $addToCartButton.replaceWith ( $addToCartButtonClone ); } ); </script>

@creedon Works perfectly! You're a wizard, thanks for taking care of this so quickly!! 😁

@creedon I appreciate you checking it out! Well idk if this helps but I did confirm that I can specify which variant to select for the link by changing the value in this line: const sku = Static.SQUARESPACE_CONTEXT.product.variants [ 2 ].sku; However, still no idea how to read the user's input. Also, if the value isn't set to 0 the products without variants go back to adding to cart. Let me know if you think of anything! By the way, I tried simply repeating the line with each possible value like so: Static.SQUARESPACE_CONTEXT.product.variants [ 0 ].sku; Static.SQUARESPACE_CONTEXT.product.variants [ 1 ].sku; Static.SQUARESPACE_CONTEXT.product.variants [ 2 ].sku; Static.SQUARESPACE_CONTEXT.product.variants [ 3 ].sku; I figured it wouldn't work since I still wasn't reading user data, but the result was still interesting. The products without variants didn't work, but the one product with variants linked to option 0. Dunno if this helps but I thought it was neat!

@creedon Thanks so much!! This MOSTLY works. The only problem is that it doesn't work for products with variants, like the attached screenshot. Although I made separate entries for each sku in the list, the "add to cart" button redirects to the link associated with first item (SQ94*****) regardless of which variation is selected in the drop-down menu. Do you perchance know of a way around this besides giving each item its own page?

This worked for me! However, this makes it so that every "add to cart" button links to the same url. Is there a way to use different links for different products on the site?