Jump to content
Sign in to follow this  
Drack

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 9

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Sign in to follow this  

×
×
  • Create New...

Important Information

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