Thursday 4 June 2020

How to convert a multidimensional Array To XML in PHP

function createxmlele($data, $name='root', &$doc=null, &$node=null){
        if ($doc==null){
            $doc = new DOMDocument('1.0','UTF-8');
            $doc->formatOutput = TRUE;
            $node = $doc;
        }

        if (is_array($data)){
            foreach($data as $var=>$val){
                if (is_numeric($var)){
                    $this->createxmlele($val, $name, $doc, $node);
                }else{
                    if (!isset($child)){
                        $child = $doc->createElement($name);
                        $node->appendChild($child);
                    }

                    $this->createxmlele($val, $var, $doc, $child);
                }
            }
        }else{
            $child = $doc->createElement($name);
            $node->appendChild($child);
            $textNode = $doc->createTextNode($data);
            $child->appendChild($textNode);
        }

        if ($doc==$node){
            return $doc;
        }
    }

Monday 16 March 2020

How to show #(hash) link when sticky header using HTML CSS

Link
<a href="#FlavoredToothpicks">Jaydip Kansagra is developer</a>
HTML
<span class="anchor" id="FlavoredToothpicks"></span><h3 class="subsection-title">Jaydip Kansagra is developer</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
CSS
.anchor {
    display: block;
    height: 100px;
    margin-top: -100px;
    visibility: hidden;
}

Tuesday 28 January 2020

Color swaches using metafiled in shopify

{% if swatch == 'Color' %}
    {%- if product.metafields.coloroptions != blank -%}
             
              {%- for field in product.metafields.coloroptions -%}
              <div data-value="{{ field | first | escape }}" class="swatch-element color {{ field | first | escape }} available">
                <div class="tooltip">{{ field | first | escape }}</div>
                    <a href="/products/{{ field | last }}">
                      {% assign phandle = field | last %}
                      {% assign additionaproduct = all_products[phandle] %}
                      {% assign getimage = 0 %}
                      {% assign additionalcolorimg = '' %}
                      {% assign multiimgs = additionaproduct.images | reverse %}
                      {% for image in multiimgs %} ​
                      {% if getimage == 0 %}
                      {% assign additionalcolorimg = image.src | img_url: 'small' %}
                      {% endif %}
                      {% endfor %}
                      <label for="section-product-template-swatch-0-{{ field | first | handle }}" style="background-color: {{ field | first | handle }}; background-image: url({{ additionalcolorimg }})"></label>
                    </a>
              </div>
              {%- endfor -%}
             
            {%- endif -%}
    {% endif %}

Tuesday 17 December 2019

Create simple tooltip html css

Preview



HTML
<span class="tooltipans" data-tooltip='All your leads will be saved to your Customers tab with a "My Sticky Elements" tag so you can easily find them'>?</span>
CSS

<style>
.tooltipans{
    position: relative;
    background: rgba(0,0,0,0.7);
    padding: 2px 7px;
    border-radius: 100%;
    font-size: 12px;
    cursor: help;
    color: #FFF;
}
.tooltipans::before, .tooltipans::after{
    position: absolute;
    left: 50%;
    opacity: 0;
    transition: allease0.3s;
}
.tooltipans::before{
    content: "";
    border-width: 10px 8px 08px;
    border-style: solid;
    border-color: rgba(0,0,0,0.3) transparent transparent transparent;
    top: -10px;
    margin-left: -8px;
}
.tooltipans::after{
    content: attr(data-tooltip);
    background: rgba(0,0,0,0.7);
    top: -10px;
    transform: translateY(-100%);
    font-size: 14px;
    margin-left: -150px;
    width: 300px;
    border-radius: 10px;
    color: #fff;
    padding: 14px;
}
.tooltipans:hover::before, .tooltipans:hover::after{
    opacity: 1;
}
</style>

Saturday 23 November 2019

How to add/update multiple products in cart in shopify

jQuery(function () {
   
jQuery('body').find(".couponproduct .gf_add-to-cart").click(function (e) {
e.preventDefault();
values = {}
                values[30370850865245] = 0;
                values[31289364840541] = 1;
                jQuery.ajax({
                      type: 'POST',
                      url: '/cart/update.js',
                      data: { updates: values},
                      dataType: 'json',
                      success: function() {
                        location.href = '/checkout';
                     }
               });
});
   
});

Saturday 16 November 2019

Create simple popup using HTML CSS



HTML

<div class="main-chaty-popup-bg"></div>
<div class="main-chaty-popup">
      <div class="main-chaty-box">
              <h4>Chaty is currently off</h4>
              <div class="popup-content">
                       <div class="popup-content-wrapper"> Chaty is currently turned off, would you like to save and show it on your site? </div>
              </div>
              <div class="popup-content-footer">
                      <button type="button" class="btn btn-primary">Yes, Show it on my site</button>
                      <button type="button" class="btn btn-default">Just save and keep it off</button>
              </div>
              <div class="modul-close-btn">
                       <a href="#"> X </a>
              </div>
        </div>
 </div>

CSS

<style type="text/css">
    .main-chaty-popup-bg {position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: #000; opacity: 0.5;z-index: 111;}
    .main-chaty-popup {margin:0;width: 100%;text-align: center;z-index: 1;}
    .main-chaty-box {margin: auto; padding: 0px; width: 660px; height: 170px; background: #FFF; position: fixed; top: 0; right: 0; left: 0; bottom: 0;z-index: 999;}
    .main-chaty-box h4 {background: #FCFCFC; margin: 0;padding: 10px 0 10px 10px;font-size: 22px;color: #626262;line-height: 22px;text-align: left;border-bottom: 1px solid #e5e5e5;}
    .modul-close-btn {position: absolute; right: 18px; top: 20px; transform: translate(50%, -50%); background: linear-gradient(0deg, #333, #333), linear-gradient(153.18deg, #6371DB 7.07%, #FF89C4 90.47%); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center;justify-content: center;padding: 0; border: 0; z-index: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); cursor: pointer;}
    .popup-content-footer{position: absolute;bottom: 0; width: 100%; padding: 10px 0;border-top: 1px solid #e5e5e5;}
    .popup-content-footer .btn-primary{background:#00C67C;border: none;padding: 10px;color: #FFF;cursor: pointer;box-shadow: 1px 1px 2px 1px #000;border-radius: 5px;margin-right: 15px;}   
    .popup-content-footer .btn-default{background:#F7F7F7;border: none;padding: 10px;color: #655d5d;cursor: pointer;box-shadow: 1px 1px 2px 1px #000;border-radius: 5px;}
   .popup-content-wrapper{margin-top: 25px;}
 </style>