Creating elsif/else statement for line item properties

Highlighted
New Member
7 0 1

Hi everyone. I would like to have a line item property show or hide depending on whether a customer chooses a particular option in a previous line item. For example, a custom cookie has either two or three lines of text depending on if the customer chooses a heart or round shaped cookie. If a customer choose a round shape cookie I would like three text input boxes to show up below but if they choose a heart shaped cookie I would like only two text input boxes to show up below. This is my code at the moment:

<label for="embossedshape">Shape</label>
<select id="embossedshape" name="embossed[shape]">
<option>Round</option>
<option>Heart</option>
</select>
<div>

<label for="cookie text">Cookie text</label>
<input required class="required" id="line1" type="text" name="properties[line1]" placeholder="Max 8 characters">
<input required class="required" id="line2" type="text" name="properties[line2]" placeholder="Max 9 characters">
<input required class="required" id="line3" type="text" name="properties[line3]" placeholder="Max 8 characters">
</div>
<div>

How do I implement an elsif/else statement to reflect what I need?

Thanks!

 

0 Likes
Highlighted
Shopify Partner
95 11 17

@Peppalane12 

Need to look at your store to better understand what you are trying to achieve, there are 2 ways  you can achieve

1. AJAX  better for a smoother experience

2.  Refresh and reload based on select

 

1 Like
Highlighted
Excursionist
18 2 6

Hey @Peppalane12,

So if the customer selects a heart shaped option, you want to give them 2 lines of text to enter, but if they select a circle, it can fit 3, so you give a third line of text. Sounds pretty nifty!

The first question I have is about 

I would like to have a line item property show or hide depending on whether a customer chooses a particular option in a previous line item

You mention line items here, but I'm not seeing how that works. It seems to me like you're basing the available line item properties on an option chosen on-page, before adding the product to the cart - in which case it's nothing to do with a previous line item, just part of the product configurator. Hopefully I got that right, or this next bit won't make any sense. :)

What I'd go for here requires a bit of JS, unfortunately. I'd say it's a bit much to do this with Liquid. You're going to need to hide and disable the 3rd line when that select changes, with something like 

$('#embossedshape').on('change', function() { 
  // Hide and disable the 3rd line
}); 

This example uses jQuery, but check out the other JS in your theme to see what it looks like. Now the secret here is that by disabling the 3rd text input, when the customer adds to cart, that input isn't actually submitted! So by just visually hiding it, and adding the 'disabled' property, you'll only be submitting the first 2 fields.

Let me know if I got this entirely wrong and there really is something going on with existing line items. :)

1 Like
Highlighted
New Member
7 0 1

Thanks for the reply Propero. I have attached a photo of the product layout. As you can see, there is a shape sector and when I choose Heart, I want the third line for Cookie text to disappear, as the Heart cookie is smaller so I can't stamp a third line in the icing. 

Screen Shot 2020-07-01 at 07.53.36.png

0 Likes
Highlighted
New Member
7 0 1

Thanks for the reply JØhn! Yep that's what I'm trying to do; the Heart shaped cookies are smaller so I can't stamp a third line in the icing whereas with the Round ones I can. How would I code JS into the backend code then? Is that possible at all or will I need to use an app or something? Here's a picture of the prototype product page if that helps you visualise more what I'm after :) 

 

Screen Shot 2020-07-01 at 07.53.36.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

0 Likes
Highlighted
Excursionist
18 2 6

Hey @Peppalane12, that's great, the visual really helps. The good news is, this is very doable, but the bad news is that it will require some development knowledge. I'm just giving general advice here, so I can't speak to where the JS is located in your theme, but I would expect there's one main file in your theme that contains a lot of JS.

It's almost definitely in the Assets folder, and in there, it's probably called theme.js or theme.js.liquid. If you can't find those, look for a big .js or .js.liquid file, and check in Layout/theme.liquid that it's mentioned by name in there too.

Then, try putting "alert('hi');" in that file. This is a piece of JS that will show a dialog when you load the page. If it comes up at you on the product page, then you know your code is being run.

Now that you've got the right file, you'll need to put in your actual code. You can use my example to start, but it's using jQuery - you have to check if your theme uses jQuery or not, and if not, you'll need to look up how to fire a change event with plain JS. Then, make a piece of code that does what I've suggested - hide and disable the third text field when the shape select changes - and put it in that JS file.

Good luck!

1 Like
Highlighted
New Member
7 0 1

Hi JØhn, thanks for that, yep I have found the JS file in Assets and the pop up "hi" worked. I'll try your example code and see how it goes! Cheers :)

0 Likes
Highlighted
New Member
7 0 1

Sorry, where do I put that piece of code in the JQuery file?? 

0 Likes
Highlighted
Shopify Partner
95 11 17

Mostly in product-template.liquid but how to put it will be tricky without looking at what else is going on there. It is not clear which theme you are using.

1 Like
Highlighted
New Member
7 0 1

Hi Propero, I'm using Responsive from Out of the Sandbox! So will I need to code JS in the Assets file and then link it to the product-template.liquid?

0 Likes