Jump to content

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

Hey Ryan - thanks for checking it out!

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

Absolutely, very kind of you!

I'm going to bookmark this page for future reference :)

Thanks again Macrura!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

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

       
       
    • By Marcel
      Hey, 
      I am very new to processwire and bootstrap. I have a field (text area) and there I want to be able to insert an image which is responsive. I tryed it with Source but in the end the page doesn't seem to like it when I insert in Source the following code
      <img src="<?php echo $homepage->content_img->url; ?>" class="img-fluid" alt="Responsive image"> What can I do to make it possible to insert reponsive images in a text area?
      Thank you in advance.
      Marcel
×
×
  • Create New...