I need to show Product of all collection on list-collec...

SSB Verma

Hey guys
I need help with showcasing product of all lists on list-collection page

Can anyone help me with docs or tutorials ??

14 comments

SSB Verma

Any idea why this is happening ??
@liquify-team

jjonas.halbstark

Hi @SB Verma , for displaying different collections on a page, it does not necessarily need to be the list-collection page.

Do you want to choose which collection should be displayed? Or should all collections be displayed?

Do you already have a design for this?

jjonas.halbstark

@marv i think this page is missing in the liquify helper. Can you check this out?

mmarv

Will add this 🙂

SSB Verma

Yes I do have design ready

Do you want me to share screenshot of design here ??

jjonas.halbstark

yes.. that would be helpfull

SSB Verma

@jonas.halbstark

jjonas.halbstark

Hi @SB Verma, so i would build this page as a collection page. And the "tabs" (all, shirts etc.) are links to the collection itself. This is also nicer in terms of seo. And if you dont want to have a page reload by clicking on the link you could use the section rendering api

jjonas.halbstark

If you are interested in the section rendering api i could give you an example by the end of the week.

SSB Verma

Alright sure @jonas.halbstark

thanks for the quick response

Since I'm quite new to shopify, will you please help me with some resources (docs, tutorials) to get a better understanding of attributes I can use

I've watched your tutorials but still few things are unclear
It'd be of great help if you can do this
Thnx

jjonas.halbstark

Hi @SB Verma, as promissed here is an example section for the collection page:
https://copyflow.io/c/1X2b5PTJnNMjOj0KgAlU

In order to make the section rendering api work you need to place this script in the body:

jjonas.halbstark

<script>
  // 1. This function sets event listeners for all .collection_tab-item.is-link
  function initCollectionLinks() {
    // First: get all existing .collection_tab-item.is-link elements
    const collectionLinks = document.querySelectorAll('.collection_tab-item.is-link');

    // Add a click event listener to each link
    collectionLinks.forEach(link => {
      // Tip: Remove old listeners first if necessary
      // -> Not always required because you're usually replacing the entire DOM element
      
      link.addEventListener('click', handleCollectionLinkClick);
    });
  }

  // 2. The function that is executed when a .collection_tab-item.is-link is clicked
  function handleCollectionLinkClick(event) {
    event.preventDefault();
    
    // Determine the URL, e.g., /collections/sale
    const collectionUrl = this.getAttribute('href');
    // Section ID, e.g., featured-collection
    const sectionId = this.dataset.sectionId;

    // Now build the Ajax fetch request
    const fetchUrl =

${collectionUrl}?sections=${sectionId}

;
    
    fetch(fetchUrl)
      .then(response => response.json())
      .then(data => {
        // JSON response -> the section's HTML string
        const newSectionHtml = data[sectionId];
        
        // Find the container and replace the old HTML
        const sectionContainer = document.getElementById('shopify-section-' + sectionId);
        sectionContainer.innerHTML = newSectionHtml;

        // 3. Call initCollectionLinks again so that new links (or other elements) 
        //    can be clicked again
        initCollectionLinks();
      })
      .catch(error => {
        console.error('Error while loading the section:', error);
      });
  }

  // 4. Initialize once on the first page load
  document.addEventListener('DOMContentLoaded', () => {
    initCollectionLinks();
  });
</script>

jjonas.halbstark

With this you can create Block Elements and assign the collection to the block

jjonas.halbstark

Hi @SB Verma do you need any more guidance?

Add a reply

Welcome to the Liquify Community

I need to show Product of all collection on list-collection page