Set default value for product variant dropdown 7.1

Hello,

I have products that are published to SquareSpace from Printify. The products have a number of colors but only one size (11 oz). Unfortunately, when this product is published to SquareSpace, a dropdown for "Size" is created along with the "Color" dropdown. The color dropdown won't work unless the user chooses the "11 oz" value from the dropdown which is unintuitive. 

I see two options:

1) (Optimal) Use code to select the "11 oz" value from the "Size" dropdown and hide the dropdown.

2) (if above not possible) Just select the "11 oz" option from the "Size" dropdown so that the color dropdown works.

thanks!

Lori

Hi,

Can you share link to a product? We can check easier

Hi @tuanphan,

Yes, here's a link to the product:

https://www.monkeysatthetypewriter.com/merch/p/all-mugs-cranky-morning-coffee-mug-11-oz-color

thanks!

Lori

Try this code to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(() => {
    const select = document.querySelector('select[aria-label="Select Size"]');
    const parent = select.parentElement.parentElement.parentElement; 
    const data = JSON.parse(parent.getAttribute('data-variants'));
    const adult = data.find((a) => a.attributes.Guest === '11oz');
    const num = document.querySelector('input[aria-label="Quantity"]').value;
    const inStock = num <= adult.qtyInStock;
    const price = !adult.onSale ? adult.priceMoney.value : adult.salePriceMoney.value;
    select.value = '11oz';
    document.querySelector('div[class="product-price"]').innerText = '£' + price;
    setTimeout(() => {
        parent.setAttribute('data-selected-variant', JSON.stringify(adult));
        parent.setAttribute('data-variant-in-stock', JSON.stringify(inStock));
        const event = new Event('change');
        select.dispatchEvent(event);
    }, 1000);
})
</script>

On 11/29/2023 at 12:12 AM, tuanphan said:

Try this code to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(() => {
    const select = document.querySelector('select[aria-label="Select Size"]');
    const parent = select.parentElement.parentElement.parentElement; 
    const data = JSON.parse(parent.getAttribute('data-variants'));
    const adult = data.find((a) => a.attributes.Guest === '11oz');
    const num = document.querySelector('input[aria-label="Quantity"]').value;
    const inStock = num <= adult.qtyInStock;
    const price = !adult.onSale ? adult.priceMoney.value : adult.salePriceMoney.value;
    select.value = '11oz';
    document.querySelector('div[class="product-price"]').innerText = '£' + price;
    setTimeout(() => {
        parent.setAttribute('data-selected-variant', JSON.stringify(adult));
        parent.setAttribute('data-variant-in-stock', JSON.stringify(inStock));
        const event = new Event('change');
        select.dispatchEvent(event);
    }, 1000);
})
</script>

 

Thank you, but that didn't work - any other ideas? Maybe I should just add a not informing the user that they have to pick a size, or maybe I'll split out each product...

You don't need to have "size" as a variant option if there is only one size. Simply edit the product, hover on the  "size" section, click triple dots icon and "delete". Then the only dropdown variant will be color.  

50 minutes ago, supraturbo320 said:

You don't need to have "size" as a variant option if there is only one size. Simply edit the product, hover on the  "size" section, click triple dots icon and "delete". Then the only dropdown variant will be color.  

Thanks, but didn't work for me - to make sure: Do you mean: Click "Edit All"  then "Manage Options", then hover over "Size" and click X to delete?

If so, when I do that I get a message "Option must have one or more variants".

Note: this product is published from Printify - I think that the feed put in a required association between size and color.