Liquid
Liquid is an actively used template language created in 2008.
12Years Old | 9,355Users | ?Jobs |
- the Liquid website
- Liquid on github
- Liquid first appeared in 2008
- file extensions for Liquid include liquid
- Have a question about Liquid not answered here? Email me and let me know how I can help.
Example code from Linguist:
<h3>We have wonderful products!</h3> <ul id="products"> <div id="productpage"> <div id="productimages"><div id="productimages-top"><div id="productimages-bottom"> {% for image in product.images %} {% if forloop.first %} <a href="{{ image | product_img_url: 'large' }}" class="productimage" rel="lightbox"> <img src="{{ image | product_img_url: 'medium'}}" alt="{{product.title | escape }}" /> </a> {% else %} <a href="{{ image | product_img_url: 'large' }}" class="productimage-small" rel="lightbox"> <img src="{{ image | product_img_url: 'small'}}" alt="{{product.title | escape }}" /> </a> {% endif %} {% endfor %} </div></div></div> <h2>{{ product.title }}</h2> <ul id="details" class="hlist"> <li>Vendor: {{ product.vendor | link_to_vendor }}</li> <li>Type: {{ product.type | link_to_type }}</li> </ul> <small>{{ product.price_min | money }}{% if product.price_varies %} - {{ product.price_max | money }}{% endif %}</small> <div id="variant-add"> <form action="/cart/add" method="post"> <select id="variant-select" name="id" class="product-info-options"> {% for variant in product.variants %} <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option> {% endfor %} </select> <div id="price-field" class="price"></div> <div style="text-align:center;"><input type="image" name="add" value="Add to Cart" id="add" src="{{ 'addtocart.gif' | asset_url }}" /></div> </form> </div> <div class="description textile"> {{ product.description }} </div> </div> <script type="text/javascript"> <!-- // prototype callback for multi variants dropdown selector var selectCallback = function(variant, selector) { if (variant && variant.available == true) { // selected a valid variant $('add').removeClassName('disabled'); // remove unavailable class from add-to-cart button $('add').disabled = false; // reenable add-to-cart button $('price-field').innerHTML = Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}"); // update price field } else { // variant doesn't exist $('add').addClassName('disabled'); // set add-to-cart button to unavailable class $('add').disabled = true; // disable add-to-cart button $('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message } }; // initialize multi selector for product Event.observe(document, 'dom:loaded', function() { new Shopify.OptionSelectors("variant-select", { product: {{ product | json }}, onVariantSelected: selectCallback }); }); --> </script> </ul>
Trending Repos
repo | stars | description |
---|---|---|
Timber | 871 | The ultimate Shopify theme framework, built by Shopify. |
Last updated August 9th, 2020