Category: Scripts

How to add Facebook Messenger for live chat on your website?

How to add facebook messenger in website so that users can chat live to your page?

Requirements:

  1. Page ID – you need to know what is your page id
  2. Whitelisted Domain – you need to add website on which you want show widget in your page’s whitelist
  3. Access to add/edit code in your website

1 – Getting Page ID

Go to your page, click on about, scroll down a bit and you will see Page ID

The url will look like https://www.facebook.com/pg/YOURPAGENAME/about/?ref=page_internal

The page id will look like

Alternatively, you can use tools like Find My Facebook ID – https://findmyfbid.com/

2 – Whitelisting your domain

There are 2 ways to do this, A and B both mentioned below

A) For Page Admins, the Messenger Platform also provides an easy setup tool for customizing your customer chat plugin. To use the setup tool, do the following:

  1. Go to Page Settings > Messenger Platform
  2. In the ‘Customer Chat Plugin’ section, click the ‘Set Up’ Button.

The url will look like https://www.facebook.com/YOURPAGEUSERNAME/settings/?tab=messenger_platform

OR

B) Go to Page Settings > Messenger Platform and Jump to Whitelisted Domains section

whitelist your website url

3 – Add Code in your website

Replace PAGEID with your page id obtained in step 1

HTML CODE (includes js code also)

<div id="fb-root"></div>
<div class="fb-customerchat" attribution="setup_tool" page_id="PAGEID" logged_in_greeting="Hi! How can I help you?" greeting_dialog_display="hide" logged_out_greeting="Hi! How can I help you?" theme_color="#0084ff">
</div>
<script>
  window.fbAsyncInit = function() {FB.init({xfbml: true,
version: 'v4.0'});};
(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Customization Notes:

Add or edit these common attribute value pairs

greeting_dialog_display="hide" 

theme_color="#0084ff"

Details about customization: https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#customization

References:

https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin

How to disable products in Magento2 which dont have any gallery image?

UPDATE `catalog_product_entity_int` SET `value`=2 where `entity_id` in (SELECT a.`entity_id` FROM `catalog_product_entity` AS a LEFT JOIN `catalog_product_entity_media_gallery_value` AS b ON a.entity_id = b.entity_id LEFT JOIN `catalog_product_entity_media_gallery` AS c ON b.value_id = c.value_id WHERE c.value IS NULL) and `attribute_id` = 96

It is SQL query

Assumption:

value=2 means disable and value=1 means enable

attribute_id=96 means “status” attribute

References:

https://gist.github.com/tegansnyder/8464261#gistcomment-2910808

https://magento.stackexchange.com/a/83033/32283

How to batch edit multiple images to make square sized pictures with original image in center using php imagejpeg?

<?php
// WORKS FOR JPEG IMAGES ONLY. FOR PNG, change function names
// also create a folder named "out" in the $datadir folder
///only 4 lines to be edited
//1. dir in which your image files are present
$datadir="J:/dgcert/";
//2. Expected min. Width of the output file
$_outw=840;
//3. Expected min. Height of the output file
$_outh=840;
//4. output folder (inside datadir)
$outfolder= '/out/';
//5. force final size -- -- If set to 1/true then line 2 and 3 will become max sizes of output image
// TO BE DONE IN FUTURE . does not work as of now
$forcesize=0;
////// no more edits needed
$files=array_diff(scandir($datadir),array(".",".."));
foreach ($files as $file)
{
	if(is_file($datadir.'/'.$file)){		
$outw=$_outw;
$outh=$_outh;
$mugl_im= imagecreatefromjpeg($datadir.$file);
list($thiswidth, $thisheight)= getimagesize($datadir.$file);
if($outw<$thiswidth) $outw=$thiswidth;
if($outh<$thisheight) $outh=$thisheight;
if($outw<$outh)$outw=$outh;
if($outh<$outw)$outh=$outw;
//echo $width . $height;exit;
$thumb = imagecreatetruecolor($outw, $outh);
//white color rgb
$bg = imagecolorallocate ( $thumb, 255, 255, 255 );
imagefilledrectangle($thumb,0,0,$outw,$outh,$bg);
imagecopyresized($thumb,$mugl_im,ceil(($outw-$thiswidth)/2),ceil(($outh-$thisheight)/2),0,0,$thiswidth,$thisheight,$thiswidth,$thisheight);

imagejpeg($thumb,$datadir.$outfolder.$file);
imagedestroy($thumb);
imagedestroy($mugl_im);
	}
}

?>

How to track qty changes in cart?

This is not CMS or software specific. Can be used for shopify, magento, wordpress or any other cart page

Assumption:
All the cart items have an input field for quantity in case they want to change qty for any item

Assumption:
All those input fields can be selected using queryselector. Either they have common name attribute or a common class.

Purpose:
We want to change class of update button to show that he has to press update button because quantities have been altered.

So lets get started:

js code:

$(document).ready(function($){
//please change query selector for qty inputs in line 3 and 5
    var ini_values = $("input[name='updates[]']").map(function(){return $(this).val();}).get();
    $(".quantity input").change(function(){
      let new_values = $("input[name='updates[]']").map(function(){return $(this).val();}).get();
      if(JSON.stringify(ini_values)!=JSON.stringify(new_values)) 
      { //change selector for update button
           $("#update-cart").addClass("pressme"); }
    else {
    $("#update-cart").removeClass("pressme");}
    });
  });

css code if needed

.pressme{background: white !important;
    border-color: #109ff6 !important;
  color: black !important;
  animation: blink 1s linear infinite;}
@keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}

Reference:

https://stackoverflow.com/a/24503913/2229148

How to add qty plus minus buttons in shopify?

Sorry this is not a detailed description but a summary with all code

Add available quantities first – as shown in this article – How to show stock quantities in all variants of shopify

^The above part is utmost necessary. because the following functions use previous js variables.

So here we go. Good Luck!!

javascript on the product page

<script>
  $(document).ready(function($){
       
    var  $j=new jQuery.noConflict();
    var qtyinput=$j("#quantity");
    var qtyplus=$j("#qtyplus");
    var maxallowed=parseInt($j(qtyinput).attr('max'));
    var qtyminus=$j("#qtyminus");
      var qtyvalue=parseInt($j(qtyinput).val());
    setTimeout(function(){$j(qtyminus).removeClass("hidden");
    $j(qtyplus).removeClass("hidden");
    },8000);
    $j(qtyminus).click(function($){
      qtyvalue=parseInt($j(qtyinput).val());
      maxallowed=parseInt($j(qtyinput).attr('max'));
      if(qtyvalue<2){checkFreeze(); return;}
       $j(qtyinput).val(qtyvalue-1);
                checkFreeze();    });
    $j(qtyplus).click(function($){
      qtyvalue=parseInt($j(qtyinput).val());
      maxallowed=parseInt($j(qtyinput).attr('max'));
      //    console.log(qtyvalue + " -- - -" + maxallowed);
      if(maxallowed<=qtyvalue){
        checkFreeze(); return;}
    $j(qtyinput).val(qtyvalue+1);
           checkFreeze();         });
  
  });
        </script>

html tags on product page. make sure you add these AROUND quantity input

<a id=qtyminus class="freeze fa fa-minus hidden"></a>
<input class="select-on-focus" min=1 type="text" size="3" id="quantity" name="quantity" value="1" {% if issingle %}max="{{ current_variant.inventory_quantity }}" {% endif; %}/>
<a id=qtyplus class="{% if current_variant.inventory_quantity==1 %}freeze {% endif; %}fa fa-plus hidden"></a>

javascript function inside your theme.js. Reason: so that this gets loaded aka defined before updateSku is called()

function checkFreeze(){
    $j=new jQuery.noConflict();
    var qtyinput=$j("#quantity");
    var qtyplus=$j("#qtyplus");
    var maxallowed=parseInt($j(qtyinput).attr('max'));
    var qtyminus=$j("#qtyminus");
      var qtyvalue=parseInt($j(qtyinput).val());
  //alert("max is "+maxallowed);
      if(maxallowed==0 || maxallowed===undefined){        
             $j(qtyplus,qtyminus).addClass("freeze");
        $j(qtyinput).val(0);
        return;
      }
  qtyvalue=parseInt($j(qtyinput).val());
      if(qtyvalue>=maxallowed){//newval=1;
        $j(qtyinput).val(maxallowed);
             $j(qtyplus).addClass("freeze");  
        }
      else{
        if(qtyvalue<1)
        $j(qtyinput).val(1);
      $j(qtyplus).removeClass("freeze");
      }
  qtyvalue=parseInt($j(qtyinput).val());
      if(qtyvalue>1){
        
      $j(qtyminus).removeClass("freeze");}
      else {
             $j(qtyminus).addClass("freeze");     
                  }
    };

changes in function updatesku. Add these lines inside the function. Make sure you have already followed part1

if(inv_qty[ variant.id ]!==undefined)$("#quantity").attr('max',inv_qty[ variant.id ]);
    else $("#quantity").attr('max',0);
    $(document).ready(function(){checkFreeze();});

After making changes as discussed in part1 and this article, the final updatesku function looks somewhat this


  _.updateSku = function(variant, $container){
    $container.find('.sku .sku__value').html( variant ? variant.sku : '' );
    $container.find('.sku').toggleClass('sku--no-sku', !variant || !variant.sku);
    if(inv_qty[ variant.id ] <1 || inv_qty[ variant.id ]==undefined)$("#stockstatus").html("<p class=bomb>Sold Out!</span></p>");
    else if(inv_qty[ variant.id ] <6)$("#stockstatus").html("<p class=fire>Hurry! Only <span class='variant-inventory'>"+ inv_qty[ variant.id ] + "</span> left in stock.</p>");
    else $("#stockstatus").html("<p class=grass><span class='variant-inventory'>"+ inv_qty[ variant.id ] + "</span> available in stock.</p>");
  if(inv_qty[ variant.id ]!==undefined)$("#quantity").attr('max',inv_qty[ variant.id ]);
    else $("#quantity").attr('max',0);
    $(document).ready(function(){checkFreeze();});
  }

CSS – can be added in custom.css

#qtydiv a{border: 1px solid #777;
    border-radius: 3px;
    font-size: 16px;
    padding: 0;
    line-height: 30px;
    width: 30px;
    background: #efefef;
    color: #444;
    height: 30px;
    vertical-align: baseline;
    text-align: center;
    cursor: pointer;
  margin:0 5px;}
#qtydiv a.freeze{cursor:not-allowed;
  border: 1px solid #eee;
    color: #bcbcbc;}

How to reverse the ids in a mysql table column without breaking primary key constraint?

Let me explain the problem scenario: Let us assume we have a table with 4 columns in it out of which 1 is PRIMARY column and rest 3 contain some data.

What we want to do is to reverse the primary key IDs for that data keeping the rest of data intact. It is like shifting the first row to end and moving last row to starting.

Initial Data

idnameemailanything
1jacobwhateverhow to reverse
3nathanwhosoeverisnathanids in mysql table column
4jagmohanidontknowjagmohanwithout breaking
8monicaiamsexyprimary key constraint
9batmanidontexistinrealworldi am batman

Data after update

idnameemailanything
9jacobwhatever how to reverse
8nathanwhosoeverisnathan ids in mysql table column
4jagmohanidontknowjagmohan without breaking
3monicaiamsexy primary key constraint
1batman idontexistinrealworld i am batman

Dude, you are just reversing the column, what is so tough in this?

So, this seems simple to reverse an array if isolated by key “id“. But you have to understand that this column is the primary key. So if you run a command to change id for “jacob” to “9“. It will give you error: “Duplicate entry for id 9“

So here is my proposed solution, I start with pair of first and last row and then swap them. Then swap second and second last row. and So on…

If total rows are odd, we will be left with 1 row which does not need correction because it will already be the middle row.

If total rows are even, we would swap middle two rows too.

Here is my solution in PHP

$possible_group_id="3";
$ai=12720; //can be any high int which does not exist in column `id` yet
$q="select id,email from table_name where `possible_group_id`=$possible_group_id order by id asc";
$r=mysqli_query($f,$q);
$row_collection=[];
$ct=[];
while($row=mysqli_fetch_row($r))
{
    $row_collection[]=$row;
    $ct[]=$row[0];
}
$pt=array_reverse($ct);
$size=count($row_collection);
for($i=0;$i<$size;$i++)
{
    $row_collection[$i][2]=$pt[$i];
}
echo "start transaction;<br>";
foreach($row_collection as $k=>$v)
{    
    if($k < floor($size/2)){
    echo 'UPDATE `table_name` SET `id`='.$ai.' WHERE `email`="'.$row_collection[$size-$k-1][1].'";<br>';
    echo 'UPDATE `table_name` SET `id`='.$v[2].' WHERE `email`="'.$v[1].'";<br>';
    echo 'UPDATE `table_name` SET `id`='.$row_collection[$k][0].' WHERE `email`="'.$row_collection[$size-$k-1][1].'";<br>';}
    else break;
}
echo "commit;<br>";

It would output this:

start transaction;
UPDATE `table_name` SET `id`=12720 WHERE `email`="idontexistinrealworld ";
UPDATE `table_name` SET `id`=9 WHERE `email`="whatever";
UPDATE `table_name` SET `id`=1 WHERE `email`="idontexistinrealworld ";
UPDATE `table_name` SET `id`=12720 WHERE `email`="iamsexy";
UPDATE `table_name` SET `id`=8 WHERE `email`="whosoeverisnathan";
UPDATE `table_name` SET `id`=3 WHERE `email`="iamsexy";
commit;

How to use .htaccess to run all .html files as .php by using PHP handlers in Apache w/o CGI?

If you are not able to find the correct Handler, Simply create a .php file with the following contents:

<?php echo $_SERVER['REDIRECT_HANDLER']; ?>

and run/open this file in browser.

application httpd handler
example application handler

Use this output in .htaccess file

Create a .htaccess file at the root of your website(usually a folder named public_html or htdocs on linux servers) and add this line:

AddType [[THE OUTPUT FROM ABOVE FILE]] .html .htm

Example

AddType application/x-httpd-php70 .html .htm
AddType application/x-httpd-php72 .html .htm
AddType application/x-httpd-php .html .htm

If your are running PHP as CGI then try something like this:

AddHandler application/x-httpd-php .html .htm

Important Note:

If you see blank page or Notice: Undefined index: REDIRECT_HANDLER

Try default in .htaccess

AddHandler application/x-httpd-php .html

If you are godaddy user, try one of these settings:

Options +ExecCGI
AddType application/x-httpd-php .php .html
AddHandler x-httpd-php5 .php .html
AddHandler x-httpd-php7 .php .html
AddHandler x-httpd-php5-cgi .html
AddHandler x-httpd-php7-cgi .html

Reference: https://stackoverflow.com/questions/4687208/using-htaccess-to-make-all-html-pages-to-run-as-php-files/49375772#49375772

How to setup / enable Directory index listing?

When a web browser is pointed to a directory on your website which does not have an index.html file in it, the files in that directory can be listed on a web page.

Directory Lister is a simple PHP script that lists the contents of any web-accessible directory and allows navigating therewithin. Simply upload Directory Lister to any directory and get immediate access to all files and sub-directories under that directory. Directory Lister is written in PHP and distributed under the MIT License.

http://www.directorylister.com

Directory Lister requires PHP 5.3+ to work properly. For more information on PHP, please visit http://www.php.net.

steps to set up directory listing:

  1. Open “public_html” and Upload “index.php” and “resources” folder.
  2. Now go to “resources” directory and rename “default.config.php” to “config.php”.
  3. Also, upload additional files to the same directory as index.php.
  4. All Done!!!

Enable / Disable directory index listing.

enable:

To have the web server produce a list of files for directories, use the below line in your .htaccess  (can be found in FTP -> public_html folder): 

Options +Indexes

disable:

To have an error (403 – Forbidden) returned instead, use this line: 

Options -Indexes

When enabled you can visit your website to see Directory listing.

Hope, this post was helpful.

Thank You.