Jump to content
Sign in to follow this  
14steve14

How to make Buy button and view button full width

Recommended Posts

I want to see what the index page looks like with full width buy and view buttons. Lots of sites I look at now have this feature. I know it will mean altering core code. I also know I have several files to alter plus others addons that I have added. I have already added a gap between the two buttons and centred them hence a few minor code differences.

This is the code that currently positions the buttons in the boxes.

<div class="btn-group" role="group">
            <?php
            echo tep_draw_button(IS_PRODUCT_BUTTON_VIEW, '', tep_href_link('product_info.php', tep_get_all_get_params(array('action', 'products_id', 'sort', 'cPath')) . 'products_id=' . (int)$card_products['products_id']), NULL, NULL, 'btn-info btn-product-listing btn-view mx-1') . PHP_EOL;
            $has_attributes = (tep_has_product_attributes((int)$card_products['products_id']) === true) ? '1' : '0';
            if ($has_attributes == 0) echo tep_draw_button(IS_PRODUCT_BUTTON_BUY, '', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action', 'products_id', 'sort', 'cPath')) . 'action=buy_now&products_id=' . (int)$card_products['products_id']), NULL, array('params' => 'data-has-attributes="' . $has_attributes . '" data-in-stock="' . (int)$card_products['in_stock'] . '" data-product-id="' . (int)$card_products['products_id'] . '"'), 'btn-warning btn-product-listing btn-buy ml-3') . PHP_EOL;
            ?>
          </div>

I have changed the first line to be

<div class="btn-group d-flex" role="group">

Which makes the single buttons full width, which is good, or spreads the two buttons equally across the box, but where to put the break to get one above the other. I have tried all sorts and nothing seems to work. Is there a rights way to achieve this.

Edit. Forgot to add using Phoenix version 1.0.5.0 but code looks similar to other earlier versions.

Edited by 14steve14

REMEMBER BACKUP, BACKUP AND BACKUP

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites

Change:

btn-group

To:

btn-group-vertical d-flex

AND;

undo everything else you've done. eg centering.

If you do not want the buttons in a group (ie so they do not "touch" each other);

Remove the buttons from the block entirely and add btn-block and margin on each button. So;

Change:

<div class="btn-group" role="group">

To:

<div>

and

each button (eg) as so;

'btn-light btn-product-listing btn-buy btn-block my-1'

 

Edited by burt

Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

Many thanks to both of you. Once I have finished getting orders ready I will have a look and see what works best.

I know this is a bit cheeky, but wouldnt it be good if those product boxes/cards were modular. Just a thought.


REMEMBER BACKUP, BACKUP AND BACKUP

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites

For now have made a decision. No doubt it will change later. Changed it to look like this. The button widths now define the width of the module boxes now that the border has been removed (actually changed to white in the user.css file) It looked a bit silly when the buttons were stacked and some products had one button and others two.

Thank @burt and @JcMagpie for your help and guidance. Now just got all the other files to change so they all look the same.

 

ws-homepage.png


REMEMBER BACKUP, BACKUP AND BACKUP

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites
1 hour ago, hungryfrank said:

a step by step instruction would be nice and Valquiria  can put a link in her topic

What you trying to get her banned again? 😊..... Looks like thread has already been edited to add instruction funny was not like that when I posted.....but hey it's done.


 

Share this post


Link to post
Share on other sites
4 hours ago, hungryfrank said:

a step by step instruction would be nice and Valquiria  can put a link in her topic.

 

For what purpose? That page uses mostly standard code with a few additions to create centring and padding, and possible a bit of a margin in places. It is something specific that I wanted on my site. All the information can be found by reading and learning about BS and the different parts and shortcuts available. It could also be done by changing the user.css files but it was easier when testing to modify the core code. The only trouble with modifying the core code it needed lots of files changed where as it would only take a few changes to the css and the same effect can be achieved on all pages that use that code.

All that information on bootstrap can be found here https://getbootstrap.com/.

14 hours ago, valquiria23 said:

It looks very pretty, good job!

Thanks. Its getting there.


REMEMBER BACKUP, BACKUP AND BACKUP

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites

You have a few ways of doing this if flexability is needed.

1) css , yes but still find people not fully at ease doing that as you can see on the forum many struggle to find the elements to apply it to.

2) You can use a little js to replace or append a new class to existing one ( it's already been used in osC before)

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace ( /(?:^|\s)MyClass(?!\S)/g , '' )

🙄 not something most users would be happy with me thinks.

3) Build each module with flexability built in. Allow class and css to be edited in admin. Simple click and select. I know I have done it in a number of add-ons and Phoenix has it in a one or two parts.

Question is how much need is there for this?

existing Phoniex

image.png.398c8bd42413eecd5421e11f3cfafcd3.png

one of my add-ons

image.png.36ca55b966dd00412fb8f3896e43ec86.png


 

Share this post


Link to post
Share on other sites
21 hours ago, 14steve14 said:

I know this is a bit cheeky, but wouldnt it be good if those product boxes/cards were modular. Just a thought.

😊 Would make adding functionality to the product listings much simpler. At the moment it's core edit's are a must for some parts others can be done my hook or header tag.

This was done using a mix of hooks and core edits. If it was moduler then yes that would make life a lot simpler. Or could it all be done with hooks?

image.png.aa62987680b09388e76e8c1f36b1e879.png


 

Share this post


Link to post
Share on other sites
2 hours ago, 14steve14 said:

For what purpose? That page uses mostly standard code with a few additions to create centring and padding, and possible a bit of a margin in places. It is something specific that I wanted on my site. All the information can be found by reading and learning about BS and the different parts and shortcuts available. It could also be done by changing the user.css files but it was easier when testing to modify the core code. The only trouble with modifying the core code it needed lots of files changed where as it would only take a few changes to the css and the same effect can be achieved on all pages that use that code.

All that information on bootstrap can be found here https://getbootstrap.com/.

Thanks. Its getting there.

so if someone wants to make it look like what you did can do it also.

this is how a community behaves a cult is different story. 

of course u don't have to and that is also your right

anyhow the page that has to be edited is

includes/module/product_listing.php

now that wasn't so hard

 

Edited by hungryfrank

you can cut up to 4 pages of your checkout by using my three add_ons

login create account in one page

Express checkout  

login pop up modal

Share this post


Link to post
Share on other sites
53 minutes ago, hungryfrank said:

so if someone wants to make it look like what you did can do it also.

this is how a community behaves a cult is different story. 

of course u don't have to and that is also your right

anyhow the page that has to be edited is

includes/module/product_listing.php

now that wasn't so hard

 

Well copy the code that is there. I posted the code for the buttons I had and the way to solve it was posted so the way to achieve the look of the buttons is there already. 

Reading the bootstrap pages helped me figure out how to space the buttons using padding. It also helped be get the buttons to equally spread across the full width of the content box. What it didn't help with was how to alter the osc core code. In fact just buy using one extra bit that I could not figure out where to place and it did what I wanted. After trying it on two different lines I decided against the idea and put it back to what I already had, so the code is already posted. 


REMEMBER BACKUP, BACKUP AND BACKUP

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites
6 minutes ago, 14steve14 said:

Well copy the code that is there. I posted the code for the buttons I had and the way to solve it was posted so the way to achieve the look of the buttons is there already. 

Reading the bootstrap pages helped me figure out how to space the buttons using padding. It also helped be get the buttons to equally spread across the full width of the content box. What it didn't help with was how to alter the osc core code. In fact just buy using one extra bit that I could not figure out where to place and it did what I wanted. After trying it on two different lines I decided against the idea and put it back to what I already had, so the code is already posted. 

the point is that once u post a question on a help forum, and u get the answer, then you try to help others by explaining how u did it. that is the purpose of a forum like this. 

only the name of the file was missing. you could have said what file considering your main problem was finding the code.

Edited by hungryfrank

you can cut up to 4 pages of your checkout by using my three add_ons

login create account in one page

Express checkout  

login pop up modal

Share this post


Link to post
Share on other sites

For those that cannot work out where the buttons are by looking at the images, they are in the product cards modules that are shown on the index page. Because it's on the index page that means that the file can be found in the index section of the content modules. As its altering the design, the template file is the one to alter. 

There are other similar files in the index nested content block and also just in the includes folder. There are also similar display layouts in some addons such as recently viewed, also purchased, cross sell addons and there must be more.

Hopefully that answers those that need the additional direction. I have no plans to release the full code as it's best not to alter the core code, and I am looking into adding to the user.css files to create the same effect which will save the hassle of changing core code files.

Matter closed or post will be deleted or moderated to remove the off topic posts.


REMEMBER BACKUP, BACKUP AND BACKUP

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites

considering that two of the best  coders in the site helped,  this could become the source of information when u google it if it become useful in its own context.

look at Burt he has put so much effort in making the bootstrap version for the community. be generous with your knowledge.


you can cut up to 4 pages of your checkout by using my three add_ons

login create account in one page

Express checkout  

login pop up modal

Share this post


Link to post
Share on other sites
41 minutes ago, hungryfrank said:

considering that two of the best  coders in the site helped,  this could become the source of information when u google it if it become useful in its own context.

look at Burt he has put so much effort in making the bootstrap version for the community. be generous with your knowledge.

Don't you ever shut up and not have the last word.. I will ask @burt or any other other mods to remove all your irrelevant posts as its doing nothing for this thread and will only stop others finding the information they are looking for. Hopefully it will be deleted from where I posted the image near the top.


REMEMBER BACKUP, BACKUP AND BACKUP

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×