Friday 29 December 2023

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


Monday 18 December 2023

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

Thursday 26 October 2023

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




Thursday 28 September 2023

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>

Thursday 20 July 2023

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

Friday 13 January 2023

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

Friday 26 March 2021

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