I downloaded prestashop yesterday and now I want to make some changes. footer.tpl
<div id="right_column" class="column grid_2 omega">
{$HOOK_RIGHT_COLUMN}
</div>
Is it possible to change $HOOK_RIGHT_COLUMN?
For example you can check in v1.6.1.24, FrontController.php line 582
'HOOK_RIGHT_COLUMN' => ($this->display_column_right ? Hook::exec('displayRightColumn', array('cart' => $this->context->cart)) : ''),
So in case you need more columns, you make one (or more) extra, create the respective hooks in the table hook and create modules that hook to this custom hook.
Related
If I understand the docs correctly it allows
<div>
<div id="alert"></div>
<button hx-get="/info"
hx-select="#info-details"
hx-swap="outerHTML"
hx-select-oob="#alert">
Get Info!
</button>
</div>
replace the whole <button> due to the hx-swap directive with the content of #info-details - via hx-select="#info-details" - from the response sent.
define a 2nd target hx-select-oob="#alert" which takes the content from #alert from the response sent.
Is there any way hx-select-oob can have multiple targets?
Like hx-select-oob="#alert,#second-target"?
Or how to manage updating multiple targets at once?
If your goal is to return html content and copy the same content to multiple targets - you simply use class selector instead of ID.
If you have multiple content returned, then you need to use htmx-swap-oob
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.
Hi I'm trying to figure out how to use v-if on a iterated element which also uses v-for. I need to check if the current element has any of a series of classes, which are numbers.
so the classes of each article would be:
<article class="post-item post-guide 12 22 19 30 55">...
this is the HTML that renders all:
<article v-if="showIfHasClass" :class="'post-item post-guide ' + guide.categories.toString().replace(/,/g, ' ')"
v-for="(guide, index) in guides" :key="index">
<header>
<h1 class="post-title">
{{ guide.title.rendered}}
</h1>
</header>
</article>
I have tried with methods that check the class of all elements, that works, but i'm trying to use a clean Vue built-in solution with v-if without success, i'm not able to retrieve the class of this in a successful way.
Should showIfHasClass be a computed property? I have tried with that too... but it seems, I'm missing something along the way.
my data I have to check against is an array:
data:{
guides: [...]
selectedCategories: [1, 22, 33, 100, 30];
}
or maybe it is better to directly loop over the guides and check if they have the selectedCategory or not, then remove the element from the guides data array?
What is more effective?
Besides the option to create an additional filtered computed (effectively eliminating the need to use v-for and v-if on the same element), you also have a template level way of dealing with such edge-cases: the <template> tag.
The <template> tag allows you to use arbitrary template logic without actually rendering an extra element. Just remember that, because it doesn't render any element, you have to place the keys from the v-for on the actual elements, like this:
<template v-for="(guide, index) in guides">
<article v-if="isGuideVisible(guide)"
:key="index"
class="post-item post-guide"
:class="[guide.categories.toString().replace(/,/g, ' ')]">
<header>
<h1 v-text="guide.title.rendered" />
</header>
</article>
</template>
isGuideVisible should be a method returning whether the item is rendered, so you don't have to write that logic inside your markup. One advantage of this method is that you can follow your v-if element with a fallback v-else element, should you want to replace the missing items with fallback content. Just remember to also :key="index" the fallback element as well.
Apart from the above use-case, <template> tags come in handy when rendering additional wrapper elements is not an option (would result in invalid HTML markup) (i.e: table > tr > td relations or ol/ul > li relations).
It's mentioned here as "invisible wrapper", but it doesn't have a dedicated section in the docs.
Side note: since you haven't actually shown what's inside guide.categories, I can't advise on it, but there's probably a cleaner way to deal with it than .toString().replace(). If guide.categories is an array of strings, you could simply go: :class="guide.categories".
I think the most Vue way is to create a computed property with filtered items from selected categories, then use that in v-for loop (the idea is to move the business logic away from template).
computed: {
filteredItems(){
return this.guides.filter(e => this.selectedCategories.includes(e.category))
}
}
Also, as a note, it is not recommended to use v-if and v-for on the same element, as it may interfere with the rendering and ordering of loop elements. If you don't want to add another level of nesting, you can loop on a 'template' element.
<template v-for="item in items">
// Note the key is defined on real element, and not on template
<item-element v-if='condition' :key="item.key"></item-element>
</template>
I am trying to place the logo in the middle of my navigation.
<f:section name="MainNavigation">
<f:if condition="{menu}">
<ul class="navbar-nav">
<f:for each="{menu}" as="item">
<f:if condition="{item.spacer}">
<f:then>
</ul>
<f:render section="MainNavigationLogo" arguments="{_all}" />
<ul class="navbar-nav">
</f:then>
<f:else>
The menu is splitting up, but the logo doesn't show up. I think it is because that {_all} does not contain the right information.
The MainNavigation is rendered this way
<f:render section="MainNavigation" arguments="{menu: mainnavigation, theme: theme}" />
How can I render af section inside another section in TYPO3?
There are no restriction to calls of sections in sections. But you need to provide the neccessary data.
As you wrote your prime section call just got two variables menu and theme, so other variables are not know inside the section, and could not be transfered any further.
You can test your set of variables by inserting this viewhelper call at different lines of your template:
<f:debug titel="identify this call">{_all}</f:debug>
Use the title attribute to provide a unique identifier of this debug code.
You might need to add another variable to your primary call so the infrmation also is available in your MainNavigationLogo section.
I'm working with Prestashop 1.6 and I need to add a checkbox and text field in the order summary page, as shown below.
I'm lost on which hooks to use to do so. These fields should be also shown in the invoice. For the hook of the invoice I believe it is the DisplayPDFInvoice hook, but for the order summary (display and get information) I don't know which hooks to use.
Can you give me some tips? Thanks for any help
You can use hook hookDisplayBeforeShoppingCartBlock to render any content on cart summary page. Don't forget to register this hook to your module.
I have tried using the same and got the results as below:
Code:
public function hookDisplayBeforeShoppingCartBlock()
{
return '<div>Text Area : </div><textarea rows="3" cols="30">This is a text area rendered from hookDisplayBeforeShoppingCartBlock</textarea><br><br><input type="checkbox" name="vehicle" value="Bike">checkbox 1<br><input type="checkbox" name="vehicle" value="Car">checkbox 2';
}
The above code is used just to show an example, you can render any template file from there. As you can see that this hook renders content above cart block so you can use javascript to move it below cart block.