New product template

[Drack]

Hello,

 

I have just created a new product new template.
The approach is very basic and you can if you want to include some features inside like flash discount, qty, stock ...

How it works, Inside directory template_html, create new files like template_boostrap_simple.php and insert this code below.

You can copy this files in other template directory if you want to have a new design.

I take the orginal design, but if you want to change the css parameters, It's better to create a new css.

 

what do you think ?

<?php
/**
 *
 *  @copyright 2008 - https://www.clicshopping.org
 *  @Brand : ClicShopping(Tm) at Inpi all right Reserved
 *  @Licence GPL 2 & MIT
 *  @licence MIT - Portion of osCommerce 2.4
 *  @Info : https://www.clicshopping.org/forum/trademark/
 *
 */

use ClicShopping\OM\CLICSHOPPING;
?>
<div class="col-md-<?php echo $bootstrap_column; ?> col-md-<?php echo $bootstrap_column; ?>">
  <div class="card-deck-wrapper" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/Product">
    <div class="card-deck">
      <div class="card card-footer">
          <div>
            <div class="col-md-6 float-md-left">
              <div class="ModulesFrontPageBoostrapColumn6Image"> <?php echo $products_image; ?></div>
            </div>
            <div class="col-md-6 float-md-right">
              <div class="ModulesFrontPageBoostrapColumn6Title"><h3><a href="<?php echo $products_name_url; ?> "><?php echo $products_name; ?></a></h3></div>
              <div class="separator"></div>
              <div class="separator"></div>
            </div>
          </div>
        <div class="separator"></div>
        <div class="hr"></div>
        <div>
          <ul class="list-inline">
            <div class="ModulesFrontPageBoostrapColumn6TextPrice" itemprop="offers" itemscope itemtype="https://schema.org/Offer"><?php echo CLICSHOPPING::getDef('text_price') . ' ' . $product_price; ?></div>
          </ul>
        </div>
        </div>
      </div>
    <div class="separator"></div>
  </div>
</div>

the result :

 

 

[Ronaldo]

Hello @Drack

Thank you for this example. Indeed, it seems very simple to create a new template quickly.

 

I suggest to change this line :

              <div class="ModulesFrontPageBoostrapColumn6Title"><h3><a href="<?php echo $products_name_url; ?> "><?php echo $products_name; ?></a></h3></div>

by

              <div class="ModulesFrontPageBoostrapColumn6Title"><h3 class="text-md-center"><a href="<?php echo $products_name_url; ?> "><?php echo $products_name; ?></a></h3></div>

 

[Snoopy]

Thank you for this example, I take time a test. it works fine, just when it displayed in mobile, we have the product name at left not in the center
I also tested the @Ronaldo proposition, it's correct in mobile but in my desktop, I have the product name displayed with the text in center, I don't like.

[Patrick]

@Snoopy

media queries can solve the problem.

@Drack nice work

Edited February 15, 2019 by Patrick

[FrediKa]

@Drack It seems easy to make a new template.

[Josephine]

@Drack thank for this example. I don't know where on the forum, there some information can be included inside the template.

[Drack]

@Josephine : 

https://www.clicshopping.org/forum/topic/14-how-to-display-information-inside-the-template/

 

I let you the css

.ModulesFrontPageBoostrapColumn5Image {
  text-align: center;
}

.ModulesFrontPageBoostrapColumn5Title h3 {
  font-size: 0.6875rem;
  text-align:center;
  vertical-align:text-top;
  padding-top: 0.3125rem;
  height: 0.625rem;
  padding-left: 0.3125rem;
  padding-right:5px;
}

.ModulesFrontPageBoostrapColumn5Title A {
  text-decoration: none;
}

.ModulesFrontPageBoostrapColumn5TextPrice  {
  color:#000000;
  text-align:center;
  vertical-align:text-top;
  font-size: 0.75rem!important;
  padding-top: 0.625rem;
}

 

[Ryan Gil]

Is it possible to use just one file and not to make for all pages ? Like I see inside the code, all products directory (new, specials ...) have their own files ? 

Edited February 16, 2019 by Ryan Gil

[Drack]

NO you can't, you must copy the files inside their directory but for the css you can do that.  I don't know if it's recommended.

[Mariana]

Hello,

 

Than you to share our experience @Drack,  Is possible to make an effect on the product when the mouse is on the product. Some website has this approach.
This is my first post, I have just installed the solution.

Thank you.

[Drack]

Yes you can make that, you must just adapt the css or use the card function if you implement this function in your template.

[JKaz]

@Drack,

Thank you, it's usefull