40 posts in this topic

Quick note about this site, it's just been re-launched as a 'V2' after an additional 90 hrs of work on it...


mostly a lot of refactoring of code, finding better, more efficient ways of doing things, both in frontend and admin...I had about 2 years of good reading–the forum–between the initial launch and when the refactor started... <_<

Thanks to pro modules like Table and Lister Pro, the management interface is fast, and easy for the company management to maintain.

With 4 separate product lines to manage (Speakers, Legacy Products, B-Stock and Home Theater), Lister pro has streamlined this–the agile ajax interface is truly unparalleled amongst ecommercce systems for adding and editing hundreds of products.

The news system has been expanded and enhanced with xml feeds, category/tag/archive filters, author profile, and other enhancements.

The product search was converted from a server side search to a completely Javascript based filter, using html5 pushstate, and graphical sliders.

The category overview pages filter the products as opposed to being separate pages, reducing page loads.

Product pages are more intuitive, with better veneer picker, and other javascript enhancements.

6 people like this

Share this post

Link to post
Share on other sites

What order management system are you using with Foxycart? Orderdesk? Or a custom solution?

They are actually not using anything other than the stock Foxycart admin; Though i did setup Orderdesk and it looks great, but i don't think they ever used it.

the filter is awesome! do you have some insights on this for us? :)

@BernhardB - thanks for checking it out!

The filter is really dead simple..

1.) jQuery Datatable with custom filters, using PW page IDs as data attributes on the cells, e.g. data-filter="1234"

2.) when you change any of the filters, there is an onchange trigger to redraw the table with the filter;

3.) change some numerical inputs to the sliders

4.) empty divs above the table, one for each filter type, and those are populated at the same time when the filters change

3 people like this

Share this post

Link to post
Share on other sites

Yes - good find, that was the model i used for setting up the range filtering..

    function( settings, data, dataIndex ) {
        var distance 	= parseInt( $('#search_distance').val(), 10 );
        var distmax 	= parseFloat( data[3] ) || 0; // use data for the distance column

        	isNaN( distance )
        	distance <= distmax
            return true;
        return false;

and i'm using the ion rangeslider, which after testing a few different ones seemed to work best

2 people like this

Share this post

Link to post
Share on other sites

hi macrura,

just visited your site again because i may need something similar. as i did lots of work with datatables recently i saw you might want to add scrollx to your table as it is not 100% visible on very small screens: https://datatables.net/examples/basic_init/scroll_x.html

maybe you are already checking for mobile devices. i just checked with chrome window resize ;)

Share this post

Link to post
Share on other sites

i thought i made the tables all collapse to vertical on mobile - which table isn't visible?

Share this post

Link to post
Share on other sites

oh, thanks - yeah, didn't get around to doing the 'collapsable' rows on that page - thanks for the heads up!

1 person likes this

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Kass
      Hi everyone,
      Does anyone know how I could insert an add-to-cart button (of a product from Prestashop) onto a Processwire page? The add-to-cart button should then lead the user to the checkout page of a Prestashop installation. The user should be able to select the product quantity before adding-to-cart. 
      I am aware of simplecart.js but I do not want to use it because of its security flaws which I've read about. I'm also aware of Padloper but it doesn't really suit my needs.
      I saw a thread about this topic posted in 2014 but it is a bit older now and provides no conclusive answer :
      Thanks for any help
    • By webhoes
      I want to showcase my website made in processwire. https://chrysemys.nl/
      Goal of the website
      There are quit some websites with information about turtles. Most of them are very limited in information. This website main goal is to be very complete in information. Information about turtles, there natural behaviour, detailed descriptions. Next is also associations ( (bi-)directional links) with caresheets, books, food, illnesses, etc...
      Second goal is to learn PHP as I started an education for application engineering 4 months ago.
      It is build on the latest version (3.0.61) and makes use of the latest template strategy. I use the pw-append, pw-replace classes in combination with _main.php and several template files.
      Most of the rendering is done from custom functions in _functions.php. 
      In the back-end the pages are styled with the options for visibility and group in logical blocks. This is a very nice feature with processwire and makes the pages easier to fill.
      Next to the core modules I have used the following extra modules:
      AIOM+ - obviously
      Connect Page Fields - This module is very important. The whole site is considered a relational database. The base is the enity turtle. This entity has bidirectional associations with books, caresheets, locations (voor google maps), regions (to group locations), the different classifications of the animal taxonomy, food, etc. To make these kind of associations it greatly simplified the output on the other templates.
      This module was a mandatory feature for being able to create a site as I wanted to. Otherwise it would it would be very inefficient to keep everything up to date. Now I can add a new book and connect it to one ore more turtles. After the save you can see the book also on the turtle page. This goes for all the bidrectional links.
      This page is about a species - https://chrysemys.nl/schildpadden/emys-orbicularis/
      This species has several sub species (basicly the same turtle but live in another country/region and has some different charasteristics). I have decided to make no distinction between species and sub species (on a template level) and use this module to connect them to each other. One reason was that this way the url would not be too long. 
      This turtle lives in several different habitats. These are also bidirectional associations. The same goed for food, books, food to mention some.
      The biological taxonomy is also build this way as entities that have no parent/child relation. They are connected to each other with page reference (in this case).
      Both methods (page reference or parent/child) have their pro's and cons, in the end this setup seemed to work best for me.
      Map Marker - This is used for the map marker field for the locations (verspreiding). Everyt turtle can live in one ore more locations and the will show up on the google map. Also I have the possibility to add location specific information about the climat on the pages (missing on almost all other websites).
      Map Markup (Google Maps) - For the output of the google map. The js script for this is only outputted on the pages where it is used (template strategy).
      Markup Sitemap XML - obviously
      Social Share Buttons - Added this as it is recommended for a better SEO score.
      Get Video Thumbnails - The blog story can have a youtube link. This module automatically grabs an image and places it as the image for the blog. No more extra steps needed.
      Video embed for YouTube/Vimeo - I slight changed the output for this module so it always is placed under the body.
      Datamaps.js - Also I had some very important help from @adrian with help of using datamaps.js. This page is a datamaps script that read all turtles that live in the US and shows them in the correct state. https://chrysemys.nl/kaart-verenigde-staten/
      A php function renders the output for the script and fills the variables. These are added to te script on rendering the page.
      The website is not finished and probably never will be as new information and functionality will be added all the time. But it is finished enough to serve as a showcase.
      There are several things I want to add in the future:
      A find selector for overview pages (select by size, region, family, etc). Worked on this but, could not get it working.
      Datamaps.js for all regions (also with a selector to select another region).
      Optimize the queries to make the site  faster.
      Several front-end improvements (marging/padding/font-size, etc...)
    • By Kass
      Hello all!
      I think this may require writing a function, which I'm not too good at...
      I have a primary navigation and secondary navigation, each with multiple nav-items. 
      When a user visits a child or grand-child of a nav-item on the primary navigation, the parent nav-item retains its "active" class - no problem.
      The issue: When a user visits the child or grand-child of a nav-item on the secondary navigation, the nav-item on the secondary navigation not retain its "active" class. It only has an active-class when the user is on the landing page of the nav-item.
      Bootstrap automatically gives the "dropdown sublevel-menu" (secondary nav) an active class when the user is on the landing page of the nav-item, but if the user visits children of the nav-item, the active-class disappears. The primary nav-items retain the "dropdown active" even when their children are active.
      I'd appreciate any help with this head-banger! 
    • By Peejay
      I'm proud to present you: "The Crafters"
      Premium cocktails from Belgium! Enjoy!  
      (Front-end build with https://semantic-ui.com/)
    • By benbyf
      New website for Fabrica Captial – Commercial Real Estate Investment
      http://fabrixcap.com/ (previously at http://www.fabricacapital.com/)
      Design by http://crookdesign.co.uk/