Render products from section on new page

[rickbenjamin]

I have a page with a section called ‘Lookbook Gallery,’ where I can define multiple Lookbook Photos, each with an image, a title, and associated products (as shown in the screenshot). Each photo is clickable. How can I create a page template that dynamically displays the associated products for a selected Lookbook Photo when the image is clicked?

[KetanKumar]

@rickbenjamin oh sorry for that issue do you want each product different lookbook right?

[rickbenjamin]

@KetanKumar Each Lookbook Photo can have different products associated with it. I want to create a page that dynamically displays the products linked to a specific Lookbook Photo when the image is clicked on the gallery page.

[KetanKumar]

@rickbenjamin yes if are able to code customization create duplicate lookbook section add meta field code customization 

[rickbenjamin]

Could you give a little more context? The Lookbook gallery, including the lookbook photo blocks are custom created. How can this meta field help me to dynamically render a page with the products from a lookbook photo block.

[KetanKumar]

@rickbenjamin maybe like this your option 

{% assign lookbook_blocks = page.metafields.lookbook.blocks %}
{% for block in lookbook_blocks %}
  <div class="lookbook-block">
    <!-- Display the Lookbook Image -->
    <div class="lookbook-image">
      <img src="{{ block.image | img_url: 'large' }}" alt="Lookbook Image">
    </div>

    <!-- Display Associated Products -->
    <div class="lookbook-products">
      {% assign products = block.products %}
      {% for product_id in products %}
        {% assign product = all_products[product_id] %}
        
        <!-- Product Card -->
        <div class="product-card">
          <a href="{{ product.url }}">
            <img src="{{ product.featured_image | img_url: 'thumb' }}" alt="{{ product.title }}">
            <p>{{ product.title }}</p>
          </a>
        </div>
      {% endfor %}
    </div>
  </div>
{% endfor %}

[rickbenjamin]

@KetanKumar Your example loops through all lookbook blocks on a page. I am looking for an implementation where the page only displays the selected lookbook from the gallery page.  

[Guleria]

No same thing he shared just way is different as I mentioned earlier.

And yes @KetanKumar shared solution with metafields and I think in your case settings/data will fetch from section/block.
check this part

{% assign products = block.products %}
      {% for product_id in products %}
        {% assign product = all_products[product_id] %}
        
        <!-- Product Card -->
        <div class="product-card">
          <a href="{{ product.url }}">
            <img src="{{ product.featured_image | img_url: 'thumb' }}" alt="{{ product.title }}">
            <p>{{ product.title }}</p>
          </a>
        </div>
      {% endfor %}

[Guleria]

Hello @rickbenjamin ,

Not sure what others are saying. 

But yes it's possible. You have to fetch the product handle from the dynamic selected product and then call it.

e.g.

{% assign first_product = 'your-product-handle %} 

{{ all_products[first_product].title }}

Regards
Guleria

[rickbenjamin]

Hello @Guleria,

Thank you for the suggestion. How would this work for multiple products?

[Guleria]

Use it inside the loop 

replace 'your-product-handle' with the one which you will get in the loop 

btw if the selected product returns the product object then there will be other options too to do it.

[rickbenjamin]

@Guleria I don't quite understand how I can fetch the product_list of a single Lookbook photo block into new page. 

[Guleria]

Yes little hard if you are not good with code

btw please share your existing code or the one you are trying to use?

[rickbenjamin]

@GuleriaI am quite some web development experience, but I am fairly new to coding in Shopify. This is what i have at the moment.

<!-- lookbook-gallery.liquid -->
{%- for block in section.blocks -%}
  <div>
    {%- if block.settings.image != blank -%}
      <div>
        <a
          <!--- go to page that renders block.settings.product_list -->
          href="#"
          class="gallery-item mb-3 image-content__image-wrapper"
          style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"
        >
          {% assign img_url = block.settings.image | image_url: %}
          <img
            src="{{ block.settings.image | image_url: width: 1, height: 1 }}"
            data-src="{{ img_url }}"
            loading="lazy"
            width="{{ block.settings.image.width }}"
            height="{{ block.settings.image.height }}"
          >
          
        </a>
      </div>
    {% else %}
      <div class="gallery-item mb-3">
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    {%- endif -%}
  </div>
{%- endfor -%}

<!---- page.lookbook.liquid -->
{% assign lookBook = ... %} <!---- load lookBook selected from lookbook-gallery.liquid
{% for product in lookBook.products_list %}
  {% assign product = all_products[product_id] %}
    <!-- Product Card -->
    <div class="product-card">
      <a href="{{ product.url }}">
        <img src="{{ product.featured_image | img_url: 'thumb' }}" alt="{{ product.title }}">
        <p>{{ product.title }}</p>
      </a>
    </div>
{% endfor %}

[Guleria]

<!-- lookbook-gallery.liquid -->
{%- for block in section.blocks -%}
  <div>
    {%- if block.settings.image != blank -%}
      <div>
        <a
          <!--- go to page that renders block.settings.product_list -->
          href="#"
          class="gallery-item mb-3 image-content__image-wrapper"
          style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"
        >
          {% assign img_url = block.settings.image | image_url: %}
          <img
            src="{{ block.settings.image | image_url: width: 1, height: 1 }}"
            data-src="{{ img_url }}"
            loading="lazy"
            width="{{ block.settings.image.width }}"
            height="{{ block.settings.image.height }}"
          >
          
        </a>
// Get the product handle from object and use in next line
{% assign first_product = 'your-product-handle %} 

{{ all_products[first_product].title }}


      </div>
    {% else %}
      <div class="gallery-item mb-3">
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    {%- endif -%}
  </div>
{%- endfor -%}

[rickbenjamin]

Wouldn't this example displays the product_list on the same page?

[Guleria]

It can that depends on the requirement btw above example will show selected product parallel to the lookbook block. 

[rickbenjamin]

@Guleria The requirement is to display the selected lookbook on a dedicated page. And that’s thing I can’t figure out.

[Guleria]

Not sure you are looking for an idea or a complete code for your requirement
Because last message/code also means same 
 " btw above example will show selected product parallel to the lookbook block. "

[rickbenjamin]

I’m looking for an idea how to display the products on a separate page. 

[rickbenjamin]

@Guleria Do you know I can make this happen?