I am trying to display an image but it is not working as expected
{{#each shop_by_brand}}
{{image}} // returns nothing
<img src="{{getImage image "thumbnail"}}"> // src is '[object,object]'
{{/each}}
Surfacing brand images on the homepage would require making a storefront API request.
One way to do this would be to use Stencil utils to make a request to /brands/:
https://stencil.bigcommerce.com/docs/stencil-utils-api-reference#API-js
By default, the request returns HTML, but the function can take a presentation template as an argument; this could be a custom template that filters the page through a {{json brands}} helper.
Another way to access the full brands object in the header would be to use the v3 catalog API. You could use AWS Lambda/Amazon API Gateway as a lightweight solution for hosting a function that calls the API and returns brands.image_url data.
https://developer.bigcommerce.com/api/v3/catalog.html?json#getbrands
Related
I am working on a project using Gatsby, Strapi and Cloudinary. I am deploying the frontend on Netlify and the Strapi app on Heroku (with the addition of a Postgresql database instance).
I have been searching for weeks now and but I cannot seem to find a way to lazy-load images sourced through Cloudinary.
I have replaced the default rich content editor on Strapi with the ckeditor so editors can add photos to their content. These are automatically uploaded and served by Cloudinary.
My question is, is there a way to lazy-load the images, and if so, should this be done when serving them from Cloudinary, should I do this as a Strapi middleware or simply through Gatsby?
Note: I am not sourcing the images anywhere on the front-end since it's parsed as html from Strapi. All I'm currently doing in passing the fetched content to a div using
dangerouslySetInnerHtml.
With dangerouslySetInnerHtml directive you are inserting whatever is inside your rich text as HTML content so you lose control of customizing the behavior of that content. Hence, it will be rendered all at once.
There's no built-in way of doing this except by parsing your rich text with a third-party dependency (which I haven't been able to find)/custom method that will give you the capability of wrapping your images with any custom component. The idea, either way, is to parse your rich text blocks to customize the output.
In addition, check if the images tag (<img>) comes with the loading=lazy property attached:
<img src="image.jpg" alt="..." loading="lazy">
I was wondering if it's possible to target /app/ pages using liquid flow controls?
I'm trying to exclude a particular element from showing up on one of our app pages. The app page uses our layout/theme.liquid file when it loads. Wondering if there's a way I can set a condition to look for app based pages like we do for other template/page conditions like {% if template == 'something' %}
A call to any Proxy is going to result in data being returned. So if you have a link in your Liquid to a Proxy, Shopify could possibly navigate there eg: /app/fizzbuzz and render what your Proxy returns as Liquid. In that case, you'd know you're on /app/fizzbuzz after the page is loaded, so a quick inspection of the URL would let you run JS.
A call from a link results in Shopify rendering the content_for_layout, if your element is in there don't include that element.
Would be helpful to know how you are using the Proxy to give you more details. Most people use it as an Ajax call for JSON and then render the returned data. I assume you are not doing that.
Completely new to shopify app development, I looked around the documentation but I did not find any hint about creating an app that add external content to pages (homepage or product pages or every pages) as countdown apps do on every pages or on product pages.
Any help on it could be a great service !
It is really simple these days:
create an App, install it in shop
in app configuration, add an App Proxy
add a JS callback to the App Proxy using a Script Tag (or however you like)
have your App return either a full Liquid string response, or JSON
render response to JS callback in theme
So you can play with this more ways than you can shake a stick. You can return Liquid with your tags so that the web theme designer people can take advantage of what is special about your App. You can just return JSON and template the results into DOM as per the usual pattern.
I'm developing a Shopify app.
On app installation, I want to create a snippet and upload some assets like images and JS.
That snippet should be injected in the product.liquid file.
You can use this for creating assets using API
https://docs.shopify.com/api/asset
While passing the key parameter you can pass whether it is going to be a snippet or asset.
{ "key" : "assets/bg-body-green.gif" }
We have a Web API (MVC4) application that returns images from the database. I have verified that the call to the Web API does produce a valid image.
Here is the Fiddler result showing that the image is returned properly: :
I tried setting an image element with the same source as the call, but that didn't work:
<img id="img" src="http://localhost/Seek/api/artifactcontent/?userName=XXXXX&password=XXXXXX&id=15-00931-27" />
What am I doing wrong?
You request in Fiddler is a POST request; the <img> tag sends a GET request. If you want to display images using <img> tags, you'll need to make your action accept GET requests instead of (or in addition to) POST.