Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Support thread for JcM Footer Modal Cart V1.1


JcMagpie

Recommended Posts

Yep, I did say you would need to play with the css, all i did was make a quick test to make sure it loaded and ran. Just check your html to see what button id is beeing used and make the required changes.

I think for BS3 it will be bt1 for your shopping cart and bt2 for check out.

#btn1 {
    Background-color:blue!important;
    color:#fff;
} 

#btn1:hover {
    Background-color:lightblue!important;
    color:red;
} 

#btn2 {
    Background-color:green!important;
    color:#fff;
}
#btn2:hover {
    Background-color:lightgreen!important;
    color:red;
}

should give you this but it all depends on your store set up.

image.png.55eae6e1bcfcc322d4f551150978c4a2.png

 

Link to comment
Share on other sites

Changing the buttons to 1 and 2 results in no colors on the modal buttons in any circumstance.

Web inspector is recognizing those buttons in the modal as #btn3 and #btn4.

What's happening in the product listing page is, for example, you have a category with ten products in it.

When I use web inspector...every single one of those Buy Now buttons is being assigned a unique button number.

Btn1, Btn2, Btn3, Btn4....all the way down the category thru number 10. 

After I add an item to my cart and close the modal, the color for the Buy Now buttons on items assigned btn3 and btn4 change to the color assigned in the modal template.

It's very weird, but that's what is happening.

- Andrea

 

Link to comment
Share on other sites

Updated to:

1) add css to remove alerts.

2) clean code and add additional div to contain modal.

3) comment out custom button css to allow default to be used. You can always un-comment if you like.

4) instructions added on how to use for Frozen.

 

 

Link to comment
Share on other sites

Still trying to sort out my modal buttons - the colors. 

Discovered a problem with your cm_footer_modal_cart.php file

Two instances where tep_href_link('product_info',  needs to be changed to product_info.php

Otherwise, the text and image links in the modal lead to a 404 page

The newest template you uploaded is not working for me.  I cannot close the modal box after it appears.  The only way out of it is to click on the Shopping Cart or Checkout buttons.  So, I'm back playing with the original template.  That one functions fine for me. 

- Andrea

 

Link to comment
Share on other sites

24 minutes ago, puggybelle said:

Two instances where tep_href_link('product_info',  needs to be changed to product_info.php

Good catch did not spot that, silly copy paste error . It's been fixed and uploaded

31 minutes ago, puggybelle said:

I cannot close the modal box after it appears.

No idea why compare the 2 files and see if you have a duplicate issue with js scripts. Phoenix uses the site wide hooks but for BS3  your adding it to the template file you need to be sure you dont have it already in another add-on or in stock files template_top.php or template_bottom.php

This is my template file from my Frozen BS3 site and closes ok.

tpl_cm_footer_modal_cart.php

 

Link to comment
Share on other sites

Thanks, that one is working for me. 

However, I am unable to achieve any color changes in the buttons without affecting other buttons in the website. 

Any way to make those buttons like the Close button? 

<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

I'm playing around with it but the additional code involved is tripping me up. 

Other than that, I really like this add-on and fully intend to use it - Thanks!

- Andrea

 

Link to comment
Share on other sites

42 minutes ago, puggybelle said:

Any way to make those buttons like the Close button? 

The other 2 are using osC tep_draw_button so are produced by html_output function so use the button set in that, It also assigns the id's for the buttons. The close button is part of the modal and we can set it's color. If you set a color for the other two it will affect all the buttons using that id as you first found.

 

Link to comment
Share on other sites

You can try replacing line 14 in the template file with this, as you will see we have added a overiding button class to the code. It should work depending on what other mods you have done.

<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button><?php echo tep_draw_button(MODULE_CONTENT_FOOTER_MODAL_CART_HEADING_TITLE . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link('shopping_cart.php', '', 'SSL'), 'primary', NULL, 'btn-info') . tep_draw_button(IMAGE_BUTTON_CHECKOUT, 'fas fa-angle-right', tep_href_link('checkout_shipping.php', '', 'SSL'), 'primary', NULL, 'btn-success'); ?>
            

 

 

Link to comment
Share on other sites

That works, thank you!

Is there no way to have two separate button colors for Cart and Checkout?

I tried changing the last one from 'primary' to 'success' with no luck.  The colors remain identical.

- Andrea

 

Link to comment
Share on other sites

7 hours ago, puggybelle said:

I tried changing the last one from 'primary' to 'success' with no luck.

I think your geting things mixed up, the buttons are already set as 'btn-info' and 'btn-success'

NULL, 'btn-success'); ?>

 

Link to comment
Share on other sites

Mixed up ain't the half of it - this is what happens when I spend too long in one place.

I had some issues to sort out in my user.css file - just needed to walk away and try another day.

All is well now!  Thank You for this wonderful add-on!

- Andrea

Link to comment
Share on other sites

Hi Zahid,

Great contribution, thank you!

One observation and question: when you activate the modal, the screen scrolls to the top, which undermines its utility, assuming it is to prevent losing one's place. Do you know of any way to stop this? My google searches revealed this to be a common issue with modals and I could not get any of the recommended solutions to work.

Regards,,

Peter

CE PHOENIX SUPPORTER

Support the Project, go PRO and get access to certified add ons

Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design.

Download the latest version of CE Phoenix from gitHub here

Link to comment
Share on other sites

2 hours ago, peterpil19 said:

activate the modal, the screen scrolls to the top,

I'm not sure about that, had a quick look ( sorry 2 items in basket 🙁) it looks to be doing the same on my site i've never noticed before. I think it scrolling to top just before the actual modal is triggered.  It must be somthing setting <body> back  to 100% , The modal is an overlay with background image so should not affect the main page.

I see it's not doing this on the modal login try it on my test site will need  look into it a bit more.

 

Link to comment
Share on other sites

2 hours ago, peterpil19 said:

My google searches revealed this to be a common issue with modals

Yes you are right it's a boostrap problem, none of the fixes work!  I think will have to just live with it untill boostrap find a fix. I know some have said edit modal.scss but as I pull from a CDN not posiable and adding overide to user.css is not working.

When the modal is open, the class modal-open is added to the body element.

In _modal.scss, the style .modal-open { overflow: hidden; } removes the scrollbar of the body element. Removing the scrollbar on the body is forcing the scroll to the top.

Edit:

Add the following line to your custom.css:

.modal-open {
    overflow: initial;
}

 

Link to comment
Share on other sites

Ok I was wrong it's not a Boostrap problem, after a bit of reading it looks like it's normal behavior for a normal boostrap button as in osC the product buy buttons all work in forms when a button is used in a form as submit a page refresh is automaticly done. There are a number of work round but all will require changes the stock buy button, you could replace them with Ajax button or use some js to listen for the click and disable the refresh, all a bit much to just prevent scroll up to top of page.

 

Link to comment
Share on other sites

Thanks for replying and checking.

Shame it is not a simple solution!

Peter

CE PHOENIX SUPPORTER

Support the Project, go PRO and get access to certified add ons

Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design.

Download the latest version of CE Phoenix from gitHub here

Link to comment
Share on other sites

  • 3 months later...

2 things to check

1) make sure hook file is in right place.

2) make sure you set display cart to false to disabe stock cart. I think the note on this could be clearer 😊 got lost along the update line, it's in original notes.

image.png.0b6ed8d30a231b6fadff7168bb2637ec.png

Looks to be working fine on Phoenix 1.0.4.0

image.png.3765c56cf3a9badfdf7175b4625c1021.png

 

Link to comment
Share on other sites

17 minutes ago, LeeFoster said:

but I edited the Upcart file to being the jquery back in and it works.

🤔 no idea what you mean by that, it's a simple bit of code and no editing shoud be needed as I said it's working fine as stock on 1.0.4.0. bu tif you got it to wor then cool.

 

Link to comment
Share on other sites

I changed this -

class hook_shop_siteWide_Upcart {
  var $version = '1.3';
  
  var $afterfooter = null;
  
    function listen_injectAfterFooter() {
      $this->afterfooter .= '<!-- jquery hooked -->' . PHP_EOL;
      
      //$this->afterfooter .= '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>' . PHP_EOL;
      
      $this->afterfooter .= '<script type="text/javascript"> $(window).on("load", function(){ $("#upCart").modal("show");  });</script>' . PHP_EOL;
                                                                            
    return $this->afterfooter;
  }
 }

to this -

class hook_shop_siteWide_Upcart {
  var $version = '1.3';
  
  var $afterfooter = null;
  
    function listen_injectAfterFooter() {
      $this->afterfooter .= '<!-- jquery hooked -->' . PHP_EOL;
      
      $this->afterfooter .= '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>' . PHP_EOL;
      
      $this->afterfooter .= '<script type="text/javascript"> $(window).on("load", function(){ $("#upCart").modal("show");  });</script>' . PHP_EOL;
                                                                            
    return $this->afterfooter;
  }
 }

and it now works.

Link to comment
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
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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...