As above, I hope that visitors who select different stores can see different images. I have all the text translated and I don't want to rely on 3rd party app. I have come across this thread: https://community.shopify.com/c/technical-q-a/how-can-upload-different-images-based-on-the-different-store/m-p/1007146
There is one reply that mentioned this is possible; but I can't find any other resources on the matter above. Appreciate if anyone can guide me through on the process.
on code is not really hard, but is boring to maintain.
you should upload your images by settings/files.
on the folder Locales of your theme you have the languages JSON files. Create inside an object "images" and there create the keys you need, and set as value the link you have from step 1.
On your template use liquid translation to translate the image address it will manage to change the file address. done!
EX: on pseudo code:
file: locales/en.default.json
{
"images": {
"sliders": {
"1": "slider_1_en.jpg",
"2": "slider_2_en.jpg"
}
}
// .... rest of the file
}
file: locales/es.json
{
"images": {
"sliders": {
"1": "slider_1_es.jpg",
"2": "slider_2_es.jpg"
}
// .... rest of the file
}
IMPORTANT: save the name of the file including the extension. slider_1_es not works. It should be slider_1_es.jpg.
Do the same on all the languages you use
Now on any liquid file were you need the translated image, you can do a simple image:
<img
src="{{ 'images.sliders.1' | t | file_img_url: '1500x' }}"
loading="lazy"
>
Or even somethin more complex using srcset:
<img
srcset="
{{ 'images.sliders.1' | t | file_img_url: '375x' }} 375w,
{{ 'images.sliders.1' | t | file_img_url: '750x' }} 750w,
{{ 'images.sliders.1' | t | file_img_url: '1100x' }} 1100w,
{{ 'images.sliders.1' | t | file_img_url: '1500x' }} 1500w,
{{ 'images.sliders.1' | t | file_img_url: '1780x' }} 1780w,
{{ section.settings.image | img_url: '2000x' }} 2000w
"
sizes="(min-width: 750px) calc(100vw - 22rem), 1100px"
src="{{ 'images.sliders.1' | t | file_img_url: '1500x' }}"
loading="lazy"
>
Related
I have created a custom section in which I add a picture. I need to display its alt. How can i do this?
<img src="{{ section.settings.img_section_image | img_url: '960x645'}}">
{% schema %}
{
"name": "Img section",
"settings": [
{
"id": "img_section_image",
"type": "image_picker",
"label": "Add image"
},
],
"presets": [
{
"name": "Img sections"
}
]
}
{% endschema %}
Once you upload the image simply click on the image, and a popup appears on the popup there is a text field to add an alt tag for that image.
it looks like this image:
To get it on img tag you can use the default image_tag
{{ section.settings.img_section_image | image_url: width: 200 | image_tag }}
it shows the alt tag automatically when img tag is created
or use the
{{ section.settings.img_section_image| image_url: width: 200 | image_tag: alt: 'My image's alt text' }}
To add manually custom tag, without backend.
if you do not use image_tag, then try something like this
<img src="{{ section.settings.img_section_image | img_url: '960x645'}}" alt="{{section.settings.img_section_image.alt}}">
I hope this will helps you and other as well
this is the example of code
{{ __('Remember Me') }}
I want to access a nested object using v-for in nuxtjs,I have a get request using Axios to an API and response data is stored in a variable named CategoriesData look at the code below.
asyncData(context) {
return axios
.get("https://lavazemesakhteman.com/wp-json/wc/v3/products/categories", {
params: {
per_page: 10,
page: 1,
},
})
.then((res) => {
return {
CategoriesData: res.data,
};
})
.catch((e) => context.error(e));}
at this point, everything is good and all API response is stored in CategoriesData, my problem starts when I want to iterate over the nested object and display or use its property, pay attention to the code below:
<ul>
<li v-for="categories in CategoriesData" :key="categories.id">
{{ categories.name }}
{{ categories.image }}
</li>
</ul>
the result is:
I want to display and use categories.image[0].src for example src only not the whole object, the API response is pictured below:
this is a part of JSON code:
"display": "default",
"image": {
"id": 10443,
"date_created": "2022-04-30T05:45:44",
"date_created_gmt": "2022-04-30T01:15:44",
"date_modified": "2022-04-30T05:46:36",
"date_modified_gmt": "2022-04-30T01:16:36",
"src": "https://lavazemesakhteman.com/wp-content/uploads/2022/04/Benkan-Connections2.jpg",
"name": "Benkan Connections",
"alt": "فروشگاه لوازم ساختمان عرضه کننده محصولاتی باکیفیت و همچنین با بهترین قیمت در تمام کشور هست."
},
when is used categories.image.src:
<ul>
<li v-for="categories in CategoriesData" :key="categories.id">
{{ categories.name }}
{{ categories.image.src }}
</li>
</ul>
I get the below error:
Cannot read properties of null (reading 'src')
You can access nested data using the same . notation you already use to get the first field, so you would need to write something like {{ categories.image.src }}.
<template>
<ul>
<li v-for="category in CategoriesData" :key="category.id">
{{ category.name }}
<img :src="category.image.src">
</li>
</ul>
</template>
Note: You named the variable in your v-for as a plural, while the data it holds is singular. As each item in the list of categories is an individual category.
Going to the API itself, located here: http://lavazemesakhteman.com/wp-json/wc/v3/products/categories
Showed that sometimes your image can be null, hence checking for this exception is a nice thing to do
<img v-if="category.image" :src="category.image.src">
Depending on your project and how it's setup, you could even use Optional Chaining like this
<img :src="category.image?.src">
Otherwise, this uglier form is also available
<img :src="category.image && category.image.src">
I've tried using "type": "url:". and apparently that only works for collections. I want to make a dynamic external link. I tried text input. Why is this one task not easy to do?
<a class="section-tiktok__card" href="{{block.settings.url}}">
<img src="{{ 'tik-play-btn.svg' | asset_url }}" alt="play video">
</a>
{% schema %}
{
"name": "TikTok Feed",
"presets": [{
"name": "TikTok Section"
}],
"blocks": [{
"type": "html",
"limit": 5,
"name": "TikTok and Instagram Feed",
"settings": [
{
"type": "image_picker",
"id": "tiktok_bg",
"label": "Image Background"
},
{
"type": "url",
"id": "tiktok_url",
"label": "Tiktok or Instagram URL"
}
]
}]
}
{% endschema %}```
You're attempting to get a setting from a block but you haven't accessed your section blocks or assigned anything to block. Furthermore, your setting is named tiktok_url while you're using url to display it.
{% for block in section.blocks %}
<a class="section-tiktok__card" href="{{ block.settings.tiktok_url }}" {{ block.shopify_attributes }}>
<img src="{{ 'tik-play-btn.svg' | asset_url }}" alt="play video">
</a>
{% endfor %}
I have a VueJS app that has the following style of (externally provided) data:
data: function() {
return {
posts: ['1:foo bar oof rab', '2:bar oof rab foo', '3:oof rab foo bar']
}
}
I want my template to loop through posts and make everything to the left of the semi-colon a clickable anchor tag:
<li><a id="1" href="#1">1</a>:foo bar oof rab</li>
<li><a id="2" href="#2">2</a>:bar oof rab foo</li>
<li><a id="3" href="#3">3</a>:oof rab foo bar</li>
Using a filter it's easy to split the text from the anchor position:
<template>
<div>
<v-for="post in posts">
<li>{{ post | trimAnchor }}:{{ post | trimPost }}</li>
</v-for>
</div>
</template>
filters: {
trimPost: function(value) {
value = value.toString();
return value.split(':')[1]
},
trimAnchor: function(value) {
value = value.toString();
return value.split(':')[0]
},
hashAnchor: function(value) {
value = value.toString();
return '#'+value.split(':')[0]
}
But filters don't work in v-bind or router-link:
<li>
<div :id="{{ post | hashAnchor }}">
<router-link="{{ post | hashAnchor }}">
{{ post | trimAnchor }}
</router-link>
</div>
:{{ post | trimPost }}
</li>
What is the correct approach to getting the output I'm after? Should I be using computed & if so, how?
Any help appreciated.
In these kind of cases I always recommend using a computed property. It keeps your template clean, and allows much freedom in preparing your data. Due to it being a computed property, it will automatically recalculate if your data were to change.
The first part is to create some object with all the necessary parts you require:
computed: {
anchors () {
if (!this.posts) {
return [];
}
return this.posts.map(
identifier => {
const [anchor, text] = identifier.split(':', 2);
return {
anchor,
text
}
}
)
}
}
Then you destructure it where you need it. I also added a key to your v-for, assuming that the first part is guaranteed to be unique. It would need to be if your anchors are going to work.
<template>
<div>
<v-for="{ anchor, text } in anchors" :key="anchor">
<li><a :href="`#${anchor}`">{{ anchor }}</a>:{{ text }}</li>
</v-for>
</div>
</template>
Of course you can use filters if needed on the link or li body if you need.