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