Jump to content

Adding a js script in a CMS page - 1.7.6


justine123
 Share

Recommended Posts

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).

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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}

 

  • Thanks 1

Share this post


Link to post
Share on other sites

  • 10 months later...

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.

Share this post


Link to post
Share on other sites

  • 6 months later...
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More