Jump to content

New product template


Recommended Posts

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 :

 

image.png

 

  • Thanks 10
Link to post

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>

 

Link to post

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.

Link to post

@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;
}

 

  • Thanks 2
Link to post
(edited)

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 by Ryan Gil
Link to post

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.

Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use