[PS 1.7.7.2] - Add WYSIWYG editor with tinyMCE on Product Controller (hookDisplayAdminProductsMainStepLeftColumnMiddle)

[jmauclair]

Hi guys,

 

I've been digging really deep into Prestashop documentation and all my knowledge but didn't find a way to PROPERLY set a WYSIWYG editor on the product controller, on the informations tab thanks to the hook displayAdminProductsMainStepLeftColumnMiddle.

I've been able to generate a clean wysiwyg textarea with this code :

<hr />
<h2>{l s="Onglets Personnalisés" d="Modules.Mcl_productdescriptionadvanced.Product_admin"}</h2>
<hr />


<div class="summary-description-container">
	<ul class="nav nav-tabs bordered">
		{foreach from=$productTabs item=productTab name='tabList'}
			<li class="nav-item {if $smarty.foreach.tabList.first} active {/if}"
				id="tab_{Tabs::getTabName($productTab.id_tab)|replace:' ': '_'|replace:"'":'-'|lower}">
			<a href="#{Tabs::getTabName($productTab.id_tab)|replace:' ': '_'|replace:"'":'-'|lower}" data-toggle="tab"
					class="nav-link description-tab {if $smarty.foreach.tabList.first} active {/if}">{Tabs::getTabName($productTab.id_tab)}</a>
			</li>
		{/foreach}
	</ul>
	<div class="tab-content bordered">
		{foreach from=$productTabs item=productTab}
			<div class="tab-pane panel panel-default {if $smarty.foreach.tabList.first} active {/if}"
				id="{Tabs::getTabName($productTab.id_tab)|replace:' ': '_'|replace:"'":'-'|lower}">
		</div>
		<textarea id="{Tabs::getTabName($productTab.id_tab)|replace:' ': '_'|replace:"'":'-'|lower}"
				class="autoload_rte form-control" counter="1500" aria-hidden="true" placeholder="{l s="Remplissez les informations concernant l'onglet : %s" 
							sprintf=[{Tabs::getTabName($productTab.id_tab)}] d=" Modules.Mcl_productdescriptionadvanced.Product_admin"}"
				style="display: none;">{if $productTab.content != null}{$productTab.content}{/if}</textarea>
		{/foreach}
	</div>
</div>

But as you can see, few things are not being properly done (like the display none on the textarea which should be generated), and moreover, I'm struggling to set the content on my tinyMCE, even with tinyMCE function setContent, as in Smarty I must set script between literal tags and I need to use my smarty vars.

 

The lower and replace functions I'm using are to transform spaces and quotes into _ and -.

 

I saw that is possible to generate tinyMCE field with HelperForm, but when I try to use it through the hook I've got this :

Unable to load template 'file:helpers/form/form.tpl'

 

I've already tried to do : https://devdocs.prestashop.com/1.7/development/components/form/types-reference/formatted-textarea/

But it's not working, as I can't use the FormBuilderInterface in a module context (as what I saw, I can be wrong)

 

Does somebody already faced this issue ? Does anyone know the way to properly generate a tinyMCE textarea in display hook call ?

 

Please don't answer with not open source/free modules that already do this, I know it exists

[Nickz]

I think Zen from the the thirtybees Foum has a working thememaster configutator. 

[jmauclair]

8 minutes ago, Nickz said:

I think Zen from the the thirtybees Foum has a working thememaster configutator. 

Thank you for your answer !

 

Could you provide a link referring to this configurator ?

[Nickz]

3 hours ago, jmauclair said:

Could you provide a link referring to this configurator ?

sure can do:

https://forum.thirtybees.com/topic/5637-how-to-find-a-template-designer-for-thirtybees/#comment-43350

[jmauclair]

17 hours ago, Nickz said:

sure can do:

https://forum.thirtybees.com/topic/5637-how-to-find-a-template-designer-for-thirtybees/#comment-43350

Thanks for your help, I’ll dig into that, as I quickly saw, it doesn’t seems to fully answer my question but I can be wrong.

If I find my way thanks to this I’ll surely share this

 

EDIT : I've been looking further, and it doesn't help me about what I'm searching for.

Maybe I was missing some specifications, I just need to generate a textarea that will work with tinyMCE, and I want it to be display in the hook displayAdminProductsMainStepLeftColumnMiddle, so I don't need to generate a form but just a field, that will be called in this hook.

What is done in this module is in order to generate textarea in configuration page of a Module, not in a hook, so this is not the same thing.

But thanks for your help.

 

If somebody have others purposes, I'll look

Edited June 19, 2022 by jmauclair (see edit history)

[knacky]

 

[jmauclair]

9 hours ago, knacky said:

 

Thank you for sharing this, I've already seen it, as autload_rte class is working for me, I've didn't had to use tinysetup

By the way, this post is quiet outdated (2013) so that's not about PS 1.7.7.2 and that doesn't work on 1.7.7.2 (already tested)

Edited June 20, 2022 by jmauclair (see edit history)

[jmauclair]

After searching through all the Prestashop files, I've found the file : essentials.html.twig (BASE_PS_DIR\src\PrestaShopBundle\Resources\views\Admin\Product\ProductPage\Panels).

So, what would be perfect would to be able to add a tab with the description and short description tabs, what I've done thanks to cusom hooks like that :

            <div class="summary-description-container">
              <ul class="nav nav-tabs bordered">
                <li id="tab_description_short" class="nav-item"><a href="#description_short" data-toggle="tab" class="nav-link description-tab active">{{ 'Summary'|trans({}, 'Admin.Catalog.Feature') }}</a></li>
                <li id="tab_description" class="nav-item"><a href="#description" data-toggle="tab" class="nav-link description-tab">{{ 'Description'|trans({}, 'Admin.Global') }}</a></li>
                {{ renderhook('displayDescriptionAdvancedTabsHeader', { 'id_product': productId }) }}
              </ul>

              <div class="tab-content bordered">
                <div class="tab-pane panel panel-default active" id="description_short">
                  {{ form_widget(formShortDescription) }}
                </div>
                <div class="tab-pane panel panel-default " id="description">
                  {{ form_widget(formDescription) }}
                </div>
                {{ renderhook('displayDescriptionAdvancedTabsContent', { 'id_product': productId }) }}
              </div>
            </div>

Where descriptionAdvanced are customs hooks.

That calls these templates :

tabsHeader.tpl

{foreach from=$productTabs item=productTab key=tabName}
    <li id="tab_{$tabName}" class="nav-item"><a href="#{$tabName}" data-toggle="tab"
            class="nav-link description-tab">{l s="%s" sprintf=[$productTab.fullName]}</a></li>
{/foreach}

And tabsContent.tpl

{foreach from=$productTabs item=productTab key=tabName}
    <div class="tab-pane panel panel-default " id="{$tabName}">
        <textarea id="{$tabName}" class="autoload_rte form-control">{if $productTab.isContent}{$productTab.content}{/if}</textarea>
    </div>
{/foreach}

Now what I need is being able to generate my tabs content like : {{ form_widget(formCustomTab) }}

But I don't know twig templates at all, I've been looking through PS code, but I don't really understand with {{ form_widget(formDescription) }} where formDescritption is set, where the form_view is set ? How to generate a similar form view ? 

If there is any twig expert that could help, I would be really thankfull

Edited June 20, 2022 by jmauclair
add informations (see edit history)

[knacky]

No TWIG adjustment required.

30 minutes of work (PS 1.7.8.5) 😉

It's done exactly as instructed, to which I sent you a link.

 

Custom module:

 

Hook:

 

Product page:

 

[jmauclair]

On 6/20/2022 at 3:57 PM, knacky said:

No TWIG adjustment required.

30 minutes of work (PS 1.7.8.5) 😉

It's done exactly as instructed, to which I sent you a link.

 

Custom module:

 

Hook:

 

Product page:

 

I'm digging out this topic because seems to worked perfectly and then I found out that when I click on save on my product page, the content in my custom tinymce textarea is not save, it only work when I click  times on save.

 

I've tried this :

				$(document).on('submit','form',function(){
					console.log("send")
					var textAreas = document.querySelectorAll('textarea[name^=cust_]')
					textAreas.forEach(function(element){
						console.log(element.attr('name'));
						window.parent.tinymce.triggerSave();
					})
				})

But it only works when the page is not fully loaded, when it's fully loaded, nothing

 

How did you fix this issue ? Did find a way to set triggerSave with an other event or you didn't have to do it ?