Change the Look of Phoenix - can you click here and there?

[burt]

Product Page #4

Now we have centered the name and price, the review stars and add your review text look out of place.

How about we also center this `***** | add your review`, and place it just above our new tabs?

Admin > Modules > Content > {product_info: Review Stars/Link}

Change Content Container to col-12 text-center
Change Sort Order to a a number a bit lower your Sort Order for Product Tabs.

Results in

pi-5.png

Great!

[burt]

Product Page #5

This area of the Product Page, we have not yet played with.
This area is a special area of product_info that is known as the `π` PI layout.

I'm more or less happy with this, but let's just do some minor adjustments;

1. Put the Quantity Input box and the Button on the same line.
2. Change the Green button to a Blue Button

For #1

1a. At Admin > Modules > Layout > {product_info: Quantity Input}
Change Content Container to col-sm-6 mb-2

1b. At Admin > Modules > Layout > {product_info: Buy Button}
Change Content Container to col-sm-6 mb-2

For #2

As this is appearance...

COPY /includes/modules/pi/product_info/templates/tpl_pi_buy_button.php TO /templates/override/includes/modules/pi/product_info/tpl_pi_buy_button.php

And amend this new file appropriately.
Button Colors available: https://getbootstrap.com/docs/5.3/compo ... /#variants

Code: Select all

I changed `btn-success` to `btn-primary`

Results in

pi-7.png

[burt]

While we are working in this area, shall we change the shopping cart icon to a shopping bag icon?

Maybe a bag looks more `gentle` and less `in your face` than a cart?
I don't know, but I notice many site using a `bag`.

In the same file [ templates/override/includes/modules/pi/product_info/tpl_pi_buy_button.php ], change the icon!

I changed `fa-shopping-cart` to `fa-bag-shopping`

I notice that the text of the Button still reads "Add to Cart" which doesn't go with the Bag Icon idea.

Options?

a. Revert to a Shopping Cart Icon
b. Change the Text of the Button

Let's go Option B. As this is a text change, we know we should use the Language Explorer to copy the relevant language file so that we can then edit it. At Admin > Tools > Language Explorer, copy the relevant file, in this case
english > modules > pi > product_info :: pi_buy_button.php and amend the new file appropriately.

I simply changed `Add To Cart` to `Add To Bag`

Results In

pi-8.png

Sweet!

We will be revisiting this area when we add in some "Eye Candy" later on in the Project.

[burt]

With that "Bag" change, I realise that we to make similar changes in the Header area:

h-1.png

These will be language changes only, but over two files. I don't remember why these are over two files (they could easily be in one file), so that might change in the next release. In any case, using Admin > Tools > Language Explorer;

1. Copy the main english.php language file
amend the file appropriately, taking care;

I changed:

Code: Select all

// added BS5 template
const NAVBAR_ICON_CART_CONTENTS = '<span class="position-relative%2$s">
  <i title="Shopping Bag: %1$s item(s) in your Bag" class="fas fa-bag-shopping fa-fw fa-xl"></i>
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary border">
    <span class="cart-count">%1$s</span>
  </span>
</span>';

2. Copy the nb_shopping_cart.php file
amend the file appropriately

I changed:

Code: Select all

const MODULE_NAVBAR_SHOPPING_CART_NO_CONTENTS = '<i class="fas fa-bag-shopping fa-fw"></i> 0 items';
const MODULE_NAVBAR_SHOPPING_CART_VIEW_CART = '<i class="fas fa-eye fa-fw"></i> View Your Bag';

While in this Area, I took inspo from a FREE addon uploaded to the Members Area by @heatherbell - TYVM - viewtopic.php?f=28&t=2826

and now the navbar has a bottom shadow when the user scrolls. A nice bit of Eye Candy.

Anyway, the icon is changed and the shadow is in place when scrolling;

h-2.png

[burt]

More tomorrow.

Bookmark this thread, and please share it if you're on any socials.

[burt]

Let's add a nice addon that has something in the Navbar and something in the Product Page.

Wishlist/Favourites
app.php/tag/s07e01

Download the addon and upload it ready to be installed.
Follow the easy installation instructions.

1. Install the Navbar Wishlist Icon at Admin > Modules > Navbar
2. Install the PI Layout module at Admin > Modules > Layout

Within 2 minutes...your site has a fully functional `save to favourites` system.

w-1.png

[burt]

Shall we have a look at Index, when looking at a Category that has products. Out of the Box, it looks like this:

cp-1.png

Ideas

1. Put the Name and the Description side by side
2. Make the description a bit more pretty
3. Make the boxes do something when they are hovered over

[burt]

For #1

1a. Admin > Modules > Content > {index_products: page heading} > Edit
Change Content Container to col-sm-6 mb-2

1b. Admin > Modules > Content > {index_products: category/manufacturer description} > Edit
Change Content Container to col-sm-6 mb-2

For #2

This is appearance so we need to copy the TPL from /includes/modules/content/index_products/templates/tpl_cm_ip_category_manufacturer_description.php TO /templates/default/includes/modules/content/index_products/tpl_cm_ip_category_manufacturer_description.php

Change the new file appropriately. I changed this

Code: Select all

  <div class="card">
    <div class="card-body">
      <?= $cm_description ?>
    </div>
  </div>

to this

Code: Select all

  <blockquote class="blockquote mt-3 lead text-end">
    <i class="fa-solid fa-quote-left fa-2xl text-light"></i>
    <?= $cm_description ?>
    <i class="fa-solid fa-quote-right fa-2xl text-light"></i>
  </blockquote>

For #3

I used this addon app.php/tag/s02e07 which creates a nice effect on hovering the cards. Just upload the ONE file and it works.


Results in

cp-2.png

That's pretty nice.

[burt]

More or less repeat the above post for

index_nested: page heading
index_nested: category description

Simply to make the Nested Category (ie a Category that has sub categories) into a unified look the same as the other category pages.

cp-3.png

Best bit...the blue border on mouseover works automatically, with no extra effort needed.

[burt]

We have not really changed anything in the Index Page (the main home page of your shop), so tomorrow we will address that area. Not really sure what we're doing there, but inspo will come.