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 change attribute dropdown type to multi-select in Magento 2?

Short Answer:

Not possible via Magento2 Admin Backend.

Solution:

You need to update eav_attribute table and edit information about backend_source, frontend_input etc.

Simple query for that is:

UPDATE `eav_attribute` SET `backend_model`="Magento\\Eav\\Model\\Entity\\Attribute\\Backend\\ArrayBackend", `backend_type`="varchar", `frontend_input`="multiselect", `source_model`=NULL WHERE `attribute_id`=YOUR_ATTRIBUTE_ID_INTEGER LIMIT 1

Replace YOUR_ATTRIBUTE_ID_INTEGER with your attribute_id like 355

Reference:

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

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 wipe all the tables and data in MySQL? Clean whole database

SET FOREIGN_KEY_CHECKS = 0;
SET GROUP_CONCAT_MAX_LEN=32768;
SET @tables = NULL;
SELECT GROUP_CONCAT('`', table_name, '`') INTO @tables
  FROM information_schema.tables
  WHERE table_schema = (SELECT DATABASE());
SELECT IFNULL(@tables,'dummy') INTO @tables;
 
SET @tables = CONCAT('DROP TABLE IF EXISTS ', @tables);
PREPARE stmt FROM @tables;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;
SET FOREIGN_KEY_CHECKS = 1;

Will not work via phpmyadmin or any script. this has to be run in cmd/terminal

Quick Command

wget https://gist.githubusercontent.com/harshvardhanmalpani/e670a8de7aa81673364dd48f125cb9ac/raw/ce04b319bf1594d148d3346e1474119fe1cd1b3f/flushdb.sql

mysql -hYOUR_DATABASE_HOSTNAME -uYOUR_DATABASE_USER -p YOUR_DATABASE_NAME < flushdb.sql

Source:
https://gist.github.com/harshvardhanmalpani/e670a8de7aa81673364dd48f125cb9ac

Sublime Text – License Keys how to get paid version for free?

I do NOT endorse this method. But if you want to try the full featured Sublime Text for a while before purchasing, They provide 30 day trial for FREE.

If you want to purchase it, please do. It is worth it. https://www.sublimetext.com/buy

Here is the free key – CRACK

https://mpst.in/bAB

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;}

Sort keys of an array based on order of values in another array – PHP

$a=array(56,7,6,8,5,34);
$b=array(
array(6,"34er34",44),
array(8,"34d34",44),
array(7,"343th4",44),
array(34,"343d4",44),
array(56,"3434",44),
array(5,"343gh4",44));
$d=array_column($b,0);
var_dump($d);
$g=[];
foreach($a as $c)
{
  $f=array_search($c,$d);
  if($f!==false)
      $g[]=$b[$f];
 }
var_export($g);