Liquid என்பது LetBuyy கடைகளின் வார்ப்புரு மொழி. Ruby-யால் ஈர்க்கப்பட்ட தொடரியல் மூலம் மாறும் கடைத் தரவை HTML வார்ப்புருவில் காட்டலாம். ஒவ்வொரு LetBuyy தீமும் Liquid அல்லது Liquid மாற்றுவழியுள்ள React தீம்.
01வார்ப்புருவை எழுதுங்கள்
Liquid தொடரியல் அடிப்படைகள்
{{ product.title }}{# Output — double curly braces #}
{{ product.title }}
{{ product.price | money }}
{# Tags — logic and flow control #}
{% if product.available %}
<button>Add to Cart</button>
{% else %}
<p>Out of Stock</p>
{% endif %}
{# Loops #}
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }}</option>
{% endfor %}02கடைத் தரவுடன் பணிபுரியுங்கள்
முக்கிய Liquid பொருள்கள்
product— தலைப்பு, handle, விலை, வகைமாறுகள், படங்கள் மற்றும் metafields உள்ள தற்போதைய தயாரிப்புcollection— தயாரிப்புகளும் விளக்கத் தரவும் உள்ள தற்போதைய தொகுப்புcart— பொருட்கள், மொத்தம் மற்றும் எண்ணிக்கை உள்ள வண்டியின் நிலைcustomer— ஆர்டர் வரலாறுடன் அங்கீகரிக்கப்பட்ட வாடிக்கையாளர்shop— கடை அமைப்புகள், நாணயம் மற்றும் நேர மண்டலம்request— URL, பாதை மற்றும் ஹோஸ்ட் தகவல்
03வெளியீட்டை வடிவமைக்கவும்
பயனுள்ள வடிகட்டிகள்
{{ product.title | upcase }}{{ product.price | money }} {# ₹1,499 #}
{{ product.description | truncate: 150 }}
{{ product.title | upcase }}
{{ image | image_url: width: 800 }}
{{ product.created_at | date: "%d %B %Y" }}04தீமை ஒழுங்குபடுத்தவும்
தீம் கட்டமைப்பு
- 01
layout/பக்கத்தின் வெளி அமைப்பு - 02
templates/பக்க வகை - 03
sections/மாற்றக்கூடிய தொகுதிகள் - 04
snippets/மீண்டும் பயன்படும் விவரங்கள்
- layout/theme.liquid: <head> மற்றும் <body> உள்ள அடிப்படை HTML உறை
- templates/*.liquid: product, collection, index, cart போன்ற பக்க வார்ப்புருக்கள்
- sections/*.liquid: மீண்டும் பயன்படுத்தக்கூடிய, வணிகர் அமைக்கக்கூடிய பிரிவுகள்
- snippets/*.liquid: தயாரிப்பு அட்டை, விலைக் காட்சி போன்ற சிறு பகுதிகள்
- assets/: CSS, JS மற்றும் படக் கோப்புகள்
- config/settings_schema.json: வணிகர் திருத்தக்கூடிய தீம் அமைப்புகளை வரையறுக்கிறது
05வணிகருக்குக் கட்டுப்பாட்டைக் கொடுக்கவும்
பிரிவுகள்: வணிகர் தனிப்பயனாக்க அடுக்கு
குறியீடின்றித் தீமைத் தனிப்பயனாக்க பிரிவுகள் உதவுகின்றன. பிரிவு schema-வில் உரை, நிறங்கள், படங்கள் மற்றும் boolean அமைப்புகளை வரையறுக்கவும். Liquid-ஐத் தொடாமல் காட்சித் தொகுப்பானில் வணிகர் மாற்றலாம்.
React கலப்புத் தீம்கள்
தயாரிப்புப் பட்டியலும் கட்டணம் செலுத்தலும் உடனடி செயல்திறனுக்கு React-ஐப் பயன்படுத்தவும், முகப்பு, அறிமுகம், வலைப்பதிவு போன்ற பக்கங்கள் வேகமான நிலையான வெளியீட்டுக்கு Liquid-ஐப் பயன்படுத்தவும் LetBuyy கலப்புத் தீம்களை ஆதரிக்கிறது.
