I want to translate this sentence in i18n
Select <b>branch(s)</b> you want to send selected product
after selecting Branch Click on submit
As you can see , one word in above sentence is in <b> tag.
I have this solution , But I am not sure is this is the best way to do or not.
$t('part1') <b>$t('part2')</b> $t('part3')
so ,do you know better way to translate this ??
As per your requirement, we have to translate a message/sentence which contains HTML tag.
The solution $t('part1') <b>$t('part2')</b> $t('part3') you mentioned in OP is difficult to manage and complicated. You can avoid it using the i18n functional component. For example :
Your language JSON will look like this :
const messages = {
en: {
info: 'Select {branchText} you want to send selected product after selecting Branch Click on submit.',
subText: 'branch(s)',
}
}
Template will look like this :
<i18n path="info" tag="p">
<template v-slot:branchText>
<b>{{ $t('subText') }}</b>
</template>
</i18n>
Hope this answer will help! Thanks.
Related
I've been searching this for a while but can't seem to get it right. I have a basic Nuxt project with the following directory structure (ignore the fun.vue) :
The idea is to be able to navigate to a single post with paths like http://localhost:3000/posts/1
This works, if I manually go to .../posts/1 I get my page defined in _id.vue.
The problem is that, in my index page, I cannot get <NuxtLink> to go to single post pages. I have a basic v-for looping over my fetched posts array, like so:
<template>
<div>
<div v-for="post in posts" :key="post.id">
{{ post.title }}
<NuxtLink to="`posts/${post.id}`">Link to post</NuxtLink>
</div>
</div>
</template>
I would expect, upon clicking on the 2nd post's link for example, to navigate to posts/2, but instead I get /%60posts/$%7Bpost.id%7D%60. Why isn't the template string converted normally? I've also tried using a computed value with no success, and the Nuxt Routing docs haven't been of much help.
Highly appreciate any help regarding this.
You forgot the semicolon:
:to="`/posts/${post.id}`"
or even better
:to="{ name: 'post-id' }" // post-id or basically the name you gave to your component
As shown here: https://router.vuejs.org/api/#router-link-props
You can use something like this
the ":" in front of it will make it dynamic and you can use template literals
in between those double quotes
<NuxtLink :to="`posts/${post.id}`">Link to post</NuxtLink>
I tried your code in my development environment. You also may forgot to add "/" in front of "posts":
<NuxtLink :to="`/posts/${post.id}`">Link to post</NuxtLink>
If you put your code without "/" in a Nuxt "layout", it adds "posts" iteratively to your "URL" and makes the destination wrong:
http://localhost:3000/posts/posts/2
This happens when you click on post 1 and after to post 2.
I have a variety of HTML select elements inside of Nuxt.js. I'm also using Vuelidate for validation and this is working as expected. This is a typical select box in my form:
<select
id="location"
name="location"
v-model="form.location"
#blur="$v.form.location.$touch()"
:class="{error: appendErrorClass($v.form.location)}"
>
<option :value="null" hidden>Choose...</option>
<option
v-for="(item, index) in $store.state.quotes.data.practiceStates"
:key="index"
:value="item.data">
{{item.display}}
</option>
</select>
Before selecting any of the options, I'm noticing the following on all select fields.
I've tried removing any Vue magic on a test select field to see if the same results happen.
<select id="location1" name="location1">
<option value="" hidden>Choose...</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
Still seeing valid: true. Is there anything I'm overlooking that would cause the validity to default to true? Thanks in advance for any help or guidance on this issue.
UPDATE For Clarification:
Vuelidate validation works just fine. The issue I'm dealing with is the select field property Validity.validate. I only mention Vuelidate to give full context.
HTML Select is a sort of "strange" form element in that validity is typically checking to see if there's a readable value. Since a select always has something picked, it validates...
This is different from say a telephone input that has a specific pattern required to be valid.
I haven't used Vuelidate specifically, but I read the docs as saying, if you left the v-model="form.location" there's a good chance it's simply validating that a value exists so Any selcted item would qualify.
In my original post, I referenced the dynamic style based on the vuelidate library: :class="{error: appendErrorClass($v.form.location)}"
#PierreSaid responded to this post and later deleted his/her reply. Turns out, his response was helpful in pointing me to some Vuelidate attributes that were able to assist in a workaround for my issue. Thank you, PierreSaid.
I have since updated that dynamic class to be a mixin that looks like this:
export default {
methods: {
appendErrorAndValidityClass(field) {
return {
error: field.$error,
invalid: field.$invalid,
};
}
}
};
After importing the mixin into the Vue partial, my select box looks like this:
<select
id="location"
name="location"
v-model="form.location"
#blur="$v.form.location.$touch()"
:class="appendErrorAndValidityClass($v.form.location)"
>
This appends a class of invalid when the select field has not been updated. It also updates the error style accordingly. Now, I can assign styles for when the select field has an invalid class. This solves the overall issue for me. Thanks for your help PierreSaid and Bryce.
Currently custom fields show up as text on product pages.
Custom Field #1 Name: Material, Custom Field #1 Value: Cotton
Is there some other option instead to just pass data to the template? For example I'd like to display a 'NEW' label on the product page if new == true.
Sort of like https://springmerchant.com/bigcommerce/product-labels/
Right now we're using handlebars and if-statements to hide custom fields with a __prefix. For example __new: true.
If you're developing your template in stencil, there are a couple of options... You can loop through the custom fields until you find the correct one and then check the value... Ex:
{{#each product.custom_fields}}
{{#if name "==" "__new"}}
{{#if value "==" "true"}}
YOUR HTML CODE HERE
{{/if}}
{{/if}}
{{/each}}
Alternatively, you can put all your custom_fields into an array and use javascript to populate various aspects of the site:
<script>
var custom = [];
{{#each product.custom_fields}}
custom.push({'name':"{{name}}",'value':"{{value}}"});
{{/each}}
YOUR CODE TO LOOP THROUGH JSON ARRAY AND DO VARIOUS TESTS AND STUFF
</script>
If you don't have access to stencil templates and are just doing development through the control panel, you could write javascript to parse the default custom_field html and then use the data accordingly.
None of the solutions are particularly clean, but they all work.
I have just downloaded and installed the latest version of Prestashop. And found out there is a Social Title-option in order checkout form.
I want to remove that. I have found how to remove the Mr and Mrs boxes. But the whole row and label "Social Title" remains.
Have tried to search on Google for an answer but can't find. Some answers refer to the addresses.tpl. But I think the templates might been changed since these threads.
In fact, I have tried to search for "social" in the whole template directory and can't find anything related to this.
The nearest I get is in the ../templates/customer/_partials/customer-form.tpl. And I think it's rendered where this is:
<section>
{block "form_fields"}
{foreach from=$formFields item="field"}
{block "form_field"}
{form_field field=$field}
{/block}
{/foreach}
{/block}
</section>
So, maybe the social title isn't able to change from templates anymore?
So, where do I change it nowadays?
In Prestashop 1.7 there is no need to edit any code, you can just go to Shop Parameters -> Customer Settings -> Titles and remove all existing titles.
This will prevent the "Social title" field from being generated.
Shop Parameters -> Customer Settings -> Titles - Delete titles
themes/xxx/templates/_partials/form-fields.tpl 9th line change
{if $field.type !== 'checkbox'}
{$field.label}
{/if}
to
{if $field.type !== 'checkbox' and $field.type !== 'radio-buttons'}
{$field.label}
{/if}
Yeah, it's kind of dummy workaround, but it works.
UPDATE:
More proper way would be to comment the block:
$genderField = (new FormField)
->setName('id_gender')
->setType('radio-buttons')
->setLabel(
$this->translator->trans(
'Social title', [], 'Shop.Forms.Labels'
)
)
;
foreach (Gender::getGenders($this->language->id) as $gender) {
$genderField->addAvailableValue($gender->id, $gender->name);
}
$format[$genderField->getName()] = $genderField;
You can find it in /classes/form/CustomerFormatter.php
You can find the code for Social Titles in file at the following path:
/themes/default-bootstrap/identity.tpl
Note: It is not a good practice to remove the code from a core file, we recommend to apply some CSS to hide the Social Title block.
I have some dijit.InlineEditBox widgets and now I need to add some search highlighting over them, so I return the results with a span with class="highlight" over the matched words. The resulting code looks like this :
<div id="title_514141" data-dojo-type="dijit.InlineEditBox"
data-dojo-props="editor:\'dijit.form.TextBox\', onFocus:titles.save_old_value,
onChange:titles.save_inline, renderAsHtml:true">Twenty Thousand Leagues <span
class="highlight">Under</span> the Sea</div>
This looks as expected, however, when I start editing the title the added span shows up. How can I make the editor remove the span added so only the text remains ?
In this particular case the titles of the books have no html in them, so some kind of full tag stripping should work, but it would be nice to find a solution (in case of short description field with a dijit.Editor widget perhaps) where the existing html is left in place and only the highlighting span is removed.
Also, if you can suggest a better way to do this (inline editing and word highlighting) please let me know.
Thank you !
How will this affect your displayed content in the editor? It rather depends on the contents you allow into the field - you will need a rich-text editor (huge footprint) to handle html correctly.
These RegExp's will trim away XML tags
this.value = this.displayNode.innerHTML.replace(/<[^>]*>/, " ").replace(/<\/[^>]*>/, '');
Here's a running example of the below code: fiddle
<div id="title_514141" data-dojo-type="dijit.InlineEditBox"
data-dojo-props="editor:\'dijit.form.TextBox\', onFocus:titles.save_old_value,
onChange:titles.save_inline, renderAsHtml:true">Twenty Thousand Leagues <span
class="highlight">Under</span> the Sea
<script type="dojo/method" event="onFocus">
this.value = this.displayNode.innerHTML.
replace(/<[^>]*>/, " ").
replace(/<\/[^>]*>/, '');
this.inherited(arguments);
</script>
</div>
The renderAsHtml attribute only trims 'off one layer', so embedded HTML will still be html afaik. With the above you should be able to 1) override the onFocus handling, 2) set the editable value yourself and 3) call 'old' onFocus method.
Alternatively (as seeing you have allready set 'titles.save_*' in props, use dojo/connect instead of dojo/method - but you need to get there first, sort of say.