Adding a cart to the nav bar

[BooneCtyBeek (Jeff Singletary)]

RW 8.7. Depth theme. RapidcartPro. Trying to switch to Yuzool Nav stack. Having problems with the branding part, but that’s a separate issue. The Depth theme won’t display the font awesome correctly on the menu throughout the site. Had a previous post on this with some help but it didn’t solve the problem.

I’d like to add a cart to the Nav bar. https://rjhoney.com/test/

I found this code. Had to take the < out and and & before nbsp to make it display in the post.

div id=“cartTotal” class=“cartTotal”>
a href="">
i class=“fa fa-shopping-cart”>
nbsp;span class=""></span
/a>
/div>

Will it do what I want? Where would I place it? I’ve tried in the stack CSS box, HTML Code CSS but it does not give the desired result.

Level of experience. Beekeeper who does the web site. Can’t write code. Not afraid to monkey around with things.

[teefers (Doug Bennett)]

Jeff,

@BooneCtyBeek

I found this code.

Might help if you told us where you found the code?

I don’t have RCP other than the demo version, but see if this post will help with the cart (This is for Foundation 6, but might work similarly with Navigation stack):

RapidCart Pro Cart Icon in Menu

Okay, I’m flying blind here, I only have the demo version of RCP. Sound like you are trying to build the menu manually and not use the RW menu option? I just tried this and it seems to work with the Demo store. I copied this into the HTML contents on a menu item: <i class="uk-icon-shopping-basket uk-margin-right"></i><span class="rc-extras-cart-total"><?php echo $rc->extras->cartTotalLocalized; ?></span></span> [2020-04-18_12-40-21] Then with that menu item selected in the stacks setting …


As for FA not working on all pages, it looks like you are getting a 404 on the web fonts for FA on the RCP pages:


Also, if you want to post code on this forum, if you select it and mark it as pre-formatted text ⌘ Cmd+⇧ Shift+C or the button above where you type </> Next to the big ”.

[BooneCtyBeek (Jeff Singletary)]

Came from https://themeflood.com/knowledgebase/topic/rapidcart-pro-setup/

I’m not using Boutique yet.

Any idea why I am getting the 404?

And I appreciate the help, really do.

[teefers (Doug Bennett)]

@BooneCtyBeek

Any idea why I am getting the 404?

Well,

https://rjhoney.com/test/rw_common/plugins/rapidcartpro/fonts/fontawesome-webfont.woff2
https://rjhoney.com/test/rw_common/plugins/rapidcartpro/fonts/fontawesome-webfont.woff
https://rjhoney.com/test/rw_common/plugins/rapidcartpro/fonts/fontawesome-webfont.ttf 

Aren’t there, since they appear to be part of the RCP plugin, my guess is for some reason they didn’t get published. I’d try to republish all files maybe.

I don’t have access to the server, so can’t say for sure. I also noticed that if I try to click on the cart button, I get a JS error?

As for the code, I don’t know if that is specific for that theme. I know the demo project just uses an offsite page to add the cart to the RW navigation.

[BooneCtyBeek (Jeff Singletary)]

I am most likely a bit dull here, but I cannot find ‘Menu Item’ stack. I did a web search on ‘menu item stack’ and only got navigation stacks from various developers.

Ok. I opened the web developer window and found the 404 errors? Is this something I did or didn’t do? Or should I contact 4gnd?

About fa, I thought that entering it into the page name would make it ubiquitous throughout the site menu.

I did republish. Where are you clicking to get a JS error? I checked a couple pages and didn’t get any errors?

[teefers (Doug Bennett)]

@BooneCtyBeek

I am most likely a bit dull here, but I cannot find ‘Menu Item’ stack.

That post was for Foundation 6. if you want to add a cart to the menu in a traditional theme, you add an offsite page (not stacks page but offsite): set the page name (left sidebar) to:

<i class="uk-icon-shopping-basket uk-margin-right"></i><span class="rc-extras-cart-total"><?php echo $rc->extras->cartTotalLocalized; ?></span></span>

Then set the URL to the offsite page to store address.

RapidCart Pro Cart Icon in Menu

In the Inspector sidebar for the offsite page what did you have for the URL in the existing site? [2020-04-18_10-52-36] The Demo project that comes with RCP has the page name set like you have, but the URL in the offiste page points to a dem cart? https://tls.4gnd.com/rw/rapidcartpro/demo/official/?cart/overview I would think you would need to point to the URL of your store page.

[BooneCtyBeek (Jeff Singletary)]

Created an offsite page. Put the code in. Republished all files. Tried the redirect box, too. The offsite page is not published as Show in navigation in General Settings.

Nothing shows up on the site.

Would the solution you are offering put the cart on all the pages or only on the RCP store page?

[teefers (Doug Bennett)]

It should add it to every page assuming that you don’t have show in navigation unchecked. Just like any other page,

I’m strictly going on the RCP demo project, I don’t have RCP, but it works fine with the demo version and the demo project.

There are others who are more familiar with RCP, I think @TemplateRepo uses it.

[BooneCtyBeek (Jeff Singletary)]

I did check the publish box on the offsite page. It looks like a space was created for an icon but none shows up.

Thanks for your help. I learned a few things today. Makes it a good day.

[teefers (Doug Bennett)]

I think it is the icon from the sample project that uses the uikit icons.

Might try and replace it with a Font awesome icon.

Try this

<i class="fa fa-shopping-cart" aria-hidden="true"></i><span class="rc-extras-cart-total"><?php echo $rc->extras->cartTotalLocalized; ?></span></span>

[BooneCtyBeek (Jeff Singletary)]

First, I also used to be an HVAC controls programmer. This code doesn’t look very hard. Is there a good place to use as a learning resource?

And it did the job, except for needed spacing between the cart and total. I’ve seen carts with the total inside the cart. Possible with this? Perhaps related to the question above.

Here’s what it is like with the Depth theme menu. You can see the fa icons are missing, too. I really like the theme. I wish Joe W. hadn’t shelved it.

Thanks, again!

[teefers (Doug Bennett)]

Hey Jeff @BooneCtyBeek,

If you just need to add FontAwesome to depth try this
In the code settings add the following line to the Head section:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

For The cart to work in the headers you will need to make every page php. The code above injects the money amnt using php. RW won’t automatically change the file extension from .html to .php since you are adding the php by hand.

As for the spacing you can try adding a non-breacking space   between the amount and basket:

<i class="fa fa-shopping-cart" aria-hidden="true"></i>&nbsp;<span class="rc-extras-cart-total"><?php echo $rc->extras->cartTotalLocalized; ?></span></span>

You can also try some other FA baskets like this:

<i class="fa a-shopping-basket" aria-hidden="true"></i>&nbsp;<span class="rc-extras-cart-total"><?php echo $rc->extras->cartTotalLocalized; ?></span></span>

[BooneCtyBeek (Jeff Singletary)]

During my days as an HVAC controls guy customers would often ask, can you make the system (our company was a Schneider Ecostruxure rep) do this, do that? Well, yes, it could and I’d generally do what they asked for free. And now I feel like I am in the customer chair. And I am very grateful for your help.

The stylesheet code did the trick.

I’ll give the shopping cart codes a go.

As for the file name changing, this gets changed in General Settings>Filename>index.html to index.php?

I was also doing some searching on warehousing images and read Will’s ebook. He suggested a couple places to learn HTML. Sounds like a good idea during the cold Indiana winter.

[teefers (Doug Bennett)]

@BooneCtyBeek

As for the file name changing, this gets changed in General Settings>Filename>index.html to index.php?

For existing pages you’ll need to change the name in the page inspector from index.html to index.php. You will also need to delete the old .html files on the webserver manually with an FTP app or file manager.

For future files, you can change the default file extension to PHP in the advanced settings.

One other thing I think I remembered about RCP. If I remember correctly, you’ll need to put a shopping cart on every page if you want the cart total to work. Even if you hide it from being visible it needs to be there for the cart to work.

@BooneCtyBeek

He suggested a couple places to learn HTML. Sounds like a good idea during the cold Indiana winter.

There are many ways to learn HTML, free, paid, books videos, and tutorials. The two (W3schools, and CodeAcademy) @willwood mentions are great resources. You can also find lots of stuff on youtube, Udemy, and online by searching. Don’t forget that html is only one part of what you should learn. You’ll probably use CSS as much or more than html.
I’d also suggest that you learn to use the chrome developers tools. Udemy has a pretty good free course on that. Firefox has great tools as well, Safari’s tools aren’t so bad either.