Presashop - hooks on homepage not working - prestashop

i am creating page: https://voxbook.pl with this template: https://themeforest.net/item/smartbook-book-store-responsive-prestashop-theme/23016421
I have problems with add most modules (not all) to main page and I don't know why.
For example one module posStaticBlock working with hook displayBlockPosition1 and other modules no.
What to check first?

Related

Hook not visible and modules issue

Goodmorning everyone. I'm going crazy behind a very simple new hook.
I just wanted to add the share buttons in the blog articles, I added the hook in theme.yml as shown in the image, I reset the theme and the module but nothing to do, I don't see the hook if I try to insert the module.
Moreover from this insertion onwards I am no longer able to reset or uninstall the module, it returns me the error you see in the image. What am I doing wrong?
img01
img02
Check if your hook exists in the ps_hooks tables if not add it there.
You need to register it in the ps_hooks database,maybe the ideal can be to create a module, and in the installation register the hook and assign a template that shows what you need in the hook.
Prestashop documentation

Implementing Vue on Existing Site Issue

We have an existing website. We'd like to add Vue to areas of the site. Some areas we'd only need a single Vue app to run like a shopping cart. Other areas we'd have multiple of the same component on the page broken up by non Vue items. We'd also like to use single .vue files for our building. I can't for the life of me figure out the best way to do this.
If we use the CLI to build individual apps, we can of course bring those apps in on the pages and where needed. However on the pages where we have the same component separated by non Vue items, it seems we'd need the exact same app multiple times and compiled this doesn't seem to work.
Whats the best route to do this. I'd like to just add a global wrapper to my site, compile a single APP and then house all logic inside components. This breaks down as it replaces my existing content with the app's content when it's a compiled app. I can on the core layout page just instantiate an app and that works, but then I can't use single file components.
Am I missing something. I'd like to use single file components, have a global wrapper on my site with existing content used and components only where needed, AND not have to import each component file one by one.
We cannot use WC builds either as we can't drop IE 11.

Nuxt generated HTML and JavaScript does not work everywhere

I'm using Nuxt to build a component library for use with the various CMSs that my company uses. Basically, I want to use the generated HTML to create reusable widgets for the CMS. The CMSs in question can't use Vue components directly because the client's admin area doesn't play well with Vue (for example, the inline editor in Kentico 12 does not work at all with Vue and our clients require this functionality).
Using Nuxt to build the component library works great as long as the components don't DO anything. However, if I want to create an accordion that has an #click event, it doesn't work when loaded into the CMS. I narrowed down the issue:
A) http://example.com/Accordions/
B) http://example.com/Accordions/index.html
Case A works fine. With Case B, the page loads but none of the scripts work. The events do not fire at all, and I'm getting the following error:
"DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method."
The Accordions component doesn't work on any page that is not http://example.com/Accordions/.
Nuxt is generating the Accordions/index.html page so I'm assuming it's connecting the route with the functionality in the JS, but I'm not sure exactly what the problem is, what to search for or how to fix it. I've been searching for hours. Can anyone help me with this?

Should I use code splitting on every component in vue?

I have an application in vue with typescript. I saw when I use import to load component then I got component-bundle with all the code of component inside.
I wonder if should I do this for every component I want to load, for example: I have app.vue inside I have toolbar.vue and drawer.vue. in my router components I have others vue components.
What I'm afraid that gonna happened is app.js is loaded then components inside the route definition(500k), then I get the toolbar component (1.5mb). and I'll get flashing screen weird.
So, should I use splitting bundle for every component in my app?
You can do code splitting if you are not expecting that particular component to be re-used for every page.
Take for example the Header and Footer component. Since they will be used in almost all of the pages, there is no reason to code split as you want it to be loaded along with the bundle for all pages.
Take for example you have a component where it has a Blog Widget. This component will only load in the /blog page. Therefore, this is a good use case to be using code splitting as you do not need the Blog Widget to be bundled in other pages except in the /blog page.
I can only provide you with a generic answer and using the Header and Footer components are the best way to express different use cases. As for the rest of the components, you have to decide for yourself if it is worth to code split or not.

Custom Hooks in Prestashop 1.7

I try to create a custom Hook for Prestashop 1.7.0.3 for the slider module. I insert:
displaySlider:
- ps_imageslider
on theme.yml file on block “hooks”.
Then insert:
{if $page.page_name == 'index'}
{hook h='displaySlider'}
{/if}
on theme/templates/layouts/layout-both-columns.tpl file between header and section id=”wrapper” tags. According to this article: Custom Hooks in Prestashop 1.7 everything will work ok but the hook is not shown on available hooks when i try to change slider module position from the backend.
I was working today on the same issue.
And i succeed to make it appear, it is probably not the good way and i hope it is not the good way because it is weird.
In your theme.yml you have to set your hook like this :
global_settings:
hooks:
custom_hooks:
- name: displayFooterBefore
title: displayFooterBefore
description: Add a widget area above the footer
And if you wanna see your hook in the position page, you have to switch to a other template and back to your one. (Kind of refresh)
You can also check the incomplete doc from Prestashop :
http://developers.prestashop.com/themes/hooks/index.html
I hope there is a another way to refresh hooks in this page...
So just to be clear. To add a new hook in Prestashop.
In \themes\yourTheme\config\theme.yml you add
custom_hooks:
- name: displayYourCustomHook
- title: displayYourCustomHook
- description: This is a Custom hook
In the same file, in the section modules_to_hook:
displayYourCustomHook:
- ps_moduleIwantoHook
- ps_anotherModuleIwantToHook
Wherever in your .tpl files you want to add your hook:
...
{hook h='displayYourCustomHook'}
...
Finally, from you backoffice, you change from your current theme to a differente one, and then save. After that, you change to the previous theme (the theme you actually want to use), save again and your hook should be visible. This is done with the aim of "refreshing" the hooks that your Prestashop site recognasizes.
This is working in Prestashop 1.7.7
I spent a lot of time looking for why my custom hook did not appear on the front, thanks for the tip.
In order to improve the process, you can use the reset button in appearance > themes & logo.
This avoids having to activate another theme.
I see I voted myself for the accepted solution 2 years ago, but now came up with a much better solution.
According to Prestashop 1.7 hooks doc all you have to do is to register your hook as any other normal and it will be automatically created. So paste something like:
$this->registerHook('displayAtSpecificPlace');
in your module install() and reinstall the module.