Showing posts with label Shopify. Show all posts
Showing posts with label Shopify. Show all posts

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

Saturday 31 October 2020

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

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

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

Tuesday 24 September 2019

How to create pagination in shopify rest api using php

Shopify new API next page issue | page_info => invalid value

Shopify API version 2019-07 you do indeed need to use cursor-based pagination.

First make a normal API call, include the header response.

Then in the header response API, you will see the "link" parameter with rel next or previous.

Extract the page_info and then make another call with page_info.
The first API call is something like this:

https://.....@abc.myshopify.com/admin/api/2019-10/products.json?limit=2&published_status=published
To get header response from API response :
function getheaderarray($apiresponse){
       
        $data = explode("\n",$apiresponse);
        $headers['status'] = $data[0];
        array_shift($data);
        foreach($data as $part){
            $middle = explode(":",$part,2);
            if ( !isset($middle[1]) ) { $middle[1] = null; }
            $headers[trim($middle[0])] = trim($middle[1]);
        }
       
        return $headers;
  }  
Then the second API call is something like this:
https://.....@abc.myshopify.com/admin/api/2019-10/products.json?limit=2&page_info=abcdsf21asdf3afdfdfd1safd51s3f1x32ref4asdj
When you make the second call, do not add any filers as the filters will be applied from the first call.
FYI: if your testing in a browser due to the way the link is in angle brackets, it will be hidden, so just view source code in your developer environment.

Saturday 29 June 2019

How to change startSymbol endSymbol of Angular JS

I face the issue when use Angular JS in shopify liquid file at that time I have use following script.

var fetch = angular.module('myapp', []).config(function ($interpolateProvider) {
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});

Monday 24 June 2019

How to concat string and variable in Liquid Shopify in PHP with proxy URL

<script type="text/javascript">
{% if customer  %}
    {% assign customerid = '"<?php echo base_url('checkout?id='.$postdata['cart_id']); ?>' | append: '&customer=' | append: customer.id | append: '"' %}
{% else %}
    {% assign customerid = '"<?php echo base_url('checkout?id='.$postdata['cart_id']); ?>' | append: '"' %}
{% endif %}
var checkouturl = {{customerid}};
window.location.replace(checkouturl);
</script>

Friday 28 April 2017

Pagination on shopify collection page with linklist

<h1 class="desktop-6 desktop-push-3 tablet-3 mobile-3">
  {% if collection.handle == 'all' %}{{ 'collections.general.all_products' | t }}
  {% elsif collection.handle == 'e-juice' %}
      E JUICE BRANDS
  {% elsif collection.handle == 'a-d' %}
      E JUICE BRANDS
  {% elsif collection.handle == 'e-i' %}
      E JUICE BRANDS
  {% elsif collection.handle == 'j-m' %}
      E JUICE BRANDS
  {% elsif collection.handle == 'n-z' %}
      E JUICE BRANDS
  {% else %}
  {{ collection.title }}
  {% endif %}
</h1>



<div class="clear"></div>
{% if linklists[collection.handle].links.size > 0 %}

<div class="collsn_img_link">
    {% if collection.image %}
    <img src="{{ collection | img_url: 'master' }}"  alt="{{ collection.title | escape }}" />
    {% endif %}
  </div>

<div class="rte">
    {{ collection.description | remove: "[banner]" }}
  
  </div>
{% endif %}
{% if linklists[collection.handle].links.size > 0 %}

<div class="desktop-12 tablet-6 mobile-3 collecsn-linklist ">
  {% comment %}
   <p class="chose-categry">Choose a sub category:-</p>
  {% endcomment %}
      {% assign collections = linklists[collection.handle].links %}
    {% paginate collections by 40 %}
     {% assign currentpage = paginate.current_page %}
      {% assign current_offset = paginate.current_offset %}
    {% assign offset_limit = paginate.current_offset | plus:40 %}
  <ul id="myList" >
  {% for collection_link in collections %}
    {% assign forindex = forloop.index %}
    {% if current_offset < forindex and offset_limit >= forindex %}
    <li class="desktop-3 tablet-3 mobile-3 {% cycle ' first', '', '', ' last' %}">
      {% assign collection = collection_link.object %}
      {% if collection_link.type == 'collection_link' %}
      <div class="collection-image">
        <a href="{{ collection.url }}" title="{{ collection_title }}">
          {% if collection.image %}
          {{ collection.image.src | collection_img_url: 'large' | img_tag: collection_title }}
          {% else %}
          {{ collection.products.first.featured_image | product_img_url: 'large' | img_tag: collection_title }}
          {% endif %}
          <h3>{{ collection_link.title }}</h3>
        </a>    
      </div>
      {% else %}
        <div class="collection-info-inner">     
          <h3>{{ collection_link.title | link_to: collection_link.url }}</h3>
        </div>
      {% endif %}
<!--           <div class="collection-info-inner"> -->
<!--             <a href="{{ collection.url }}" title="{{ collection_title }} collection"> -->
<!--               <h3>{{ link.title | link_to: link.url }}</h3> -->
<!--             </a> -->
<!--        </div> -->
    </li>
    {% endif %}
    {% endfor %}
  </ul>
{% include 'pagination' %}
{% endpaginate %}
  <div class="clear"></div>
<!--   <div id="loadMore">See more</div> -->
  </div>
{% else %}
{% paginate collection.products by 40 %}
<!-- Start Sidebar -->
{% if settings.collection_sidebar %}
{% include 'collection-sidebar' %}
{% endif %}
<!-- End Sidebar -->


<div class="{% if settings.collection_sidebar %}desktop-9 tablet-6{% else %}desktop-12 tablet-6{% endif %} mobile-3">

  <div id="collection-description" class="desktop-12 tablet-6 mobile-3">

<div class="collsn_img">
    {% if collection.image and collection.handle != "candy"%}
    <img src="{{ collection | img_url: 'master' }}"  alt="{{ collection.title | escape }}" />
    {% endif %}
  </div>

<div class="rte" contenteditable="true" spellcheck="false">
    {{ collection.description | remove: "[banner]" }}
  
  </div>
</div>
  {% if settings.collection_sidebar == false %}
  {% if settings.filters %}
  <div id="full-width-filter" class="desktop-12 tablet-6 mobile-3">
    {% include 'filter' %}
  </div>
  {% endif %} 
  {% endif %}

 {% comment %} <div id="full-width-filter" class="desktop-12 tablet-6 mobile-3">
  {% include 'dropdown-filter' %}
  </div>  {% endcomment %}
  <div id="product-loop">
    <div id="product_collection">
    {% for product in collection.products %}
    {% assign products-per-row = settings.products-per-row %}
   
    <div id="product-listing-{{ product.id }}" class="product_price product-index {% if products-per-row == "6" %}desktop-2{% elsif products-per-row == "4" %}desktop-3{% elsif products-per-row == "3" %}desktop-4{% elsif products-per-row == "5" %}desktop-fifth{% elsif products-per-row == "2" %}desktop-6{% endif %} tablet-half mobile-half" data-alpha="{{ product.title }}" data-price="{{ product.price | money_without_currency }}">          
      {% include 'product-listing' %}
    </div>
    {% endfor %}
    </div>
  </div>
</div>
{% include 'pagination' %}
{% endpaginate %}

{% endif %}


<script>

 $( document ).ready(function() {
 
    (function($){
      function fixButtonHeights() {
        var heights = new Array();

        // Loop to get all element heights
        $('.product-index').each(function() {
         
          // Need to let sizes be whatever they want so no overflow on resize
          $(this).css('min-height', '0');
          $(this).css('max-height', 'none');
          $(this).css('height', 'auto');
         
          // Then add size (no units) to array
          heights.push($(this).height());
        
//         alert(heights);
        });

        // Find max height of all elements
        var max = Math.max.apply( Math, heights );
//         alert(max);

        // Set all heights to max height
        $('.product-index').each(function() {
        
          $(this).css('height', max + 'px');
          // Note: IF box-sizing is border-box, would need to manually add border
               

        });
      }

      $(window).load(function() {
        // Fix heights on page load
        setTimeout(function() {
        fixButtonHeights();
        }, 3000);
        // Fix heights on window resize
        $(window).resize(function() {
          // Needs to be a timeout function so it doesn't fire every ms of resize
          setTimeout(function() {
            fixButtonHeights();
          }, 100);
        });
      });
    })(jQuery);
     
  });
 
</script>
<style>
 
</style>
<script>

</script>
<!-- <script>
  $(document).ready(function () {
    size_li = $("#myList li").size();
    x=40;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+40 <= size_li) ? x+40 : size_li;
      if(x == size_li || x >= size_li){
        $('#loadMore').hide();
      }
        $('#myList li:lt('+x+')').show();
    });
});
</script> -->

Thursday 5 May 2016

How to Shopify API Product / Order / Collection get sorted when passing in an created_at / updated_at filter

What would be ideal would be to be able to get results in ascending/descending order one way or another, but without having to pass in since_id, because we want to be able to pull in new data on orders on an ongoing basis as they may be updated.

Its possible to sort the Products/Orders/Collection by passing an "order" parameter. The "order" parameter should contain the field to sort by (supported fields are "created_at", "updated_at" and "processed_at"), followed by a space and then by an "asc" or "desc".

Please check following Example for solution.

https://example.myshopify.com/admin/orders.json?limit=2&fields=id,created_at&order=created_at%20asc