[free] HTML block module

[vekia 8,812]

topic permanently closed

please continue discussion in original thread here:

 

https://www.prestashop.com/forums/topic/189039-module-html-box-for-free/

 

 

 

 

Prestashop HTML block module

 

--- for free ---

works with: 1.2.x + 1.3.x. + 1.4.x + 1.5.x + 1.6.x + 1.7.x

This module is great tool for adding to your shop widgets created by other websites like twitter, facebook, pinterest, allegro, etc. Main feature in this module is an ability to add the "client side" code such like HTML, javascript, css for any place you want.

 

 

 

 

 

download file:

  htmlbox.zip   23.58KB   9222 downloads

 

 

 

 

 

 

[Dead2010 5]

hello, okay vekia?

You can upgrade to work well in prestashop 1.4.10?

 

already uninstalled, installed again and when active the html code and deactivate the code is different. can you see it?

[vekia 8,812]

i think that this is issue in 1.4

 

thanks for information, im going to check this on 1.4

[Dead2010 5]

ok, I look forward

greetings

[ariffaisal 0]

that's it, thanks dude.

[Dead2010 5]

hello vekia, you can by adding a code, add a block?

see the picture

greetings

Edited August 2, 2013 by Speed2010

[vekia 8,812]

you can create a block, in this case you have to paste correct code - in this case - newsletter block code

[Dead2010 5]

hello, Module Adds SotEW's, have an option to choose if I want to block it or not, you can not do the same? I already have this module busy.

 

greetings

[vekia 8,812]

html block allows you to paste the block code. In this case you can copy the code of the block and paste it into the html block

just copy the code from front-end (right click > show source)

[Dead2010 5]

I do not understand much of it, if you did an update for there to choose the field, it was great, I can make a donation for it.

greetings

[vekia 8,812]

i really appreciate your suggestions, but unfortunately i will not update this addon for feature you mentioned, because idea of this module is a bit different.

with this addon you have to create / use own code. It mean, that you can create any block you want (newsletter too)

 

i can show you the piece of the code, just give me url to the page where the newsletter block appear which you want

[Dead2010 5]

ok, but it was only for those who wanted to choose whether to block or not, but you do know.

 

My website testing

http://clonewebsite.ra-informatica.pt/

 

which code for adding the block?

[vekia 8,812]

you have to use this code:

<div id="newsletter_block_left" class="block">
<h4>Newsletter</h4>
<div class="block_content">
  <form action="http://clonewebsite.ra-informatica.pt/" method="post">
  <p><input type="text" name="email" size="18" value="Seu e-mail" onfocus="javascript:if(this.value=='Seu e-mail')this.value='';" onblur="javascript:if(this.value=='')this.value='Seu e-mail';"></p>
  <p>
   <select name="action">
 <option value="0">Subscrever</option>
 <option value="1">Anular subscrição</option>
   </select>
   <input type="submit" value="ok" class="button_mini" name="submitNewsletter">
  </p>
 </form>
</div>
</div>

[Dead2010 5]

hello, I must be not to understand, is that I wanted to be alone module puse block will return for an option for us to choose whether we want to or not.

see in the picture what I want.

 

us to put the html code in your module, we have a choice to choose if we want to add the block or not.

greetings

Edited August 2, 2013 by Speed2010

[vekia 8,812]

hello

i still don't understand what you exactly expect

sry

[Dead2010 5]

hello, i want your module to insert a html code, which had an option to choose if you want to block or not?

already understand?

see image

 

With block(Nº1) and no block (Nº2)

greetings

Edited August 4, 2013 by Speed2010

[vekia 8,812]

design of the each block depends on styles that you use in the code you pasted

[Dead2010 5]

hello, is not it, you could by an option to choose.

for example, in this module, I choose if I want to block or not.

 

no need for the code to add the block, just by the arrow display block.

greetings

[vekia 8,812]

Have you tried this function with non-default modified template with different css styles? I suppose that no,

...Everything depends on theme that you use. If you use non default theme with different css styles this option will not work as you expect

 

What you see in the block - is what you put in into it. In this case you have to use right css styles, nothing more, and your block will appear like a "block"

[Dead2010 5]

hello, I'm using the theme prestashop_001 not understand what you meant.

I liked that your module had an option to activate the block.

thus it was not necessary to add the code to display the block.

your pro version already does this?

greetings

[vekia 8,812]

what you will see depends on code that you use in the module. There is no option to "display as block" because it will not work in the modified templates (when the template has got different css styles).

 

if you want to display code as block you have to use correct code, with correct CSS styles. because everything depends on your template.

[Dead2010 5]

is a bit strange because I thought it gave the module's Adds SotEW do that, I thought this would also.

and the module paid also does not?

[vekia 8,812]

as i said, this feature will not work for all themes, so this feature isn't possible.

Believe me, it's easier to use own code that use this feature. you can customize each aspect of the code

[Dead2010 5]

I wanted to use this code with a block, you could modify for me to understand how poe?

 

<script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js"></script>

<div id="SkypeButton_Chat_Rui-RA2010_1">

<script type="text/javascript">

Skype.ui({

"name": "chat",

"element": "SkypeButton_Chat_Rui-RA2010_1",

"participants": ["Rui-RA2010"],

"imageSize": 32

});

</script>

</div>

[Dead2010 5]

hello, here, see this, your module is the pro, I wanted it to appear like it is in the picture, when I wanted to activate.

[vekia 8,812]

in this case you have to use css styles which are related to your theme. i don't know which one you use, so i have to check it, then i will able to give you a correct code, you will see how easy it is

 

you're talking about http://ra-informatica.pt/ ?

[vekia 8,812]

take a look below, with this code you can create blocks like you've got there

<div class="block">
<h4>TITLE OF BLOCK</h4>
<div class="block_content">
CONTEN OF BLOCK HERE
</div>
</div>

[Dead2010 5]

hello, yes.

http://ra-informatica.pt/

greetings

[vekia 8,812]

so please check the code that i pasted above and let me know if this is what you expect

[Dead2010 5]

ok, it worked, tanks.

if I want to add a background image that I put code?

[vekia 8,812]

in this case you have to define the style="" tag with background param for <div> block

[Dead2010 5]

ok, it worked, tanks, only lacked even add it to your module and an option to enable or disable.

if you want to do this I'll make you a donation. always excused by the code. lololo

 

Module paid gives several times on the same side, ex: 2 times and lefthook and 2 times hook right

 

ok, I'll try for the image.

thank you

Edited August 5, 2013 by Speed2010

[vekia 8,812]

thanks for suggestions but i will not add this feature, as i said several posts above - it will not work for everyone, so many of merchatns will be unsatisfied with not working feature

 

best regards

[Dead2010 5]

ok, if you create an img folder inside the module, and put the image there, which code would by? style?

[vekia 8,812]

style="background: url('put here url to the image');"

[Dead2010 5]

did not answer to my question, your paid module, gives several hooks?

 

EX:

2x on the right side

2x left

 

etc?

[Dead2010 5]

style="background: url('put here url to the image');"

 

there

<div class="block">

<h4>TITLE OF BLOCK</h4>

<div class="block_content">

<style="background: url('put here url to the image');"

CONTEN OF BLOCK HERE

</div>

</div>

[vekia 8,812]

yes, you can test it here

http://demo.mypresta.eu/padmin/

login: demo@demo.com

pass: demo1234

 

there

<div class="block">

<h4>TITLE OF BLOCK</h4>

<div class="block_content">

<style="background: url('put here url to the image');"

CONTEN OF BLOCK HERE

</div>

</div>

 

 

no, you have to use it in the <div class="block_content"> or in the <div class="block">

[Dead2010 5]

yes, you can test it here

http://demo.mypresta.eu/padmin/

login: demo@demo.com

pass: demo1234

 

 

 

 

no, you have to use it in the <div class="block_content"> or in the <div class="block">

ok, I'll try.

after your buy if it goes well it replaced the 2 that I have, I am only one.

 

can you show an example of how the code goes down to the picture?...

[vekia 8,812]

<div class="block_content" style="background: url('http://URL-TO-THE-PICTURE');">

[Dead2010 5]

ok, tanks.

I will test your module paid.

greetings

[Dead2010 5]

hello, just saw now, after updating the browser, this code is to deform the website, something wrong?

 

is this code you gave me, just added the rest.

<div class="block">

<h4> TITLE OF BLOCK </ h4>

<div class="block_content">

<script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js"> </ script>

<div id="SkypeButton_Chat_Rui-RA2010_1">

<script type="text/javascript">

Skype.ui ({

"name": "chat",

"element": "SkypeButton_Chat_Rui-RA2010_1"

"participants": ["Rui-RA2010"]

"imagesize": 32

});

</ script>

</ div>

</ div>

[vekia 8,812]

you've got there one unclosed DIV

make sure that you use correct code

 

I mean that this block:

<div class="block">

 

hasn't got closing </div> tag

[Dead2010 5]

I'm sorry, can you show an example?

[vekia 8,812]

it is just above, count your <div> blocks and then closing tags </div>,

you will see that you missed one closing </div> tag

just put it at the end of the code.

[Dead2010 5]

I apologize, still do not understand, then you can add it to the code to see the difference?

is this </ div>

 

how have div, I have to close?

if you have 5 div. I have over 5 </ div>?

Edited August 5, 2013 by Speed2010

[vekia 8,812]

it's a basics in the html language

 

if you open <div> block you have to close it </div>

if you open <span> block you have to close it </span>

 

each html tag must be closed.

 

this is your code:

 

<div class="block">

<h4> TITLE OF BLOCK </ h4>

<div class="block_content">

<script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js"> </ script>

<div id="SkypeButton_Chat_Rui-RA2010_1">

<script type="text/javascript">

Skype.ui ({

"name": "chat",

"element": "SkypeButton_Chat_Rui-RA2010_1"

"participants": ["Rui-RA2010"]

"imagesize": 32

});

</ script>

</ div>

</ div>

 

 

where is the closing </div> tag for first red <div> block? you don't have it. so you have to append it to the code.

[Dead2010 5]

ok, and then put down? or the end of all?

<div class="block">

<h4> TITLE OF BLOCK </ h4>

</ div>

<div class="block_content">

<script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js"> </ script>

<div id="SkypeButton_Chat_Rui-RA2010_1">

<script type="text/javascript">

Skype.ui ({

"name": "chat",

"element": "SkypeButton_Chat_Rui-RA2010_1"

"participants": ["Rui-RA2010"]

"imagesize": 32

});

</ script>

</ div>

</ div>

</ div>

Edited August 5, 2013 by Speed2010

[vekia 8,812]

that's right :)

[Dead2010 5]

that's right :)

 

1- There

 

<div class="block">

<h4> TITLE OF BLOCK </ h4>

</ div>

<div class="block_content">

<script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js"> </ script>

<div id="SkypeButton_Chat_Rui-RA2010_1">

<script type="text/javascript">

Skype.ui ({

"name": "chat",

"element": "SkypeButton_Chat_Rui-RA2010_1"

"participants": ["Rui-RA2010"]

"imagesize": 32

});

</ script>

</ div>

</ div>

 

or

 

2- there

 

<div class="block">

<h4> TITLE OF BLOCK </ h4>

<div class="block_content">

<script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js"> </ script>

<div id="SkypeButton_Chat_Rui-RA2010_1">

<script type="text/javascript">

Skype.ui ({

"name": "chat",

"element": "SkypeButton_Chat_Rui-RA2010_1"

"participants": ["Rui-RA2010"]

"imagesize": 32

});

</ script>

</ div>

</ div>

</ div>

Edited August 5, 2013 by Speed2010

[vekia 8,812]

second one is correct:

<div class="block">
<h4> TITLE OF BLOCK </ h4>
<div class="block_content">
<script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js"> </ script>
<div id="SkypeButton_Chat_Rui-RA2010_1">
<script type="text/javascript">
Skype.ui ({
"name": "chat",
"element": "SkypeButton_Chat_Rui-RA2010_1"
"participants": ["Rui-RA2010"]
"imagesize": 32
});
</ script>
</ div>
</ div>
</ div>

[Dead2010 5]

second one is correct:

<div class="block">
<h4> TITLE OF BLOCK </ h4>
<div class="block_content">
<script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js"> </ script>
<div id="SkypeButton_Chat_Rui-RA2010_1">
<script type="text/javascript">
Skype.ui ({
"name": "chat",
"element": "SkypeButton_Chat_Rui-RA2010_1"
"participants": ["Rui-RA2010"]
"imagesize": 32
});
</ script>
</ div>
</ div>
</ div>

 

ok, tanks

[Dead2010 5]

hello, I am not able to add the image, I'm with your module htmlpro.

the code is like this, right?

<div class="block_content" style="background: url('clonewebsite.ra-informatica.pt/modules/htmlboxpro/img/skype/atendimento_online.jp');">

Edited February 19, 2014 by Speed2010

[vekia 8,812]

you've got there:

http://clonewebsite@ra-informatica.pt/modules/htmlboxpro/img/skype/atendimento_online.jp

 

you should change it to:

http://clonewebsite.ra-informatica.pt/modules/htmlboxpro/img/skype/atendimento_online.jpg

[Dead2010 5]

2 images now appears, why?

already now the code to center the image, can you tell?

Edited August 5, 2013 by Speed2010

[vekia 8,812]

you used is as a background

you can use it as an image instead a background:

 

try with this code:

<img src="http://clonewebsite.ra-informatica.pt/modules/htmlboxpro/img/skype/atendimento_online.jpg" />

[Dead2010 5]

but I put this code in the same place of the other?

can you give example?

Edited August 5, 2013 by Speed2010

[vekia 8,812]

here is the example of the full code:

 

<div class="block">
<h4> TITLE OF BLOCK </ h4>
<div class="block_content">
<img src="http://clonewebsite.ra-informatica.pt/modules/htmlboxpro/img/skype/atendimento_online.jpg" />
</ div>
</ div>
</ div>

[Dead2010 5]

hello, yes, so you can already. tanks

greetings

[Dead2010 5]

with skype is still no way to do such as msn, do you?

 

customer with msn, opened a window and customers talk vam around and we would get on msn.

skype does not yet, is it?

http://clonewebsite.ra-informatica.pt/

Edited August 5, 2013 by Speed2010

[vekia 8,812]

this is what i see on your website:

 

what you want to change here?

[Dead2010 5]

this is what i see on your website:

 

what you want to change here?

 

hello, yes

change the logo skype up, etc.

[vekia 8,812]

you mean something like this:

 

 

sorry but i don't know what you exactly expect, can you shed some light on this?

[Dead2010 5]

hello, yes, pull up a bit more

I already have a Portuguese translation module for your html pro, you want me to attach here?

[vekia 8,812]

hello

if it is possible i will be grateful

 

this is what you expect:

 

?

[vekia 8,812]

if so, here is the code:

<div class="block">
<h4> TITLE OF BLOCK </ h4>
<div class="block_content" style="position:relative;">
<script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js"> </ script>
<div id="SkypeButton_Chat_Rui-RA2010_1" style="position: absolute; top: 5px; right: -14px;">
<script type="text/javascript">
Skype.ui ({
"name": "chat",
"element": "SkypeButton_Chat_Rui-RA2010_1"
"participants": ["Rui-RA2010"]
"imagesize": 32
});
</ script>
</ div>
</ div>
</ div>

[Dead2010 5]

hello, already added, thanks. Attached here is the translation into Portuguese for your htmlpro module, prestashop translated version v1.4.10

greetings

[vekia 8,812]

thanks for your translation file

if you will have any additional questions - feel free to write

 

best regards

[Dead2010 5]

hello, ok, thanks.

In skype still can not talk without having to add, do you?

with msn, the client talked on my website and I received on msn.

No this feature?

[vekia 8,812]

i don't know how skype chat works, as far as i know you have to use skype software to chat on skype with others

[Dead2010 5]

ok, tanks

[imankikuk 0]

great module.. thank you very much..

[vekia 8,812]

new version released, actual version: 1.4.3

 

new features:

1. update checker
   
2. ability to display block only on secured pages (with ssl - https://)
   

[mariatao 0]

Hey guys, I have added the following code for left column using HTML Box, but nothing showed up. Could anybody help me?

 

<div class="block"> <h4>TITLE OF BLOCK</h4> <div class="block_content"> CONTENT OF BLOCK HERE </div> </div>

 

Thanks

[vekia 8,812]

hello

 

can you share your website url? i will inspect the code.

[mariatao 0]

Hi Vekia,

 

Thank you

http://mateasse.com/store/index.php

[vekia 8,812]

ok, so your html block module is turned on?

btw. your editorial module has got huuuuge picture

[mariatao 0]

Yes, it is installed and I have the option to configure it...

Re the big picture, I was playing around with the other HTML Home Editor...

[vekia 8,812]

okay, so when you open html box module page, on the left hand side you've got places where you want to display code.

can you for test purposes select "HOME" and in the right hand block (where is place to insert the code) just use "<h1>TEST</h1>"

[BWT 27]

Vekia you have the patience of a saint! Great mod for adding snippets thanks!

[vekia 8,812]

new version released!  (1.4.4)

i added feature to display html block only on homepage

[vekia 8,812]

module updated! version 1.4.5 released

 

fixed problems with:

- appearing of block in old prestashop 1.3.x (now it works once again!)

- appearing of notification about undefined index htmlbox_ssl (in back office only)

 

 

enjoy!

[swiatmar 0]

Somehow it doesn't work right with my site. The google webfonts work only on home page. but on others don't.

www.biq-shop.com/buy

any one knows what could be the problem?

thanks

[vekia 8,812]

make sure that in module configuraiton page option "homepage only" is unchecked

[kkoci 1]

Hi, looks awesome, but i don't have any page of configuration, just see module isntalled, without that option, i'm using prestashop 1.5.6.0

[vekia 8,812]

module is enabled? try to reinstall it,

what ps version you use?

[kkoci 1]

Yes, it is enabled, prestashop 1.5.6.0

[kkoci 1]

Done, had to reinstall it, btw how could i add more than just one block?

Edited November 17, 2013 by kkoci

[vekia 8,812]

this module allows to use only one Hook from the list of 6 available hooks.

[kkoci 1]

Mmmm okay, gonna look for a multi hook module then, thank you very much!

[kkoci 1]

Or can i add those hooks in module code?

[coopa 3]

Hello,

 

Thank you for this really usefull free module that seems to work great on my 1.5.6 with clean zenism template except a little bug :

when saving parameters, it adds \ before any quote or double quote.

That's not a big deal when just on text but for urls in <a href : "myurl.com">, it creates 404 errors linking to \"myurl.com\" and after some changes saved, it becomes : \\\\"myurl.com\\\\"

 

strange isnt'it ?

Edited November 22, 2013 by coopa

[Niller 0]

Hey is it possible to hook the module so i can put cards etc here?

Edited November 22, 2013 by Niller

[vekia 8,812]

Hello,

 

Thank you for this really usefull free module that seems to work great on my 1.5.6 with clean zenism template except a little bug :

when saving parameters, it adds \ before any quote or double quote.

That's not a big deal when just on text but for urls in <a href : "myurl.com">, it creates 404 errors linking to \"myurl.com\" and after some changes saved, it becomes : \\\\"myurl.com\\\\"

 

strange isnt'it ?

 

your host use magic quotes, and it is deprecated long time ago, this probably causing your problems.

[vekia 8,812]

I can't find where the error text is being output from yet. 

can you say something more about that please?

[vekia 8,812]

new version released!

added feature to modify html code in tinymce editor

[vekia 8,812]

new version released!

module is now in 1.4.7 version, i added:

- prestashop 1.3.x version fix, now tinyMCE rich text editor works also in this PS engine

- buttons to switch editor type also works in 1.3.x now

- changed button to switch editor type

- fixed problems with escaping strings in database

[rkoba 0]

(this message translated in Google)

hi

help me please

is the code:

 

<!-- I.UA counter --><a href="http://www.i.ua/" target="_blank" onclick="this.href='http://i.ua/r.php?175035';" title="Rated by I.UA">

<script type="text/javascript" language="javascript"><!--

iS='<img src="'+(window.location.protocol=='https:'?'https':'http')+

 

iD=document;if(!iD.cookie)iD.cookie="b=b; path=/";if(iD.cookie)iS+='&c1';

iS+='&d'+(screen.colorDepth?screen.colorDepth:screen.pixelDepth)

+"&w"+screen.width+'&h'+screen.height;

iT=iR=iD.referrer.replace(iP=/^[a-z]*:\/\//,'');iH=window.location.href.replace(iP,'');

((iI=iT.indexOf('/'))!=-1)?(iT=iT.substring(0,iI)):(iI=iT.length);

if(iT!=iH.substring(0,iI))iS+='&f'+escape(iR);

iS+='&r'+escape(iH);

iD.write(iS+'" border="0" width="88" height="19" />');

//--></script></a><!-- End of I.UA counter -->

 

if I just insert a *. html - works in the browser get:

 

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>

</style>

</head>

<body>

<a title="Rated by I.UA" onclick="this.href='http://i.ua/r.php?175035';" href="http://www.i.ua/" target="_blank">

<script language="javascript" type="text/javascript"><!--

iS='<img src="'+(window.location.protocol=='https:'?'https':'http')+

 

iD=document;if(!iD.cookie)iD.cookie="b=b; path=/";if(iD.cookie)iS+='&c1';

iS+='&d'+(screen.colorDepth?screen.colorDepth:screen.pixelDepth)

+"&w"+screen.width+'&h'+screen.height;

iT=iR=iD.referrer.replace(iP=/^[a-z]*:\/\//,'');iH=window.location.href.replace(iP,'');

((iI=iT.indexOf('/'))!=-1)?(iT=iT.substring(0,iI)):(iI=iT.length);

if(iT!=iH.substring(0,iI))iS+='&f'+escape(iR);

iS+='&r'+escape(iH);

iD.write(iS+'" border="0" width="88" height="19" />');

//--></script>

<img width="88" height="19" src="http://r.i.ua/s?u175035&p263&n0.48587971801478963&c1&d24&w1366&h768&rlocalhost%3A8080/i_ua.html" border="0">

</a><!-- End of I.UA counter -->

</body>

</html>

 

insert in the block: get the following code in the browser:

 

<div> 

<a title="Rated by I.UA" onclick="this.href='http://i.ua/r.php?175035';" href="http://www.i.ua/" target="_blank">

<script language="javascript" type="text/javascript">

/*<![CDATA[*/iS='<img src="'+(window.location.protocol=='https:'?'https':'http')

 path=/";if(iD.cookie)iS+='&c1'; iS+='&d'+(screen.colorDepth?screen.colorDepth:screen.pixelDepth) 

+"&w"+screen.width+'&h'+screen.height;

iH=window.location.href.replace(iP,'');

 ((iI=iT.indexOf('/'))!=-1)?(iT=iT.substring(0,iI)):(iI=iT.length); 

if(iT!=iH.substring(0,iI))iS+='&f'+escape(iR); iS+='&r'+escape(iH); 

iD.write(iS+'" border="0" width="88" height="19" />');/*]]>*/

</script>

</a>

</div>

 

how to insert this code into htmlbox?

Edited January 9, 2014 by rkoba

[vekia 8,812]

add your code and don't turn on rich text editor

if you want to add scripts, just use simple textarea.