DEV Community: Marwane

Things you should know before starting Prestashop development

Marwane — Sun, 27 Jun 2021 23:15:28 +0000

Note: I'm only talking about PS1.7 version, not 1.6 or ealier.

So basically i'm writing this post for prestashop beginners developers to explain some ways of doing things' basics so they would't be in the 'Aha!' situations multiple times, like I did.

Developping in prestashop is just like programmig in any php framework, it relies heavely on the OOP programming, and MVC architecture with their their folders classes, controllers and themes/<your-theme-name>. you can learn more about folders architecture from here the documentation is very clear once you understand Hooks (because they are the most confusing, and, easy part).

These are the main lines you should know about:

overrides

Why overrides? why not changing directly in classes? simply because prestashop/modules updates will completely overwrite your changes.

The classes that you are able to override are all classes insides classes, constrollers and modules folders, and place them under overrides while respecting their original arborescence.

To take effect of your changes you should either clear your cache folder, or just deleting the var/cache/<dev || prod>/class_index.php file which is a simple mapping class of the different classes with their overrides.

For example:

// code/ProductController.php

<?php
# controllers/front/ProductController.php

use PrestaShop\PrestaShop\Adapter\Image\ImageRetriever;
...


class ProductControllerCore extends ProductPresentingFrontControllerCore
{

  public function anyFunction()
  {
    // function shouldn't be private or it won't work

    return 'parent value';
  }

}

Let's override the class and redifine any public/protected method:

// code/ProductController-override.php

<?php

# overrides/controllers/front/ProductController.php

class ProductController extends ProductControllerCore
{

  public function anyFunction()
  {
    // use parent::anyFunction() to get parent function value

    return 'new value';
  }
}

The `Tools` class

This class is as, its name saying, a class of tools and utilities functions. you'll find a set of useful static methods you'll use often. Before creating any utility function in your module make sure it's not present in the Tools class.

Hooks

Hooks, to be simple, help executing some code/change a template, on a specific event/position.

There a two main types of hooks: display & action.

When using a hook in your module just do a quick check if it's compatible with all 1.7.x.x versions or it's a new one, just in case. Or if a hook is renamed you must register the hook for that specific version so you won't tell yourself later why it's not used.

The complete list of hooks is available here

Deprecated functions

You'll notice a lot of them ducummented with @deprecated tag, some are even from prestashop 1.5 but technically they call the new defined ones.

Why? Backward compatibility. The other reason is, that people are always late to or never update their online store fearing to break it because, if you're non technical owner ad something goes wrong during an upgrade (or even and update sometimes) it'll cost some - if not only your time - money to fix it.

PrestaShop & Github

To quickly download a specific PS version directly head to releases list, no need to go to their site or google the desired version.

Faster? head to https://github.com/PrestaShop/PrestaShop/releases/tag/1.7.x.x and replace the x with your version.

Even faster with the direct link: https://github.com/PrestaShop/PrestaShop/releases/download/1.7.x.x/prestashop_1.7.x.x.zip

Fixing update/upgrade issues

At first it seemed very complicated to me but in fact, it's simply tricky.

Besides replacing core folder such as classes, controller, src and the classic theme, updating the database is our main focus. Take a look at the folders php and sql inside the folder [/install-dev/upgrade/](https://github.com/PrestaShop/PrestaShop/tree/develop/install-dev/upgrade), notice something? let me explain:

A prestashop database installation is just a serie of updates executing one after another. so, if a real upgrade is stuck at some point, open the corresponding php/sql file for the update you started earlier and just execute them this will surely fix the update issue.

Some things you should know

Any global parameter, rather it's proper to prestashop or to a module, can be stored and fetched or deleted with these methods:

// code/configuration.php

Configuration::updateValue('YOUR_UNIQUE_PARAM_NAME', 'new value');

Configuration::get('YOUR_UNIQUE_PARAM_NAME');

Configuration::deleteByName('YOUR_UNIQUE_PARAM_NAME');

Get any input value by name, sent in GET, POST or Ajax: Tools::getValue('input_name') Context has many useful properties filled with data depending on, the current state, the context! here's some examples:

// code/context.php

// returns the id of the current used language.
$this->context->language->id;

// assign variables from current controller to the view
$this->context->smarty->assign([
  'categories' => $categories,
]);

// the view
return $this->display(__FILE__, 'views/templates/admin/someadminhook.tpl');

// fetching the rendered content of a view,
$this->context->smarty->fetch('module:your_module_dir_name/views/templates/front/display.tpl')

// get current cart
$this->context->cart;

Global variable are prefixed with _PS_ and defined in config/defines.inc.php
making a simple ajax call:

// code/ajax/display.php

// returns the id of the current used language.
$this->context->language->id;

// assign variables from current controller to the view
$this->context->smarty->assign([
  'categories' => $categories,
]);

// the view
return $this->display(__FILE__, 'views/templates/admin/someadminhook.tpl');

// fetching the rendered content of a view,
$this->context->smarty->fetch('module:your_module_dir_name/views/templates/front/display.tpl')

// get current cart
$this->context->cart;

// code/ajax/front.js

// preparing the ajax call inside a function
function getProductsByCategoryJs(categoryId) {
  $.ajax({
      url : AJAX_URL,
      type : 'POST',
      async: true,
      dataType : "json",
      data: {
          action: 'getProductsByCategoryPhp',
          categoryId: categoryId,
          ajax: 1
      },
      success : function (response) {
          console.log(response);
          $('#your-element').html(response.ajaxTpl);
      },
      error : function (error) {
          console.log(error);
      },
  });
}

// code/ajax/ajax.php

# my_module/controllers/front/display.php

// making the request url for our contoller in initContent() function
$url = Context::getContext()->link->getModuleLink(
    'my_module', // module name
    'ajax', // contoller name, could be 'display'
    array( // we can define more parameters here
        // 'action' => 'DoSomeAction',
        // 'ajax' => 1,
    )
);

// making variable accessible in javascript
Media::addJsDef([
    'AJAX_URL' => $url,
]);

Free modules in prestashop addons cost

You can't upload your free module in prestashop addons store if you're not "Native module partnerships", it has to be paid.
or, the funny thing, post it free on their forum: https://www.prestashop.com/forums/forum/144-free-modules-themes/

That's it!

There are lots of things to talk about but I tried to put content from here and there for a better view for prestashop beginners (including me) and not getting confused because, it is, kinda.

If you have any recommendation, improvement, found a typo just let me know the comments or fork this project and make your edits, any contribution is welcome.

Dockerize your Laravel project with Laradock

Marwane — Sat, 21 Nov 2020 18:53:34 +0000

Hello dear artisans! Todays post I'll try to share my laravel/laradock workflow while using Nginx, and exploring/setting-up two database engines: postgres/mysql, alongside pgadmin, phpmyadmin or adminer, depending your choice.

I'll try to do some extra steps and explain why, and I'll be boring too. I warned you!

Why Laradock and not docker-compose?

Here's my 2 cent: If you know the basics of docker-compose and want to switch between/quickly add modules with minimum configurations, you should consider using laradock. The only disadvantage using laradock is the long initial build time if you don't have a good download speed.

Before starting you should have Docker installed in your machine. I tested these steps in Windows 10 and Manjaro Linux.

The project will be named laraveldock

Prepare your virtual host

Open your hosts file as super user and add this line:

# /etc/hosts (linux)
# C:\Windows\System32\drivers\etc\hosts (Windows)

127.0.0.1 laraveldock.test

Prepare your Laravel Project

If you want to start with a new project open your terminal and install a new laravel project first:

# You can use version 7 or 8
composer create-project --prefer-dist laravel/laravel laraveldock "7.*.*"

cd laraveldock
git init
git add .
git commit -m "init commit"

If you already have a project just navigate to it in terminal.

Installing and Configuring Laradock

Laradock is basically just a git submodule, which means you can use you project without it in any LAMP stack or hosting. Run this git command as below:

# module directory should be unique for running multiple Laradock instances
git submodule add https://github.com/Laradock/laradock.git laradock-laraveldock

# go to module dir
cd laradock-laraveldock

# create a .env file from the example
cp env-example .env

# open docker compose config file to add our virtual host
code docker-compose.yml

Add the same virtual host url added earlier in host file like below:

# approximately line 375
nginx:
    # - frontend
    # - backend
    networks:
        frontend:
          aliases:
            - laraveldock.test
        backend:
          aliases:
            - laraveldock.test

Why? This is a minor fix when I worked with API calls in a SPA project, Laravel ad Vue combined to be precise. There is an alternative to do with nginx .conf files but I prefer this method.

Building docker images

Just a note before continuing, I'll explain using both database engines (mysql and postgresql), with administration tools such as phpmyadmin, pgadmin and adminer.

Before building the images be sure you're in the laradock directory:

cd laradock-laraveldock

# for mysql
docker-compose up -d --build nginx mysql

# for posqtgresql
docker-compose up -d --build nginx postgres

Now go prepare another cup of coffee. I'm serious here.

After build is finished you'll see your containers created. Navigate with your browser to laraveldock.test, you should see your homepage.

Bonus

Navigate to your working directory in your container:

docker-compose exec workspace bash

Laradock already installed many cli tools for us such as artisan, composer, node, npm, yarn, phpunit, git and vue.

Setting up database

In this step I'll use both cli and gui methods for both mysql and postgres.

Mysql / PhpMyAdmin

First let's build our phpmyadmin container:

docker-compose down

docker-compose up -d --build nginx phpmyadmin

I Stopped all containers and run them again just to show you that phpmyadmin will automatically start mysql container, if you check docker-compose.yml you'll notice that phpmyadmin depends on mysql. Same thing applies to postgres and pgadmin.

Navigate to phpmyadmin with laraveldock.test:8081 and create your database (lara_db in my case) with these credentials:

Hostname: mysql
Username: root
Password: root

Or with cli as below:

docker-compose exec mysql bash

  mysql -uroot -proot
  create database lara_db;
  exit

exit

Postgresql / PgAdmin

Build your pgadmin container:

docker-compose down

docker-compose up -d --build nginx pgadmin

Navigate to pgadmin with laraveldock.test:5050 and login with these credentials:

Username : pgadmin4@pgadmin.org
Password : admin

If your browser just keeps loading without any response it could be a permission issue, you can fix it by granting write permissions, more details here.

Add a new server with these:

Hostname: postgres
Database: laradock
Username: default
Password: secret

Then create your database lara_db.

Or with cli as below:

docker-compose exec postgres bash

  psql -U default
  create database lara_db;
  exit

exit

Connecting Laravel with Database

Open your project .env file - not the one inside laradock submodule disrectory - with your editor and edit these values as shown below:

APP_URL=http://laraveldock.test

# for mysql
DB_HOST=mysql
DB_DATABASE=lara_db
DB_USERNAME=root
DB_PASSWORD=root

# for postgresql
DB_CONNECTION=pgsql
DB_HOST=postgres
DB_PORT=5432
DB_DATABASE=lara_db
DB_USERNAME=default
DB_PASSWORD=secret

You're done! to test it out try to migrate your schemas with artisan:

docker-compose exec workspace bash
artisan migrate

A quick note: If you're on linux and you don't have permission to edit your project files with your editor you can simply run chmod -R 777 *.

Now whenever you want to stop and run you containers you'll use just these two commands:

# stop containers
docker-compose stop

# stop containers and remove all networks
docker-compose down

# start myqsl, phpmyadmin and nginx
docker-compose up -d nginx phpmyadmin

# or postgres, pgadmin and nginx
docker-compose up -d nginx pgadmin

And voilà!

If you have any recommendation, improvment, found a typo just let me in the comments or fork this project and make your edits, any contibution is welcome.

Hope you found this article helpful!

Is linux good enough for everyday programming?

Marwane — Sun, 19 Jul 2020 20:56:34 +0000

Disclaimer: I’m writing about my experience with major OS (Windows 10, macOs High/Sierra, Ubuntu/Manjaro) using a Solid State Drive. It has a huge impact in term of speed and it could be different from your own experience.

Hello there. To begin with, this post isn’t about what’s the best OS for everyday programming, it could depend on the stack used, Misc programs and specially YOU, so i’ll try to describe all the good/bad things that happened during my everyday workflows.

But before that I should let you know my programming stack so you won't get confused later. I mainly use:

PHP frameworks and CMS
nodejs frameworks for frontend
react native/ionic for mobile dev
Photoshop (with CssHat) for HTML Integration, banner for mobile apps.
ms office due to my current job.[1]

Ubuntu (Unity/Gnome):

By the end of 2015 and after a good run with Windows 7 and using Ubuntu just occasionally in virtual machines I thought I would give it a shot with a daily usage so I installed the 15.10 version. back then i was programming in PHP, Java and C# (because of my Software engineering Studies), php and apache had great performances locally, same for java but used a windows 7 VM for Visual Studio, Ms Office and Adobe Photoshop, because all the alternatives (Darkable/Gimp, Open office) weren't at the same levels. I tried but the more you use them the more you notice their weak points such as ease of use, backward compatibility.

I had a good (exactly 2 years) run switching between Unity and Gnome DE (I was the n°1 hater for KDE btw), but over time and even with SSD it felt a kinda slow (I was always stuck with 16.04 LTS) and honestly, I wasn’t fan of the Ubuntu’s PPAs either and then I discovered the Hackintosh community.

macOs (10.12/10.14)

So after a hell of an installation process I managed to run macOs Sierra smoothly on a laptop that has hardware near to macbook pro late 2012 (HP elitebook 840 G1). Apps installed with one simple drag n’ drop (applies to android studio too). It run the Android Virtual Device smoother than windows 7 and ubuntu with the same laptop, i was very surprised, the memory management, the apps integration and the overall stability was so great. At that time I finished my studies so no more Java or .Net programming, and the adobe/ms office suite was a strong point compared to Linux in general so every program ran natively without the need of any VM, with our beloved Unix cli.

The only drawback I had with mac, or with hackintosh, is the system updates/upgrades it was so painful to do it breaks your system every time, I was backing up the whole bootable system image whenever I attempted to update. Because the Kexts (Kernel extensions or “drivers”) weren’t always backward compatible.

So in the end i was thinking to go back to linux again but not sure which distribution i will stick with again, I wanted a stable distro that i forgot completely about something called upgrades of “big updates”. In the meantime I give Windows 10 another shot after hearing it got better and better in the last years.

And again, after 2 years with no workflow complaints I backed up my hackintosh installation and installed the last build of windows 10.

Windows 10.

I’ll resume my experience with one line: “not great, not terrible”
Compared, again, to mac os the system was very smooth in every way, snapping windows, switching virtual desktops, programs and files search in the start menu, no problem but! I already missed the unix cli. Yeah I know there’s cmder and other tools. The overall performance was okay but there was some latency when compiling node js apps. My workflow didn’t change. I used Laragon for all my php projects with phpstorm and it was perfect honestly. On the other hand Android Emulator was terrible even with 8gb or ram and ssd, mac os was handling it way better.

In the meantime I played with some linux distros in VMs and made the choice: Manjaro, KDE flavor.

Manjaro:

“You said you hated KDE right?” well yes but for a cause, one I didn’t want to bring back the Gnome memories i had with Ubuntu and second, I disliked is because its similarity in UI compared to Windows in general, 10 specially then I found how very customizable was and again i’ll resume it with one line: “everything is a widget”. So in term of UI I made my simple comfortable setup.

Now in term of programs and workflow I still use PhpStorm for my php and nodejs projects, npm and yarn installed globally and surprisingly npm run very fast compared to windows and mac; git already installed, but for my php projects I migrate all of them to docker with docker compose, majority of projects were based on Laravel, Prestashop, Wordpress and old native php apps. I managed to dockerize some of them from scratch, some with Laradock.

Java/.Net: RIP.

For mobile development there were some struggles during configuring ionic and react native’s first run but done with them quickly, no problem with android studio but the emulator “again” wasn’t that good as mac os, but not that bad like windows. And I discovered a helpful package that cast my connected android device to my screen and it’s shown as a virtual device but a physical one, called scrcpy from the genymotion team!

And finally these are just some of the benefits why I picked manjaro:

No big breaking updates.
A rolling release distro.
Fast security patches.
The Great Arch User Repository (AUR)
Snap and Flatpak support (but why?)
Very stable.

But still there are some drawback, linux’s ones in general:

Still needing photoshop and lightroom.
Ms Office for work purpose (Managed to use Web version since we have ms365 but still miss Excel for heavy use)

Conclusion:

Finally and personally I’ll stick with linux for these main two reasons: native support for docker (future projects could be deployed with it) and the unix environment similarity to production servers (cli, ssh and packages’ configuration).
I understand many of you will disagree for many things said in the post but that’s okay! because, finally, we choose what will help us to give the most of us in terms of productivity.

Thank you all for reading the most boring post ever made on Dev.to platform! I would gladly hear from you some of your thoughts and experiences as well. Thanks again! [1]

[1]: edit. added used stack and a conclusion.

Setup Prestashop CMS with Docker Compose

Marwane — Sun, 28 Jun 2020 23:19:25 +0000

So basically I want to dockerize all my php based projects (Wordpress, Laravel, Symfony...) after switching from OS to another, and Prestashop was among them.

So I'm writing this (my first) post so it will be a kind of reference for me in the future and I'll do the same for the others frameworks/CMSs.

Let’s dive into it!

Before we start, clone this repo:

git clone https://github.com/moghwan/docker-prestashop-boilerplate.git

The repo structure should look like this:

docker-prestashop-boilerplate/
├── config/
│ └── presta.conf
├── .env
├── docker-compose-ps.yml
├── Dockerfile
├── prestashop_1.7.6.5.zip
└── README.md

Let me explain and show you files' content:

config/presta.conf: a config file for apache enabling virtual host

<VirtualHost *:80>
  ServerAdmin webmaster@localhost
  DocumentRoot /var/www/html
  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
  <Directory /var/www/html>
    AllowOverride All
  </Directory>
</VirtualHost>

.env: contains COMPOSE_PROJECT_NAME environment variables.

COMPOSE_PROJECT_NAME=prestadock

It’s preferable to change it to your project name so we can avoid the collision with other running container with the same name, basically it just a prefix for containers’ names.

docker-compose-ps.yml: our compose file, we will remove the “-ps” suffixe later.

version: '2'
services:

mysql:
image: mysql:5.7
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: prestashop
volumes:
- ./.docker/data/mysql/:/var/lib/mysql
- ./.docker/logs/mysql/:/var/log/mysql
ports:
- "3306:3306"

phpmyadmin:
image: phpmyadmin/phpmyadmin
ports:
- 8080:80
env_file:
- .env
environment:
PMA_HOST: mysql
VIRTUAL_HOST: phpmyadmin.test

app_dev:
build: .
environment:
- VIRTUAL_HOST=prestashop.test
volumes :
- ./:/var/www/html:rw
restart: always
ports:
- 80:80
links:
- "mysql"

Dockerfile: our docker image.

FROM ubuntu:18.04
# Install.
RUN \
sed -i 's/# \(.*multiverse$\)/\1/g' /etc/apt/sources.list && \
apt-get update && \
apt-get -y upgrade && \
apt-get install -y build-essential && \
apt-get install -y software-properties-common && \
apt-get install -y byobu curl git htop man unzip vim wget && \
rm -rf /var/lib/apt/lists/*
ARG DEBIAN_FRONTEND=noninteractive
RUN apt-get update
RUN apt-get upgrade
RUN apt-get install -y apache2 libapache2-mod-php
RUN apt install -y php unzip
RUN apt-get install -y php-cli php-common php-mbstring php-gd php-intl php-xml php-mysql php-zip php-curl php-xmlrpc
COPY . /var/www/html:rw
COPY ./config/presta.conf /etc/apache2/sites-available/000-default.conf
RUN a2enmod rewrite
# Define working directory.
WORKDIR /var/www/html
# Define default command.
EXPOSE 80
CMD apachectl -D FOREGROUND

Prestashop_1.7.6.5.zip: the last stable archive downloaded from here

README.md: a copy of the instructions explained in this post, just in case.

Let’s get started.

First extract the archive then delete it:

cd docker-prestashop-boilerplate

unzip prestashop_1.7.6.5.zip && rm prestashop_1.7.6.5.zip

It's preferable to change the project name in the .env file to whatever you want.

Then build the docker-compose-ps.yml and run the containers:

docker-compose -f docker-compose-ps.yml up -d --build

You’ll notice that another docker-compose.yml file already exists in the same directory, which was extracted from the prestashop zip file. but we will use ours because it includes the phpmyadmin image and some virtual hosts.

After the build is finished the containers should be up.
Now navigate to localhost in your browser and you should see this page:

To fix this run these command inside the container:

docker exec -ti prestadock_app_dev_1 bash
chown www-data:www-data -R .
exit

Notice that prestadock is the project name for my case.

Refresh browser, the install process should begin.

let's continue the install process step-by-step:

Choose your language and continue.

Agree to the licence and continue.

Fill your store infos and continue.

For database server type mysql, and database password type root as below:

If the database connection is failed (happened to me in another setup) you can create another mysql user and use it instead of root user as below:

docker exec -ti prestadock_mysql_1 bash
chown -R mysql:mysql /var/lib/mysql
mysql -u root -p
# password: root
CREATE USER 'ps_user'@'%' IDENTIFIED BY 'user';
GRANT ALL ON *.* TO 'ps_user'@'%';
FLUSH PRIVILEGES;
EXIT;
exit

Our mysql user is identified as ps_user with user as password.

Now grab your second cup of coffee and chill for a moment.

Now head to your store front office:

tada!

before heading to the back office we should do some cleaning first:

docker exec -ti prestadock_app_dev_1 bash

rm -rf install
rm docker-compose.yml
mv docker-compose-ps.yml docker-compose.yml
exit

docker-compose down --remove-orphans
docker-compose up -d

Now you can log into the back office without problems.

so much zeros :o