Show other color's from metafiel with separate products in Shopify liquid code

 

 {% if option.name == "Color" and product.metafields.custom.color_products %}

      {%- assign _product_ajax_linked_products = product.metafields.custom.color_products.value -%}

      {%- for _product_ajax_linked_product in _product_ajax_linked_products -%}

        {% assign linkitem = _product_ajax_linked_product %}

        {% if linkitem.handle != product.handle and linkitem.available %}

          {%- for linkoption in linkitem.options_with_values -%}

            {% if linkoption.name == "Color" %}

              {%- for linkvalue in linkoption.values -%}

                <input

                  type="radio"

                >

                <label onclick="location.href = '{{ linkitem.handle }}';" for="{{ input_id }}">

                  {{ linkvalue -}}

                  {{ label_unavailable }}

                </label>

              {%- endfor -%}

            {% endif %}

          {%- endfor -%}

        {% endif %}

      {%- endfor -%}

    {% endif %}

How to Show Items in group on cart page in Shopify

{% for item in cart.items %}

{% if item.fulfillment_service == 'manual' %}

  {% if item.product.tags contains 'DGA' %}

{% unless groupnames contains 'partner1' %}

  {% assign groupcount = groupcount | plus:1 %}

  {% assign groupnames = groupnames | append: 'partner1' | append: ',' %}

{% endunless %}

  {% else %}

{% unless groupnames contains 'bevilles' %}

  {% assign groupcount = groupcount | plus:1 %}

  {% assign groupnames = groupnames | append: 'bevilles' | append: ',' %}

{% endunless %}

  {% endif %}

{% else %}

  {% unless groupnames contains item.fulfillment_service %}

{% assign groupcount = groupcount | plus:1 %}

{% assign groupnames = groupnames | append: item.fulfillment_service | append: ',' %}

  {% endunless %}

{% endif %}

{% endfor %}

{% assign groupnames = groupnames | split:',' %}

{% for groupname in groupnames %}

<h3 style="color: #d1619c;">DELIVERY {{ forloop.index }} OF {{ groupcount }}</h3>

<div style="color: #ccc;">{% if groupname == 'bevilles' %}Delivered by Bevilles{% else %}Delivered separately by our partner{% endif %}</div>

{% for item in cart.items %}

{% assign group = '' %}

{% if item.fulfillment_service == 'manual' %}

  {% if item.product.tags contains 'DGA' %}

{% assign group = 'partner1' %}

  {% else %}

{% assign group = 'bevilles' %}

  {% endif %}

{% else %}

   {% assign group = item.fulfillment_service %}

{% endif %}

{% if group == groupname %}

// Items showing here

{% endif %}

{% endfor %}

{% endfor %}

How to create Shopify Checkout extensions good articles

The following links are good for how to create Shopify extension and for Send and get information from your APP databases

• https://www.shopify.com/in/partners/blog/checkout-ui-extensions
• https://community.shopify.com/c/extensions/issue-calling-shopify-app-api-from-checkout-ui-extension/td-p/2267439
• https://www.youtube.com/watch?v=wNdvxLzWUQg
• https://community.shopify.com/c/extensions/ui-checkout-send-options-extensions-request-to-server-network/m-p/2226100
• https://community.shopify.com/c/extensions/how-do-i-fetch-product-details-from-a-checkout-ui-extension/td-p/1671855
• https://www.youtube.com/watch?v=FDLoz__VKVk
• https://community.shopify.com/c/extensions/cors-issue-with-checkout-ui-extension-fetch-api-app-proxy/m-p/2025206

Shopify - Add dynamic links on description

{% assign productdescription = product.description %}

{% assign productdesclinks = "maxi dress~https://examples.com/collections/maxi-dresses,midi dress~https://examples.com/collections/midi-length-dresses,midi~https://examples.com/collections/midi-length-dresses,pockets~https://examples.com/collections/dresses-with-pockets,kasey rainbow~https://examples.com/collections/kasey-rainbow,maggi~https://examples.com/collections/maggi-mcdonald-x-proud-poppy ,Maggi McDonald~https://examples.com/collections/maggi-mcdonald-x-proud-poppy,spring~https://examples.com/collections/spring-dresses-collection ,floral~https://examples.com/collections/floral-dresses" %}

{% assign productdesclinks = productdesclinks | split: ',' %}

{% for productdesclink in productdesclinks %}

  {% assign productdesclk = productdesclink | split: '~' %}

  {% assign productdesclkcomp = productdesclk[0] %}

  {% assign productdesclkurl = productdesclk[1] %}

  {% assign productdesclklink = '<a href="' | append: productdesclkurl | append: '">' | append: productdesclkcomp | append:"</a>" %}

  {% assign productdescription = productdescription | replace:productdesclkcomp, productdesclklink %}

{% endfor %}

{{ productdescription }} 

When Scroll to footer Sticky bar hide

 <script>

        var isScrolledIntoView = function(elem) {

            var $elem = jQuery(elem);

            var $window = jQuery(window);

            var docViewTop = $window.scrollTop();

            var docViewBottom = docViewTop + $window.height();

            var elemTop = $elem.offset().top;

            var elemBottom = elemTop + $elem.height();

            return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));

        }

        function hidestickybarwhenfootershow(){

          jQuery(document).scroll(function() {

              if(isScrolledIntoView('.shopify-section-group-footer-group')){

                if(jQuery('#great_sticky_bar').length > 0){

                  jQuery('#great_sticky_bar').css('visibility','hidden');

                }

              }else{

                if(jQuery('#great_sticky_bar').length > 0){

                    jQuery('#great_sticky_bar').css('visibility','visible');

                  }

              }

          });

        }

        var checkjqueryinterval = setInterval(checkjquery, 500);

        function checkjquery(){

          if (typeof jQuery == 'undefined') {

          } else {

            clearInterval(checkjqueryinterval);

            hidestickybarwhenfootershow();

          }

        }

      </script>

How to get Parameter in Shopify liquid

 {% assign month = '01' %}

{% assign day = '01' %}

{%- assign page_url = content_for_header | split:'"pageurl":"' | last | split:'"' | first | split: request.host | last | replace:'\/','/' | replace:'%20',' ' | replace:'\u0026','&'  -%}

{%- assign param = blank -%}

{%- for i in (1..1) -%}

  {%- unless page_url contains "?" -%}{% break %}{%- endunless -%}

  {%- assign query_string = page_url | split:'?' | last -%}

  {%- assign qry_parts= query_string | split:'&' -%}

  {%- for part in qry_parts -%}

    {%- assign key_and_value = part | split:'=' -%}

    {%- if key_and_value.size > 1 -%}

      

      {%- if key_and_value[0] == 'birth_month' -%}

        {%- assign month = key_and_value[1] -%}

      {%- endif -%}

       {%- if key_and_value[0] == 'birth_day' -%}

        {%- assign day = key_and_value[1] -%}

      {%- endif -%}

    {%- endif -%}

  {%- endfor -%}

{%- endfor -%}

<form method="GET" action="/pages/find-your-zodiac-sign">

  <label for="birth_month">Birth Month:</label>

  <input type="number" value="{{ month }}" id="birth_month" name="birth_month" min="1" max="12" required>

  <br>

  <label for="birth_day">Birth Day:</label>

  <input type="number" value="{{ day }}" id="birth_day" name="birth_day" min="1" max="31" required>

  <br>

  {%- assign min = 1 -%}

  {%- assign max = 10000 -%}

  {%- assign diff = max | minus: min -%}

  {%- assign random_number = "now" | date: "%N" | modulo: diff | plus: min -%}

  <input type="hidden" value="{{ random_number }}" name="type">

  <button type="submit">Find Zodiac Sign</button>

</form>

{% assign month = month | times: 1 %}

{% assign day = day | times: 1 %}

{{month }}

{{day }}

if 50 qty = 100 rs so 200 qty = ? Math calculation for Javascript code

Ex 1. if 50 qty = 100 rs so 200 qty = ?

200/50 * 100 = 400

Ex 2. if 36 qty = 34.02 so 144 qty = ?

144/36 * 34.02 = 136.08

How to add css and html in iFrame using JavaScript

 var container = document.querySelector('iframe#gorgias-chat-container');

    var chatButtonHead = container?.querySelector('#chat-button')?.contentWindow.document.querySelector('head');

    var chatButton = container?.querySelector('#chat-button')?.contentWindow.document.querySelector('body');

    chatButton = chatButton?.querySelector('button');

    

    if (chatButton?.children.length){

        var chatbuttonStyle = document.createElement('div');

        chatbuttonStyle.style.textAlign = "center";

    chatbuttonStyle.style.fontWeight = "500";

        chatbuttonStyle.textContent = 'Chat';

    chatButton.appendChild(chatbuttonStyle);

        window.clearInterval(gorgiasChatbutton);

    }

Example 2 

var gorgiasChatbutton = window.setInterval(function() {

    var container = document.querySelector('#gorgias-chat-container');

    var chatButtonHead = container?.querySelector('#chat-button')?.contentWindow.document.querySelector('head');

    var chatButton = container?.querySelector('#chat-button')?.contentWindow.document.querySelector('body');

    var chatButton = container?.querySelector('#chat-button')?.contentWindow.document.querySelector('body');

    chatButton = chatButton?.querySelector('button');

    chatButton = chatButton?.querySelector('.messenger-button-iframe-uscp54');

    chatButton = chatButton?.querySelector('.messenger-button-iframe-clht14');

    

    if (chatButton?.children.length){

        var buttonStyle = document.createElement('style');

    buttonStyle.textContent = '.chattext{color: #0e2fb5;text-align: center;font-weight: 500;position: absolute;bottom: 6px;left: 2px;font-size: 12px;background: #FFF;border-radius: 100%;}'; // the custom CSS for the chat button

    

    chatButtonHead.appendChild(buttonStyle);

        

        var chatbuttonStyle = document.createElement('div');

    chatbuttonStyle.classList.add("chattext")

        chatbuttonStyle.textContent = 'Chat';

    chatButton.appendChild(chatbuttonStyle);

    window.clearInterval(gorgiasChatbutton);

    }

}, 100);

How to create simple dynamic section with block in Shopify liquid in theme

add {% section 'contactpagefaq' %} on your template file

Create new section file called : contactpagefaq.liquid, and paste following code.

{% if section.settings.faqenable %}

<h2>{{ section.settings.faqtitle }}</h2>   

  {% for block in section.blocks %}  

  

  <button class="accordion">{{ block.settings.sectiontitle }}</button>

          <div class="panel">

            <p>{{ block.settings.sectiontext }}</p>

          </div>

  {% endfor %}

{% endif %}

{% schema %}

{

  "name": "Contact Page FAQ",

  "max_blocks": 5,

  "settings": [

{

          "id": "faqenable",

          "type": "checkbox",

          "label": "Enable",

          "default": true

        },

        {

          "id": "faqtitle",

          "type": "text",

          "label": "Heading",

          "default": "FAQ"

        }

      ],

  "blocks": [

    {

      "type": "select",

      "name": "Block",

      "settings": [

{

          "id": "sectiontitle",

          "type": "text",

          "label": "Title"

        },

        {

          "id": "sectiontext",

          "type": "textarea",

          "label": "Text"

        }

      ]

    }

  ]

}

{% endschema %}

{% stylesheet %}

{% endstylesheet %}

{% javascript %}

{% endjavascript %}

Sorting Json value using Javascript / jQuery

Sort by updated date

<script>

var data = "[

  {

    "_id": "5efd566ab3e22f002484bbb0",

    "first_name": "Jaydip",

    "last_name": "Kansagra",

    "rate": "0",

    "createdAt": "2020-07-02T03:37:14.808Z",

    "updatedAt": "2020-07-02T03:37:14.808Z"

  },

  {

    "_id": "5f16d3933fdf4a0024b7a2f8",

    "first_name": "Jaydip",

    "last_name": "Kansagra",

    "rate": "5",

    "createdAt": "2020-07-21T11:37:55.310Z",

    "updatedAt": "2020-07-21T11:37:55.310Z"

  },

  {

    "_id": "5f3bc286436d850024a2b574",

    "first_name": "Jaydip",

    "last_name": "Kansagra",

    "rate": "3",

    "createdAt": "2020-08-18T11:59:02.825Z",

    "updatedAt": "2020-08-18T11:59:02.825Z"

  }

]";

theme.blend_Obj = data;

theme.blend_Obj.sort((a, b) => (a.updatedAt > b.updatedAt) ? 1 : -1)

</script>

==================================

Sort by Rate (integer value)

<script>

topRates = [...theme.blend_Obj]

topRates.sort((a, b) => (parseInt(a.rate) < parseInt(b.rate)) ? 1 : -1);

</script>

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;

        }

    }

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

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

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>

Mysql database query very slow with huge data / rows using CREATE INDEX in PHP

CREATE INDEX visitorhistory_store_created_at_index ON visitorhistory (store, created_at);

The reference use: https://blog.nodeswat.com/making-slow-queries-fast-with-composite-indexes-in-mysql-eb452a8d6e46

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

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>

Cannot add a new addondomain in WHM panel

(XID a57bw8) Sorry, the domain is already pointed to an IP address that does not appear to use DNS servers associated with this server. in WHM panel

Visit this area in WHM panel:

1. WebHost Manager »Server Configuration »Tweak Settings, Domains tab:

2. Enable the following setting

How to create/write code in text/json file and get content of file in PHP | Codeigniter

Create file and directory

public function createfileanddir() {
    $directoryname = 'directoryname';
    $filename = 1;
    $directory = APPPATH . 'uploads/cache/'.$directoryname;
    if (!file_exists($directory)) {
        mkdir($directory, 0777, true);
    }
    $file = APPPATH . 'uploads/cache/'.$directoryname.'/'.$filename.'.json';
    if (file_exists($file)) {
        unlink($file);
    }
    if (!file_exists($file)) {
        $settings = [
            'settings'=>[],
            'socialSettingsArr'=>[],
            'pageSettings'=>[],
        ];
        $fh = fopen($file, 'w');
        fwrite($fh, json_encode($settings));
        fclose($fh);
    }
}

Get content from file and directory

public function getfiles() {
    $directoryname = 'directoryname';
    $directory = 'uploads/cache/'.$directoryname;
    $files = array_diff(scandir($directory), array('.', '..'));
    if(count($files) > 0){
        foreach ($files as $file):
            $file = $directory . '/'.$file;
            $storedata = file_get_contents($file);
            $storedata = json_decode($storedata, true);
            echo '<pre>';print_r($storedata);
        endforeach;
    }
}

Magento 2 Missing Table when transfer server Error "inventory_stock_1"

Error

Exception #0 (Zend_Db_Statement_Exception): SQLSTATE[42S02]: Base table or view not found: 1146 Table 'inventory_stock_1' doesn't exist, query was:........

Solution

1) Open your phpmyadmin
2) Remove your current "inventory_stock_1" if available
3) Run following query on sql
CREATE
SQL SECURITY INVOKER
VIEW `inventory_stock_1`
  AS
    SELECT
    DISTINCT 
      legacy_stock_status.product_id,
      legacy_stock_status.website_id,
      legacy_stock_status.stock_id,
      legacy_stock_status.qty quantity,
      legacy_stock_status.stock_status is_salable,
      product.sku
    FROM `cataloginventory_stock_status` `legacy_stock_status`
      INNER JOIN `catalog_product_entity` product
        ON legacy_stock_status.product_id = product.entity_id;
3) Reindex your store data then check your store.