0

I have an online store on Shopify. What I am trying to do is on a product page, have a "also needed" type list. I've created all my lists and other items, but what I can't seem to figure out is how to list the variants of one product on another product page.

What I have for my option menu is this:

    <select id="product-select" name="id" data-id="{{ 304164943 }}">
{% for variants in product.variants %}   
      <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
      {% endfor %}
</select>

which outputs:

    <select id="product-select" name="id" data-id="304164943">

  <option value=""> - </option>

  <option value=""> - </option>

  <option value=""> - </option>

  <option value=""> - </option>

  <option value=""> - </option>

  <option value=""> - </option>

the data-id of 304164943 is for the product I want to list the variants of but the dropdown menu this generates is empty.

dylancorp
  • 1
  • 3

2 Answers2

1

You can not access a product via its ID with Liquid. You can however access it will the handle. So if the handle was known you could do this:

{% assign relatedProduct = all_products['some-handle'] %}
{% for relatedVariant in relatedProduct.variants %}   
  <option value="{{ relatedVariant.id }}">{{ relatedVariant.title }} - {{ relatedVariant.price | money }}</option>
{% endfor %}

You've also got an error in your loop code posted - it should be for variant, not for variants. I'm guessing that's just a typo here.

Jason
  • 886
  • 6
  • 5
0

The product page will only return the object of the product belonging to that page. It won't return the object of another product. So to access this you'd need to do some javascript jiggery pokery or create a link list. Here is a tutorial using a link list:

http://www.tetchi.ca/shopify-tutorial-how-to-create-a-part-picker-form/

Or, you can go the JS route. You'd need to grab the product object via ajax, and append the returned data to the page. To grab this data, you'd need to do an ajax get using the Ajax api:

https://docs.shopify.com/support/your-website/themes/can-i-use-ajax-api

So if using jquery - something like this would work: (where <product-handl> is the handle of the product you wish to insert)

$.get( "/products/<product-handle>.js", function( data ) {
 var variants = data.variants; // all your variants
  // Then you can loop over the variants insert the options into your page...
});

As this is added after the page has rendered, you'll need to do some ajaxy cart stuff so you can put stuff in the cart. Your theme may already have some ajaxy cart stuff in it.

Rob
  • 1,576
  • 3
  • 22
  • 52
  • Thanks Rob for the quick reply. I've tried to implement that into the page but I am still presented with a blank list. I have the ajax cart stuff already in the page, so I can add other items to cart. When I view the source of the page, I am just presented with that same code still in the – dylancorp Jul 10 '15 at 19:56
  • Are you inserting the variant data into the dom? Could you paste the code that you have added into your question? Thanks – Rob Jul 10 '15 at 20:09
  • Sorry, I'll go into a bit more of it. Here is the page I am trying to accomplish this on: http://www.mod-ified.com/products/copy-of-stacked-stone So if you go to Quantity Calculator you'll see where the customer can input what they need. I am still moving things around but this is getting close to the final layout. Once they put in the height/width and all that, they are then shown how much of the products they require. Under the main inputs there is the list where I want to have the dropdown variants of the products. Stone Finish is the first one with a variant list. – dylancorp Jul 13 '15 at 15:41
  • Well I just figured out a workaround for it. I am just going to use custom product-loops to display ONLY the variant, make that product have it's own collection and BOOM, solved. Thanks for the help and time Rob. – dylancorp Jul 13 '15 at 20:20