Jump to content
Sign in to follow this  
peterp

implementing third party jquery

Recommended Posts

Hi All,

       I have a plugin that I wish to install into cubecart and it is not part of the extensions market place. I'm very new at JavaScript and how to implement it into a cubecart store. The plugin  allows for the Plus Sign and the Minus sign to be used when entering the order quantity instead of the up arrow and down arrow. I have identified two programs that would need to be able to recognise that a JavaScript would be used, the 2 programs are for the etrend skin and they are content.product.php and round line 68 - 69   and content.homepage.php around line 38-39 I'm hoping somebody can point me the direction where I can find some step by step instructions on how to achieve this.

Best Regards,

Peterp

Share this post


Link to post
Share on other sites

Please note that in eTrend's template main.php, there is:

{include file='js/common.html'}

The common.html is a file provided by CubeCart for any skin (all CC5 skins use this) to start the sequence that eventually gets jQuery itself (version 1.7 from Google's repository) and then any and all jquery plugins sent to the browser.

This file has a <script> link for:

<script type="text/javascript" src="{$STORE_URL}/js/plugins.php"></script>

The plugins.php is code that gathers up all files found in the /js/plugins/ folder and sends them out to the browser.

Thus, any jquery plugin you wish for your CC5-based skin (of which is eTrend) to use can be placed in CubeCart's /js/plugins/ folder.

We can assume you have made the necessary edits to the templates' Quantity form elements to show the spinners?

Edited by bsmither

Share this post


Link to post
Share on other sites

Hi Brian,

        Thankyou so much for your explanation unfortunately I have no idea what I have to do to edit the necessary templates for the Quantity form. I think the programs that have to be modified are content.product.php  around line 68 - 69 and content.homepage.php around line 38-39, javascript is not my strong point so if you could give me some direction I will greatly appreciate it.

Best Regards,

Peterp

Share this post


Link to post
Share on other sites

We would need to know exactly where you got the plugin, so we can follow along with their installation instructions.

Correct on the template content.product.php line number, but content.homepage.php does not have a quantity selector. (One could easily be added.)

 

Share this post


Link to post
Share on other sites

Hi Brian,

        The url of the javascript I'm trying to implement is https://www.jqueryscript.net/form/spin-numbers-plus-minus-buttons.html.

Basically what I'm trying to do is have a plus sign and a minus sign either side of the quantity so that by clicking on either the value of the quantity field is increased or decreased but doesn't go below 1, there is no maximum value.

I hope this helps

best regards,

peterp

 

Share this post


Link to post
Share on other sites

The solution is a bit more involved than usual. It starts with realizing that CubeCart provides an HTML segment available to all CC5-based skins (that wish to use it) that has a link to the JQuery library hosted at Google. The version requested is the latest in the 1.7 family.

This spinner module is best executed using a later version of JQuery. The plugin demo used version 3.3.1, but that version caused some unsolvable problems with the other javascript plugins that CubeCart includes.

So, we will use version 2.2.4. Even this version has removed some functions that a few of the plugins use, but we will make the necessary changes to those plugins.

The reason why I want to move away from version 1.7.x is because when clicking on the incrementer and decrementer buttons, the "+" and "-" gets "highlighted" as if the mouse is selecting that text. It then looks really odd. JQuery 2+ seems to have solved that.

Please make these edits:

In /js/common.html, find:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>

Change to:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

In the file /js/plugins/jquery.filetree.js, near line 190, find:

$('img.imgtoggle').live('click', function(){

Change to:

$('img.imgtoggle').on('click', function(){

Near line 224, find:

$('img.checkbox').live('click', function(){

Change to:

$('img.checkbox').on('click', function(){

In the file /js/plugins/jquery.rating.min.js, near line 11, find JUST THIS PART:

;if(window.jQuery)(function($){if($.browser.msie)try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};

Change JUST THAT PART to:

;if(window.jQuery)(function($){/*if($.browser.msie)try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};*/

In the file /js/common.js, near line 187, find:

$('.insert-text').live('click', function(){

Change to:

$('.insert-text').on('click', function(){

Near line 459, find:

$('.check-primary').live('click', function(){

Change to:

$('.check-primary').on('click', function(){

In the eTrend skin template main.php, find:

    {/literal}
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/enquire.min.js",
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/superfish.js",
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/script.js"
    {literal}
]);
</script>


On a new blank line just after that, add:

<script type="text/javascript">$("#counter-one").htmlNumberSpinner();</script>

In the eTrend skin template content.product.php, find:

	<div class="add_to_basket">
		<input type="text" name="quantity" value="1" class="quantity required" />
		<input type="hidden" name="add" value="{$PRODUCT.product_id}" />

Change to:

	<div class="add_to_basket">
{*	<input type="text" name="quantity" value="1" class="quantity required" />	*}
		<div id="counter-one" class="counter" min="1" max="999" style="display:flex;margin-bottom:20px;"></div>
		<input type="hidden" name="add" value="{$PRODUCT.product_id}" />

Regarding the JQuery spinner plugin:
Copy the file plugin.js to CubeCart's /js/plugins/ folder and rename that file to jquery.htmlNumberSpinner.js, then make this edit:

Near line 5, find:

$(this).append("<div class='btn decrementer'>-</div> <input class='number-input' type='number'/> <div class='btn incrementer'>+</div>");

Change to:

$(this).append("<div class='btn decrementer'>-</div> <input class='number-input' type='text'/> <div class='btn incrementer'>+</div>");

In the jquery.htmlNumberSpinner.js file, you will find the CSS rules for the incrementer and decrementer buttons. Adjust to suit.

 

Edited by bsmither

Share this post


Link to post
Share on other sites

hello bsmither this mod also interests me but can you tell me if for the skin foundation is the same modification?

Share this post


Link to post
Share on other sites

In the template element.call_to_action.php, and the plugin code itself gets placed in the skin folder, but practically no other edits are applicable.

Share this post


Link to post
Share on other sites

Hi Brian,

            Thanks so much for the direction and changes they do what I need, unfortunately when the plus sign is used and the buy button is selected it does not add the updated qty to the basket it remains at one.

Also I want to have every  product to have the same functionality at the moment only the first item has the plus and minus capability, I will also like to have the same functionality in category display and also latest products .

I have attempted to try and modify the content .homepage and the content.category programs with no luck.

If you could please help me I will be very appreciative.

Share this post


Link to post
Share on other sites

Well, one would think if the plugin is going to create an input form element, it would work.

Make these edits:

In jquery.htmlNumberSpinner.js, change to:

        /* creating the counter buttons */
        $(this).append(
          "<div class='btn decrementer'>-</div>"
        + "<input class='number-input " + $(this).attr("class") + "' type='text' name='" + $(this).attr("name") + "'/>"
        + "<div class='btn incrementer'>+</div>");

In the skin template, change to:

<div id="counter-one" name="quantity" class="quantity required" min="1" max="999" style="display:flex;margin-bottom:20px;"></div>

"at the moment only the first item has the plus and minus capability"

So, you are wanting to have spinners on each product panel (the panels being in content.category.php and content.homepage.php)?

Share this post


Link to post
Share on other sites

The reason why only the first works in a set of panels (on a Category page, for example) is because we are using the ID of the node. Generally, nodes on a web page must have unique ID values.

So, we will use an alternate means of selecting the nodes. Make these edits:

In the template main.php, change to:

<script type="text/javascript">$("[rel='counter-one']").htmlNumberSpinner();</script>

In the template content.product.php, change to:

<div rel="counter-one" name="quantity" class="quantity required" min="1" max="999" style="display:flex;margin-bottom:20px;"></div>

In the template content.category.php, find:

<input type="hidden" name="add[{$product.product_id}][quantity]" value="1" class="quantity" />

Change to:

{* <input type="hidden" name="add[{$product.product_id}][quantity]" value="1" class="quantity" /> *}
<div rel="counter-one" name="add[{$product.product_id}][quantity]" class="quantity" min="1" max="999" style="display:flex;margin-bottom:20px;"></div>

In the template content.homepage.php, find:

<input type="hidden" name="add" value="{$product.product_id}" />
{if $product.ctrl_stock && !$CATALOGUE_MODE}

On a new blank line after that, add:

<div rel="counter-one" name="quantity" class="quantity required" min="1" max="999" style="display:flex;margin-bottom:20px;"></div>

 

Share this post


Link to post
Share on other sites

Hi Brian,

      I have applied all of these changes and it all works.

Thankyou so much you have again saved my bacon and it is very much appreciated.

Best Regards,

Peterp

Share this post


Link to post
Share on other sites

Hi Brian,

         I have just been doing some more testing and have found that when I select the drop down menu 'Sale Items' and then select an item that has a minimum qty and I make sure that the minimum quantity is ordered then I get a error message saying that this item requires a minimum order quantity. When I select it from the home page then all is fine it seems just the sale items menu selection does have the selected quantity updated. I have tried looking for where this is done but I don't seem to be able to find the correct program.

Could you point me in the direction to find the correct program because it probably only needs the same changes that we have already done and if I can find the program I will be able to do the changes

Your help is appreciated

Best Regards,

Peterp

Share this post


Link to post
Share on other sites

For the past few versions, CubeCart offers to set a minimum quantity required for a product (Pricing tab). Also, it is up to the skin to show a quantity selector on the Homepage and Category pages. (Foundation does, eTrend does not - that is, not until it was added just now.)

Clicking Add to Basket on the Homepage or View Category (includes Sale Items and Search Results) having given a quantity less than the minimum set for that product should bounce you to that View Product page, which has the warning.

Giving a quantity above the minimum set should simply add that product to the shopping basket.

However, it seems that the View Category page is sending the wrong product ID value. The POSTed data is something like: add[16][quantity]=11, where 16 is the product_id of the product whose Buy button was clicked - the third product in the list, for example. In actuality, the POSTed data is: add[15][quantity]=11, where 15 is the product_id of the first product in the list, and this first value is used across all products in the list.

Now, the jQuery docs strongly suggest that the collection of elements (product panels with added spinners) will be implicitly iterated -- presumably using the corresponding values of the source <div>. Unfortunately, that seems to not be the case.

Please make this edit to jquery.htmlNumberSpinner.js:

Change the first eleven lines to:

(function($) {
    $.fn.htmlNumberSpinner = function () {

        /* creating the counter buttons */
        $(this).each(function(){
          $(this).append(
          "<div class='btn decrementer'>-</div>"
        + "<input class='number-input " + $(this).attr("class") + "' type='text' name='" + $(this).attr("name") + "'/>"
        + "<div class='btn incrementer'>+</div>"
          );
        });

I think this isn't perfect. Specifically, the section of code that acquires the dynamic attributes would also need to be inside the each() section. That would solve a problem if we wanted to use what CubeCart provides as the product's minimum quantity and apply it to the spinner (currently coded at 1) so that one couldn't spin lower than that.

Edited by bsmither

Share this post


Link to post
Share on other sites

Hi Brian,

         I have made the changes that you suggested to the jquery and the result is that all seems to work perfectly as usual, I will continue to keep testing however I'm sure all is well.

Thanks again for your valued help it is very much appreciated.

Best Regards,

Peterp

Share this post


Link to post
Share on other sites

HI  Brian,

               I thought I had answered this topic so if you get 2 copies please accept my apologies.

 I have continued to tested this with this website and all see to be good, however I have another website which is already live, but the owner of this website has decided that he likes the number spinner we have used to be incorporated into his working website which is (https://automotiveclipcompany.com.au). Unfortunately the programs are not the standard cubecart type programs, it seems that they are loosely based on the foundation template and programs content.category.php and content.product.php have been modified to produce the desired result. The site already has a number spinner but it is small and not what user wants. I have tried where ever possible to implemented the same changes that we have already done for the previous website and have found that it doesn't seem to work. so if I want to use the same number spinner do I just need to implement the JavaScript at the point when the quantity is required which I think is in the program content.category.php(modified version), this is where I find my JavaScript and jquery knowledge lacking. I have included the program files that I think I should be looking at to make this change (these are the modified ones), if there others then please let me know.

I'm hoping you can point me in the correct direction to achieve this goal and I appreciate you help.

Best Regards,

Peterp

content.category.php content.homepage.php content.product.php main.php

Share this post


Link to post
Share on other sites

I am thinking the javascript that powers these + and - bubbles is fine. I think some judicious CSS editing to make the controls bigger, and some simple HTML editing to place the controls where desired.

Please give some guidance on what the store owner would like to see.

In app.min.css, line 16, change display:block; to display:inline-block;. This puts the controls on the side of the quantity box.

In the HTML, find <i class="fa fa-minus-circle"></i> and change to <i class="fa fa-2x fa-minus-circle"></i>. Do the same to the plus-circle. This doubles the size of the controls.

In the HTML, move the <input> tags between the two <a> tags having the rel="quantity" property. This puts the minus to the left, and the plus to the right of the quantity box.

Share this post


Link to post
Share on other sites

Hi Brian,

           I agree with you as I am not the original developer of this site I will pass it by the customer a see what they think.

They are basing there view on what we have done in the past see below

number-spinner-screen-shot.jpg.744d9cdee082469572f64ab93fbc5d98.jpg

I think your solution is the best way to go thank you so much once again.

Best Regards,

Peterp

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

Sign in to follow this  

×
×
  • Create New...