Recommended Posts

hi all,

new PW site launch:  http://www.ohmspeaker.com/

some of the modules that were helpful or essential for this:

  • cropimage
  • formbuilder
  • fredi
  • importcsv
  • minify
  • piwik analytics
  • procache
  • batcher
  • redirects
  • version control
  • template decorator
  • modules manager
  • page link abstractor
  • sitemap xml
  • admin custom pages
  • markup simple navigation (for the sitemap)

forum topics related to this site dev:

Legacy Site URL redirects:

http://processwire.com/talk/topic/3641-redirect-legacy-url-to-new-pw-page/

Clean up spelling:

http://processwire.com/talk/topic/3519-use-api-to-spellcheck-whole-siteclean-up-spacing/

hashes in URLs on change selected product

http://processwire.com/talk/topic/3496-help-with-url-param-change/

FormBuilder

http://processwire.com/talk/topic/2904-how-to-redirect-by-id/

http://processwire.com/talk/topic/2821-3rd-party-send-conditionally/

http://processwire.com/talk/topic/2820-use-session-to-remember-form-selections/

Custom Menus

http://processwire.com/talk/topic/2787-custom-menu-not-related-to-page-tree/

other notes:

  • The skyscraper profile provided the example for how to get started with the advanced product search, a.k.a. the speaker finder.
  • The standard search has been extended to show results in different categories.
  • there is some use of Soma's word limiter for the news teaser text, and for making meta descriptions out of body fields, from this topic: http://processwire.com/talk/topic/3429-how-to-set-text-linecharacter-limits-in-templates/
  • the design is built on twitter bootstrap framework
  • Fredi proved to be totally essential for the client, in being able to rapidly edit things without having to find things in the admin.

This site is going to replace an existing site on a different domain (ohmspeakers.com).

At some point we weren't sure if/how we would be able to handle the shopping cart element, and then found foxycart, which proved to be the best choice, very flexible, and easy to implement for this type of site. FC is hands down the simplest and easiest way (imho) we could achieve things like the legacy product pages, where there are various parts and upgrades displayed on 1 page.

this version is sort of a "v1", and will be expanded/improved a lot for a v2, which would happen in about 4 months..

BTW - these speakers are really good; i now own 3 pairs :lol: ... they look great and do sound totally amazing...!

-marc

  • Like 26

Share this post


Link to post
Share on other sites

Marc,

Brilliant job! 

A few niggles :)....I know it's v1...

  1. Contact Us page: Submitting an empty form returns success message.
  2. Recommendation Form: Submitting an incomplete form does not give user feedback; nothing happens
  3. Search results: Maybe (minor issue) change the h2 headings for "Found X pages matching your query..." to h3?. Also "query" has always sounded to "dev-like" for me in search results :) Maybe found x pages matching your search? Minor issue!

Overall, really nice site!

btw: all the above Form Builder links return 404s
 

  • Like 1

Share this post


Link to post
Share on other sites

hi kongondo -

awesome! thanks for looking

#1 - fixed (made required)

#2 - not getting this, because the formbuilder is showing alerts for required fields, when they are not filled in (?)

#3 - changed h2 to h3.. and i agree about the 'query'...changed to search...

the formbuilder links won't work, sorry, unless you are a formbuilder registered user (it's a 'VIP' forum) :P

  • Like 1

Share this post


Link to post
Share on other sites

Great site and thanks for your writing. It is always nice to know about what modules used and really nice that you even linked those related forum topics. 

Fredi proved to be totally essential for the client, in being able to rapidly edit things without having to find things in the admin.

Happy to hear that!

  • Like 1

Share this post


Link to post
Share on other sites

#2 - not getting this, because the formbuilder is showing alerts for required fields, when they are not filled in (?)

Aah. I didn't see the alert because it is a long form so the alert is hidden from view. It is possible to scroll the form up using jQuery to the first missing required field, no?

Share this post


Link to post
Share on other sites

Aah. I didn't see the alert because it is a long form so the alert is hidden from view. It is possible to scroll the form up using jQuery to the first missing required field, no?

I think that alert is browser's native alert. Those have some nasty usability problems still (like this one at least on chrome). It doesn't submit the form and it doesn't scroll to position where user could see an error message.

Share this post


Link to post
Share on other sites

On firefox, it scrolls already right to the first empty field, which has a red halo around it;

this is using the latest stable version of FormBuilder;

are you saying that FormBuilder is using browser native alert? I thought this was jQuery UI..

-marc

Share this post


Link to post
Share on other sites

This form in Chrome: http://www.ohmspeaker.com/recommendation-form/

Leave it empty and click submit. Nothing seems to happen. This is because "Name, First" field has required="required" and chrome does that little poorly when form is in iFrame (doesn't scroll and shows the error message only for a while (you can see the alert if you scroll right after clicking the submit).

Firefox does it better (scrolls to the problematic field even inside iFrame). 

Without iFrame chrome does scroll too: http://www.ohmspeaker.com/form-builder/product-inquiry/

Share this post


Link to post
Share on other sites

thanks apesia, for bringing up this topic...  hopefully by the time i get to V2, i'll come up with a way to deal with that; i'm using jquery validate for another form on the site, maybe there would be a way to integrate that with FB..

i also forgot to include in the first post a little about how that project evolved and ended up with PW....

it started a long time ago when we first tried to do the site in Joomla, using RedShop; that was basically a disaster; RedShop promised all of the 'features' you could want, but was rife with problems and almost nothing worked. I found myself on the RedShop forum almost every day reporting bugs, spelling errors in the component etc.;  then Joomla 1.5 reach EOL, and we tried to upgrade, and that failed in many ways also (components, template etc..)..

once i found processwire, the plan was to do a simple corporate brochure site, which would be like a product catalog, no ecommerce.

During the work on that, i experimented with csv import on another PW site and discovered how to easily import the old website data, so that it took only a few hours to import the existing relational product database (MSaccess/Cold Fusion);

And then i read about foxycart, so that became the solution for the parts store, since the existing site provider was discontinuing CC transactions on their servers, i guess they are not PCI compliant; Once we got that going, it was just a small step to enable add to cart buttons for the 'current' product line...

  • Like 3

Share this post


Link to post
Share on other sites

Really great site! Nice work. Thanks for the ProcessWire mention on the credits page too. 

  • Like 1

Share this post


Link to post
Share on other sites

Excellent site Macrura and lovely, valuable post noting your process/tools, thanks so much for sharing!

Share this post


Link to post
Share on other sites

Nice site. Just one thing, I was surprised at the lack of product images on the single product pages (SSP) and the select finish options do not have images.

I might be wrong but for me it's like walking into a shop and reading the label but not seeing the product.

Share this post


Link to post
Share on other sites

@Jason & alanfluff -thanks for checking out the site, much appreciated.

@NooseLadder - thanks for looking and yes, you're completely on point, the company is a very small business with limited resources...(basically a one-man operation) but there is a plan to photograph all of the products for 'V2'...

For the veneers, there is a 'veneer gallery' for this version, and there will be a 'veneer picker' on the product pages for V2 which will be a popup lightbox that lets you see the veneers close up and select one, for which the selection will populate the veneer choice select box.

also in the works would be validation for the veneer selection (to make sure a value is selected).... i haven't been able to figure out foxycart add-to-cart validation yet and am waiting on a reply to a post in the FC forum as to how i can use jquery.validate with FC, which would make things super easy..

-marc

  • Like 1

Share this post


Link to post
Share on other sites

btw -the client loves pw and appreciates the community so is offering 20% discount, using coupon code 'processwire', until June 20.

  • Like 1

Share this post


Link to post
Share on other sites

Greetings,

Wow, Macrura, beautiful site.  Really professional and smooth.

When you build sites like that, no wonder the client loves ProcessWire and the community behind it!

I see you are using FoxyCart for the e-commerce elements.  I'd be really curious to hear more of how you like integrating FoxyCart with PW.

Very interesting that the client is offering a 20% discount in honor of ProcessWire.

Thanks for sharing,

Matthew

Share this post


Link to post
Share on other sites

@mathew - thanks for looking;

the foxycart for this site was very simple/easy and flexible to implement;

i have no complaints overall except that i wish i could do validation easier on the add to cart buttons; but i'll probably get that sorted soon. 

the FC people are always helpful and polite; the system runs perfectly smooth as far as i can tell so far.

It's a little tricky to integrate the checkout page into your site; since they host the checkout pages on their servers, they have to cache your 'checkout' template, which can be problematic if you have a complicated design (it didn't seem to like bootstrap); i wasn't able to get that working this time around, so i'm using the default checkout, which is also fine; maybe not as elegant as having the checkout look like it's part of the same site.

ecommerce is definitely not my 'thing' so foxycart will probably be my 'go-to' solution, since it sort of just plugs in and works...

Share this post


Link to post
Share on other sites

Superb design Macrura. Thanks for sharing.

I look forward to seeing more sites from you again soon.

Share this post


Link to post
Share on other sites

Hi Macrura,

excellent site, very clear and well organized!

Could you please provide some infos on how you developed the "speaker-finder" section ? I'm really interested on how you've managed the filtering and selections of the various products.

Thumbs up!

Share this post


Link to post
Share on other sites

Hi 3fingers,

Here is the code that processes the form:

https://gist.github.com/outflux3/5690429

here is the form itself:

https://gist.github.com/outflux3/5690423

i didn't post the form results, but that's just a table that shows the results; hopefully the processor and form code will help!

-marc

  • Like 6

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 Samk80
      Hi there community,
       
      I'm new to this site. Basically I just discovered processwire. I was always a fan of Joomla but recently I came across a site which was designed by processwire. I looked at some of modules on processwire website but couldn't find the module I need.
       
      I want to create a website that does the custom configuration of a product and provides product filtering.
      Something similar to this site but not exactly the same.
       
      Is there a module that can do that?
       
      Basically the product configuration is done by checking the compatibility values between the categories, so the module need to support product tagging or some sort of value check to only display compatible products. 
       
    • By erikvanberkum

      I like to showcase my new website acniti on the forum here.
      History
      Building and managing a website is a hobby, over the years, making websites got more complicated and more technologies, knowledge and wisdom are required. I started building my first website around 1997. It started out with a static site built with FrontPage, a WYSIWYG HTML editor. A few years later it was time for the first content management system, I looked at Joomla but settled for MediaWiki. I run those websites for 2 years on the MediaWiki platform and then moved on to WordPress. WordPress was good, it did a good job but over time, it became more complicated to make something out of the box, if it's not a blog, it becomes complicated and to have a feature rich website requires a lot of plugins. Little by little it became less fun and more and more hassle juggling the various plugins.
      In 2014 I became interested in learning PHP programming, I wanted to do this already for many years, but never had enough time to bite the bullet and work my way through the basics. At the end of the courses I though and now what have I learned, how to put this into action? To built modern website with PHP only is difficult, it also requires knowledge of html, MySQL, CSS, java-script etc. I started looking for a framework experimented a little with CakePHP and then came across Processwire via a CMS Critic blog post.
      Development setup
      I developed the acniti website on a Linux Ubuntu 16, with PHP 7 and MySQL as the development server. For the IDE I use PhpStorm, before using Storm I have used and tried some other IDE's such as Zend, Eclipse, Netbeans, Aptana but none of them I liked, some were feature poor, Zend and Eclipse were slow and use a lot of memory. PhpStorm not free but definitely worth the investment. I make use of the free tier Git repository of AWS called CodeCommit, I still use GIT Cola to commit the changes, I could also use PhpStorm for this but I never took the time to change my workflow.
      For project management I am a big fan of Redmine, Redmine is a web-based open-source project management and issue tracking tool. I use this also for my other work so it easily integrates with the website building flow as well. It's easy for maintaining lists of features you want to carry out per version, it supports a wiki which is easy for making notes and keeping a log of the activities. I use it everyday and it runs on Ruby. For images and graphics I switch back to Windows for some Photoshop.
      Processwire
      The acniti website runs on the latest stable Processwire version at the time of writing 3.0.62, the website has 4 languages including an Asian language. The Japanese language URL's are implemented with their 3 alphabets kanji, hiragana, katakana i.e. https://www.acniti.com/ja/インレットフィルタ. Some images on the site have text and image language tags help to select the correct language, the Processwire blog post from 30 June was helpful to get this running.
      The main site has a bootstrap theme, for the mobile version of the site the google AMP specification is implemented. This was really fun to do but challenging at times as the AMP specification is still a little limited. To visit the AMP pages type /amp/ behind any URL like https://www.acniti.com/amp/ for the homepage. The Google webmaster portal is really easy to troubleshoot and check for the correct AMP implementation. Finally structured data according to schema.org is added to the site via the JSON-LD markup.
      The commercial modules ProCache and Formbuilder are installed. The ProCache module is really amazing and makes the website lightning fast. Besides the commercial modules around eleven open-source modules are used, Database Backups, Tracy Debugger, Wire Mail SMTP, Protected Mode, Batcher, Upgrades, PublishAsHidden, URL (Multi-language), Twitter Feed Markup, Email Obfuscation (EMO), Login History, Selector test.
      During development the Processwire forum is really helpful and checked often. The forum is good for two reasons, most of the questions, I had during development of the site, are already on the site. Secondly the only 6 questions I posted over the last 2 years, are quickly and accurately answered. The downside I didn't become a very active member on the forum but see that as a compliment.
      An open issue on the acniti site is the AMP contact form with Formbuilder, the restricted usage of java-script for the AMP specification requires some more in-depth study.
      Hosting setup
      For the hosting services the acniti site uses Amazon EC2, I use AWS already many years to manage my cloud office so it was easy to decide to use it for the web hosting as well. The site is running on a micro instance of EC2 and with the ProCache module CloudFront is serving webpages worldwide fast. Updates from the development server are sent to CodeCommit and from there to the production server. From a site management point of view it would be nice to use AWS RDS to manage the MySQL databases, but from a cost perspective I decide not to do that for now. Via a cron I have set up automatic MySQL backups and these are via another cron job uploaded to AWS S3. To make sure the server is safe, a cron job runs daily snapshots of the server, this is getting initiated via AWS Lambda. Lambda also removes older snapshots because during creation a delete tag is attached for sevens days after their creation. It's important to make a separate MySQL backup as with snapshots the database often gets corrupted and its easier to restore a database backup than to fix a corrupted database. Another nice feature to use AWS Lambda for is a simple HTTP service health checker, which reports to you by email or sms when the website is down.
      Making use of all these Amazon services cost me probably somewhere between 10 - 15 $ a month, I have to estimate a little since I am running a lot more things on AWS than only the website.
      The site is running on a Comodo SSL certificate but next year I will change to the free LetsEncrypt, as it is easier to add and will automatically renew after 90 days. The Comodo certificate requires manually copy pasting and editing the certificates in place.
      Writing Content
      The content for the site I write in the Redmine wiki, most of the content I write requires research and it takes about two weeks before I publish the content to the Processwire site. For writing content I use the google spell checker with the grammar checker, After the Deadline. To ensure catchy headlines they are optimized with the Headline Analyzer from CoSchedule
      Social Media
      Now the site is running, it needs promotion. The robots.txt files shows the search engines the way as does the sitemap.xml both of these I have made in a template file. Most of the blog articles I promote are republished on social networks like, LinkedIn, Tumblr, Google+, Twitter, and some branch specific networks as the Waternetwork and Environmental XPRT. To check, the search engines index the site well, Google webmaster and Bing webmaster check for any problems with the site. For statics on the same server there is an instance installed of Piwik. Piwik is a leading open alternative to Google Analytics that gives full control over data. The Piwik setup works very well and gives a good overview of the site usage both on the desktop via the site or via a mobile app. As a part of a test I have installed the open-source SEO-panel on the same server to manage keywords and to further improve the scores in the search engine, a nice feature is that you can also track your competitors. I am still new to SEO panel and have to learn more how to use the tool effectively.
    • 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
      Kass
    • By webhoes
      Hello,
      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.
      Setup
      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.
       
      Roadmap
      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! 
      Thanks