Kansagra Jaydip Blog

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

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

{%- endfor -%}

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

<br>

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

<br>

{%- assign min = 1 -%}

{%- assign max = 10000 -%}

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

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

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

</form>

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

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

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

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

Monday 31 August 2020

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>

Pages