Adding a js script in a CMS page - 1.7.6

[justine123]

Hi,

I've look into this forum and I could not find a concrete way to add a js script in a CMS page.

What I wanted to do is to embed an inline Calendly widget in a cms page. They provide the embed code like this:

 

<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/xxxusernamexxx/15min" style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<!-- Calendly inline widget end -->

 

 

How would I do that? (given that the current text editor won't allow it).

 

 

[justine123]

Hi,

Thank you for the reply.

I would like to know the syntax for the If statement used in Prestashop. I am still new to it and I don't know the page variables that I can use.

I'm planning to put it all in the page.tpl becase the "data-url="https://calendly.com/xxxusernamexxx/15min" in the div part is also removed in the text editor after I hit save.

[fbenoist.com]

Hi,

For optimization issues you should add the file in the "javascript" block instead of the "page_content_container" block.

{block name='javascript_bottom' append}
	<script src="https://assets.calendly.com/assets/external/widget.js"></script>
{/block}

 

[fbenoist.com]

Yes optimization.

The javascript_bottom block is used to put the script at the bottom of the page.

Best for page speed and SEO.

[fbenoist.com]

Il y a 1 heure, ndiaga a dit :

Yes  you   are   right  but  some   code  may  not   work   if you  put the js   after  them.

That's true for badly written javascript code. It then becomes even worse in terms of optimization.

 

[zod]

I prefere the inclusion via block because i could use the same javascript library in more than a single page.
For example, I added Fancybox + a little init code, so, working with some "containers" with class "openfancy" it is a code like this:

{block name='javascript_bottom' append}
  <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
  <script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
  <script>
  document.addEventListener("DOMContentLoaded", function (event) {
   $(".openfancy a").fancybox(); 
  }); 
  </script>
{/block}

Easy and effective.

[Alessandro Manocchi]

On 2/21/2020 at 12:16 PM, ndiaga said:

Hi,

You  can  not  add   a js   code  in  a  description  of  a  CMS  page   you can  add only  the HTML   part:

<div class="calendly-inline-widget" data-url="https://calendly.com/xxxusernamexxx/15min" style="min-width:320px;height:630px;"></div>

And   the  js   calling   add  it  in  the CMS   template  by  editing   the file :   themes/classic/templates/cms/page.tpl   

Before  your  js  code:

{extends file='page.tpl'}

{block name='page_title'}
  {$cms.meta_title}
{/block}

{block name='page_content_container'}
  <section id="content" class="page-content page-cms page-cms-{$cms.id}">

    {block name='cms_content'}
      {$cms.content nofilter}
    {/block}

    {block name='hook_cms_dispute_information'}
      {hook h='displayCMSDisputeInformation'}
    {/block}

    {block name='hook_cms_print_button'}
      {hook h='displayCMSPrintButton'}
    {/block}

  </section>
{/block}

 

After   adding  your  js   code:

{extends file='page.tpl'}

{block name='page_title'}
  {$cms.meta_title}
{/block}

{block name='page_content_container'}

   <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
   
  <section id="content" class="page-content page-cms page-cms-{$cms.id}">

    {block name='cms_content'}
      {$cms.content nofilter}
    {/block}

    {block name='hook_cms_dispute_information'}
      {hook h='displayCMSDisputeInformation'}
    {/block}

    {block name='hook_cms_print_button'}
      {hook h='displayCMSPrintButton'}
    {/block}

  </section>
{/block}

 

Do  you need it  only  for one  CMS  page?

If   yes  you can  use  an   if   condition  using  the  CMS  page id.

I   explain here  how  to  use   a  condition  if  only  one  page  :  https://blog.prestatuts.com/prestashop-1-7-adding-a-js-script-in-a-cms-page/

 

 

 

Hi i have to add a cookiebot script in the body of a specific page (cookie policy page) which is insade a category page, if I add it to page.tpl it works but the cookie list appears also on every other page such as sign in or log in pages. Could you give me a suggestion on how to find the path for a specific content page? This is driving me crazy

[Raffaele49]

Hi Alessandro,
I'm trying to follow your suggestion

 

but I'm continuing to now show Calendly in my page.

What am I continuing to wrong?
Thanks for your feedback,
Raffaele