HUGO

How Do I Return A Selected Option As Text With Markdownify?

Hey guys,

In my button class I need to change the “data-item-name” to the selected text from the options tag. (Lime, orange, grapefruit or lemon) so that my cart display the name of the scent selected.

Just calling .Params.options displays all the options.

How do I go about doing this?

Currently using (on the same file)

{{ range $element := .Params.options }}
<select class="container">
   {{ range $element  }}
    <option>{{ . }}</option>
  {{ end }}
</select>
{{ end }}

and
<button class=“snipcart-add-item btn btn-primary” data-item-id="{{ .Params.ProductID }}"
data-item-name= “{{ .Params.options }}” {{ range first 1 .Params.Images }} data-item-image="{{ .image | absURL }}"
{{ end }} data-item-price="{{ .Params.Price }}" data-item-url="{{ .Permalink }}" data-item-description="{{ .Description }}">
Add to cart

The website is hungryhairwax.co.za

At that point Markdown is not in play anymore. It’s there to create the site. You need to use Javascript to work with button clicks on the final website. I am pretty sure snipcart has already solutions for that.

1 Like

Can you please teach me how? I struggle calling the variable inside the “data-item-name”

There is a Snipcart tutorial and a Hugo test repository:

More than that I don’t know.

Thank you. I did some digging and I can change the scent on checkout. I’ll say “select your scent on checkout”, indirect benefit is it may result in more checkouts.