Embedding a 'page' into product template - dynamically

Solved
JoeCat
Excursionist
14 1 1
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
Happy to share knowledge of simple code changes. Click the link in my profile if you need help implementing.
0 Likes
Ninthony
Shopify Partner
1798 260 708

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.

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
JoeCat
Excursionist
14 1 1

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.

Happy to share knowledge of simple code changes. Click the link in my profile if you need help implementing.
0 Likes
Ninthony
Shopify Partner
1798 260 708

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

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
JoeCat
Excursionist
14 1 1

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

 

 

Happy to share knowledge of simple code changes. Click the link in my profile if you need help implementing.
0 Likes
JoeCat
Excursionist
14 1 1

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

Happy to share knowledge of simple code changes. Click the link in my profile if you need help implementing.
Ninthony
Shopify Partner
1798 260 708

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

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
JoeCat
Excursionist
14 1 1

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

Happy to share knowledge of simple code changes. Click the link in my profile if you need help implementing.
0 Likes