Catalogue widget

[JD001]

Hi guys,

I am busy designing a website to which I need to add a catalogue of products with a search feature. Please could someone steer me in the right direction? I have already created seperate catalogues on Xara which I converted to flip books, but now the client would like the catalogue to be embedded into the website in the different categories without pricing or the option to purchase, so I do not need an "online shopping feature" simply a product display in which potential customers can search for different products.

Thank you!!

[Acorn]

Hi guys,

I am busy designing a website to which I need to add a catalogue of products with a search feature. Please could someone steer me in the right direction? I have already created seperate catalogues on Xara which I converted to flip books, but now the client would like the catalogue to be embedded into the website in the different categories without pricing or the option to purchase, so I do not need an "online shopping feature" simply a product display in which potential customers can search for different products.

Thank you!!

JD, there is no such Xara Widget.

I can provide a half-way house using Xara components and a little sleight of hand.

Say, you have 1,000 Products.
You create a landing page with an IFRAME that will present each product as a preview.
The product pages are the same size as the IFRAME.
I made this Placeholder and the product pages 900x600px.

The Placeholder HTML body (code) is:

<iframe name="products" width=100% height=100%></iframe>

"products is required as the target in the Table widget.
When you have a link with a target destination, the link opens within the target's area (the Placeholder).

The Table Widget requires CSV data and it sucks for formatting and linking.
For the six rows I tweaked:

Categories, Apples, Pears, Oranges, Bananas, Preview Product
John, 8, 4, 6, 5, <a href='product01.htm' target='products'>Product 01</a>
Jane, 5, 7, 9, 8, <a href='product02.htm' target='products'>Product 02</a>
Joe, 8, 6, 7, 7, <a href='product03.htm' target='products'>Product 03</a>
Janet, 3, 6, 3, 10, <a href='product04.htm' target='products'>Product 04</a>
James,5,7,12,8, <a href='product05.htm' target='products'>Product 05</a>
Joanne,4,9,4,7, <a href='product06.htm' target='products'>Product 06</a>

'productnn.htm' is the filename of a product page.
I set the items count per page to 4.
For 1,000 products, I would set this to 25 (giving 40 tabbed pages).

The downsides.
Setting up the CSV is tedious.
I would use a text editor or even MS Excel to cover all this.
In Xara, watch out for smart quotes (' and ") may get transformed as Xara thinks it is a DTP.

The second downer is there is no Search only Filtering.
This might be good enough. Just click on the Headers.

If not, you have a big jump into jQuery and DataTables: https://www.datatables.net.

Xara - Product Preview.xar

Acorn

[Acorn]

I have added a very simple Filter: Xara - Product Preview - Filter & Sort.xar.

You need a small Placeholder with body code to input your filter text:
<input id="myInput" type="text" placeholder="Search..">
There is no clear entry or other detail.
This is on you.

I have then added Page HTML body (code) of:

<script>
$("#myInput").on("keyup", function() {
  var value = $(this).val().toLowerCase();

$("#table1_0_table tbody tr").filter(function() {
  $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});
</script>

You may need to use the browser Dev Tools to check the table ID is still #table1_0_table.
jQuery needs to be loaded.

I tweaked the code from here:https://www.w3schools.com/jquery/jquery_filters.asp.

Acorn