# Personyze - Decathlon steps

This docs aims to outline the steps to customize PY HTML templates to meet customer expectation.

We basically use some basic CSS skills to handle how elements display.

Here I outline each section based on each separate requests

Requests:

1. Add .00 to price
2. Change price currency
3. Make border line display in full width
4. Move Price to be above the Product Name
5. Add space between product image and price

## 1. Add .00 to price

Change from this

MYR ${p->price_after_discount:sprintf('%[#,###.#]f')}

to

MYR ${p->price_after_discount:sprintf('%[#,###.00]f')}

Here we add ".00" into the format string.

**Note:**
This character ``` ``` is just HTML symbol - to display space. Delete it if we wants no space between currency and price.

## 2. Change price currency

Assume currency is MYR, we want to change it to VND

Change from this

MYR ${p->price_after_discount:sprintf('%[#,###.#]f')}

to

VND ${p->price_after_discount:sprintf('%[#,###.#]f')}

## 3. Make border line display in full width

In this request, we need to try by adjusting CSS.

Let's try with these options:

### Option 1:
- delete margin in table
- set width to 100%

### Option 2:
- Set width to 100vw

## 4. Move Price to be above the Product Name

We need to locate in HTML code the section that displays product title and the price.

PY used these variables to display those information
- ${p->title} => Product name/title
- ${args->price_with_discount} => Price of product after discount

#### Locate HTML block representing the information

The code display the Price often has these code

${block->price:default(1)}

<div data-style="...">
${if p->price_after_discount}
...
...
${end}

And the code display the Product price has these code

<a data-personyze-click-target="...">
...
${p->title}
...
</a>

In order to move price above the product name, just simple cut the relevant code and move it before the product name code block.

**Note**:
- I use syntax three dots ... as shortcuts to display the structures of PY code. We don't need to understand every parts of PY HTML to edit. Just find the patterns and move on.

## 5. Add space between product image and price

I think there are different ways to handle this with CSS.

The easiest trick works for Decathlon website is simple add this div block under tag ```<a>```product image

<div style="padding-top: 40px;"></div>