11

I have recently launched an ecommerce site based on laravel. And now i really think its a good idea to implement AMP as it supports ecommerce now (even shopify and ebay are implementing it)

So my query is how can we implement AMP on laravel? Is there a way to use desktopMainTempalte.blade.php for desktop version and switch to mobileMainTemplate.blade.php on mobile version? I just don't want to create a different domain for mobile device as m.domain.com. I want something creative here but Im not sure if i am going in the right direction.

What would you guys be doing if you were in my shoe?

Prajwol Onta
  • 1,448
  • 5
  • 21
  • 48
  • [This question or one of its answers is being discussed on meta](https://meta.stackoverflow.com/questions/397721/responding-to-dmca-takedowns). – Haem May 26 '20 at 10:28
  • Just in case if anyone interested I have written an article on it https://www.google.com/amp/s/stackcoder.in/amp/posts/setup-amp-accelerated-mobile-pages-in-php-laravel – Channaveer Hakari May 28 '21 at 19:38

3 Answers3

9

Using different routes and controllers to do the same but with a different view is very difficult. You can do this for a better approach.

  1. Use the same web controllers for /amp/ urls
  2. View the amp pages differently by modifying view() helper

Amp Routes

To catch the /amp/ routes, add this to your RouteServiceProvider.php

protected function mapAmpRoutes()
{
    Route::group([
        'middleware' => 'web',
        'namespace' => $this->namespace,
        'prefix' => 'amp',
    ], function ($router) {
        require base_path('routes/web.php');
    });
}

Also change your map method:

public function map()
{
    $this->mapAmpRoutes(); // <-- Add this

    $this->mapWebRoutes();

    $this->mapApiRoutes();
}

At this time all addresses like example.com/amp/... will refer to your web.php routes.

Amp view files

Now you should customize view() helper to render a different view for amp. Create a helpers.php in app/Http directory with a view function:

function view($view = null, $data = [], $mergeData = [])
{
    $factory = app(Illuminate\Contracts\View\Factory::class);

    if (func_num_args() === 0) {
        return $factory;
    }

    //if amp, add '-amp' to view name
    if(request()->segment(1) == 'amp'){
        if(view()->exists($view . '-amp')){
            $view .= '-amp';
        }else{
            abort(404);
        }
    }
    return $factory->make($view, $data, $mergeData);
}

This function is not loaded until you add it to your bootstrap/autoload.php file 

require __DIR__.'/../app/Http/helpers.php'; // <-- add this (should be before require vendor/autoload.php)
require __DIR__.'/../vendor/autoload.php';

Edit: If you don't find bootstrap/autoload.php file, search for vendor/autoload.php because laravel has removed that. (Thanks MinderMondo for the comment)

You can now add any views you like for amp with '-amp' affix. For example if you have index.blade.php the amp view name should be index-amp.blade.php.

Mahdyfo
  • 1,155
  • 7
  • 18
  • thanks for this answer. However, a part from it is not working for me. I followed your approach and yes - I am getting the original view but if I have a home url example.com - the amp page would be example.com/amp , if I have example.com/about - it will be example.com/amp/about - and that's great! But the view helper is not fetching the index-amp.blade.php view - it still fetches the old (original view). What could be the problem? – Momondo Feb 27 '19 at 16:20
  • 4
    Oh got it! I am using Laravel 5.6 and I missed to include the helpers.php file. There is no autoload.php in the bootstrap folder. This should be included in vendor/autoload.php instead. This change was made in https://github.com/laravel/laravel/commit/8914be5fc864ebc6877be38ff3502997e0c62761 Thanks anyway! – Momondo Feb 27 '19 at 16:27
4

There are several ways of implementing AMP pages to your web application (no matter the framework).

One example is the way https://www.theguardian.com have done this : by creating a new sumbomain "amp.theguardian.com" and every page on the main site "www.theguardian.com" has a canonical link to the same page, but the AMP version and vice versa.

Example : Normal page : LINK AMP version of the page : LINK

As you can see, they are the same, but not quite. Most of the elements that the normal page has are removed from the amp page (because AMP does not allow them or is a bad practice for AMP).

So there you have it! A way to implement AMP to your Laravel project is to have separate views (resources/views/amp) and Controller that handles them.

A good guide to what your AMP views can have as functionalities is HERE.

Kristian Lilov
  • 610
  • 6
  • 12
  • 1
    I think theguardian.com way is the best way, isn't it? – Prajwol Onta Feb 13 '17 at 12:12
  • If you create a separate domain then you will end up with 2 source codes which might be harder to maintain in the longer run. I prefer to use the AMP prefix for all the posts. If anyone wondering how did I achieve it kindly check my article https://stackcoder.in/posts/setup-amp-accelerated-mobile-pages-in-php-laravel – Channaveer Hakari Sep 20 '20 at 08:46
0

I made one site with AMP and my solution was simple adding to routes new GET rule for: mobile/{articleSlug}/{pageNumber?}, and new function in Controller to support it, which load all necessary things for new AMP layout.

If I'm not wrong you can't have AMP page and normal page on this same route - Google will not know how to change between them.

Geding
  • 324
  • 2
  • 11