Jump to content

Recommended Posts

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

http://ohmspeaker.com/

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.

  • Like 6

Share this post


Link to post
Share on other sites

Very nice - love the filter tool!

Also - great to see the mention of PW on the credits page: http://ohmspeaker.com/credits/

Just one quick thing - the link to badasstheme.com on that page is broken.

Share this post


Link to post
Share on other sites

@adrian - many thanks, i fixed the credits!

Share this post


Link to post
Share on other sites

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

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

  • Like 3

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

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

        if(
        	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

  • Like 2

Share this post


Link to post
Share on other sites

thank you - i hope i will get a job where i need this one day :D

  • Like 1

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!

  • Like 1

Share this post


Link to post
Share on other sites

Great job! but this is not very safe.. 

Unbenannt111.thumb.PNG.e482921b3cc0c83c01d4b8ea6482e7b8.PNG

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 Jeannette
      Hello Fellows,

      I have a wonderful webshop, using PL and Padopt, a module developed by Julien Vaubourg and highlighted in ProcessWire Newsletter. Here is our shop: cheval-ami.fr
      I am looking for a new developer, helping me to keep the shop smooth and up to date.
      We would like to improve automated invoicing and worldwide shipping, getting DHL integrated and give people the possibility to create their personal accounts and be the nicest shop in the equine industry. We are still a young company, working all in german, english and french. We are very interested in a long time, kind and friendly relationship without any stress, but reliable reactivity in case of urgency. 
      We are based in Hamburg and near Paris and would prefere to work with somebody who is available to catch up around a table, at least sometimes.
      Contact: mail@cheval-ami.fr or +33 626 22 1000 or +49 170 20 28 215
      Thank you, Have a beautiful day,
      Jeannette
    • By flydev 👊🏻
      Bootstrap-4 Minimal site profile for ProcessWire
      This profile is based on the "minimal site profile (intermediate edition)" and bundled with Boostrap v4.4.1
       
        Features
      Bootstrap SASS Font-Awesome SASS Render / helper functions for : Simple ul navigation Bootstrap Multi-level navbar Bootstrap Carousel Bootstrap Cards Bootstrap Jumbotron Boostrap Accordion Assets minification, files bundle   Dependencies
      jQuery Popper.js Bootstrap FontAwesome   Prequisites
       You'll want to install the following on your system before proceeding:
      Yarn / NPM How To Install
      Download the zip file at Github or clone directly the repo with git clone and skip the step 2. Extract the folder site-pwbs4-master into a fresh ProcessWire installation root folder. During the installation of ProcessWire, choose the profile "ProcessWire Bootstrap 4 profile".   After installation
      You can find the development file (CSS/SCSS/JS) in site/assets/dev/src
      The profile can be used as is only with $config->debug set to false. To use it in debug mode, you are required to install the dependencies with the package manager.
      Open a terminal in site/assets/dev and execute the following command-line: yarn Available commands :
      Rebuild, minify and bundle assets for release : yarn build   References
      Bootstrap v4 documentation ProcessWire documentation ProcessWire Forum: bootstrap tag ProcessWire Forum: bootstrap related posts   Credits
      The ProcessWire staff Inspiration from @gebeer and his Bootstrap 3 profile post Members who contributed in various post about Bootstrap navigation and code (see code-source for refs). Screenshots

    • By Marco Ro
      Hi everyone,
      a year ago we had put online a first version of our website, which didn't satisfy me much and had several bugs. This year I started working on a complete restyling, both in terms of functionality and graphic. I am very happy with the result obtained. Finally, last week we put this version online that I am proud to show you!
      Site EU: https://www.playwood.it/
      Site USA: https://www.us.playwood.it/
      It is an eCommerce for a small StartUp, the PlayWood, based in Reggio Emilia, Italy.
      The site is multilingual, has two areas of purchase and has two levels of registration. Redirectory based on the source IP for the USA customer and preferred language in the browser for the others countries. It has systems for use registration and sending emails dependent on specific actions, like: registration, purchase, request for quotes, information request, etc. Through the API the site communicates with external platforms such as the management software, Mailchimp and other systems to support marketing and company operations. 
      The site is constantly evolving, in the future we intend to add new features.
      The site was created with these modules:
      Padloper  Login/register Media Library ProCache PayPal Checkout Subscribe to Mailchimp Tracy Debugger Cookie Management Banner Continent and country names ImagePicker Field Map Marker External libraries:
      Spectre, scss framework Swiper slideshow verlok/lazyload fancybox
      Creating this site with ProcessWire represented a moment of strong professional growth. When I started I had little knowledge of some types of language, but Processwire and its APIs give me the ability to easily build pages, manipulate data and integrate any external library easily. Thus, I was able to deepen my knowledge more and more. So I wanted to thank the creators of the cms, who keeps it and who implements it, obviously all the people in the forum for the help they gave me, was very important.
      Thank you!


       




    • By schwarzdesign
      We recently finished a relaunch of  the website of the consulting firm Engfer Consulting: engfer-consulting.de. Built with ProcessWire 3 and Bootstrap 4.
      Features
      Bilingual website (UPDATE: The English page is now available! the English page is inactive at the moment, as the content is not ready yet) A strong, simple data structure for job offers and news, allowing for a custom search page and fulltext search Sectioned content-blocks built with a Repeater Matrix (ProFields) Reusable components available as page reference fields Automatic generation of open graph-tags, with manual overrides available on each page Contact forms with a custom recipient depending on the current page Modules used:
      ProFields ProForms Sitemap Cookie Management Banner Duplicator Tracy Debugger Wire Mail SMTP Admin Links in FrontEnd Technical insights
      Most of the content is built using a Repeater Matrix field. Each section has an optional heading and a select-field for background colors. Some of the sections available include:
      Text blocks (a repeater-field for multi-column text) Feeds / listing of the latest job offers or news (with a field to control the number of entries shown) Displaying a team member or quote (selected through a page reference field) Downloadable files (a multivalue field for file uploads) Those sections can be combined and stringed together arbitrarily, so any number of page templates showing different contents can be built. The job offers template, in contrast, features fixed fields for taxonomy assignment, description, contact person, preview image and so on, making the job offer pages uniform and easily accesible.
      The (technically) most interesting part of the site is the job overview page, which contains custom filters that are automatically generated from the available taxonomy terms.
      The stylesheets are written in SASS, built with Bootstrap 4. Only the base and grid SASS files of Bootstrap are included, along with the Bootstrap components that we ended up using. Using Bootstrap 4 as a framework in this way makes development & styling blazingly fast, once all the utility classes are commited to muscle memory ...
      > Our Agency.
      Screenshots









    • By benbyf
      Not new, but a website I've worked on for a year or so in continous development.
      http://supercarownerscircle.com/
      I originally inherited the site from another web design company - upgraded PW and over the year added ecommerce using the Stripe module and a custom integration, revamped the frontend and added lots of new templates.
      Also did some frontend work on the shopify shop.

       
       
×
×
  • Create New...