Show/Hide line item property field (dropdown menu) based on variant selection

Store Design
1

Hi all,

I have been trying to code a show/hide line item property field (dropdown menu) based on the product variant but it doesn’t seems to work for me.

I have refer to this link but this is the text box instead of dropdown menu. https://community.shopify.com/c/shopify-design/hiding-line-item-text-box-based-on-selected-variant/td-p/678689/page/2

I have attached the picture with description.

The material selection is build based on line-item-property. The material type is the variant in shopify. I’m using the boundless theme.

2

Hi @laserdragon ,

Please follow the steps:

  • Step 1: Change code for ‘Material Selection’. Ex:

with ‘data-material-value’ displayed by the value of ‘Material Type’.

  • Step 2: Go to assets > theme.js.liquid file, find ‘productVariantCallback:’ and add code:

Screenshot.png
Screenshot.png1446×551 54.4 KB

Code:

$('[data-material-value]').addClass('hide');
        $('#material-selection').val($('[data-material-value="'+variant.option1+'"]:first').val());
        $('[data-material-value="'+variant.option1+'"]').removeClass('hide');

Hope it helps!

3

Thank you very much! It works perfectly well.

4

@LitCommerce

I have the same request but it doesn’t work when I paste the code.

I would like to have a field when I select an option but only for 1 product.

When I select the option “personnalisé” I would like to show a field where the customer can write something. This field, I need to see it in the Cart. When the customer select the other option “standard” the field must not show.

I’m using the theme brooklyn.

Capture d’écran 2022-01-24 à 13.36.48.png
Capture d’écran 2022-01-24 à 13.36.48.png595×616 93.6 KB

Can you please help me ?

Thanks a lot!!

Pascal

5

Hi @Sckaalp ,

You can create a question on the community and send me the link. I will check it.

Because this will help build a better community.

Thank you.

6

@LitCommerce Hi LitCommerce, thanks for your help before I am trying to use mobile to place the order, however, the code doesnt quite work out for mobile setting. It works perfectly fine for desktop. I’m wondering if any specific codes needed for mobile?

7

Hi @laserdragon ,

Please send your site and if your site is password protected, please send me the password. I will check it.

8

i have similar problem kindly help me with that. https://community.shopify.com/c/shopify-design/show-a-text-box-on-selecting-shopify-variant-select-yes/m-p/1529034/highlight/true#M405421 @LitCommerce