Embedding a 'page' into product template - dynamically

[JoeCat]

Working on a site that is primarily a one product site, but will be be adding more.

I'd like to include content of a 'page' on the bottom of a product. I'm able to create an alt product template and apply it to the product.  I can code the page on there (page name is "features"). So I simply have:

{{ pages.features.content}}

in my product template, and prove this to work.

Now, I'd like it to be able to create other feature pages to be associated with other products, without needing a new template each time.    I thought I could simply create new pages and follow a standardized naming format giving each feature page a name such as "features-producthandle"  (obviously with the product handle the features are associated with)- and expected the template would grab the product handle of the product being viewed and insert the appropriate page. Like this:

{{ pages.features-[product.handle].content}}

... but this did not work.

Thoughts? Thank you

[Ninthony]

Is there a reason that you're using page content? I think a better approach would be to make a snippet and you can pass it the product handle. So in product-template.liquid you could do:

{% render 'your-snippet' , product: product %}

This will give you access to the product object inside your snippet file. Then you can make conditions in your snippet file to check the product handle and assign whatever dynamic data you want based off the product handle. So say you wanted to show something specific on your red t-shirt product, and some other content on your blue t-shirt product. In the snippet you can make a case statement:

{% case product.handle %}
    {% when 'red-t-shirt' %}
        {% capture content %}
        <div class="container">
            <p>Hello Red Shirt!</p>
        </div>
        {% endcapture %}
    {% when 'red-t-shirt' %}
        {% capture content %}
        <div class="container">
            <p>Hello Blue Shirt!</p>
        </div>
        {% endcapture %}
{% endcase %}

{{ content }}

// Outputs Hello Red Shirt or Hello Blue Shirt depending on what your product handle is.

[JoeCat]

I'd like to use 'page'  its front end editor.  I'd like client to be able to generate new feature pages and edit content of it - and in particular id like for me neither me or them to have to tough code editor.  

To clarify the use case, the product page currently shows, a product title, cart buttons, description, followed by images.  After the images we want to include additional product specific features.

[Ninthony]

How are the features going to be laid out? Is it going to be consistent across all products? Is it just a bulleted list? This could be as simple as using metafields on your products and hard coding it once and then just adding metafields to products when needed. If you're unfamiliar with metafields here's an overview:

https://shopify.dev/docs/themes/liquid/reference/objects/metafield

[JoeCat]

Too much content in features to organize in metfields, also as noted I'd like the advantage of the page front end editor.

I'm realizing my code actually works if I name the page identical to the product handle.  Like this

  {{ pages[product.handle].content}}

  So the only part that is not working is when I am appending the word "feaures-" to the front of it in this code - just to better organize the pages, so I assume that portion of the structure of the original code is not correct.

How to I make this insert the  page named:  

product handle:  red-bag

page handle:  features-red-bag   (will always be structured as "features-producthandle"

How do i dynamically generate 

{{ pages.features-red-bag.content}}

[JoeCat · Accepted solution]

  {% assign filename = product.handle %}
  {% assign featurepage = "features-" | append: filename  %}
   {% if pages[featurepage] != empty %}
  <div class="extendedfeatures">
  <h4>Extended Features</h4>
  {{ pages[featurepage].content }}
  </div>
{% endif %}
  

i solved it, used a combination of some solutions from other questions.   Primarily though using "append" function to achieve the combined name.

[Ninthony]

Glad you got it figured out. Thanks for sharing the solution.

[JoeCat]

Thank you for helping and your suggestions for some other approaches.  Always learning.   🙂 

[Digeo]

Hi,

Wonderful solution.

We would like to setup something similar but not based on product.handle but product.type

For each product type we have a product concept page.
A concept consists of more than 1 product, so for each product we'd like to summarize the concept and methods this product is applicable in.

What confuses me though, if I write this piece of code :

  {% assign filename = product.type %}
  {% assign conceptpage = "concept-" | append: filename  %}
   {% if pages[conceptpage] != empty %}
  <div class="extendedfeatures">
  <h4>Concept & methods</h4>
  {{ pages[conceptpage].content }}
  </div>
{% endif %}
  

What will filename contain, or what is it expected to contain ?
A URL path, like this example of 1 of our concept pages ?

https://zwembad.co/pages/wifipool-zwembad-domotica-totaalconcept-in-zwembadautomatisering-en-bedieni...

The only part we would like to show from this example in our product pages is this :

Via de WIFIPOOL app is het mogelijk om de verschillende parameters zoals temperatuur, pH, chloor, filterpompverbruik etc. op de mobiele telefoon te raadplegen. Daarnaast is het mogelijk het zwembad te besturen. Afhankelijk van de voorwaarden die in de app zijn ingesteld, worden pompen, verwarmingen, waterbehandelingsapparaten enz. aan- of uitgezet.
Uw zwembad domotica via wifi, onze app en uw smartphone met andere woorden.

De Wifipool app en producten zijn gebaseerd op eenvoudige technologie : goedkoop, betrouwbaar en eenvoudig te installeren voor de doe-het-zelver.

which basically is the page entered description textarea, stripped from the surrounded template content.

So filename needs to be something else then a page url.
It needs to be a key to the page Object containing title, description, etc...

{% case product.type %}
    {% when 'wifipool' %}
        {% pageId = '127815844188' %} //id from admin.shopify.com/store/39r118/pages/127815844188
    {% when 'zoutelectrolyse' %}
        {% pageId = '127815842829' %}
{% endcase %}
{{ pages[pageId].description }}

I'm not familiar with accessing Shopify's datamodel, but is there a way at all to accomplish something like this ?