Welcome to TalkGraphics.com
Results 1 to 3 of 3
  1. #1
    Join Date
    Nov 2016
    Posts
    17

    Default Catalogue widget

    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!!

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,744

    Info Re: Catalogue widget

    Quote Originally Posted by JD001 View Post
    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:
    Code:
    <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:
    Code:
    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 - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,744

    Default Re: Catalogue widget

    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:
    Code:
    <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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •