How to target the right Path in my table collection I kinda built.

[DavidBeuy]

I've been using Metafields to create a table that pulls the info for different products in a collections. Right now this is setup to add that product to the cart. But gives you the Default product im assuming on the top of the array of products(or Objects... not sure what the right term is ha.)

Code for the table i frankensteined... you will see in the note on the code where I need help.. I think. 

<table>
  <tr class="label">
    <th>Model</th>
    <th>Rod Pieces</th>
    <th>Rod Length</th>
    <th>Line Rating</th>
    <th>Price</th>
    <th>Buy</th>
  </tr>
  {% for product in collection.products %}
  <tr>
    <td  data-label="Model">{{ product.metafields.custom.rod_series }}</td>
    <td data-label="Rod Pieces">{{ product.metafields.custom.rod_piece }}</td>
    <td data-label="Rod Length">{{ product.metafields.custom.rod_length }}</td>
    <td data-label="Line Weight">{{ product.metafields.custom.line_weight }}</td>
    <td data-label="Price">{{ product.price | money_with_currency }}</td>
    <td>
      {% if product.variants.size > 0 %}
        <!--THIS IS WHAT I NEED HELP WITH I THINK -->
        <form action="/cart/add" method="post">
        <!-- THIS IS WHAT I NEED HELP WITH I THINK -->
        <!--  I dont know the path to open the product vs adding it to the cart -->

          <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
          <input class="checkOutButton" type="submit" value="Add to Cart" />
        </form>
      {% endif %}
    </td>
  </tr>
  {% endfor %}
</table>

What is the path to just open the product. So instead of it adding to your cart it takes you to the product? These products have so many variants that I don't know how to add code to where you could select varients and add to the cart.. Still very new to coding. That would be the end goal but for now a way to target the product vs adding to the cart. 



Any help is welcomed.. 

[SBD_ · Accepted solution]

Hey @DavidBeuy!

You'll want to use an anchor tag (a link) and point it to /products/{product.handle}

So something like this:

{% for product in collection.products %}
  <tr>
    <td  data-label="Model">{{ product.metafields.custom.rod_series }}</td>
    <td data-label="Rod Pieces">{{ product.metafields.custom.rod_piece }}</td>
    <td data-label="Rod Length">{{ product.metafields.custom.rod_length }}</td>
    <td data-label="Line Weight">{{ product.metafields.custom.line_weight }}</td>
    <td data-label="Price">{{ product.price | money_with_currency }}</td>
    <td>
      {% if product.variants.size > 0 %}
        <a href="/products/{product.handle}">View product</a>
      {% endif %}
    </td>
  </tr>
{% endfor %}

Let me know if you get stuck 🙂

[DavidBeuy]

So I think I see where this goes. I subbed out the code and it opens a link to a page that says not found. Do i need to add a "handle" metafield  and give a handle to each of my products? Or is "handle" a built in term that it know what to do?

Again.. still pretty new to coding so it all a learning process for me. Thanks for the Reply and the help I really do appreciate it!  

[DavidBeuy]

ahhhh It did work i just had to add the extra  { }  so   "/products/{{product.handle}}"

Now maybe a shot in the dark, but when passing info do you always have to double the {{ Curly Brackets }}?

[SBD_]

Sorry for the bumsteer, @DavidBeuy,  there was a typo in my code - you're correct, it should be double curly braces. {{ handle }}.

Some handy liquid docs: https://shopify.github.io/liquid/basics/introduction/

[DavidBeuy]

Some of the Documentation is hard to understand for this ha