Change theme depend on body class or cookies

kamioool · 2020-12-28 05:30:42

I looking for soultion.

I use script and try to make the theme in the LiveHelper script update after clicking the button that is responsible for the dark / light mode switch

So there is my code, i know this code is totaly wrong but i have no idea how to solve it now.

[== JavaScript ==]
    // Life Helper init
    var LHCChatOptionsPage = {'height':300,'mobile':false};
    LHCChatOptionsPage.opt = {};
    (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        var referrer = (document.referrer) ? encodeURIComponent(document.referrer.substr(document.referrer.indexOf('://')+1)) : '';
        var location  = (document.location) ? encodeURIComponent(window.location.href.substring(window.location.protocol.length)) : '';
        if (jQuery("body").hasClass('.dark-mode')) {
            po.src = '//www.site.pl/pomoc/index.php/chat/getstatusembed/(theme)/1/(operator)/1/(leaveamessage)/true?r='+referrer+'&l='+location;
        }
        else {
            po.src = '//www.site.pl/pomoc/index.php/chat/getstatusembed/(operator)/1/(leaveamessage)/true?r='+referrer+'&l='+location;
        }
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
    
    
    // Switch dark mode button
    jQuery(document).ready(function(){
        jQuery('.switch').click(function(){
            jQuery(document.body).toggleClass('dark-mode');
            jQuery('.switch').toggleClass('on');
    
        });
    });

Theme argument is /(theme)/<theme_id> so you can just manually write what theme should use. E.g index.php/chat/start/(theme)/2,
but how to update it after script is already initiated?

>>>EDIT:

I modified the code to work with cookies, now wish I had a value added to the "after" variable.[screen][1]

[== JavaScript ==]
    // Switch dark mode button
    
    jQuery(document).ready(function($) {
        $(".switch").click(function() {
            $(".switch").toggleClass("on");
            $("body").toggleClass("dark-mode");
            $.cookie("toggle", $(".switch").hasClass('on'));
        });
    
        if ($.cookie("toggle") == "true") {
            $(".switch").addClass("on");
            $("body").addClass("dark-mode");
        }
    });
    value_or_null = (document.cookie.match(/^(?:.*;)?\s*toggle\s*=\s*([^;]+)(?:.*)?$/)||[,null])[1];
    switch(value_or_null) {
        case true:
            var theme = 1;
            break;
        case false:
            var theme = 3;
            break;
    }
    alert(value_or_null)
        var LHCChatOptionsPage = {'height':300,'mobile':false};
        LHCChatOptionsPage.opt = {};
        (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        var referrer = (document.referrer) ? encodeURIComponent(document.referrer.substr(document.referrer.indexOf('://')+1)) : '';
        var location  = (document.location) ? encodeURIComponent(window.location.href.substring(window.location.protocol.length)) : '';
        po.src = '//www.site.pl/pomoc/index.php/chat/getstatusembed/(hide_offline)/true/(theme)/'+theme+'/(leaveamessage)/true?r='+referrer+'&l='+location;
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    
    })();

Last edited by kamioool (2020-12-28 05:31:35)

remdex · 2020-12-28 13:56:47

I would suggest you to use new widget embed code where you can pass theme id by variable just.
https://doc.livehelperchat.com/docs/jav … -arguments

kamioool · 2020-12-28 15:36:41

Hi remdex, thanks for your answer.

I try to initialize the "theme" parameter in new code but it always shows me the default template even though I used "theme: 1"

[== JavaScript ==]

var LHC_API = LHC_API||{};
    LHC_API.args = {mode:'widget',lhc_base_url:'//www.site.pl/pomoc/index.php/',wheight:450,wwidth:350,pheight:520,pwidth:500,leaveamessage:true,theme:1,check_messages:false};
    (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.setAttribute('crossorigin','anonymous'); po.async = true;
        var date = new Date();po.src = '//www.site.pl/pomoc/design/defaulttheme/js/widgetv2/index.js?'+(""+date.getFullYear() + date.getMonth() + date.getDate());
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();

I have been trying to solve this for several days already. Wrrr! Could you give me an example of how to do this based on the cookies variable? $CookieToggle = True / False

Last edited by kamioool (2020-12-28 15:37:10)

remdex · 2020-12-28 15:42:58

You are mixing old widget javascript with new widget parameters...

https://doc.livehelperchat.com/docs/jav … arguments/

remdex · 2020-12-28 15:44:01

After you change new widget theme reload widget as i showed above

kamioool · 2020-12-28 15:58:53

I downloaded this code from the dashboard:

Last edited by kamioool (2020-12-28 17:25:05)

remdex · 2020-12-28 16:23:05

I don't know what you are doing but if you try these codes with different `theme` you get a different widget. One would be with shadow another one without.

[== Undefined ==]
<script>var LHC_API = LHC_API||{};
LHC_API.args = {mode:'widget',lhc_base_url:'//demo.livehelperchat.com/',wheight:450,theme: 1,wwidth:350,pheight:520,pwidth:500,leaveamessage:true,check_messages:false};
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.setAttribute('crossorigin','anonymous'); po.async = true;
    var date = new Date();po.src = '//demo.livehelperchat.com/design/defaulttheme/js/widgetv2/index.js?'+(""+date.getFullYear() + date.getMonth() + date.getDate());
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Status widget itself can't be reloaded on the fly

[== Undefined ==]
<script>var LHC_API = LHC_API||{};
LHC_API.args = {mode:'widget',lhc_base_url:'//demo.livehelperchat.com/',wheight:450,theme: 2,wwidth:350,pheight:520,pwidth:500,leaveamessage:true,check_messages:false};
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.setAttribute('crossorigin','anonymous'); po.async = true;
    var date = new Date();po.src = '//demo.livehelperchat.com/design/defaulttheme/js/widgetv2/index.js?'+(""+date.getFullYear() + date.getMonth() + date.getDate());
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

But widget content as you see here respects themes.
https://livehelperchat.com/lhcsamples/t … witch.html

So for sure you are missing something smile

kamioool · 2020-12-28 17:34:30

Thanks!

I'm to fool, I found duplicate code elsewhere - it started this event. mad

you're rocking remdex <3, I still have a question
Actually, I am building my website in the localhost environment, LHC is installed on online domain Is it possible to skip CORS somehow so that I can test the code on localhost?

Last edited by kamioool (2020-12-28 17:56:41)

remdex · 2020-12-28 17:59:24

And who forbids you to apply same config as here
https://doc.livehelperchat.com/docs/int … her-domain
https://doc.livehelperchat.com/docs/ngi … ation-tips

kamioool · 2020-12-28 18:13:10

Best and fastest support ever! Thank you VERY MUCH!

<CLOSE_TOPIC>

Announcement

#1 2020-12-28 05:30:42

Change theme depend on body class or cookies

#2 2020-12-28 13:56:47

Re: Change theme depend on body class or cookies

#3 2020-12-28 15:36:41

Re: Change theme depend on body class or cookies

#4 2020-12-28 15:42:58

Re: Change theme depend on body class or cookies

#5 2020-12-28 15:44:01

Re: Change theme depend on body class or cookies

#6 2020-12-28 15:58:53

Re: Change theme depend on body class or cookies

#7 2020-12-28 16:23:05

Re: Change theme depend on body class or cookies

#8 2020-12-28 17:34:30

Re: Change theme depend on body class or cookies

#9 2020-12-28 17:59:24

Re: Change theme depend on body class or cookies

#10 2020-12-28 18:13:10

Re: Change theme depend on body class or cookies

Board footer