Coding for a specific feature

Technical Q&A
1

New here, not sure if this is the right spot to ask this question.

I am trying to add a feature to a product page where a customer can add a customization option that includes these steps.

  1. Click the customization check box.

  2. Opens a comment box to add notes of which they want changed - this box is mandatory and if no comments are added - it restricts them from adding to cart

  3. once comment section is filled out, customer adds to cart - it adds the main product + the add on product to the cart.

  4. All the information is processed and after check out I am provided with the main product + the notes they added for customization.

Using Chatgpt, it provided me with coding which directed me to add to main-product.liquid and specified the spot in which it should go. This code showed the checkbox on the product page, when clicked it popped open the comment box. But, I was able to add the product to the cart without comments and it did not add the additional product to the cart.

The coding linked the product ID & the Variant ID of the add-on product that is hidden but active on my store.

But, there is something missing and I do not have experience with this type of thing - chatgpt can only help so much before its not able to.

Any thoughts on how I can trouble shoot this? Thanks in advance!

2

It sounds like you’re close — the checkbox and comment box are working, but validation and adding the add-on product to the cart need some tweaks. You’ll likely need custom JavaScript to (1) prevent “Add to Cart” without a comment and (2) programmatically add both products to the cart. If you can share the code you’re using, I (or someone here) can help troubleshoot it further!

3

It does feel close, Chatgpt updated the code multiple times… This is a version that worked as described. Btw, the script re: variants, & buy button are original and I was instructed to input the new code between these to lines…

{%- when ‘variant_picker’ -%}
{% render ‘product-variant-picker’, product: product, block: block, product_form_id: product_form_id %}

{%- if product.title contains ‘Garage’ -%}

Add Garage Plan Customization (+$100)
Please describe the changes you’d like to make:

{%- endif -%}

{%- when ‘buy_buttons’ -%}
{%- render ‘buy-buttons’,
block: block,
product: product,
product_form_id: product_form_id,
section_id: section.id,
show_pickup_availability: true

4

hey this is possible by taking a look in your theme file.

Would you prefer to share the collab code in the p/m so that I implement the all changes.

Thanks

5

I would be happy to share it in a mesasge, should I send you an email?

6

Yes.