Liquid - Modules

Cart Summary module

module_cartsummary

Displays the current cart summary: number of items and total value.

Arguments:

  • template: text

    default «» The template file for this module.

Exposed objects:

  • resources: cartResources

    Localised texts for the module.

Template:

<div class="cartSummaryContainer">
 <div class="cartSummaryContent">
  {% if cart.totalItems == 0 -%}
    <div class="cartSummaryItem">{{resources.shoppingCartEmpty}}</div>
  {% else -%}
    <div class="cartSummaryItem">{{cart.totalItems}} item(s) Total: {{cart.totalAmount}}<a href="{{cart.viewCartUrl}}" class="cartSummaryLink">{{resources.viewCartText}}</a></div>
  {% endif -%}
 </div>
</div>
<script text="text/javascript">
  if (!window.Cart) window.Cart={};
  Cart.refreshCart=function() {
    jQuery('.cartSummaryContainer').load('/ModuleRender.aspx?module=module_cartSummary&template=/_System/ModuleTemplates/Shop/cartSummary.html .cartSummaryContent');
  }
</script>

Usage:

{module_cartsummary}

The module uses global.cartSummary

Catalog List module

module_catalogList

Lists the subcatalogs in a catalog.

Arguments:

  • parentCatalogId: integer (required)

    Id for the parent catalog. -1 means root
  • sortBy: text default «name asc»

    Order of the catalogs in the list. Possible column values: name, weighting. Possible sort direction: asc, desc.
  • itemsPerPage: integer default «12»

    How many items to be displayed in a page.
  • template: text (required)

    The template file for this module.

Exposed objects:

  • catalogs: [catalog]

    List of child catalogs

Template:

The FTP location of the default template is /_System/ModuleTemplates/Shop/catalogList.html

<ul class="catalogList">
{% for catalog in catalogs %}
    <li> {{catalog.name}} - {{catalog.parent.name}}</li>
{% endfor %}
</ul>

{% assign navigation = catalogs.nav %}
{% include "/_System/ModuleTemplates/Shop/navigation_paged.html" %}

Usage:

{module_catalogList parentCatalogId="2", sortBy="name asc", itemsPerPage="5", template="/_System/ModuleTemplates/Shop/catalogList.html"}

Catalog module

module_catalog

Renders the properties of a catalog (name, description, image, etc).

Arguments:

  • catalogId: integer (required)

    The id of the displayed catalog.
  • template: text (required)

    The template file for this module.

Exposed objects:

  • catalog: catalog

    The catalog displayed.

Template:

The FTP location of the default template is /_System/ModuleTemplates/Shop/catalog.html

<div class="shop-catalogue clear">
    <h4>{{catalog.name}}</h4>
    <div class="image">
        <a title="{{catalog.name}}" href="{{catalog.url}}">
            <img alt="{{catalog.name}}" src="{{catalog.image}}" />
        </a>
    </div>
</div>

Usage:

{module_catalog catalogId="2" template="/_System/ModuleTemplates/Shop/catalog.html"}

Catalog Breadcrumb module

module_catalogbreadcrumb

Shows the list of ancestor catalogs for a specific catalog and optionally a product.

Arguments:

  • catalogID: integer default «0»

    The id of the catalog displayed. (by default taken from the URL)
  • productID: integer default «0»

    The id of the product displayed. (by default taken from the URL)
  • template: text default «»

    The template file for this module.

Exposed objects:

  • crumbs: collection of crumb

    List of crumbs to be displayed.
  • resources: crumbResources

    Localised texts for the module.

Template:

<span>
{% if crumbs.size == 0 -%}
  Online Shop
{% else -%}
  {% for crumb in crumbs -%}
    {% if forloop.last == true -%}
      <span>{{crumb.label}}</span>
    {% else -%}
      <a href="{{crumb.url}}">{{crumb.label}}</a> -
    {% endif -%}
  {% endfor -%}
{% endif -%}
</span>

Usage:

{module_catalogbreadcrumb}

Product List module

module_productList

List products in a catalog.

Arguments:

  • catalogId: integer or empty default «»

    The id of the parent catalog.
  • tag: text default «»

    The tag to search for.
  • onSale: true or false or empty default «»

    Whether to display only products marked as on sale.
  • template: text (required)

    The template file for this module.
  • price: text default «between(-1,-1)»

    The price range the products must be in to be displayed. The format is between(minimum price, maximum price)
  • sortBy: text default «weighting desc»

    The order and direction of the sorting. Possible columns: name, price, date, expirydate, weighting. Possible sort directions: asc,desc.
  • itemsPerPage: integer default «12»

    The number of items per page.

Exposed objects:

  • products: [product]

    List of found products.

Template:

The FTP location of the default template is /_System/ModuleTemplates/Shop/productList.html

<ul class="productList">
{% for product in products %}
    <li>
        {module_product productId="{{product.Id}}" catalogId="{{product.catalogId}}" template="/_System/ModuleTemplates/Shop/ProductSmall.html"}
    </li>
    {% endfor %}
</ul>

{% assign navigation = products.nav %}
{% include "/_System/ModuleTemplates/Shop/navigation_paged.html" %}

Usage:

{module_productList catalogId="2" onSale="true" price="between(100,500)" sortBy="weighting asc" itemsPerPage="5" template="/_System/ModuleTemplates/Shop/productList.html"}

Product Search Result module

module_productSearchResult

Lists the result of a product search.

Arguments:

  • itemsPerPage: integer default «12»

    The number of items per page.
  • sortBy: text default «name asc»

    The order and direction of the sorting. Possible columns: name, price, date, expirydate, weighting. Possible sort directions: asc,desc.
  • template: text (required)

    The template file for this module.

Exposed objects:

  • resources: productResources

    Localised texts for the module.
  • products: [product]

    List of found products.

Template:

The FTP location of the default template is /_System/ModuleTemplates/Shop/productSearchResult.html

<h3>Product Search Results:</h3>
<ul>
{% for product in products %}
    <li>
        {module_product productId="{{product.Id}}" catalogId="{{product.catalogId}}" template="/_System/ModuleTemplates/Shop/ProductSmall.html"}
    </li>
{% endfor %}

{% if products.navigation.totalProductsFound == 0 %}
        <li>Your search returned no results.</li>
{% endif %}
</ul>

{% assign navigation = products.nav %}
{% include "/_System/ModuleTemplates/Shop/navigation.html" %}

Usage:

{module_productSearchResult itemsPerPage="5" sortBy="name asc" template="/_System/ModuleTemplates/Shop/productSearchResult.html"}

Product module

module_product

Renders the properties of a product (name, description, image, etc).

Arguments:

  • catalogId: integer (required)

    The id of the catalog displayed. (by default taken from the URL)
  • productId: integer (required)

    The id of the product displayed. (by default taken from the URL)
  • template: text default «»

    The template file for this module.

Exposed objects:

  • product: product

    The product data object
  • resources: productResources

    Localized strings related to a product.

Template:

The FTP locations of the default templates are /_System/ModuleTemplates/Shop/productLarge.html and /_System/ModuleTemplates/Shop/productSmall.html

<script type="text/javascript" src="/js/onlineShop.js"></script>
<div class="shop-product-large">
<div class="details">
<h1><a href="{{product.url}}">{{product.name}}</a></h1>
<ul>
    <li class="price"><strong>{{product.price}}</strong></li>
    <li class="instock">In stock: <strong>{{product.inStock}}</strong></li>
    <li class="quantity">
        <input id="qty_{{product.id}}" class="productTextInput" name="AddToCart_Amount" type="text" value="{{product.minUnits}}">
        <img alt="" src="/CatalystImages/shop_addtocart.png" onclick="Cart.AddToCart('{{product.id}}', '{{product.catalogId}}', 'qty_{{product.id}}', onSuccess, onError, 'relatedProducts_{{product.id}}', 'productAttributes_{{product.id}}');" />
    </li>
</ul>
<script type="text/javascript">
function onSuccess(results) {
    return Cart.onSuccess(results);
}
function onError(results) {
    return Cart.onError(results);
}
</script>

{% comment %} list of links to products in the same group {% endcomment %}
{% if product.productGroup.products.size > 0 -%}
<ul class="groupedProducts">
{% for productGroupItem in product.productGroup.products  -%}<!-- sorted by weighting -->
    <li><a href="{{productGroupItem.url}}">{{productGroupItem.name}}</a></li>
{% endfor -%}
</ul>
{% endif -%}

{% comment %} droddown to products in the same group (changes location on change) {% endcomment %}
{% if product.productGroup.products.size > 0 -%}
<select onchange="document.location=jQuery('option:selected',this).val();">
{% for productGroupItem in product.productGroup.products -%}<!-- sorted by weighting -->
    <option value="{{productGroupItem.url}}"{% if (productGroupItem.id == product.id) %} selected="selected"{% endif %} >{{productGroupItem.name}}</option>
{% endfor -%}
</select>
{% endif -%}

<div class="description">{{product.description}}</div>
<div class="image"><a href="product.url"><img id="catlproduct_{{product.id}}" src="{{product.largeImage}}" alt="{{product.name}}" border="0"/></a>

{% comment %} For small product detail list (doesn't need id, because it has its own add to cart mechanism) {% endcomment %}
{% if product.relatedProducts.size -%}
<ul class="relatedProducts">
{% for relatedProduct in product.relatedProducts -%}
    <li>{module_product productId="{{relatedProduct.Id}}" catalogId="{{relatedProduct.catalogId}}" template="/_System/ModuleTemplates/Shop/productSmall.html"}</li>
{% endfor -%}
</ul>
{% endif -%}

{% comment %} For checkbox product list (the id is used in Add to cart for the parent product) {% endcomment %}
{% if product.relatedProducts.size -%}
<ul class="relatedProducts" id="relatedProducts_{{product.id}}">
{% for relatedProduct in product.relatedProducts  -%}
    <li><input type="checkbox" name="relatedProduct_{{product.id}}" id="relatedProduct_{{relatedProduct.id}}" value="{{relatedProduct.id}}"/><label for="relatedProduct_{{relatedProduct.id}}">{{relatedProduct.name}}</label></li>
{% endfor -%}
</ul>
{% endif -%}

{% if product.attributes.size -%}
<ul class="attributes"  id="productAttributes_{{product.id}}">
{% for attrGroup in product.attributes  -%}
    <li><div id="attrGroup_{{attrGroup.id}}" class="attributeGroup{% if attrGroup.isMandatory %} mandatory{% endif %}"><label for="attrGroup_{{attrGroup.id}}">{{attrGroup.name}}:</label>
    {% case attrGroup.fieldType -%}
    {% when 'Radio' -%}
        <ul class="radio">
        {% for attr in attrGroup.items  -%}
            <li>
                <input type="radio" name="{{attrGroup.name}}" value="{{attr.id}}" id="attr_{{attr.id}}"/>
                <label for="attr_{{attr.id}}">{{attr.name}} ({{attr.price}})</label>
                {% if attr.image.size > 0 %}<img src="{{attr.image}}"/>{% endif %}
            </li>
        {% endfor -%}
        </ul>
    {% when 'CheckBox' -%}
        <ul class="checkbox">
        {% for attr in attrGroup.items  -%}
            <li>
                <input type="checkbox" name="{{attrGroup.name}}" value="{{attr.id}}" id="attr_{{attr.id}}"/>
                <label for="attr_{{attr.id}}">{{attr.name}} ({{attr.price}})</label>
                {% if attr.image.size > 0 %}<img src="{{attr.image}}"/>{% endif %}
            </li>
        {% endfor -%}
        </ul>
    {% else -%}
        <select class="dropdown" name="{{attrGroup.name}}">
            <option value="">-- Please Select --</option>
        {% for attr in attrGroup.items  -%}
            <option value="{{attr.id}}">{{attr.name}} ({{attr.price}})</option>
        {% endfor -%}
        </select>
    {% endcase -%}
    </div></li>
{% endfor -%}
</ul>
{% endif -%}

{% if product.thumbnails.size -%}
<ul class="poplets">
{% for thumbnail in product.thumbnails  -%}
    <li><img src="{{thumbnail.imageURL}}" /> - <img src="{{thumbnail.imageUrl}}?action=resize&amp;width=65&amp;height=65" /></li>
{% endfor -%}
</ul>
{% endif -%}

</div>
</div>

</div>
<div class="comment-form">
<h5>Comment</h5>
<form action="/RatingProcess.aspx?OID={module_oid}&amp;OTYPE={module_otype}" method="post" onsubmit="return checkWholeForm2343(this)" name="catratingform2343">
    <div class="form">
    <div class="item">   <label>Was this helpful?</label><br />
    No   <input type="radio" value="1" name="Rating" />   <input type="radio" value="2" name="Rating" />   <input type="radio" value="3" checked="checked" name="Rating" />   <input type="radio" value="4" name="Rating" />   <input type="radio" value="5" name="Rating" />   Very   </div>
    <div class="item">   <label>Name (optional)</label><br />
    <input type="text" maxlength="255" name="FullName" class="cat_textbox_small" />   </div>
    <div class="item">   <label>Website (optional)</label><br />
    <input type="text" maxlength="255" name="Website" class="cat_textbox_small" />   </div>
    <div class="item">   <label>Email Address (optional)</label><br />
    <input type="text" maxlength="255" name="EmailAddress" class="cat_textbox_small" />   </div>
    <div class="item">   <label>Enter Word Verification in box below</label><br />
    {module_captchav2}   </div>
    <div class="item">   <label>Comment (optional)</label><br />
    <textarea name="Feedback" class="cat_listbox_small"></textarea>   </div>
    <div class="item">   <input type="submit" value="Submit" class="cat_button" />   </div>
    </div>
    <script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
    <script type="text/javascript">   //<![CDATA[
   function checkWholeForm2343(theForm){var why = "";if (theForm.EmailAddress) if (theForm.EmailAddress.value.length > 0) why += checkEmail(theForm.EmailAddress.value);if (theForm.CaptchaV2) why += isEmpty(theForm.CaptchaV2.value, "Enter Word Verification in box below");if (why != ""){alert(why);return false;}theForm.submit();return false;}   
//]]>                                </script>
</form>
</div>

 

Usage:

<ul class="shop-productList">
    {% for prd in products %}
    <li>
        {module_product productId="{{prd.Id}}" catalogId="{{prd.catalogId}}" template="/_System/ModuleTemplates/Shop/productSmall.html"}
    </li>
    {% endfor %}
</ul>

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online