Checkout page layout broken when using https

I am using stripe as a payment gateway for my pro sites install, this obviously requires an SSL certificate which makes my checkout page become served over https. However, now that it uses https, my layout and scripts for that page have broken.

See this screenshot: http://awesomescreenshot.com/0735ivqv38

All resources for this page (scripts & images) give this error in the console:

Failed to load resource: the server responded with a status of 404 (Not Found)

FYI, I am using a plugin called Wordpress HTTPS (SSL) to force https just on my checkout page and no where else on my site - however, the issue was present before I installed this plugin. How can I get around this issue?

  • Samuel

    Hi @Jude,
    I'm using a plugin called Wordpress HTTP (SSL) to force https on my checkout page - in fact, doesn't prosites automatically force HTTPS on the checkout page if prosites is using stripe?

    To be honest, I'm using 'Wordpress HTTP (SSL)' to force non-https on all my other pages as when I used to go to my checkout and it would change to https and then when I viit other pages it would stay on https so all my resources and images would dissapear.

    Also, it's worth mentioning that I'm running an NGINX install, so .htaaccess mods wouldn't make any difference here.

    Any other thoughts?

  • Michael Bissett

    Hey @Samuel, Michael here!

    I do see what you mean here about the 404 errors, what's odd is that the files do exist, when checking them via the Edit Plugins screen in the Network Dashboard.

    I'd like to have an even deeper look at this, and dig into the site more, could you please send in the following via our secure contact form:

    - Mark to my attention, the subject line should contain only: ATTN: Michael Bissett
    - Do not include anything else in the subject line, doing so may delay our response due to how email filtering works.
    - Link back to this thread
    - Include FTP log-in details (hostname, username & password)
    - Include any relevant URLs for your site

    IMPORTANT: Please make sure you select "I have a different question" for your topic, so it doesn't go back to the forums - this and the subject line ensure that it gets assigned to me.

    https://premium.wpmudev.org/contact/

    Thanks! :slight_smile:

    Kind Regards,
    Michael

    • Samuel

      Hi @Michael Bissett,
      I had a thought on how to resolve this issue today, perhaps you could outline anything that looks like a pitfall in my idea. I've decided that the best solution is to server the whole of my primary blog over SSL and then changing the site url to https://www.example.com aswell as using a url change plugin to change the address of all my resources

      Here's my question(s)
      - Will doing this have any affect on domain mapping for my other blogs?
      - Will my other blogs be served over https or is it just my primary blog?

      Thanks for your time on this, much appreciated

  • Michael Bissett

    Hey @Samuel,

    If you're planning on serving a single blog over SSL, then this post comes to my mind:

    http://halfelf.org/2014/ssl-for-one-domain-on-multisite/

    Granted, there'd be some adaptation to do (as it was originally targeting a subsite, rather than the main site), but that's what comes to my mind. If it's set up right, then it shouldn't affect your other sites, it would only affect this one site of yours.

    How's this sounding so far?

    Please advise,
    Michael

  • Samuel

    Hi @Michael Bissett,
    After doing a bit of playing around, I've decided that
    a) Forcing SSL on all pages and changing the site & home url isn't the right solution - I'm sure it's possible with some tweaking - however, it's not really necesary at this point
    b) This issue is more than just urls and seems to be with Prosites

    My reasoning behind thinking this is that for example on my homepage (not https), I get the following error:

    GET https://skizzar.com/wp-content/plugins/pro-sites/pro-sites-files/js/tax.js?ver=3.5.1.9 404 not found

    this is the same error I get with all prosites files on my checkout page...so basically, only pro sites files are not loading.

    I also try to open the resource by typing the url into my browser but with different variations (i.e. http://www.resource url], http://resource url], https//:www.[resrouce url] and https://resource url]) but I get a 404 not found page everytime - is this the same for you?

    Any other thoughts on how to resolve this issue?

  • Samuel

    Hi @Michael Bissett,
    I've had a revelation just now about what this issue could be. I recently changed my site address from http://www.mysite.com to just mysite.com - A few things stopped working with this change and I had to update the url (even though it's a small change). I've noticed if I log in to my dashboard, I actually get errors on all files related to WPMU plugins (google analytics, blog templates etc) plus I've noticed that the styling for prosites settings area has gone missing too.

    I also notice, when I post a question like this one, when WPMU DEV asks what site I'm talking about, normally there is only 1 option (www.skizzar.com) but now there are 2 options http://www.skizzar.com and skizzar.com - which makes me come to the conclusion that perhaps the issue is with my API code for WPMU? is it linked to my old url (www.skizzar.com) instead of skizzar.com and perhaps that is what is causing all these files to not load??

    Just a thought, what do you think?

  • Michael Bissett

    Hey @Samuel,

    It doesn't seem to be an API issue, just reset that quickly for you, and didn't see a change in behavior.

    After sinking my teeth into this further, I'd like to ask... could you elaborate as to how you did this URL change? Right now, I'm particularly curious about your nginx configuration, as a info.php file placed in the exact same folder as that .js file I mentioned earlier works like a charm.

    Yet, when I try accessing a .js file, it's only if I move it to the root of the /pro-sites folder that I can actually access the file (without getting a 404 error).

    Please advise,
    Michael

    • Samuel

      Hey @Michael Bissett,
      Shame - I thought I was onto something there, strange how it just seems to be wpmu plugins that I'm gettings errors on (go to the dashboard and you'll see what I mean) - perhaps it's just coincidence though.

      OK, so the URL change was done through the database, I changed
      siteurl & homeurl in wp_options,
      domain in wp_site,
      site_url in wp_sitemeta
      domain in wp_blogs

      as for my nginx conf - here is what it looks like:

      server {
          listen 80;
          listen 443 ssl;
          server_name skizzar.com *.skizzar.com;
      
          ssl_certificate /etc/ssl/skizzar/www.skizzar.com.chained.crt;
          ssl_certificate_key /etc/ssl/skizzar/www.skizzar.com.key;
      
          ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
          ssl_prefer_server_ciphers on;
          ssl_ciphers AES256+EECDH:AES256+EDH:!aNULL;
      
          root /usr/share/nginx/skizzar;
          index index.php index.html index.htm;
      
          add_header Access-Control-Allow-Origin *;
      
          location / {
              try_files $uri $uri/ /index.php?$args ;
              rewrite files/(.+) /wp-includes/ms-files.php?file=$1 last;
         }
      
          location /nothingtosee {
              auth_basic "Admin Login";
              auth_basic_user_file /etc/nginx/pma_pass;
          }
      
          location ~ /favicon.ico {
              access_log off;
              log_not_found off;
          }
      
          location ~ \.php$ {
              try_files $uri /index.php;
              include fastcgi_params;
              fastcgi_pass unix:/var/run/php5-fpm.sock;
          }
          access_log  /var/log/nginx/$host-access.log;
          error_log   /var/log/nginx/wpms-error.log;
      }
    • Samuel

      Hey @Jude ,
      Unfortunately that didn't work - it returned a 404 not found page.

      I took a quick look at my error log today and here is what it's saying:

      2016/01/07 11:08:58 [error] 21614#0: *116 open() "/usr/share/nginx/skizzar/pro-site" failed (2: No such file or directory), client: 81.158.229.186, server: skizzar.com, request: $
      2016/01/07 11:09:07 [error] 21614#0: *116 "/usr/share/nginx/skizzar/pro-site/index.php" is not found (2: No such file or directory), client: 81.158.229.186, server: skizzar.com, $
      2016/01/07 11:09:52 [error] 21614#0: *116 "/usr/share/nginx/skizzar/pro-site/index.php" is not found (2: No such file or directory), client: 81.158.229.186, server: skizzar.com, $

      Does that help shed any light on what's going on?

  • Samuel

    Hi @Michael Bissett & @Jude,
    Hopefully you're still looking over this thread as I post updates. Apologies for all the replies, it's just very important I get this fixed ASAP.

    I made some progress today by rewriting my nginx conf file, it now looks like this:

    map $http_host $blogid {
        default       -999;
    
        #Ref: http://wordpress.org/extend/plugins/nginx-helper/
        #include /var/www/wordpress/wp-content/plugins/nginx-helper/map.conf ;
    
    }
    server {
            listen 80 default_server;
            listen [::]:80 default_server ipv6only=on;
    
            root /usr/share/nginx/skizzar;
            index index.php index.html index.htm;
    
            add_header Access-Control-Allow-Origin *;
    
            server_name skizzar.com *.skizzar.com;
    
            location / {
                try_files $uri $uri/ /index.php?$args ;
                #rewrite files/(.+) /wp-includes/ms-files.php?file=$1 last;
            }
    
            error_page 404 /404.html;
    
            error_page 500 502 503 504 /50x.html;
            location = /50x.html {
                    root /usr/share/nginx/skizzar;
            }
    
            location ~ \.php$ {
                    try_files $uri =404;
                    fastcgi_split_path_info ^(.+\.php)(/.+)$;
                    fastcgi_pass unix:/var/run/php5-fpm.sock;
                    fastcgi_index index.php;
                    include fastcgi_params;
            }
            #WPMU Files
            location ~ ^/files/(.*)$ {
                    try_files /wp-content/blogs.dir/$blogid/$uri /wp-includes/ms-files.php?file=$1 ;
                    access_log off; log_not_found off;      expires max;
            }
            #WPMU x-sendfile to avoid php readfile()
        location ^~ /blogs.dir {
            internal;
            alias /usr/share/nginx/skizzar/wp-content/blogs.dir;
            access_log off;     log_not_found off;      expires max;
        }
    
            #phpmyadmin
            location /nothingtosee {
                auth_basic "Admin Login";
                auth_basic_user_file /etc/nginx/pma_pass;
            }
    }

    As you can see this doesn't include SSL yet, which I'm going to work on now so I can use stripe again.

    However, this has thrown up 2, much smaller issues, wondered if you had any insights on them:

    1) I get the following error referring to a paypal resource not being able to load:
    GET http://fpdbs.paypal.com/dynamicimageweb?cmd=_dynamic-image&locale=en_US net::ERR_CONNECTION_TIMED_OUT

    it's referring to this line:
    <h2>Checkout With PayPal</h2><input type="image" src="http://fpdbs.paypal.com/dynamicimageweb?cmd=_dynamic-image&locale=en_US" border="0" name="paypal_checkout" alt="PayPal - The safer, easier way to pay online!">

    I guess it's just the button image, but it's also making the page take ages to load whilst it looks for it!

    2) Table styling is broken -
    I seem to remember this being an issue from a previous version of prosites, I have been through and saved the table settings and still no joy

    FYI, I've changed the location of the checkout page to /your-account now (as it previously was)
    Thanks guys, really appreciate your help on this
    Sam

  • Jude

    Hey again @Samuel

    Sorry about the delay here. Appreciate your patience.

    Here is some CSS that should fix the table issue ( looks like the theme is forcing some styles on the .story classes )

    ul.pricing-column {
      list-style:none !important;
      max-width: 30% !important;
    }
    
    ul.pricing-column li {
        list-style: inherit;
    }
    
    ul.pricing-column.psts-level-2 li.title {
      padding-bottom: 0px !important;
      margin-bottom: 0px;
      height: 99px;
    }
    
    ul.pricing-column.psts-level-1.featured {
        top: 20px;
    }

    Maybe in future you could make one consolidated post instead of multiple single smaller ones as that pushes the ticket back to the end of the queue and may delay our responses.

    Cheers
    Jude