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