Product navigation within a Collection

Shopify Partner
21 0 9

Hi,

I need to be able to create a product navigation that looks like  < 5/104 > for a large collection.  I found a closed topic that provided a solution that fetched all the products into an array and then iterated on that looking for the current product.  

This is restricted to collections with up to 50 products, with good reason.  Is there a way to do this that doesn't require fetching all the products?

Thanks/peter

0 Likes
Shopify Partner
165 0 36

What exactly do you mean by navigation? What exactly are you trying to do? Are you just trying to inform the user the 5th product is 5th out of 104, for example?

If you give me the specifics of what's going on, on what page and context, what the user is doing/seeing and what functionality you want out of it, I think I can help you. 

0 Likes
Shopify Partner
21 0 9

The user is on the 5th product in a collection containing 104 products.  I can easily provide previous and next links to go to product number 4 and product number 6, but there is no property on a product that lets me know where the current product is in a collection.

It's the same requirement as this topic https://ecommerce.shopify.com/c/ecommerce-design/t/display-count-of-item-in-collection-with-prev-nex...

Which was answered with a full table scan type solution that only works for collections with less than 50 products.

This problem isn't on my test shop, it's on a client shop blandino.myshopify.com/current-work which is a collection that will eventually have a significant numbers of products. the password is notcalm.

I understand that products can exist in more than one collection and that they can be displayed when they are not part of a collection, so there are places where this cannot be known.

0 Likes
Shopify Partner
165 0 36

Hm, interesting. You could sort of blunt force it by giving every product a "tag" such as "product1", "product2", "product3". Then, through some liquid filtering, or scripting, iterate through product.tags until you find the product# tag. Strip 'product', get the number and do whatever magic you wanna do to identify what product you're on, and then adjust your nav urls accordingly.

If your client wishes to delete say, product 42 out of 106, thus requiring 43-106 to shift down one, this could relatively simple by exporting, editing and importing the spreadsheet. Specifacally, by just doing that automatic drag feature that fills in a series of numbers. 

Another quick and dirty solution: in regards to the link you gave, and the problem of the 50 forloop query limit, what you could do is split your entire product base into (hidden) collections of 50. e.g. collection1, collection2, collection3 etc. 

Then, do the same process as you mentioned before, but iterate over each collection in order until you find the one the product is in.Then simply add (50*n) to the index. with n being which collection it was found in. So if a product is the 15th product in collection3, the true product_index is 15+(50x3), 163.  

I feel like the second option is much simpler. 

0 Likes
Shopify Partner
21 0 9

Thanks Justin, 

My first approach to this is to discuss it with the client's designer and see if they can live without the number.  

None of the solutions that I've thought of work well, especially when a product can be in multiple collection or when the sort order is changed.  I'd wondered about something using the pagination code, but haven't really looked into that.

None of these are efficient and I'm not sure the requirement is actually required.

Shopify has a lot of limitations, but they help keep it simple, which I appreciate.  Lately I've been moving my e-commerce clients away from WooCommerce and VirtueMart to Shopify because of that simplicity.

 

0 Likes
Shopify Partner
165 0 36

Yeah, there are limitations but frankly I find it still far better than places like BigCommerce which has far more closed doors in terms of custom functionality, or if you're in Korea, the absolute nightmare that is cafe24. 

So I'm guessing the second idea I mentioned isn't something you'd want to try? It would certainly overcome any issue of sort order or multiple collections

pseudocode:

{assign product_index ='0}

{% for productFoo in collections['collection1'].products %}

         if product.handle == productFoo.handle,

                 {assign product_index ==forloop.index}.

{if product_index == 0} 

     {% for productFoo in collections['collection2'].products %}

              if product.handle == productFoo.handle,

                      {assign product_index ==forloop.index + 50}

etc.etc.

I don't see how having products also be in other collections, or the sort order affects this, since you're refencing a separate collection and not product.collection. What do you think?

From my previous experience with paginate, I would also suggest looking into it again. It can actually be quite workable if you're willing to experiment with the system. 

1 Like
Highlighted
Shopify Partner
21 0 9

I will probably go with the second option or something similar if the client says we absolutely need the number. The partitioned collection can't support different sort orders as you would need a different partitioning for each order.   At present sort order isn't an issue as the products are manually sorted and no option is provided to the user to change that.

Another option I've considered is to build an app to help with this, I am a Rails dev so that's not that daunting an option.  It could apply metadata with the product number in it and give the shop owner a way to do updates.  For manually sorted collections the "collect.position" value appears to contain this.

0 Likes
Shopify Partner
165 0 36

Have you also experimented with a {% for products in collection.allproducts offset:50 %}, and running this code if the product was not found in the first 50?

1 Like
Shopify Partner
165 0 36

Ah i see what you mean by the sort-order issue. You're saying if the user wants to sort differently, you also want the product number to change, and not stay at a global constant. I thought you wanted the opposite, my apologies. 

0 Likes
Shopify Partner
165 0 36

Yeah, developing some app with API calls, or a more in-depth scripting solution might be necessary, but I'm sure a workaround without needing that is possible. 

Sorry I couldn't help more. 

0 Likes