Where do I install a widget?

[Corbin]

Hello, I have a quick question. I have a widget that I would like to appear on the top right column of my Cubecart shop. Is this something that I can do in the Admin Panel. or does it need to be done in the Template Skin or in one of the cubecart files? Thank you for your time and consideration in this matter.

[bsmither]

If the widget is a stand-alone "cameo", then adding the HTML to the template code would be easiest. It would be best to make a copy of the skin you want to use and modify that copy. You can also create a plugin that will add javascript to the skin code, which in turn will add the necessary HTML to the DOM.

If the widget wants to use specific data fetched and custom processed by CubeCart, to be displayed in the widget, then a plugin would be needed. Displaying data already fetched and processed by CubeCart from an earlier process might make needing a plugin not necessary.

[Corbin]

Thank you so much for your response, I greatly appreciate it. The widget in question is for moon phase tracking.The provider is based in the uk and there will be ongoing updates. It is just a small piece of java script. I tried to show it to you, but was instantly blocked. LoL  I guess it is not allowed to input code into messages.The code will make a small box with a moon image, and day-date-time type information, constantly being updated.

 

[bsmither]

A security feature of the forums will block what looks like whatever might be an attempt to inject malicious stuff. Otherwise, code can be posted - and best if using the Code Edit feature of the message editor.

So, this is a "cameo", meaning it relies on data being fetched by the browser when running javascript code in the browser, ignoring anything that is happening or showing elsewhere on the page.

Therefore, you can add the code directly to the appropriate template. One rule that MUST be followed as javascript uses braces: there MUST be whitespace on the insides of braces. For example:

What not to do:
var x={"Hello":"World"}; // no whitespace inside braces

What must to do:
var x={
       "Hello":"World"
      }; // whitespace inside braces - could also be a space or tab

 

[Corbin]

Thank you very much. I appreciate all of your assistance in this matter. I tried a couple of other ways  to show you the piece of java script, so you could tell me what needs to be done with it. I will not try again, I do not want to end up being banned. LoL  I will just put it in and tinker with it using the information that you have given me. Where would it need to be put in order for it to be in the top of the right column over the merchandise boxes?

 

[bsmither]

If using the Foundation skin:

Find in the template main.php:

<div class="large-3 columns show-for-large-up" id="sidebar_left">
  {include file='templates/box.featured.php'}
  {include file='templates/box.popular.php'}
  {include file='templates/box.sale_items.php'}
</div>

This is the right-side sidebar (regardless it says 'left').

You can put the javascript just below the opening <div> tag.

Let's look at the box.featured.php template. All the code is wrapped in a <div> block with a class="panel" styling. So, if you want your cameo to have a similar styling, wrap it using that <div> code.

Note that it says 'show-for-large-up'. That means when viewing the site on a mobile or pad device, the screen width will be less than 'large' and thus will not show.

[Corbin]

Thank you. I installed a template that I have had for a number of years. I either bought the template from the cubecart store or from somewhere online that was making templates compatible with cubecart. The name of the template is Blackout Vertical.

[bsmither]

Never heard of it. An Internet search finds nothing.

 

[Corbin]

No, apparently the template does not exist anymore. It has been six or seven years (maybe a bit longer) since I bought it, and I can't find it online anywhere either. I did some searching through the files though, and did find the name of the person that designed the template. His name is Bill Cooke, and he used 'Foundation' to create it from.The full name of the template is: Blackout Vertical 6.2. There is also a website included in the information (cnkapparel.com), but that only goes to a blank white page. So, I am guessing that probably except for the color scheme, the carousel, and maybe the box layout to some degree, it is pretty much 'Foundation'. I do remember at the time, speaking with someone here at cubecart forum concerning the carousel, and a couple of other issues at the time.. 

[bsmither]

I found it on the Wayback Machine.

https://web.archive.org/web/20181122082946/https://www.cnkapparel.com/skins/index.php

Bill went by "Dodgebill" on the forums and his last visit was Jan 2019.

[Corbin]

Thank you so much!  I am very sorry that I have not been on for awhile, but I had to take a break. I was getting so frustrated with trying to do the things I want to do with the Blackout template, that I had to walk away from it for a bit. All of the cubecart files were starting to blur into each other. also, my eyes are not so good anymore. LOL  Wow, so it has been awhile;  I knew that it had been 5 or 6 years since I had bought the Blackout template, I am glad that you were able to find it!  Most likely back then, I actually spoke with Bill, when I was making some color changes. I still have not found where to put the Moon phase js. I also would also like to replace the static Best Sellers box that is on the right, with the rotating type that I have seen in the Amzin Template. I would like to put colored, grooved borders around the Category, Featured and Best Sellers boxes. I am digging around in the CSS files looking for the font in the Category Box, so that I can change the size. I also want to change the Category buttons and Category Hover colors. I think that is all of the changes that I want to make in the Blackout template. Thank you for all of the valuable assistance that given me, I sincerely appreciate it.   

Edited July 27 by Corbin

[bsmither]

Have you mentioned a web address we can visit and see your work in progress?

 

[Corbin]

Hello, No I haven't actually, because I have it offline while working on it. I don't want someone accidentally stumbling onto it while I am working. If you want to see it, I will be more than happy to put it online and give you an address  long enough for you to have a look.

There are seven things that I am trying to do before calling the work done. 

      (01) If possible, change the main background color, so that the center column stands out. Right now, they blend.

      (02) Put a colored groove border around the Category box, so that it stands out. 

      (03) Put a colored groove border around the Featured and Best Sellers boxes, so that they stand out.

      (04) Change the color of the Categories Buttons and the Hover color. Right now the one blends in and the other clashes with the rest of the color scheme.

      (05) Change the Font size in the Category Buttons.

      (06) Put the Moon Phase js at the top of the right side of the page. Hopefully, that will push the Featured and Best Seller boxes down under it.

      (07) Replace the static Best Sellers box, with a slider/swipe type like the one in the Amzin Template.

         

     Thank you so much for your patience and time, I sincerely appreciate it.  Sorry for the bold print, it is easier for me to see.

      

[bsmither]

As for (06), did not the suggestion mentioned earlier work for you?

 

[Corbin]

I am sorry, I have been through so many files the past 2 weeks it is not even funny. I had to step away from the business at hand for a bit, because I got to the point where it felt like I was just running in circles. I will take another hitch at the moonphase now that I am back in the saddle. Would you like to take a look at the site as it presently exists? I will be more than happy to put it online and give you the url for it. Thank you so much for all of your valuable time, and assistance.