Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

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

Solved

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

DavidBeuy
Excursionist
22 0 3

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.. 

Accepted Solution (1)

SBD_
Shopify Staff
1831 273 421

This is an 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 🙂

Scott | Developer Advocate @ Shopify 

View solution in original post

Replies 5 (5)

SBD_
Shopify Staff
1831 273 421

This is an 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 🙂

Scott | Developer Advocate @ Shopify 

DavidBeuy
Excursionist
22 0 3

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
Excursionist
22 0 3

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_
Shopify Staff
1831 273 421

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/

Scott | Developer Advocate @ Shopify 

DavidBeuy
Excursionist
22 0 3

Some of the Documentation is hard to understand for this ha