Products

Settings

These settings relate to the overall Products options and functionality and how content might be managed by site administrators.

For nested modules, such as Blogs, Events, Banners, Galleries, FAQs, and any nested Custom Modules, you may wish to edit the settings for each of the 2 nested modules. You can easily switch between the 2 module's settings using the switcher at the top of page (under the modules name). The disabled, greyed out item, indicates the currently active module - while the highlighted linked item, provides a link to the connected module.

Item Properties

Here you can define the various options that might be available when creating Product items, such as the system data fields to be used, default expiry, SEO settings, custom fields, and more...

Layouts

Layouts are the containers for an item's data to be rendered into, along with your custom markup. They are output by way of their associated component tag.
eg:

{% component type: "module", source: "Products", layout: "List" %}

When the component is output it loops through all of its relevant items and renders their data into the specified Layout, as defined by the layout parameter of the component tag.
In other words, the Layout acts as a type of template for displaying the Product's data.

You create your HTML markup or custom code and insert something similar to “data merge tags” by way of Liquid objects (eg: {{this['name']}} would render the item’s name).

List Layouts

Layouts of type ‘List’ are typically used for rendering repeating data sets. So, if the component you've configured retrieves 3 items, the List Layout will be rendered 3 times, each with a different item’s data being inserted within a defined markup.

Here is a simple example of how the Layout works, rendering a heading with the item's name as a link:

<div>
    <h2><a href="{{this['Url']}}">{{this['Name']}}</a></h2>
</div>

Using the example above of 3 items, the result on the website's front-end would look something like this:

<div>
    <h2><a href="/module-url/Product-1">Product 1</a></h2>
</div>
<div>
    <h2><a href="/module-url/Product-2">Product 2</a></h2>
</div>
<div>
    <h2><a href="/module-url/Product-3">Product 3</a></h2>
</div>

Detail Layouts

Layouts of type ‘Detail’ are typically used for rendering a single item's detail view, as displayed when browsing to that item’s unique URL.

Here is a simple example of how the detail Layout could look, rendering a heading with the item's name and the item's description field:

<div>
    <h2>{{this['Name']}}</h2>
    <div>
        {{this['Description']}}
    </div>
</div>

So, as per the example above, if viewing the first Product, the Layout would render something like this:

<div>
    <h2>Product 1</h2>
    <div>
        This is the description content of Product 1.
    </div>
</div>

For Products, there is a range of additional functionality you can insert on either product list or detail layouts.

Adding/Editing Layouts

You have the freedom of editing these layouts as you need to, with any HTML, CSS or JS as appropriate for your project. As well as creating unlimited, additional layouts.

Click the 'ADD NEW LAYOUT' button at the top to create additional list or detail layouts.

You can then add your custom markup and insert dynamic Liquid objects into your layout. Using the ' Properties' manager (found at the top right of the editor), simply click on the desired Liquid object name from the list to have it inserted at your cursors position within your markup, or click on the copy icon () to copy it to your clipboard.

Additionally, you can even add other modules inside of these Layouts, just as you might insert them onto a regular page. Simply click on the ' Components' manager (found at the top right of the editor) and follow the prompts to configure any additional component tags for the desired data output.

Table

This setting allows you to customise the column headers in the table/list view of module items in the admin. Allowing you to provide a better editing experience for you and the site admins.

For example, looking at a list of products, you’d likely want to see, and sort by, different columns of data than you would for a list of gallery slides or a list of staff members.

Reposition or Remove Table Columns

The Tables interface shows a representation of the current column headers which can be repositioned (via drag and drop), or deleted (via the x () icon, shown on hover).

Any changes made to the headers here are saved automatically.

Editing Table Columns

You can add additional columns to your module list view by clicking the “Add New Column” button, or you can edit existing ones via the pencil () icon (shown next to the column label on hover).

Column options are as follows:

Views

There are 3 different list views your Product items can be configured to display in, or switched to via the icons ( ) in the top right of the item view.

Depending on how the module is configured, some or all of these icons may be visible and the default view may be different to that of how other modules display.

List View ()

A direct listing of all the current module items, in a tabular layout, which can be clicked on to access their content. A typical view for singular, self contained modules.

Tree View ()

Relevant for nested module structures, this view shows all current module items, in a tabular layout, as folders (parent items) which can be clicked into to access a List View of their child module items.

Simplified Tree View ()

Relevant for nested module structures, this view shows all current module items (parent items) in a simplified list of items only. These can be reordered or nested via drag and drop or further edited via the auxiliary menu () visible next to the item on hover.

For more details on these view options see the module ‘Advanced Settings’ section above.

Import / Export

Found under the main auxiliary menu (), you can import/export data to/from your Products module where you can then further update your items in bulk using a spreadsheet application and re-import item data in an Excel file format (.xlsx).

If re-importing to update existing items, be sure to maintain the same 'External ID' values from those exported items.

Export the current items in order to get a template import file you can use for importing new data. If you're starting from scratch, first create a dummy item with some sample data so you can see the import format needed.

Import for Nested (Parent/Child) Modules

Nested modules include eCommerce (Products/Catalogs), Pages, Blogs, Events, Banners, Galleries & Sliders, FAQs, and any Custom Modules that have been configured to ‘Allow creating foreign items from other existing Custom Modules’.

The import file for such child modules will include a ‘Parents’ column which allows the imported item (row) to be assigned to a parent item (or its root level) via it’s URL path/slug. Or even multiple parents, if ‘Allow multiple parent items’ is configured in the parent module.

For example; if we have a parent module called “Web Technologies” with an item called “Javascript” and we wanted to assign an item from a nested module to it, we would include the following path in the child item’s “Parent” column cell: /web-technologies/javascript

The item’s full URL would then become /web-technologies/javascript/item-name

And if assigning to multiple parents, we would include each parent item’s slug separated by a semicolon (;), like so: /web-technologies/javascript;/web-technologies/liquid

Similarly, if we want to assign the child item to the root level parent module, include the module slug without any parent item slug included: /web-technologies

If the import file for the child items has empty ‘Parent’ cells or if the column is not present, the child items will be imported into the view you initiated the import from. So if you are viewing the parent items in ‘List View’ or are at the top level/root using ‘Tree View’, the imported items will be assigned to the root level of the parent module. Likewise, if you have navigated into a parent “folder” and initiate the import process, the child items will be assigned to the currently viewed “folder” (only if the Parent cell is empty or omitted from the file).

You can also assign child items as parents to other child items, in the same module, during the same import process. For example; if we have two child items called “Number type” and “Integer” an wanted “Integer” to be a child of “Number type”, then it’s Parent cell value would include the parent module’s root slug and the target child item’s slug, like so:
/web-technologies/number-type

Resulting in the item’s full URL to become /web-technologies/number-type/integer

The sequence of the imported items in the spreadsheet is not important here. They can be in any order.

URL Conflicts

If, upon attempting to create an imported item with the constructed parent/child URL, the URL already exists in your site, the item will be handled in one of two ways (based on the site’s setting in ‘Settings’ > ‘Misc’ > ‘Disable autocomplete for already taken URL slugs’):

• If setting is unchecked (URL autocomplete enabled) then the conflicting URL will be appended with an incrementing number.
• If setting is checked (URL autocomplete disabled) then the import will present an error for that item and skip any update/creation of the item.

URL list column

The ‘URL list’ column in an export file is for export display purposes only (to display a full construction of both parent and item slug paths). This column is ignored for imported data and item URLs are determined by the individual parent and slug values.

Other Errors

The import process will present an error of each imported item if any of the following conditions are encountered (and will skip that item from being updated/created):

• If multiple parent slugs are included in the Parent cell but the module is not configured with the setting “Allow multiple parent items”
• If multiple parent slugs are included in the Parent cell and one or more of those slugs do not match any existing parent module items (missing parent items will not be created during import).
• If the slug included in the Parent cell is the same as the item slug being updated/created (cannot assign itself as parent).

If an error is thrown on a child item that is elsewhere assigned, in the import file, to be a parent to other child items, then all of those child items will also be skipped during import, since their parent cannot be created.

Advanced Import Syntax - Prices, Attributes, and Inventory

Product area should be defined as:

• (1) first line - info of the product and its relations
• (2) all lines under with the same SKU code before end of file or another SKU code (SKU code should be same and present in all lines of the product data)

Add following fields for specific-serialized relations:

• Parents [name of the parent module]. eg: `Catalog`
  • Value: [parent item urls separated by `;`].
    eg:
    `/catalog-1/sub-catalog;/catalog-1;/;`
• Sale Price
  • Value: [country]-[currency]/[sale-price],[quantity for threshold option №1]/[price threshold option №1],[quantity for threshold option №2]/[price threshold option №2];
    eg: AU-AUD/30.00,2/26.00,5/22.00;AU-USD/20.00,10/18.00,100/16.00;
    
    NOTES:
    If no [currency] specified - use Currency-By-Country-Defaults.json mapper as default currency for country definition
• Retail Price
  • Value: [country]-[currency]/[sale-price];
    eg:

  AU-AUD/30.00;AU-USD/20.00;
  
  NOTES:
  If no [currency] specified - use Currency-By-Country-Defaults.json mapper as default currency for country definition

• Tax Code
  • Value: [country]/[tax_name or "Never"];
    eg:
    AU/Never;US/AZ;
    
    NOTES:
    If [tax_name] not set to the country or [tax_name] === ”Never”, do not apply tax
• Grouping Product Codes
  • Value: [product_sku_code][Is_main_product];
    eg:
    sub_prod_1;main_prod*;sub_prod_2;
    
    NOTES:
    If [Is_main_product] == "*" then this product IS main. Otherwise this product IS NOT main.
    
    If several products shown to be main - use last one as main and ignore others.
• Grouping Product Display Name
  • Value: [product_display_name];
    eg:
    Sub product 1;;Sub product 2;
    
    NOTES:
    Can be empty.
• Related Products
  • Value: [product_sku_code];
    eg:
    HAYNM5AXVB;sub_prod_1;HMDP9271;
• Low Stock Notification
  • Value: number
    eg:
    50
    
    NOTES:
    Greater than or equal to 0
• Enable Inventory Control
  • Value: (boolean) true or false
    eg:
    Y or TRUE
    N or FALSE or empty
• Can Pre-Order
  • Value: (boolean) true or false
    eg:
    Y or TRUE
    N or FALSE or empty
• Hide if Out of Stock
  • Value: (boolean) true or false
    eg:
    Y or TRUE
    N or FALSE or empty
• Attributes
  (ignore this cell value if product ALREADY EXIST AND has GENERATED VARIATIONS AND "Variations Enabled" cell != FALSE)
  • Value: (complex pattern described below, intended to be on one line)
    
    [attribute name][is_required]
    |
    [attribute_type]
    |
    [is_inventory_item]
    :
    [option_name]
    |
    [option_image_path]
    |
    [country]-[currency]
    /
    [option_price_1]
    |
    [country]-[currency]
    /
    [option_price_2]
    ,
    [option_name]
    |
    [option_image_path]
    |
    [country]-[currency]
    /
    [option_price_1]
    ,
    [option_name]
    ||
    [country]-[currency]
    /
    [option_price_1]
    ; (repeat)
    
    NOTES:
    If no [currency] specified - use Currency-By-Country-Defaults.json mapper as default currency for country definition
    
    [option_name] CAN'T contain following symbols
    - |
    - ,
    - '
    - *
    
    If [is_required] == * then this product IS required. Otherwise it’s not.
    
    [attribute_type] is one of the following:
    - 5 or DropDownList
    - 6 or CheckBoxList
    - 7 or RadioList
    
    [is_inventory_item] - determines if current attribute is inventory attribute, one of:
    - Y or True - (boolean) true
    - N or False - (boolean) false
    
    [option_image_path] and option prices are not required and can be skipped in format string.
    
    Example string:
    Test attr checklist*|6|N:option checklist 1|/img.jpg|AU/10|US/5,option checklist 2|/img.jpg|AU/20|US/15,option ck 3|;Test attr Dropdown List*|5|Y:option droplist 1|/img.jpg|AU/10|US/5,option droplist 2|/img.jpg|AU/20|US/15;Test attr radiolist*|7|Y:option radiolist 1|/img.jpg|AU/10|US/5,option radiolist 2|/img.jpg|AU/20|US/15;ddfdsd*|5|Y:aasas||AU/20|US/15,xasas||AU/20|US/15
    
    
• Wholesale Sale Price
  • Value: (pattern described below, intended to be on one line)
    
    [country]-[currency]
    /
    [sale-price]
    ,
    [quantity for threshold option №1]
    /
    [price threshold option №1]
    ,
    [quantity for threshold option №2]
    /
    [price threshold option №2]
    ; (repeat)
    
    NOTES:
    If no [currency] specified - use Currency-By-Country-Defaults.json mapper as default currency for country definition
    
    Example String:
    AU-AUD/30.00,2/26.00,5/22.00;AU-USD/20.00,10/18.00,100/16.00;
• Recurring Type
  • Value: one of (numeric or string value)
    - 1 or Once
    - 2 or Daily
    - 3 or Weekly
    - 4 or Fortnightly
    - 5 or Monthly
    - 6 or Quarterly
    - 7 or Half Yearly
    - 8 or Yearly
• Hide if Out of Stock
  • Value: (boolean) true or false
    eg:
    Y or TRUE
    N or FALSE or empty
    
    NOTES:
    If TRUE and no variations was created earlier - generate all variations and edit them by the values within columns Variations Code, Enabled, In Stock, Pre-Order determining variation by attribute options combination in the column Variation Options.
    If FALSE - discard variations.
• Variation SKU Code
  This column and columns below are assigned both to initial (global) product and to it’s variations.
  - Value for the first row assigned to the global product settings.
  - Values in the row/s below (that relate to initial product) are assigned to each variation row.
  • Value: string (unique SKU code, should be empty for product row but required for variation row)
    If not set - ignore entire variation row data.
    
    Eg:
    HAYNM5AXVB
• Enabled
  • Value: (boolean) true or false
    eg:
    Y or TRUE
    N or FALSE or empty
• Variation Options
  • Value:
    [option_of_attribute_1]
    ;
    [option_of_attribute_2]
    ; etc.
    
    NOTES:
    Determines what variation should be edited by the fields:
    - Variations Code
    - Enabled
    - In Stock
    - Pre-Order
    
    If such combination not found in the product - ignore changes in this row for the following columns:
    - Variations Code
    - Enabled
    - In Stock
    - Pre-Order
    
    eg:
    HAYNM5AXVB;sub_prod_1;HMDP9271;
• In Stock
  • Value: number (greater than or equal to 0)
• Pre-Order
  • Value: number (greater than or equal to 0)

Deleting

Found under the main auxiliary menu (), you can delete ALL Products in bulk using the "Delete All Items" option.

Additionally, you can make bulk selections from the item list view (by ticking the checkboxes on the left of each item) and click the "DELETE SELECTION" button that will appear at the base of the list view.

Individual items can be deleted either by expanding the auxiliary menu to the right of each item and selecting the "Delete" option or when on the item's edit page, click the trash can icon () in the lower right of the page.

Bulk Apply Template

After making a selection of module items, using the checkboxes to the left of each item, an “Apply Template” option will become available in the main auxiliary menu () allowing you to assign a template, in bulk, to the selected items.

Settings

Prices

Price points can be set at multiple currencies for both Consumer and Wholesaler levels along with tax assignment and unlimited volume discount levels.

The ‘+ Add New Price’ button allows you to add additional price points for each currency your site supports. Saved prices will display in a list ready for further editing as needed.

Below are descriptions of the pricing options.

Catalog

This tab will only be visible when the module is in a nested configuration, with a parent and child module grouping, and when the child module allows ‘multiple parent items’ in its advanced settings.

The tab will carry the name of the parent/child module, depending on which module you are viewing.

See module Advanced Setting above for more details on this configuration.

This page will display the items from the Catalog module and allows you to assign multiple Catalog to the current Product item - by dragging and dropping from the available items on the left into the assigned list on the right. Or you can remove Catalog from the Product by moving them from right to left.

Additionally, the directional arrows in the middle can be used to move selected items right or left, or to move ALL items together right or left (using the double arrow buttons). This can be useful to clear all assigned Catalog from the Product quickly, for example.

Attributes

Attributes allow you to add any number of options to your product that can then be configured for the product for purchasing.

Attributes can be optional or required, include a price point of their own and even include an additional image reference.

Clicking the ‘ADD NEW ATTRIBUTE’ button will start a new attribute group which will hold that attributes options.

The settings available are as follows:

To later edit an Attribute group’s settings, click the ‘ Edit Attribute’ link.

To add options to an Attribute group, click the ‘ Add new option’ link, which will open the options panel providing the following settings:

Individual attribute options can be later edited or deleted via the pencil () and trash can () icons alongside each individual option.

Both Attribute groups and their options will render on the front-end of your site in the order they appear in the admin.
This ordering can easily be adjusted by grabbing the placement icon () and dragging and dropping the item rows into their desired locations.

To display the Product attributes on your site, you can add the ‘Product attributes’ tag to your Product layouts via the Component Manager under the ‘eCommerce’ section. See also further configuration options for this tag here.

Inventory

Tracking inventory can be managed on a per product level and can be used for controlling how products display and if they can be pre-ordered on the front-end website.

Inventory control also provides functionality for low stock notifications, pre-order quantities and current in-cart quantities.

If products have certain attributes that affect different stock levels that need to be tracked, you can also enable inventory management down to each attribute option, selectively.
For example, if selling a Chair with attributes of colour and assembly, it may be required to track inventory for the colour variations of that single product, but not relevant for the assembly option selected.

A detailed look at the Inventory options are as follows.

Generate Variations

When you enable variations, any attribute groups that have been set as ‘Add to inventory’ will be created here as individual stock lines.

The original stock levels, for the overall product, will be reassigned to the next available stock line where you can then reallocate the levels as needed.

Each attribute option will now have its own ‘In Stock’, ‘Pre-order’, and ‘Added to Shopping Cart’ levels, as per the above table, for fine grain inventory tracking.
Optionally, you can disable an individual attribute option to exclude it from inventory management.

When inventory variations are enabled and you need to add additional attribute groups to the Product, that also require inventory tracking, you will first need to discard the inventory variations and then re-generated after any new attribute groups have been added (the total inventory levels will be restored to the overall product inventory when discarding). Additional attribute options within the group can be added, but will be disabled in the inventory variations by default. You can then edit the inventory to enable these additions and set their stock levels as required.
See the Attributes section above for more details

If using Low Stock Notification, the notification will be triggered per variation reaching the set threshold value.

Related Items

You can create a relationship between two or more items within the Product module which is useful for displaying similar, or potential up-sell, Products alongside the current Product on the front-end website.

This page will display all other Product items and allows you to assign those items to the current Product item - by dragging and dropping available items from the left into the assigned list on the right. Or you can remove relationships by moving them from the right to the left.

Additionally, the directional arrows in the middle can be used to move selected items right or left, or to move ALL items together right or left (using the double arrow buttons). This can be useful to clear all assigned relationships from the Product quickly, for example.

To display the related products on your site, you can add the 'Related Products' tag to your Product layouts via the Component Manager under the ‘eCommerce’ section. See also further configuration options for this tag here.

Group Items

Grouping Products together provides another way to create item relationships and the grouped products can then be displayed in the Product layout and used to easily switch between them.

Grouping Products is useful when you have multiple very similar Products but they differ slightly in ways that can’t be expressed via Product attributes or other options.

To display the grouped products on your site, you can add the 'Grouped Products' tag to your Product layouts via the Component Manager under the ‘eCommerce’ section. See also further configuration options for the Grouped Products tag here.

An example of this component tag is:

{% component type: "grouped_items", source: "Products", itemId: "<Item ID>" %}

How it Works

When a grouped product is selected, either from your list view or detail view of your website, WebinOne will use AJAX to fetch that layout region of the selected product and replace it on the page in place of the current product.

To do this, the system needs to identify the region to fetch and to replace and so whenever there is a grouped product detected for a rendered product, list or detail view, a HTML element will be added which wraps the layout with an identifying attribute.

This element is formatted as such:

<div class="cms-product-wrapper" data-cms_product_wrapper="2443" data-cms_layout_name="{model.Layout}"></div>

If you’re rendering products outside of the typical layouts method (ie: via a custom Liquid collection and forloop), you will need to add this wrapper to your code manually.

Javascript Considerations

Since the grouped product layout is being added to the page via AJAX you may encounter issues with any javascript related functionality within that products layout view (such as an image slider/zoom or other interactive effects driven by javascript), as the newly added scripts will not fire since the page has not been reloaded.

To resolve these types of issues, you may need to reinitiate your javascript functions after the grouped product has been fetched.

To make this easier for you, WebinOne will fire a javascript event once the AJAX call has completed. The event is named onProductLayoutChanged and an example of its use might be as follows (using jQuery and added to your sites JS file):

$('body').on('onProductLayoutChanged', function(){
    // Do something here like re-initiate your product related Javascript plugins/scripts
});

SEO

Component Tag with ‘isSearchResult’

To render the search results to the page and/or a collection, you need to configure the module’s component tag with the isSearchResult parameter set to true (see the Product component documentation for technical details).

{% component type: "module", source: "Products", layout: "List", isSearchResult: "true" %}

This will allow the component to reference search parameters in the resulting URL.

URL search parameters will override any corresponding parameters in the component. If no search parameters are present in the URL, isSearchResult will be ignored.

You may want to separate the search form from the component tag if you want a dedicated search results page, or where you have a search input in the header or footer of all pages as so searches could be made from any page.

This method also alleviates a side-effect of the isSearchResult configured component whereby it will output all indexed items by default if no search query has been specified (ie: when a user first navigates to a search page).

If you do want one single search page, with both search form and component and don’t want to initially list all results, another solution to this is to wrap the component tag in a Liquid condition which looks for the presence of the prop_KeyWords parameter in the URL, like so:

{% if request.request_url.params.prop_KeyWords %}
    {% component type: "module", source: "Products", layout: "List", isSearchResult: "true" %}
{% endif %}

Basic Search Form

A basic keyword based search form for Products would be constructed like the following:

<form>
    <input type="hidden" name="prop_ModuleId" value="1234">
    <label>Keywords</label>
    <input type="text" name="prop_KeyWords" maxlength="255" value="{{request.request_url.params.prop_KeyWords | strip_html}}">
    <input type="submit" value="Search">
</form>

This form element includes a prop_KeyWords text input, prop_ModuleId hidden input, a submit button and no form action attribute.

The prop_ModuleId hidden input tells the search which module to search (replace ‘1234’ with the ID of your module).

The prop_KeyWords text input allows multiple keywords to be entered for searching.

The search logic combines multiple keywords with an AND operator, so items will be returned only if they include ALL keywords entered.

Currently, searching does not support any manual logic operators to be used in the keyword input field (such as; AND, OR, NOT...)

When the form is submitted, prop_ModuleId and prop_KeyWords, along with their values, will be passed as URL parameters for the isSearchResult configured component tag to interpret.

By default, the search form has no action attribute, so it will redirect to the current page with the URL parameter appended to the current page URL.

You can, instead, separate the search form from the ‘site_search’ component, having the module component on a separate page and sending the search query to that page instead of the current page.

To do this, you’d add the other page URL slug to the form element. So if the other page was “/search-results”, you’d adjust the form to include an action attribute as such:

<form action="/search-results">

Advanced Search Form

Building further on the basic form structure above, you can add Product specific fields to search their contents, either individually or combined with other fields and/or keyword queries.

The search logic combines all field queries with an AND operator, so items will be returned only if they include ALL the queries entered.

The fields (providing they are available to the module) that can be search upon include:

• Name
• URL (Slug)
• SKU Code
• Release Date
• Expiry Date
• Site Search Keywords
• Rating
• Description
• Any ‘Default Properties’ (eg: Categories, Tags, Author...)
• Any ‘Custom Properties’
• Module specific ‘System Properties’ (Price, Product Dimensions, Unit Type, Capacity...)

To add these fields to your search form, create an appropriate input with the name attribute configured like prop_PropertyName.

So, if you were adding a search field for a custom property called “Vehicle Colour”, the form input might look like this:

<input type="text" name="prop_VehicleColour">

Follow this same format for most other properties. Although you may like to change the input type to suit the type of data required.

For example, if our above “Vehicle Colour” property was actually a dropdown field with predefined colour values, you may choose to create a <select> element instead, like so:

<select name="prop_VehicleColour">
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
    <option value="Green">Green</option>
</select>

After the search form has been submitted, you might also like to keep the search queries filled in the search form fields, for better usability. So to do this you can pull the query parameters out of the URL and into the input values, like so:

<input type="text" name="prop_VehicleColour" value="{{request.request_url.params.prop_VehicleColour | strip_html}}">

Search Within Number Ranges

For property types such as dates, prices, ratings and numbers, you can search with a to-from/min-max range by adding _Min or _Max to the property name.

So let’s say you want to search for items within a certain date range, based on their release/expiry dates.

<input type="datetime-local" name="prop_ReleaseDate_Min">
<input type="datetime-local" name="prop_ExpiryDate_Max">

And to populate these fields with the searched values:

<input type="datetime-local" name="prop_ReleaseDate_Min" value="{{request.request_url.params.prop_ReleaseDate_Min | date: "%Y-%m-%dT%H:%M" | strip_html}}">
<input type="datetime-local" name="prop_ExpiryDate_Max" value="{{request.request_url.params.prop_ExpiryDate_Max | date: "%Y-%m-%dT%H:%M" | strip_html}}">

Searching for a minimum release date will return all items with a release date newer (or the same as) the query date. And likewise searching for a maximum expiry date will return all items with an expiry date older (or the same as) the query date.

Programmatically Search (without a form)

There may be times when you require the search results for a module based on constructed data, other than that of a user’s input into a search form.

You can achieve this with the use of the searchScope parameter on the module’s component tag (see the Product component documentation for technical details).

This parameter allows a search on the module without search parameters needed in the URL. Instead, search parameters are added to the value of this parameter. Therefore, this parameter can be used to output module specific search results from hard-coded (or Liquid constructed) values without the use of a search form.

The search queries are similar to that used in the above form based search method, but use JSON syntax for their construction.

Below is an example of a constructed searchScope configured component tag, with min/max release date search, keywords and multiple tags query:

{% component type: "module", source: "Products", layout: "List", searchScope: "{'prop_ReleaseDate_Min':'2018-07-01', 'prop_ReleaseDate_Max':'2018-07-31', 'prop_KeyWords':'Your Keywords', 'prop_ItemTags':['tag1','tag2']}" %}

The search logic combines all field queries with an AND operator, so items will be returned only if they include ALL the queries entered.