Pages

Friday, November 1, 2019

Shopify Newletter Code

{% if section.settings.enable_newsletter %}
                <div class="promo-pop__form">
                    {% form 'customer' %}
                        {{ form.errors | default_errors }}
                        {% if form.posted_successfully? %}
                            {% comment %}Set delay to 0 so form message is visible instanlty{% endcomment %}
                            {%- assign popup_delay = 0 -%}
                            <div class="promo-pop__form-message">
                                <h4 class="promo-pop__form-message__text">{{ 'general.newsletter_form.confirmation' | t }}</h4>
                            </div>
                        {% else %}
                            <div class="promo-pop__fieldset">
                                <input type="hidden" name="contact[tags]" value="newsletter">
                                <input type="email"
                                        name="contact[email]"
                                        id="Email"
                                        class="promo-pop__fieldset-item promo-pop__input"
                                        value="{% if customer %}{{ customer.email }}{% endif %}"
                                        placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}"
                                        autocorrect="off"
                                        autocapitalize="off">
                           
                                <button type="submit" class="c-btn c-btn--primary c-btn--arrow promo-pop__fieldset-item promo-pop__btn" name="commit" id="Subscribe">{{ 'general.newsletter_form.submit' | t }}</button>
                            </div>
                        {% endif %}
                    {% endform %}
                </div>
            {% endif %}

Tuesday, October 22, 2019

Jquery Trigger On css Class Change

// Create a closure
    (function(){
        // Your base, I'm in it!
        var originalAddClassMethod = jQuery.fn.addClass;

        jQuery.fn.addClass = function(){
            // Execute the original method.
            var result = originalAddClassMethod.applythisarguments );
            // trigger a custom event
            jQuery(this).trigger('cssClassChanged');
            // return the original result
            return result;
        }
    })();

    // document ready function
    $(function(){
        $(".hero-slider.hs-mb.w-slider .w-slider-dot").bind('cssClassChanged'function(){ 
            //do stuff here
            $('.hero-slider.hs-mb.w-slider .hero-slider-nav .w-slider-dot').each(function (indexvalue) {
                if($(this).hasClass('w-active')){
                    id = index;
                    $('.dc').css("display","none"); 
                    if(id==0){ $('.dc.dc-entrepreneurs').css('display','block'); }
                    if(id==1){ $('.dc.dc-sb').css('display','block'); }
                    if(id==2){ $('.dc.dc-mb').css('display','block'); }
                    if(id==3){ $('.dc.dc-smb').css('display','block'); }
                    if(id==4){ $('.dc.dc-suite').css('display','block'); }
                }
            });
    
        });
    });

Thursday, October 10, 2019

Youtube Video Iframe API load Multiple videos in a page with different video ID

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style type="text/css">

/*Video POPUP CSS*/

.playBtn {
    width: 100px;
    height: 100px;
    background-size: 100%;
    display: block;
    border: 10px red;
    position: absolute;
    left: calc(50% - 50px);
    z-index: 1;
    bottom: 40%;
    background-repeat: no-repeat;
}

.modal-video {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

.modal-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000000;
    cursor: pointer;
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-name: modal-video;
    animation-name: modal-video;
    -webkit-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
}

.modal-video {
    display: none;
}

.modal-video-body {
    max-width: 940px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: table;
}

.modal-video-inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.modal-video-movie-wrap {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 56.25%;
    background-color: #000;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-name: modal-video-inner;
    animation-name: modal-video-inner;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    -o-transition: transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    max-width: 95%;
    margin: 0 auto;
}

.modal-video-close-btn {
    position: absolute;
    z-index: 2;
    top: -35px;
    right: 0px;
    display: inline-block;
    width: 35px;
    height: 35px;
    overflow: hidden;
    border: none;
    background: transparent;
}

.modal-video-movie-wrap video,
.modal-video-movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>


<script>

$(document).ready(function(){
    /* Video Popup for youtube video */

    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
})

function onYouTubeIframeAPIReady() {
 
    // vid_id = $('.modal-video-movie-wrap').attr('data-videoid');
 
    player = new YT.Player('player', {
        height: '230',
        width: '100%',
        playerVars: { 'autoplay': 0, 'controls': 0 },
        // videoId: vid_id,
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    // event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        // setTimeout(stopVideo, 6000);
        done = true;
    }
}

function stopVideo() {
    player.stopVideo();
}



$(document).ready(function(){

    // Play Icon shwo video Popup stop and pause
    var sameVid_id = $(".modal-video-movie-wrap").attr('data-videoid');

    $('.playBtn, .youtube-video_btn').click(function(e){
        e.preventDefault();
        $('.playBtn, .youtube-video_btn').removeClass('active');
        $(this).addClass('active');



        vid_id = $(this).attr('data-videoid');
        if(vid_id != sameVid_id) {
            $(".modal-video-movie-wrap").attr('data-videoid',vid_id);
            player.loadVideoById(vid_id, 5, "large")
        } else {
            console.log(sameVid_id);
            $(".modal-video-movie-wrap").attr('data-videoid',sameVid_id);
        }

        $('.modal-video').show();
        player.playVideo();

        sameVid_id = vid_id;

    });

    $('.modal-video-close-btn, .modal-video, #player.iframe').click(function(e){

        // Youtube video Pause
        player.pauseVideo();

        $('.modal-video').hide();
    });
});
</script>


<a class="youtube-video_btn" data-videoid="CQP4J6S3w14">Video 1</a>
 <a class="youtube-video_btn" data-videoid="l-iEI4NrRcU">Video 2</a>
<a class="youtube-video_btn" data-videoid="TtjPwH8hSEg">Video 3</a>


<div class="modal-video" tabindex="-1" role="dialog" aria-label="You just openned the modal video" id="JR1DT8LJGUV5Y">
        <div class="modal-video-body">
            <div class="modal-video-inner">
                <div class="modal-video-movie-wrap" style="padding-bottom:56.25%">
                    <button class="modal-video-close-btn js-modal-video-dismiss-btn" aria-label="Close the modal by clicking here"></button>
                    <div id="player"></div>
                    <!-- <video width="460" data-video="true" controls="true" height="230" loop="loop" class="popupVideo" poster="/wp-content/uploads/2018/11/slider-1-min.jpg"><source src="<?php // the_sub_field('video_popup_file'); ?>" type="video/mp4"></video> -->
                </div>
            </div>
        </div>
    </div>

















Video 1

Video 2

Video 3







Thursday, October 3, 2019

Smooth Scroll to ID from other page JQuery code


  var jump=function(e)
  {

    offsetH = 90;
     if ($(window).width() < 768) {
         offsetH = $('header').innerHeight();
     }
     if (e){
         e.preventDefault();
         var target = $(this).attr("href");
     }else{
         var target = location.hash;
     }

     console.log(target);

     $('html,body').animate(
     {
         scrollTop: $(target).offset().top - offsetH
     },2000,function()
     {
         location.hash = target;
     });

  }

  $('html, body').hide();

  $(window).load(function()
  {
      // $('a[href^="#"]').trigger("click", jump);

      if (location.hash){
          setTimeout(function(){
            // console.log(location.hash );
            $('nav ul li a,.side_bar ul li a[href^="'+ location.hash +'"]').trigger("click");

            $('html, body').scrollTop(0).show();
              jump();
          }, 0);
      }else{
          $('html, body').show();
      }
  });

Monday, September 30, 2019

PHPMailer SMTP Self Hosted Server

<?php
error_reporting(0);

// Download PHP mailer from github
// https://github.com/PHPMailer/PHPMailer/archive/master.zip

// Install PHP mailer composer using this command
// composer require phpmailer/phpmailer


/**
 * This example shows settings to use when sending via Google's Gmail servers.
 * This uses traditional id & password authentication - look at the gmail_xoauth.phps
 * example to see how to use XOAUTH2.
 * The IMAP section shows how to save this message to the 'Sent Mail' folder using IMAP commands.
 */
//Import PHPMailer classes into the global namespace

// These must be at the top of your script, not inside a function
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
use PHPMailer\PHPMailer\SMTP;

//Load composer's autoloader
require './vendor/autoload.php';
//Create a new PHPMailer instance


$mail = new PHPMailer;
//Tell PHPMailer to use SMTP


$mail->isSMTP();
//Enable SMTP debugging
// SMTP::DEBUG_OFF = off (for production use)
// SMTP::DEBUG_CLIENT = client messages
// SMTP::DEBUG_SERVER = client and server messages

// $mail->SMTPDebug = SMTP::DEBUG_SERVER;

//Set the hostname of the mail server
$mail->Host = 'domain.com';

// use
// $mail->Host = gethostbyname('smtp.gmail.com');
// if your network does not support SMTP over IPv6
//Set the SMTP port number - 587 for authenticated TLS, a.k.a. RFC4409 SMTP submission
// $mail->Port = 587;
$mail->Port = 465;

//Set the encryption mechanism to use - STARTTLS or SMTPS
// $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
$mail->SMTPSecure = 'ssl';

//Whether to use SMTP authentication
$mail->SMTPAuth = 'true';
//Username to use for SMTP authentication - use full email address for gmail
$mail->Username = "zahid@domain.com";
//Password to use for SMTP authentication
$mail->Password = "111111111111";

//Set who the message is to be sent from
$mail->setFrom('info@semgenius.com', 'Michael Grim');
//Set an alternative reply-to address
// $mail->addReplyTo('replyto@example.com', 'First Last');
//Set who the message is to be sent to

$mail->addAddress('zahid@domain.com', 'Michael Grim');
//Set the subject line

$message ='';
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$phone = $_POST['phone'];
$email_address = $_POST['email_address'];
$question_comment = (!empty($_POST['question_comment'])) ? $_POST['question_comment'] : 'Message';


$mail->Subject = 'New Message has been received!';
//Read an HTML message body from an external file, convert referenced images to embedded,
//convert HTML into a basic plain-text alternative body
// $mail->msgHTML(file_get_contents('contents.html'), __DIR__);

// Message HERE with Post Form Values
$message .= "<h4>A New Message has been received from: ".$first_name." ".$last_name." </h4>";

$message .= '<p>First Name: '.$first_name."</p>";
$message .= '<p>Last Name: '.$last_name."</p>";
$message .= '<p>Phone Number: '.$phone."</p>";
$message .= '<p>Email Address: '.$email_address."</p>";
$message .= '<p>Message: '.$question_comment."</p>";

$mail->msgHTML($message);


//Replace the plain text body with one created manually
$mail->AltBody = 'This is a plain-text message body';
//Attach an image file
// $mail->addAttachment('images/phpmailer_mini.png');
//send the message, check for errors
if (!$mail->send()) {
    echo "Mailer Error: " . $mail->ErrorInfo;

} else {
    echo "Message sent!";
    header("Location: thank-you.html");
    die();
    //Section 2: IMAP
    //Uncomment these to save your message in the 'Sent Mail' folder.
    #if (save_mail($mail)) {
    #    echo "Message saved!";
    #}
}
//Section 2: IMAP
//IMAP commands requires the PHP IMAP Extension, found at: https://php.net/manual/en/imap.setup.php
//Function to call which uses the PHP imap_*() functions to save messages: https://php.net/manual/en/book.imap.php
//You can use imap_getmailboxes($imapStream, '/imap/ssl', '*' ) to get a list of available folders or labels, this can
//be useful if you are trying to get this working on a non-Gmail IMAP server.
// function save_mail($mail)
// {
//     //You can change 'Sent Mail' to any other folder or tag
//     $path = "{imap.gmail.com:993/imap/ssl}[Gmail]/Sent Mail";
//     //Tell your server to open an IMAP connection using the same username and password as you used for SMTP
//     $imapStream = imap_open($path, $mail->Username, $mail->Password);
//     $result = imap_append($imapStream, $path, $mail->getSentMIMEMessage());
//     imap_close($imapStream);
//     return $result;
// }

Saturday, September 21, 2019

Woocommerce Products Filter by Attribute Code

<?php
/**
 * Deasier.astra Theme functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package Deasier.astra
 * @since 1.0.0
 */

/**
 * Define Constants
 */
define( 'CHILD_THEME_DEASIER_ASTRA_VERSION', '1.0.0' );

/**
 * Enqueue styles
 */





//** filter **//
add_action( 'woocommerce_product_query', 'so_20990199_product_query' );

function so_20990199_product_query( $q ){
    if (isset($_POST['selected_attributes_data'])){
       
        echo "<div style='display:none;'><pre>";
        print_r($_POST);
        echo "</pre></div>";
        // exit();
        $living_room_size_x = $_POST['living_room_size_length'] * $_POST['living_room_size_width'];
        //echo $living_room_size_x;
        if ($living_room_size_x < 320.42) {
            $living_room_size_x = 'smalllength-x-width-˂32042';
        }else {
            $living_room_size_x = 'large-length-x-width-≥32042';
        }
        $height_of_nearest_sofa = $_POST['height-of-the-nearest-sofa'];
        if ($height_of_nearest_sofa >= '19'){
            $height_of_nearest_sofa = 'high-h-˃-19-inches';
        }else if ($height_of_nearest_sofa >= '17.5' && $height_of_nearest_sofa <= '19'){
            $height_of_nearest_sofa = 'meduim-175-≤-h-≤-19-inches';
        }else {
            $height_of_nearest_sofa = 'low-h-˂-175-inches';
        }
       
        $q->set('tax_query', array(
            'relation'=>'AND',
            array(
                'taxonomy' => 'pa_the-main-uses',
                'field'    => 'slug',
                'terms'    => array($_POST['pa_the-main-uses']), // Don't display products in this category on the shop page
                'operator' => 'IN',
            ),
            array(
              'taxonomy'        => 'pa_living-room-style',
              'field'           => 'slug',
              'terms'           => array($_POST['living-room-style']),
              'operator'        => 'IN'
            ),
            array(
              'taxonomy'        => 'pa_living-room-size',
              'field'           => 'slug',
              'terms'           => array($living_room_size_x),
              'operator'        => 'IN'
            ),
            array(
                  'taxonomy' => 'pa_height-of-the-nearest-sofa',
                  'field'    => 'slug',
                  'terms'    => array($height_of_nearest_sofa), // Don't display products in this category on the shop page
                  'operator' => 'IN',
              ),
            array(
              'taxonomy'        => 'pa_type-of-the-nearest-sofa',
              'field'           => 'slug',
              'terms'           => array($_POST['pa_type-of-the-nearest-sofa']),
              'operator'        => 'IN'
            )
        ));
    }

     $product_ids_on_sale = wc_get_product_ids_on_sale();

     $q->set( 'post__in', (array) $product_ids_on_sale );
    //  echo "<pre>";
    //     print_r($q);
    //     echo "</pre>";
    //     echo "hello";exit;
   

}

Tuesday, September 17, 2019

jSingature Js Library some functions and validation

<script src="js/jSignature.min.js"></script>

<script src="js/signhere/jSignature.SignHere.js"></script>

<div class="form-group clearfix">
                    <div class="sign-here">
                    <i class="fas fa-signature"></i> Sign Here
                    </div>
                        <a class="clear-signature-link" href="#"><i class="fas fa-times-circle"></i> Clear All</a>
                        <div  id="signatureparent" class="draw-area form-control">
                        </div>
                        <textarea class="type-area form-control"></textarea>
                         <div id="displayarea"></div>  
                    </div> 
                    <div class="text-center">
                        <button type="button" class="btn btn-disabled btn-primary" id="draw_sign">Apply Signature
<div class="error-tooltip bottom"><img src="images/cancel.svg" alt=""> Please provide your signature above</div>
                        </button>
                    </div>

<script>
var $sigdiv = $("#signatureparent").jSignature({
                UndoButton:false,
                // line color
                color:"#f00",
                // line width
                lineWidth:2,
                // width/height of signature pad
                width:454,
                height:142
            })
$("#signatureparent").bind("change", function(event){
                    // 'event.target' will refer to DOM element with id "#signature"
                    var d = $(event.target).jSignature("getData", "native")
                    // if there are more than 2 strokes in the signature
                    // or if there is just one stroke, but it has more than 20 points
                    if ( d.length > 0 || ( d.length === 1 && d[0].x.length > 20 ) ){
                        $('#draw_sign').removeClass('btn-disabled');
                        $('.error-tooltip.bottom').hide();
                    } else {
                        $('#draw_sign').addClass('btn-disabled');
                    }
                }
            )


            $("#draw_sign").on('click', function(e){
                e.preventDefault();

                if($(this).hasClass('btn-disabled')){ 
                    $('.error-tooltip.bottom').show();
                    return false;
                }

                if($('.draw-signature').hasClass('active')){
                
                    if($('#signatureparent').jSignature('getData', 'native').length == 0) {
                        $('.error-tooltip.bottom').show();
                    } else {
                        $('.error-tooltip.bottom').hide();
                        var data = $('#signatureparent').jSignature('getData','svgbase64');
                        // var data = datapair.jSignature("getData", "svgbase64");
                        var i = new Image();
                        i.src = "data:" + data[0] + "," + data[1];

                        $('#signature_area').html("<img src='"+i.src+"' width='100%' height='100%'>");
                        $('#signature').hide();
                        $('#signatureModal').modal('hide');
                    }

                } else if($('.type-signature').hasClass('active')){
                    var text_sign = $('.type-area').val();
                    if(text_sign !='') {
                        $('.error-tooltip.bottom').hide();
                        $('#signature_area').html(text_sign);
                        $('#signature').hide();
                        $('#signatureModal').modal('hide');                    
                    } else{
                        $('.error-tooltip.bottom').show();
                        return false;
                    }
                }
            });
</script>