Contact form Drop Down with choices being a metafield

Technical Q&A
1

I want to add a dropdown to my contact form.

I want the choices to list all SKUs from my store.

Instead of listing each SKU on my own in the code, can I use a SKU metafield or some other way to do this with code?

2

Hi @DavidCab

You can send request via ajax to search page

/search?type=product&q=SKU

Then render the result as you want.

3

Liquid paginates to have a 50 product object limit per page, if you have ALOT of skus you will need advanced techniques.

Additionally if you have a lot of product skus , < 50 just listing all skus in a contact form is poor UX , greater than 100 is just bad and a search|filter method should be used.

For the output you sort the skus so the list is alphabetical, and probably to use the uniq filter on any arrays being processed to remove duplicate skus , in addition to html encoding any sku values for the form submission.

For a handful of products this is just using a product loop on a collection setup to have all products in .

{%- assign skus = collections.all.products | map:"variants" | map: "sku" -%}

Or a map filter to build the elements for use with some javascript:

Note the attributes (for & name) need to be made for what contact form submission expects, and that the tags get rendered with no value attribute.

If you need this built out you can contact me, info in sig.