Why does my Ruby liquid rendering for product recommendations fail?

Store Design
1

Hi everyone,

I am a newbie in Shopify who is trying to render a grid of recommended products on my server and through a javascripttag insert the html in the view of a product.
I am working in ruby ​​and I use the Shopify gem “liquid”.

The templates that I use are the same that I have in my theme, having downloaded them through the API. Here the first problem occurs, when rendering the recommended products template it fails because it does not recognize the “schema” tag.
If we remove the tag “schema”, the rendering continues but I can’t get the IMG element to contain the src of the image, leaving an empty box.
The data of the product that I use is obtained from the GET query https: // {product_url} .js
As context I use the following JSON:

ctx = {
        "name": "Product recommendations",
        "section":{
        "id": "my-recommendations",
        "settings":{
            "show_product_recommendations": true,
            "heading": "Los que compraron este producto también compraron",
            "show_vendor": false,
            "default":false
        }
        },
        "recommendations":{
        "performed": true,
        "products_count": 1,
        "products": [
            {"id":6890772398278,"title":"camisa con variantes","handle":"camisa-con-variantes","description":"camisa con variantes","published_at":"2021-09-08T10:57:22+02:00","created_at":"2021-09-08T10:57:19+02:00","vendor":"Lacoste","type":"Camisetas","tags":["algod\u00f3n","verano"],"price":1200,"price_min":1200,"price_max":1200,"available":true,"price_varies":false,"compare_at_price":1000,"compare_at_price_min":1000,"compare_at_price_max":1000,"compare_at_price_varies":false,"variants":[{"id":40695596712134,"title":"blanco","option1":"blanco","option2":null,"option3":null,"sku":"10000","requires_shipping":true,"taxable":true,"featured_image":{"id":31910554665158,"product_id":6890772398278,"position":2,"created_at":"2021-11-18T11:28:34+01:00","updated_at":"2021-11-18T11:28:35+01:00","alt":null,"width":670,"height":670,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0559\/5650\/4774\/products\/chica4-1_df36ade1-d8ea-4698-b03b-8526d7799763.jpg?v=1637231315","variant_ids":[40695596712134]},"available":true,"name":"camisa con variantes - blanco","public_title":"blanco","options":["blanco"],"price":1200,"weight":1000,"compare_at_price":1000,"inventory_management":"shopify","barcode":"123123123","featured_media":{"alt":null,"id":24199000654022,"position":2,"preview_image":{"aspect_ratio":1.0,"height":670,"width":670,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0559\/5650\/4774\/products\/chica4-1_df36ade1-d8ea-4698-b03b-8526d7799763.jpg?v=1637231315"}}},{"id":40695596744902,"title":"negro","option1":"negro","option2":null,"option3":null,"sku":"10001","requires_shipping":true,"taxable":true,"featured_image":null,"available":true,"name":"camisa con variantes - negro","public_title":"negro","options":["negro"],"price":1200,"weight":1000,"compare_at_price":1000,"inventory_management":"shopify","barcode":""},{"id":40695596777670,"title":"azul","option1":"azul","option2":null,"option3":null,"sku":"10002","requires_shipping":true,"taxable":true,"featured_image":null,"available":true,"name":"camisa con variantes - azul","public_title":"azul","options":["azul"],"price":1200,"weight":1000,"compare_at_price":1000,"inventory_management":"shopify","barcode":""},{"id":40695596810438,"title":"rojo","option1":"rojo","option2":null,"option3":null,"sku":"10003","requires_shipping":true,"taxable":true,"featured_image":null,"available":true,"name":"camisa con variantes - rojo","public_title":"rojo","options":["rojo"],"price":1200,"weight":1000,"compare_at_price":1000,"inventory_management":"shopify","barcode":""},{"id":40695596843206,"title":"verde","option1":"verde","option2":null,"option3":null,"sku":"10004","requires_shipping":true,"taxable":true,"featured_image":null,"available":true,"name":"camisa con variantes - verde","public_title":"verde","options":["verde"],"price":1200,"weight":1000,"compare_at_price":1000,"inventory_management":"shopify","barcode":""}],"images":["\/\/cdn.shopify.com\/s\/files\/1\/0559\/5650\/4774\/products\/camiseta.png?v=1631698359","\/\/cdn.shopify.com\/s\/files\/1\/0559\/5650\/4774\/products\/chica4-1_df36ade1-d8ea-4698-b03b-8526d7799763.jpg?v=1637231315"],"featured_image":"\/\/cdn.shopify.com\/s\/files\/1\/0559\/5650\/4774\/products\/camiseta.png?v=1631698359","options":[{"name":"Color","position":1,"values":["blanco","negro","azul","rojo","verde"]}],"url":"\/products\/camisa-con-variantes","media":[{"alt":null,"id":23034025115846,"position":1,"preview_image":{"aspect_ratio":0.888,"height":187,"width":166,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0559\/5650\/4774\/products\/camiseta.png?v=1631698359"},"aspect_ratio":0.888,"height":187,"media_type":"image","src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0559\/5650\/4774\/products\/camiseta.png?v=1631698359","width":166},{"alt":null,"id":24199000654022,"position":2,"preview_image":{"aspect_ratio":1.0,"height":670,"width":670,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0559\/5650\/4774\/products\/chica4-1_df36ade1-d8ea-4698-b03b-8526d7799763.jpg?v=1637231315"},"aspect_ratio":1.0,"height":670,"media_type":"image","src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0559\/5650\/4774\/products\/chica4-1_df36ade1-d8ea-4698-b03b-8526d7799763.jpg?v=1637231315","width":670}]}
        ]
        }
    }

And the result that is inserted:

Screenshot_20211122_180319.png
Screenshot_20211122_180319.png1658×251 9.4 KB

I’ve spent many hours trying to make this work. Can someone give me a hint on what i’m doing wrong?
Thanks to everybody who has read this far.

Angel

2

Hey

Are you using this Schema in a Snippet? You can’t add a {% schema %} to Snippets - only Sections.

So you would have to add the Schema to a Section to get the info and display the info in a Section and then render the section inside the product-template.

Let me know if this is of any help or if you have any more questions.

Thanks,

Andre

3

Hi,
I’m trying to render the section “product-recommendations” on my own server (not shopify). To achieve this i’ve downloaded the theme templates/sections/snippets.

In this case i think its fine if i remove the schema tag, since apparently it only contains translations.

The second problem is which is blocking me. I’m getting the product title to be shown, but not the image (featured_image in this case). Do you know if the JSON get from https://{product_url}.js or https://{product_url}.json are the right ones to pass to the render?

Thank you for your time and responses.