Table of Contents
Introduction
हेलो दोस्तों आज हम इस post में shopify liquid code के बारे में जानेगे!. shopify liquid code क्या है और इसका इस्तेमाल shopify में कैसे करते है!. साथ ही shopify objects, tags और filters के बारेमे जानेगे की इसका इस्तेमाल कैसे करते है!.
Shopify liquid code
Liquid shopify के द्वारा बनाई गई open-source template language है!. यह Ruby में likha गया है। यह hithub पर open source project के रूप में available है और इसका इस्तेमाल कई अलग – अलग software projects और companies द्वारा किया जाता है!. Liquid का इस्तेमाल objects और उनके properties को dynamically रूप से output करने के लिए किया जाता है!.
आप tags के साथ logic create करके या filter के साथ इसे modify करके output को दिखा सकते है!.
What is template language?
Template language आपको static content को host करने के लिए single template create करने की अनुमति देता है!. और template कहा rendered किया गया है उसके आधार पर dynamically रूप से information insert करने की अनुमति देता है!.
Example के तौरपर आप एक product template create कर सकते है जो आपके standard product के attributes जिअसे के product image, title and price को host करता है!.
वह template देखे जा रहे current product के आधार पर उन attibutes को dynamically रूप से render कर सकता है!.
Shopify basics
Shopify में store data को display किस तरह से कर सकते है!. और logic condition किस तरह से setup कर सकते है और shopify में liquid tags, liquid filters, liquid objects की माहिती होनी जरुरी है!.
Shopify में data display करने के लिए {{ }} double curly braces से कर सकते है!. या किसी condition logic या data को new variable में assing करने के लिए {% %} curly brace with percentage sign से कर सकते है!. liquid dynamic content display करने के लिए template file के अंदर object, tags और filters के combination का उपयोग करता है!.
Liquid tag का इस्तेमाल logic को define करने के लिए किया जाता है जो template को बताता है की क्या करना है!.
conditional tags
Conditional tags उन conditions को define करते है जो यह निर्धारित करते है की liquid code के block executed होंगे या नहीं!.
if
यदि specific condition true है तो if code का block execute होगा!.
syntax:
{% if condition %}
block of code
{% endif %}
example:
{% if product.compare_at_price > product.price %}
This product is on sale!
{% endif %}
HTML tags
HTML tags shopify-specific attributes का इस्तेमाल करके HTML elements को render करता है!.
form एक specific endpoint पर form submit करने के लिए किसी भी required <input> tag सहित एक HTML <form> tag generates करता है!.
syntax:
{% form 'form_type' %}
content
{% endform %}
example:
{% form 'create_customer' %}
<!-- form content -->
{% endform %}
Iteration tags
Iteration tags बार-बार code के blocks को रन करता है!.
syntax:
{% for variable in array %}
expression
{% endfor %}
example:
{% for product in collection.products -%}
{{ product.title }}
{%- endfor %}
Theme tags
Theme tags उस content को assign और render करते है जो आपकी theme का हिस्शा है!.
render tag
Render tag एक snippet और app block render करता है!.
Snippet और app block के अंदर आप directaly उन variable को access नहीं कर सकते जो snippet और app block के बहार create किये गई है!. आप outside variable को snippet में pass करने लिए parameters के रूप में variable specify कर सकते है!. जब आप render tag का इस्तेमाल करके एक snippet render करते है तो आप snippet के अंदर include tag का इस्तेमाल नहीं कर सकते!.
syntax:
{% render "filename" %}
“.liquid” extension के बिना, render किये जाने वाले snippet file का name
Pass variable with snippet
syntax:
{% render "filename", variable:value %}
section tag
section tag के इस्तेमाल से statically रूप से section के render करा सकते है!.
syntax:
{% section "name" %}
उस section file का name जिसे आप render करना चाहते है!.
{% sectin "header" %}
ऊपर के example में देख सकते है जिस section के हमने section tag के मदद से render करा है उस section का name “header” है!.
variable tags
Varible tags आपको liquid में new liquid variable create करने में सक्षम बनाते है!.
assign keyword का इस्तेमाल करके liquid में new variable के create कर सकते है!.
syntax:
{% assign variable_name = value %}
example:
{% assign product_title = product.title %}
{{ product_title }}
Liquid Objects
Liquid object variable को represent करती है जिनका उपयोग आप अपनी theme create करने के लिए कर सकते है!.
Object types में store resources, standard shopify content और functional elements शामिल है जो आपको interactivity create करने में मदद करते है!.
Object एक single data point को represent कर सकते है या कई properties शामिल कर सकते है!. कुछ properties किसी related object का represent कर सकते है जैसे collection में कई products होते है!.
additional_checkout_buttons
Shopify में “additional_checkout_buttons” एक ऐसा feature allows करता है जो आपको अपने store के लिए cart page में alternative payment methods और express checkout options को add करने की अमुमति देता है, ये additional checkout buttons customers के लिए checkout process को improve करने और shopping experience को बेहतर बनाने में मदद कर सकते है!.
Code example:
{% if additional_checkout_buttons %}
{{ content_for_additional_checkout_buttons }}
{% endif %}
product
Shopify में “product” object आपके online store का एक important object है यह specific product या items को represents करता है!. जिसे आप अपने shopify store पर sell करते है!. product object में कई attributes और properties होती है जो product को define करते है जिसमे उसका title, price, variants, images और बहुत कुछ शामिल है!.
Shopify में और दूसरे important objects जैसे की collection, article, blog, cart, order, page
Filters
Liquid output को modify करने के लिए liquid filter का इस्तेमाल किया जाता है!. किसी liquid output पर filter लागु करने के लिए output को {{ }} curly brace के अंदर filter और किसी भी filter parameters को जोड़े जिसके पहले ek pipe | character होता है!.
example:
{{ product.title | upcase }}
ऊपर के example में देख सकते है की product title को filter का इस्तेमाल करके upercase में convert किया और उसे output के रूप me represet किया!.
Array
Array filters array को modify करते है!.
compact
Array से nil items को remove करने के लिए compact filter का इस्तेमाल होता है!.
example:
{%- assign compacted_original_prices = original_prices | compact -%}
{% for price in compacted_original_prices -%}
- {{ price }}
{%- endfor %}
Money filtes
Money filters shopify admin में defined currency formatting के आधार पर price format करता है!.
money
{{ product.price | money }} // output: $20.00
money_with_currency
{{ product.price | money_with_currency }}
// output: $20.00 CAD
money_without_currency
{{ product.price | money_without_currency }}
//output: 20.00
money_without_trailing_zeros
{{ product.price | money_without_trailing_zeros }}
//output: $20
