product Description

[marin4]

hi.

i want to add effects to product description. i add scripts with literal in product.tpl and css in global.css .then in the editor back page i add the html code. all working with this method. but if i want to add something which need libraries example <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> doesnt work. what i can do???

i try to upload to server and then to take it like this 

 <script type="text/javascript"  src="{$js_dir|escape:'html':'UTF-8'}templatetrip/jquery.min.js"></script>

in head tag.but its stuck.

[endriu107]

You need to turn off html purifier and extend your tiny mce editor. Also you can put this script file to autoload directory but it will be load on all pages.

[marin4]

 i want to add effects to products....    

i turn off html purifier and extended  tiny mce editor

 

 i have this code in text editor product description. 

 

<div class="main-container">

  <div class="container cf">

    <!-- Course 1 -->

    <div class="animation-element bounce-up cf">

      <div class="subject development">

        <div class="category-color"></div>

        <div class="icon"><i class="fa fa-cogs"></i></div>

        <div class="header cf">

          <h4 class="date"><i class="fa fa-calendar-o"></i> April, 2015</h4>

          <h4 class="category"><i class="fa fa-folder-o"></i> Development</h4>

        </div>

        <h3 class="title">Fundamentals of C++ Development</h3>

        <div class="content">An introductory class on C++. This course will outline the basic elements r</div>

        <div class="enrole">Enrole</div>

      </div>

    </div>

  </div>

 

 

this code inside header in product.tpl

 

 

{literal}

<script>

 

 

 

var $animation_elements = $('.animation-element');

var $window = $(window);

 

function check_if_in_view() {

  var window_height = $window.height();

  var window_top_position = $window.scrollTop();

  var window_bottom_position = (window_top_position + window_height);

 

  $.each($animation_elements, function() {

    var $element = $(this);

    var element_height = $element.outerHeight();

    var element_top_position = $element.offset().top;

    var element_bottom_position = (element_top_position + element_height);

 

    //check to see if this current container is within viewport

    if ((element_bottom_position >= window_top_position) &&

      (element_top_position <= window_bottom_position)) {

      $element.addClass('in-view');

    } else {

      $element.removeClass('in-view');

    }

  });

}

 

$window.on('scroll resize', check_if_in_view);

$window.trigger('scroll');

 

 

</script>

{/literal}

 

and this code to global.css

 

body {

  font-size: 16px;

  font-family: 'Open Sans', sans-serif;

  font-weight: 400;

  background: #efefef;

  line-height: 170%;

}

 

strong,

b {

  font-weight: 600

}

 

h1,

h2,

h3,

h4,

h5,

h6 {

  font-weight: 300;

  line-height: 150%;

}

 

i.fa {

  color: #333;

}

 

*,

*:before,

*:after {

  box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

}

/*clearfixes*/

 

.cf:before,

.cf:after {

  content: " ";

  display: table;

}

 

.cf:after {

  clear: both;

}

 

.main-container {

  background: #fff;

  max-width: 1000px;

  margin: 25px 25px auto;

  position: relative;

}

 

.container {

  position: relative;

  padding: 25px;

}

 

.container:last-of-type {

  padding-top: 0px;

}

/*animation element*/

 

.animation-element {

  position: relative;

  width: 30%;

  margin: 0% 1.33 2.66% 1.33%;

  float: left;

}

/*3 grid layout*/

 

.animation-element:nth-of-type(3n-2) {

  width: 31.5%;

  margin: 0% 1.375% 2.75% 0%;

  clear: left;

}

 

.animation-element:nth-of-type(3n-1) {

  width: 31.5%;

  margin: 0% 1.375% 2.75% 1.375%;

}

 

.animation-element:nth-of-type(3n-0) {

  width: 31.5%;

  margin: 0% 0% 2.75% 1.375%;

  clear: right;

}

/*bounce up animation for the subject*/

 

.bounce-up .subject {

  opacity: 0;

  -moz-transition: all 700ms ease-out;

  -webkit-transition: all 700ms ease-out;

  -o-transition: all 700ms ease-out;

  transition: all 700ms ease-out;

  -moz-transform: translate3d(0px, 200px, 0px);

  -webkit-transform: translate3d(0px, 200px, 0px);

  -o-transform: translate(0px, 200px);

  -ms-transform: translate(0px, 200px);

  transform: translate3d(0px, 200, 0px);

  -webkit-backface-visibility: hidden;

  -moz-backface-visibility: hidden;

  backface-visibility: hidden;

}

 

.bounce-up.in-view .subject {

  opacity: 1;

  -moz-transform: translate3d(0px, 0px, 0px);

  -webkit-transform: translate3d(0px, 0px, 0px);

  -o-transform: translate(0px, 0px);

  -ms-transform: translate(0px, 0px);

  transform: translate3d(0px, 0px, 0px);

}

 

.subject {

  float: left;

  width: 100%;

  margin: 0% 1.33% 2.66% 1.33%;

  background: #F5F5F5;

  padding: 15px;

  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);

  border: solid 1px #EAEAEA;

}

 

.subject:hover,

.subject:active {

  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);

}

 

.subject .header {

  margin: 8px 0px;

}

 

.subject .header .date,

.subject .header .category {

  margin: 0px;

  clear: none;

  width: 50%;

}

 

.subject .header .date i,

.subject .header .category i {

  margin-right: 5px;

  color: #333;

  -moz-transition: all 400ms linear;

  -webkit-transition: all 400ms linear;

  -o-transition: all 400ms linear;

  transition: all 400ms linear;

}

 

.subject .header .date {

  float: left;

  text-align: left;

}

 

.subject .header .category {

  float: right;

  text-align: right;

}

/*subject icon at top*/

 

.subject .icon {

  position: absolute;

  top: -20px;

  left: 50%;

  left: calc(50% - 20px);

}

 

.subject .icon i {

  width: 40px;

  height: 40px;

  color: rgb(255, 255, 255);

  font-size: 150%;

  border-radius: 50%;

  text-align: center;

  padding: 7px;

}

/*Category color / icon color*/

 

.subject .category-color {

  height: 7px;

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

}

 

.subject.design .category-color,

.subject.design .icon i {

  background: #c0392b;

}

 

.subject.development .category-color,

.subject.development .icon i {

  background: #16a085;

}

 

.subject.photography .category-color,

.subject.photography .icon i {

  background: #2980b9;

}

/*hovering over subject*/

 

.subject.development:hover .header i {

  color: #16a085;

}

 

.subject.design:hover .header i {

  color: #c0392b;

}

 

.subject.photography:hover .header i {

  color: #2980b9;

}

 

.subject .title {

  margin: 12px 0px;

  border-bottom: dashed 1px #ccc;

  padding-bottom: 10px;

}

 

.subject .content {

  margin-bottom: 8px;

}

 

.subject .enrole {

  position: relative;

  color: #333;

  padding: 5px 12px;

  cursor: pointer;

  float: right;

  display: inline-block;

  border: solid 1px #ccc;

  -moz-transition: all 400ms linear;

  -webkit-transition: all 400ms linear;

  -o-transition: all 400ms linear;

  transition: all 400ms linear;

}

 

.subject .enrole:hover,

.subject .enrole:active {

  background: #222;

  color: #fff;

}

/*media queries for small devices*/

 

@media screen and (max-width: 678px) {

  .main-container {

    margin: 20px 15px;

  }

  .animation-element,

  .animation-element:nth-of-type(3n-1),

  .animation-element:nth-of-type(3n-2),

  .animation-element:nth-of-type(3n-0) {

    width: 100%;

    margin: 0px 0px 30px 0px;

  }

  .subject .header .date,

  .subject .header .category {

    width: 100%;

    margin-bottom: 10px;

    text-align: center;

  }

}

 

and its not working..

 

 

 

i have the same code in a custom page in presta shop and works with <script src="http://ajax.googleap...1/jquery.min.js"></script>.

 

but i want to make it in text editor to add effects to products....

if i try to add this script to autoload or in other way , and  other scripts not working inside tpl...

help !!